@storybook/addon-knobs#select JavaScript Examples

Default = () => {
  const towardsOptions = [0, 1, 2]
  const active = select('activeTab', towardsOptions, 0)

  const [activeIndex, onChangeActiveIndex] = useState(active)

  return (
    <Tabs currentActiveIndex={activeIndex} onChangeIndex={onChangeActiveIndex}>
      <div label={text("title1", 'wallet')}
        activeSource={home_active}
        commonSource={home_common}
      >
        <div>Wallet</div>
      </div>
      <div label={text("title2", 'staking')}
        activeSource={staking_active}
        commonSource={staking_common}
      >
        <div>Staking</div>
      </div>
      <div
        label={text("title3", 'setting')}
        activeSource={setting_active}
        commonSource={setting_common}
      >
        <div>Setting</div>
      </div>
    </Tabs>
  )
}

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>
  )
}

SimpleSearchResultListItem = () => {
  return (
    <SearchResultListItem
      color={select(label, options, defaultValue)}
      date="12 martie 2020 12:45"
      title="Apel de la Guvernul României. Ce trebuie să facă cetățenii
       când primesc mesaje pe Facebook și WhatsApp despre coronavirus"
      readMoreText="Citeste mai mult"
      readMoreLink="/"
    >
      <p>
        Guvernul României face apel la cetățenii români, prin intermediul unui
        clip video postat pe rețelele de socializare, să se informeze despre
        coronavirus doar din su.....
      </p>
    </SearchResultListItem>
  );
}

Playground = () => ({
  template: hbs`
    <DenaliAlertInline
      @title={{title}}
      @context={{context}}
      @style={{style}}
      class={{class}}
    />
  `,
  context: {
    title: text('title', 'Denali Inline Alert', argument),
    context: text('context', 'Optional alert details', argument),
    style: select('style', STYLES, STYLES[0], argument),
    class: text('class', '', attribute),
  },
})

loggedInWithContentInContainer = () => {
  const content = text("Sample Content", "This is sample content");
  const name = text("Name", "Phill Conrad");
  const role = select("Role", ["admin", "student", "guest"], "guest");
  const picture = text(
    "Image URL",
    "https://avatars3.githubusercontent.com/u/1119017"
  );
  const user = { name, role, picture };

  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <Layout user={user} names={names} onChange={(event, newValue) => {}}>
      <Container className="py-3">{content}</Container>
    </Layout>
  );
}

Playground = () => ({
  template: hbs`
    <DenaliInput
      @size={{size}}
      @state={{state}}
      @isInverse={{isInverse}}
      @iconFront={{iconFront}}
      @iconBack={{iconBack}}
      @iconFrontClass={{iconFrontClass}}
      @iconBackClass={{iconBackClass}}
      @errorMsg={{errorMsg}}
      @wrapperClass={{wrapperClass}}
      value={{value}}
      placeholder={{placeholder}}
      disabled={{disabled}}
      type={{type}}
      class={{class}}
      {{on "input" onInput}}
    />
  `,
  context: {
    size: select('size', SIZES, SIZES[0], argument),
    state: select('state', STATES, STATES[0], argument),
    isInverse: boolean('isInverse', false, argument),
    iconFront: text('iconFront', '', argument),
    iconBack: text('iconBack', 'search', argument),
    iconFrontClass: text('iconFrontClass', '', argument),
    iconBackClass: text('iconBackClass', 'is-brand-300', argument),
    errorMsg: text('errMsg', '', argument),
    wrapperClass: text('wrapperClass', '', argument),
    value: text('value', '', attribute),
    placeholder: text('placeholder', 'Search', attribute),
    disabled: boolean('disabled', false, attribute),
    type: text('type', '', attribute),
    onInput: action('onInput'),
    class: text('class', '', attribute),
  },
})

basic = () => (
	<div style={styles.root}>
		{theme.iconTypes.map(type => (
			<Box key={type}>
				<Icon type={type} size={select('size', theme.iconSizes)} />
				<br />
				<strong>{type}</strong>
			</Box>
		))}
	</div>
)

Playground = () => ({
  template: hbs`
    <DenaliTabs class={{class}} @style={{style}} as |Tabs|>
      {{#each items as |item|}}
        <Tabs.Tab
          @isActive={{includes item activeItems}}
          @isDisabled={{includes item disabledItems}}
        >
          {{item}}
        </Tabs.Tab>
      {{/each}}
    </DenaliTabs>
  `,
  context: {
    style: select('style', STYLES, STYLES[0], argument),
    items: array('items', ['Ember', 'Denali', 'Tabs'], ',', example),
    activeItems: array('activeItems', ['Denali'], ',', example),
    disabledItems: array('disabledItems', ['Ember'], ',', example),
    class: text('class', '', attribute),
  },
})

renderHelper = (
  Component,
  defaultText = 'Hello World',
  showTypePropAndKnob = false
) => () => {
  let props = {};
  if (showTypePropAndKnob) {
    const typeStyle = select(
      'Type style',
      {
        'Heading text': HEADING,
        'Subheading text': SUBHEADING,
        'Body text': BODY,
        'Code text': CODE,
        'Label text': LABEL,
      },
      BODY
    );
    props = {
      ...props,
      type: typeStyle,
    };
  }

  const textToRender = text('Sample text to display', defaultText);
  const customCssClassname = text('Custom CSS classname', undefined);
  props = {
    ...props,
    className: customCssClassname,
  };
  return <Component {...props}>{textToRender}</Component>;
}

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

withChevron = () => {
  const buttonText = text('Text', 'Click me');
  const level = getLevelOptions();
  const size = getSizeOptions();
  const direction = select('Chevron', Object.values(ChevronDirections), Chevron.defaultProps.direction);
  return (
    <Button level={level} size={size} onClick={handleClick}>
      {buttonText}
      <Chevron direction={direction} style={{ marginLeft: '0.3em' }} />
    </Button>
  );
}

loggedIn = () => {
  const name = text("Name", "Phill Conrad");
  const role = select("Role", ["admin", "student", "guest"], "guest");
  const picture = text(
    "Image URL",
    "https://avatars3.githubusercontent.com/u/1119017"
  );
  const user = { name, role, picture };
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <AppNavbar user={user} names={names} onChange={(event, newValue) => {}} />
  );
}

Title = () => {
  return {
    content: {
      text: text('text', 'Example Title' ),
      type: select('type', [null, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], null),
      linkURL: text('linkURL', 'https://storybook.js.org/' ),
      linkDisabled: boolean('linkDisabled'),
    },
    resourceType: 'core/wcm/components/title/v2/title',  // todo: derive from path
  };
}

WithKnobs = () => {
  return {
    components: { BaseChip },
    props: {
      text: {
        default: text('Text', 'Hello world'),
      },
      showReset: {
        default: boolean('Show reset', false),
      },
      size: {
        default: select('Size', sizes, Sizes.MEDIUM),
      },
      variant: {
        default: select('Variant', variants, Variants.STANDARD),
      },
    },
    template: `
      <BaseChip
        :show-reset="showReset"
        :size="size"
        :variant="variant"
      >
        {{ text }}
      </BaseChip>
    `,
  };
}

Teaser = () => {
  return {
    content: {
      ...content,
      title: text('title', content.title),
      pretitle: text('pretitle', content.pretitle),
      description: text('description', content.description),
      titleType: select('titleType', [null, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], null),
      actionsEnabled: boolean('actionsEnabled', content.actionsEnabled),
      titleLinkHidden: boolean('titleLinkHidden', content.titleLinkHidden),
      imageLinkHidden: boolean('imageLinkHidden', content.imageLinkHidden),
    },
    resourceType: 'core/wcm/components/teaser/v1/teaser',  // todo: derive from path
  };
}

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>
  ));

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"
      />
    `,
  };
}

storiesOf('Switch', module)
  .addParameters({
    component: Switch,
  })
  .add('default', () => (
    <Flex flex={1} justifyContent="space-around" flexDirection="column">
      <View>
        <Switch size={select('size', sizeOptions, 'large')} />
        <Switch size={select('size', sizeOptions, 'large')} defaultOn={true} />
        <Switch size={select('size', sizeOptions, 'large')} on={true} />
        <Switch size={select('size', sizeOptions, 'large')} on={false} />
        <Switch size={select('size', sizeOptions, 'large')} disabled />
        <Switch size={select('size', sizeOptions, 'large')} disabled defaultOn={true} />
      </View>
    </Flex>
  ));

Gallery = () => ({
  components: { ProgressBar },
  props: {
    percentComplete: {
      default: select('Percent complete', [0, 25, 50, 75, 100], 75),
    },
    size: {
      default: select('Size', [...Object.values(Sizes)], Sizes.SMALL),
    },
    variant: {
      default: select(
        'Variant',
        [...Object.values(Variants)],
        Variants.SECONDARY
      ),
    },
  },
  template: `
  <div class="my-12">
    <ProgressBar :percent-complete="percentComplete" :size="size" :variant="variant" />
  </div>
  `,
})

atDifferentSizes = () => {
  const direction = select('Chevron', Object.values(ChevronDirections), Chevron.defaultProps.direction);
  const exampleText = text('Text', 'This is some text.');
  const chevronColor = color('Color');
  return (
    <div>
      <p>
        The chevron sizing and thickness is based on relative font size. Color
        by default is inherited from font color.
      </p>
      {Object.entries(theme.fontSize).map(([name, fontSize]) => (
        <div style={{ fontSize, marginBottom: theme.spacing.sp2 }}>
          <b>{`${name} (${fontSize}): `}</b>
          {exampleText}
          {' '}
          <Chevron direction={direction} color={chevronColor} />
        </div>
      ))}
    </div>
  );
}

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', '')}
    />
  ));

withStyledComponent = () => {
  const copy = text('Text', sampleText);
  const size = select('Size', Object.values(BodyCopySizes), BodyCopy.defaultProps.size);
  const StyledCopy = styled.div`
    color: ${theme.colors.red};
  `;
  return (
    <div>
      <BodyCopy
        as={StyledCopy}
        size={size}
      >
        {copy}
      </BodyCopy>
    </div>
  );
}

WithKnobs = () => {
  return {
    components: { UserAvatar },
    props: {
      image: {
        default: text('Image', image),
      },
      name: {
        default: text('Name', 'Xavier Oaxaca'),
      },
      size: {
        default: select('Size', sizes, Sizes.MEDIUM),
      },
      title: {
        default: text('Title', 'HR Manager'),
      },
      vertical: {
        default: boolean('Vertical', false),
      },
    },
    template: `
      <UserAvatar
        :image="image"
        :name="name"
        :size="size"
        :title="title"
        :vertical="vertical"
      />
    `,
  };
}

storiesOf('Icon', module)
  .addParameters({
    component: Icon,
  })
  .add('default', () => {
    return (
      <>
        {Object.values(icons).map((Ico, index) => {
          return (
            <Ico
              key={index}
              fill={select('fill', getColorKeys(), 'purple.900')}
              size={select('sizes', sizes, 'medium')}
              data-testid="icon"
            />
          );
        })}
      </>
    );
  });

basic = () => (
	<Tooltip
		tooltip={<span>Tooltip text</span>}
		placement={select('placement', TooltipPlacements, 'bottom', '')}
	>
		<span>Child component of tooltip</span>
	</Tooltip>
)

storiesOf('Heading', module)
  .addParameters({
    component: Heading,
  })
  .add('default', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium">{'Heading (medium)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="large">{'Heading (large)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xlarge">{'Heading (xlarge)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xxlarge">{'Heading (xxlarge)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xxxlarge">{'Heading (xxxlarge)'}</Heading>
        </View>
      </Space>
    </ScrollView>
  ))
  .add('with weight', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium" weight={select('Weight', weightOptions, 'bold')}>
            {'The quick brown fox jumps over the lazy dog.'}
          </Heading>
        </View>
      </Space>
    </ScrollView>
  ))
  .add('with maxLines', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium" maxLines={number('maxLines', 1)}>
            {text('Text', 'The quick brown fox jumps over the lazy dog.')}
          </Heading>
        </View>
      </Space>
    </ScrollView>
  ));

Playground = () => ({
  template: hbs`<DenaliIcon @icon={{icon}} @size={{size}} @class={{class}} />`,
  context: {
    icon: text('icon', 'ember', argument),
    size: select('size', SIZES, SIZES[0], argument),
    class: text('class', '', attribute),
  },
})

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