How to use the @storybook/addon-knobs/react.text function in @storybook/addon-knobs

To help you get started, we’ve selected a few @storybook/addon-knobs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github i-novus-llc / n2o-framework / frontend / n2o / src / components / snippets / Filter / Filter.story.js View on Github external
withState({ text: '' })(({ store }) => {
    const props = {
      style: object('style', {}),
      className: text('className', 'n2o'),
      filters: array('filters', []),
    };

    return (
github i-novus-llc / n2o-framework / frontend / n2o / src / components / controls / N2OSelect / N2OSelect.story.js View on Github external
},
  ];

  const props = {
    loading: boolean('loading', N2OSelectJson.loading),
    value: text('value', N2OSelectJson.value),
    disabled: boolean('disabled', N2OSelectJson.disabled),
    placeholder: text('placeholder', N2OSelectJson.placeholder),
    hasSearch: boolean('hasSearch', N2OSelectJson.hasSearch),
    valueFieldId: text('valueFieldId', N2OSelectJson.valueFieldId),
    labelFieldId: text('labelFieldId', N2OSelectJson.labelFieldId),
    filter: text('filter', N2OSelectJson.filter),
    resetOnBlur: boolean('resetOnBlur', N2OSelectJson.resetOnBlur),
    iconFieldId: text('iconFieldId', N2OSelectJson.iconFieldId),
    imageFieldId: text('imageFieldId', N2OSelectJson.imageFieldId),
    groupFieldId: text('groupFieldId', N2OSelectJson.groupFieldId),
    hasCheckboxes: boolean('hasCheckboxes', N2OSelectJson.hasCheckboxes),
    closePopupOnSelect: boolean(
      'closePopupOnSelect',
      N2OSelectJson.closePopupOnSelect
    ),
    cleanable: boolean('cleanable', N2OSelectJson.cleanable),
    format: text('format', N2OSelectJson.format),
  };

  return ;
});
github technekes / cast-ui / src / Panel / Panel.stories.tsx View on Github external
render() {
    const panelStyle = select(
      'panelStyle',
      ['primary', 'secondary', 'success', 'warning', 'danger'],
      'primary',
    );
    const iconPosition = select('iconPosition', ['left', 'right'], 'right');
    return (
      
        
        
          
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
            beatae nostrum quo fuga iste reprehenderit ab fugit, soluta ea!
            Culpa, dignissimos dolores! Delectus fugiat numquam doloremque
            consequuntur tempora ipsam excepturi. Lorem ipsum dolor sit amet
            consectetur adipisicing elit. Saepe, reiciendis culpa incidunt
github kiwicom / orbit-components / src / DestinationCard / DestinationCard.stories.js View on Github external
() => {
      const image = text("image", "paris_fr");
      const destinationCity = text("destinationCity", "Paris");
      const dataTest = text("dataTest", "test");
      const height = number("height", 300);
      const departureCity = text("departureCity", "Prague");
      const destinationCountry = text("destinationCountry", "United Arab Emirates");
      const price = text("price", "5,563 Kč");
      const timeOfStay = text("timeOfStay", "10 nights");
      const outbound = object("outbound", {
        date: "Wed 31 Oct",
        type: "Direct",
        duration: "6h 10m",
      });
      const inbound = object("inbound", { date: "Fri 9 Nov", type: "Direct", duration: "6h 50m" });
      const tabIndex = text("TabIndex", "0");

      return (
github kiwicom / orbit-components / src / DestinationCard / DestinationCard.stories.js View on Github external
() => {
      const image = text("image", "paris_fr");
      const destinationCity = text("destinationCity", "Paris");
      const dataTest = text("dataTest", "test");
      const height = number("height", 300);
      const departureCity = text("departureCity", "Prague");
      const destinationCountry = text("destinationCountry", "United Arab Emirates");
      const price = text("price", "5,563 Kč");
      const timeOfStay = text("timeOfStay", "10 nights");
      const outbound = object("outbound", {
        date: "Wed 31 Oct",
        type: "Direct",
        duration: "6h 10m",
      });
      const inbound = object("inbound", { date: "Fri 9 Nov", type: "Direct", duration: "6h 50m" });
      const tabIndex = text("TabIndex", "0");

      return (
github patw0929 / react-intl-tel-input / .storybook / stories / 3.Playground / Playground.stories.js View on Github external
.add('Playground', withInfo({ inline: true, source: false, propTables: null })(() =>
  (
github commercetools / ui-kit / src / components / grid / grid.story.js View on Github external
placeContent={select(
              'placeContent',
              [
                'start',
                'end',
                'center',
                'stretch',
                'space-around',
                'space-between',
                'space-evenly',
                null,
              ],
              null,
              gridGroupId
            )}
            gridAutoColumns={text('gridAutoColumns', '', gridGroupId)}
            gridAutoRows={text('gridAutoRows', '', gridGroupId)}
            gridAutoFlow={text('gridAutoFlow', '', gridGroupId)}
            grid={text('gridAutoFlow', '', gridGroupId)}
          >
            {renderGridElements()}
          
        
      
    
  ));