@storybook/addon-knobs#boolean JavaScript Examples

Playground = () => ({
  template: hbs`
    {{#each items as |item|}}
      <DenaliTag
        @state={{state}}
        @isSmall={{isSmall}}
        @isOutlined={{isOutlined}}
        @iconFront={{iconFront}}
        @iconFrontClass={{iconFrontClass}}
        @onIconFrontClick={{onIconFrontClick}}
        @iconBack={{iconBack}}
        @iconBackClass={{iconBackClass}}
        @onIconBackClick={{onIconBackClick}}
        class={{class}}
      >
        {{item}}
      </DenaliTag>
    {{/each}}
  `,
  context: {
    state: select('state', allStates, allStates[0], argument),
    isSmall: boolean('isSmall', false, argument),
    isOutlined: boolean('isOutlined', false, argument),
    iconFront: text('iconFront', '', argument),
    iconFrontClass: text('iconFrontClass', '', argument),
    onIconFrontClick: action('onIconFrontClick'),
    iconBack: text('iconBack', 'close', argument),
    iconBackClass: text('iconBackClass', '', argument),
    onIconBackClick: action('onIconBackClick'),
    items: array('items', ['Ember', 'Denali', 'Tags'], ',', example),
    class: text('class', '', attribute),
  },
})

storiesOf('Snackbar', module)
  .addParameters({
    component: SnackbarProvider,
  })
  .add('default', () => (
    <Flex flex={1}>
      <View>
        <SnackbarProvider>
          <SnackbarDemo
            variant={select('Variant', variantOptions, undefined)}
            title={text('Title', 'Snackbar text here')}
            maxLines={number('maxLines', undefined)}
            action={{
              label: text('Action Label', 'Retry'),
              onClick: () => {},
            }}
            onClose={() => {}}
            autoHide={boolean('autoHide', true)}
            icon={Info}
            position={{
              bottom: 1,
            }}
          />
        </SnackbarProvider>
      </View>
    </Flex>
  ));

Playground = () => ({
  template: hbs`
    <DenaliModal
      @isOpen={{isOpen}}
      @isFullScreen={{isFullScreen}}
      @onClose={{onClose}}
      class={{class}}
      as |Modal|
    >
      <Modal.Header>{{headerContent}}</Modal.Header>
      <Modal.Content>{{bodyContent}}</Modal.Content>
      <Modal.Footer>{{footerContent}}</Modal.Footer>
    </DenaliModal>
  `,
  context: {
    isOpen: boolean('isOpen', true, argument),
    isFullScreen: boolean('isFullScreen', false, argument),
    headerContent: text('headerContent', 'Modal Header', content),
    bodyContent: text('bodyContent', 'Modal Body', content),
    footerContent: text('footerContent', 'Modal Footer', content),
    class: text('class', '', attribute),
    onClose: action('onClose'),
  },
})

storiesOf('Link', module)
  .addParameters({
    component: Link,
  })
  .add('default', () => (
    <Link
      size={select('Size', sizeOptions, 'large')}
      //@ts-expect-error
      href={text('Href', 'https://razorpay.com', 'Web')}
      target={select('Target', targetOptions, 'link', 'Web')}
      rel={text('Rel', 'author', 'Web')}
      disabled={boolean('disabled', false)}
    >
      {text('Display Text', 'https://www.razorpay.com')}
    </Link>
  ));

BlockFormPlayground = () => ({
  template: hbs`
    <DenaliProgress
      @size={{size}}
      @isLoading={{isLoading}}
      class={{class}}
      as |Progress|
    >
      <Progress.Bar @color={{color1}} @value={{value1}} @shade={{shade1}} />
      <Progress.Bar @color={{color2}} @value={{value2}} @shade={{shade2}} />
      <Progress.Bar @color={{color3}} @value={{value3}} @shade={{shade3}} />
    </DenaliProgress>
  `,
  context: {
    value1: number('value1', 10),
    value2: number('value2', 20),
    value3: number('value3', 30),
    color1: select('color1', COLORS, COLORS[0], argument),
    color2: select('color2', COLORS, COLORS[3], argument),
    color3: select('color3', COLORS, COLORS[5], argument),
    shade1: select('shade1', SHADES, '100', argument),
    shade2: select('shade2', SHADES, '200', argument),
    shade3: select('shade3', SHADES, '300', argument),
    size: select('size', SIZES, SIZES[0], argument),
    isLoading: boolean('isLoading', false, argument),
    class: text('class', '', attribute),
  },
})

storiesOf('Checkbox', module)
  .addParameters({
    component: Checkbox,
  })
  .add('defaultChecked', () => (
    <Flex flexDirection="column">
      <View>
        <Checkbox
          defaultChecked={boolean('Default Checked', false)}
          size={select('Size', sizeOptions, 'large')}
          title={text('Title', 'Enable Beast Mode')}
          helpText={text('Help Text', 'This is help text.')}
          disabled={boolean('Disabled', false)}
          onChange={action('Changed')}
        />
        <Checkbox
          defaultChecked={boolean('Default Checked', false)}
          size={select('Size', sizeOptions, 'large')}
          title={text('Title', 'Enable Beast Mode')}
          disabled={boolean('Disabled', false)}
          onChange={action('Changed')}
          errorText={text('Error Text', 'This is an error.')}
        />
      </View>
    </Flex>
  ))
  .add('checked', () => (
    <Checkbox
      checked={boolean('Checked', true)}
      size={select('Size', sizeOptions, 'large')}
      title={text('Title', 'Enable Beast Mode')}
      helpText={text('Help Text', 'Play with addons')}
      disabled={boolean('Disabled', false)}
      onChange={action('Changed')}
      errorText={text('Error Text', '')}
    />
  ));

Playground = () => ({
  template: hbs`
    <DenaliCheckbox
      checked={{checked}}
      disabled={{disabled}}
      data-partial={{dataPartial}}
      class={{class}}
    >
      {{content}}
    </DenaliCheckbox>
  `,
  context: {
    checked: boolean('checked', false, attribute),
    disabled: boolean('disabled', false, attribute),
    dataPartial: boolean('data-partial', false, attribute),
    content: text('content', 'Denali Checkbox', content),
    class: text('class', '', attribute),
  },
})

renderHelper = (
  Component,
  defaultErrorMessage,
  defaultIsFirst = false,
  defaultIsSelected = false,
  defaultMessagePartition = 0,
  defaultMessageOffset = 100,
  defaultMessageValue = 'Hello World!',
  defaultMessageTimestamp = new Date().getTime()
) => () => {
  const isFirst = boolean('First message', defaultIsFirst);
  const isSelected = boolean('Selected message', defaultIsSelected);
  const message = {
    topic: 'demo',
  };
  message.partition = number('Message partition', defaultMessagePartition);
  message.offset = number('Message offset', defaultMessageOffset);
  message.value = text('Message value', defaultMessageValue);
  message.timestamp = number('Message timestamp', defaultMessageTimestamp);

  const className = text('Custom CSS classname', undefined);
  const props = {
    isFirst,
    isSelected,
    message,
    className,
    onInteraction: action('handleClick'),
  };

  const errorMessage = text('Error message', defaultErrorMessage);
  if (errorMessage) {
    props.error = {
      message: errorMessage,
    };
  }

  return <Component {...props} />;
}

Default = () => {
    return (
        <CustomView
            backRoute={boolean("noBack", false)}
            noBack={boolean("noBack", false)}
            isReceive={boolean("showBackBg", false)}
            onGoBack={() => {
                console.log("go back")
            }}
            rightComponent={() => { }}
            children={() => {
                <div>Content</div>
            }}
            title={text("title", "title")}>
        </CustomView>
    )
}

withLocale = () => (
	<ThemeProvider
		theme={{
			isRTL: boolean('isRTL', false),
			locale: en_US,
		}}
	>
		<Fragment>
			<HtmlDirection />
			<Box>
				<Text weight="bold">Bold text.</Text>
			</Box>
		</Fragment>
	</ThemeProvider>
)

WithKnobs = () => {
  return {
    components: { ProgressStepper },
    props: {
      stepsClickable: {
        default: boolean('stepsClickable'),
      },
    },
    data() {
      return {
        steps,
        current: steps[1],
      };
    },
    template: `<div><ProgressStepper class="max-w-lg mx-auto" v-model="current" :options="steps" :stepsClickable="stepsClickable" show-labels /></div>`,
  };
}

RichText = () => {
  return {
    content: {
      text: text('text', '<h1>Hello, world.</h1>' ),
      isRichText: boolean('isRichText', true),
    },
    template: TextTemplate,
    aemMetadata: {
      decorationTag: null
    },
  };
}

WithKnobs = () => {
  return {
    components: { BaseCard },
    props: {
      fullBleed: {
        default: boolean('Full-bleed', false),
      },
    },
    template: `
      <BaseCard
        class="my-cool-card"
        :full-bleed="fullBleed"
        title="my-info"
      >
        <template #header>
          <div class="text-center font-body-large font-bold pt-3">
            This is a header!
          </div>
        </template>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
        mollit anim id est laborum.
        <template #footer>
          This is a footer.
        </template>
      </BaseCard>
    `,
  };
}

Text = () => {
  return {
    content: {
      text: text('text', 'Hello, world.' ),
      isRichText: boolean('isRichText', false),
    },
    template: TextTemplate,
  };
}

WithKnobs = () => ({
  components: { BlockSelector, TypeOverline },
  props: {
    label: {
      default: text('Label', 'My Label'),
    },
    description: {
      default: text('Description', 'My description text!'),
    },
    disabled: {
      default: boolean('Disabled', false),
    },
    labelPosition: {
      default: select('Label Position', ['right', 'left']),
    },
  },
  data() {
    return {
      value: true,
    };
  },
  template: `
  <div>
    <TypeOverline tag="h3" class="mb-2">Checkbox</TypeOverline>
    <div class="w-full sm:w-96">
      <BlockSelector class="mt-4" v-model="value" :label="label" :label-position="labelPosition" :description="description" :disabled="disabled" type="checkbox"/>
    </div>
  </div>
  `,
})

List = () => {
  return {
    content: {
      ...exampleContent,
      showDescription: boolean('showDescription', false),
      linkItems: boolean('linkItems', false),
    },
    template: ListTemplate,
  };
}

WithKnobs = () => {
  return {
    components: { IconButton },
    props: {
      icon: {
        default: select('Icon', iconOptions, iconOptions[0]),
      },
      variant: {
        default: select('Variant', Object.values(Variants), Variants.PRIMARY),
      },
      size: {
        default: select('Size', Object.values(Sizes), Sizes.MEDIUM),
      },
      flat: {
        default: boolean('Flat', false),
      },
      title: {
        default: text('Title', 'Click me'),
      },
    },
    template: `
      <IconButton
        :icon="icon"
        :variant="variant"
        :size="size"
        :flat="flat"
        :title="title"
      />
    `,
  };
}

RichText = () => {
  return {
    content: {
      text: text('text', '<h1>Hello, world.</h1>' ),
      isRichText: boolean('isRichText', true),
    },
    resourceType: 'components/aemtext',
    aemMetadata: {
      decorationTag: null
    },
  };
}

WithKnobs = () => {
  return {
    components: { TextareaInput },
    props: {
      size: {
        default: select('Size', Object.values(Sizes), Sizes.NORMAL),
      },
      label: {
        default: text('Label', 'First name'),
      },
      placeholder: {
        default: text('Placeholder', 'Joe Smith'),
      },
      error: {
        default: text('Error', 'Something went wrong'),
      },
      invalid: {
        default: boolean('Invalid', false),
      },
    },
    methods: {
      handleInput: action('click'),
    },
    template: `
      <div class="p-8">
        <TextareaInput
          :label="label"
          :placeholder="placeholder"
          :size="size"
          :error="error"
          :invalid="invalid"
          @input="handleInput"
        />
      </div>
    `,
  };
}

withKnobs = () => {
  const tag = text('Tag', 'h1');
  const headlineText = text('Text', 'The quick brown fox jumps over the lazy dog.');
  const size = select('Size', Object.values(HeadlineSizes), Headline.defaultProps.size);
  const allCaps = boolean('All caps', Headline.defaultProps.allCaps);
  const breakpoint = text('Breakpoint', Headline.defaultProps.breakpoint);
  const color = select('Color', Object.keys(theme.colors), Headline.defaultProps.color);
  return (
    <div>
      <Headline
        as={tag}
        size={size}
        allCaps={allCaps}
        breakpoint={breakpoint}
        color={color}
      >
        {headlineText}
      </Headline>
    </div>
  );
}

Default = () => {

  const sizeOptions = [BUTTON_TYPE_CANCEL, BUTTON_TYPE_CONFIRM, BUTTON_TYPE_HOME_BUTTON, BUTTON_TYPE_COMMON_BUTTON]
  const buttonType = select('buttonType', sizeOptions, BUTTON_TYPE_COMMON_BUTTON)


  return (
    <Button
      content={text('button-content', "createAccount")}
      onClick={button("click", () => {
        Toast.info('Default')
      })}
      disabled={boolean('disabled', false)}
      propsClass={""}
      buttonType={buttonType}
    ></Button>
  )
}

Breadcrumb = () => {
  // this is kind of a hack, since in AEM the breadcrumb is included in the header w/o a backing content
  // and/or it is styled with the designer: todo: verify how this is usually done
  content.startLevel = number('startLevel', 1, {
    range: true,
    min: 0,
    max: 10,
    step: 1,
  });
  content.showHidden = boolean('showHidden');
  content.hideCurrent = boolean('hideCurrent');

  return {
    resourceLoaderPath: '/content/en/products/outdoor/hiking',
    content,
    resourceType: 'core/wcm/components/breadcrumb/v2/breadcrumb',  // todo: derive from path
  };
}

Playground = () => ({
  template: hbs`
    <DenaliAlert
      @title={{title}}
      @context={{context}}
      @style={{style}}
      @icon={{icon}}
      @isBlock={{isBlock}}
      @onClose={{onClose}}
      class={{class}}
    />
  `,
  context: {
    title: text('title', 'Denali Alert', argument),
    context: text('context', 'Optional alert details', argument),
    style: select('style', STYLES, STYLES[0], argument),
    icon: text('icon', 'stop-urgent', argument),
    isBlock: boolean('isBlock', false, argument),
    onClose: action('onClose'),
    class: text('class', '', attribute),
  },
})

CustomProps = () => {
  const cols = number('cols', 1, {
    min: 1,
    max: 10,
    step: 1,
    range: true
  })

  const rows = number('rows', 1, {
    min: 1,
    max: 5,
    step: 1,
    range: true
  })

  const gap = number('gap (px)', 10, {
    min: 0,
    max: 20,
    step: 1,
    range: true
  })

  const pages = number('pages', 2, {
    min: 1,
    max: 5,
    step: 1,
    range: true
  })

  const loop = boolean('loop', false)

  const scrollSnap = boolean('scrollSnap', true)

  return (
    <Carousel
      cols={cols}
      rows={rows}
      gap={gap}
      loop={loop}
      scrollSnap={scrollSnap}
    >
      {[...Array(cols * rows * pages)].map((_, i) => (
        <Carousel.Item key={i}>
          <Item img={randomImageUrl + i} />
        </Carousel.Item>
      ))}
    </Carousel>
  )
}

primary = () => (
	<Button
		kind={select('kind', BUTTON_TYPES, 'primary')}
		disabled={boolean('disabled', false)}
	>
		{text('Text', 'Click me')}
	</Button>
)

WithKnobs = () => ({
  components: { BaseBanner },
  props: {
    message: {
      default: text('Message', 'Moby Dick'),
    },
    description: {
      default: text(
        'Description',
        'Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.'
      ),
    },
    icon: {
      default: select('Icon', ['', ...Object.values(Icons)], ''),
    },
    showClose: {
      default: boolean('Show Close', true),
    },
    showIcon: {
      default: boolean('Show Icon', true),
    },
    variant: {
      default: select(
        'Variant',
        Object.keys(Banner.Variants).map(
          (variant) => Banner.Variants[variant].key
        ),
        Variants.EXPLAINER.key
      ),
    },
  },
  template: `
  <BaseBanner
    :description="description"
    :icon="icon"
    :showIcon="showIcon"
    :message="message"
    :showClose="showClose"
    :variant="variant"
  />
  `,
})

icon = () => (
  <SearchInput hasIcon={boolean("Has search", false)}></SearchInput>
)

Playground = () => ({
  template: hbs`<DenaliLoader @isInverse={{isInverse}} @size={{size}} class={{class}} />`,
  context: {
    size: select('size', SIZES, SIZES[0], argument),
    isInverse: boolean('isInverse', false, argument),
    class: text('class', '', attribute),
  },
})

dateOnly = () => {
  const knobs = {
    initialDate: text('Initial date', '2020-01-02'),
    defaultDate: text('Default date', '2020-01-01'),
    startDay: select('Start day', startDays, 1),
    startYear: text('Start year', '1900'),
    endYear: text('End year', '2050'),
    locale: text('Locale', ''),
    dateStyle: object('Date style', {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric'
    }),
    confirmOnDate: boolean('Confirm on date', false),
    useNative: boolean('Use native', false),
    fgColor: color('Foreground Color', 'rgb(0, 0, 0)'),
    bgColor: color('Background Color', 'rgb(248, 248, 248)')
  };

  const container = document.createElement('div');
  container.innerHTML = `
    <aeon-datepicker
      default-date="${knobs.defaultDate}"
      start-day="${knobs.startDay}"
      start-year="${knobs.startYear}"
      end-year="${knobs.endYear}"
      locale="${knobs.locale}"
      date-style='${JSON.stringify(knobs.dateStyle)}'
      ${knobs.confirmOnDate ? `confirm-on-date` : ''}
      ${knobs.useNative ? `use-native` : ''}
      style="--aeon-rgb: ${getRGB(knobs.fgColor)}; --aeon-bgRgb: ${getRGB(
    knobs.bgColor
  )};"
    >
      <input
        type="date"
        id="date"
        value="${knobs.initialDate}"
        placeholder="Start date"
      />
    </aeon-datepicker>
  `;

  return container.firstElementChild;
}