How to use the @storybook/addon-knobs.select 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 patternfly / patternfly-react / src / components / Popover / Popover.stories.js View on Github external
'<strong>Holy guacamole!</strong> Check this info.'
          )
        }}
      /&gt;
    );
    const popover = (
      
        {content}
      
    );
    const placement = select(
      'Placement',
      ['top', 'bottom', 'left', 'right'],
      'right'
    );
    const trigger = select(
      'Trigger',
      ['hover', 'focus', 'hover focus', 'click'],
      'click'
    );
    const rootClose = boolean('Root Close', true);

    return (
      <div style="{{">
        
          <button>Holy guacamole!</button>
        </div>
github kiwicom / orbit-components / src / Heading / Heading.stories.js View on Github external
() =&gt; {
      const element = select("Element", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H2);
      const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.DISPLAY);
      const dataTest = text("dataTest", "test");
      const id = text("ID", "ID-OF-A-ELEMENT");
      const customTitle = text("Title", "Orbit design system");
      const dataA11ySection = text("dataA11ySection", "ID-OF-SECTION");
      const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
      return (
        
          {customTitle}
        
      );
    },
    {
github dcos-labs / ui-kit / packages / styleUtils / layout / flexbox / stories / flex.stories.tsx View on Github external
.add("directions", () =&gt; {
    const directions = {
      column: "column",
      row: "row",
      columnReverse: "column-reverse",
      rowReverse: "row-reverse"
    };
    const direction = select("directions", directions, "column");

    return (
      <div>
        <p>
          Use the Knobs panel to change the direction the flex items get layed
          out
        </p>
        
          
            
              1
            
            
              2
            
            </div>
github SAP / ui5-webcomponents-react / packages / fiori3 / src / webComponents / Input / demo.stories.tsx View on Github external
storiesOf('UI5 Web Components | Input', module).add('Generated default story', () =&gt; (
  <input value="{'generatedString'}" type="{select('type'," readonly="{boolean('readonly'," placeholder="{'generatedString'}" disabled="{boolean('disabled',">
    null
  
));
github IBM / carbon-addons-iot-react / src / components / ValueCard / ValueCard.story.jsx View on Github external
.add('wide / horizontal /  3', () =&gt; {
    const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.WIDE);
    return (
      <div style="{{">
        </div>
github zhui-team / zhui / src / stories / input.story.js View on Github external
.add('自定义', () =&gt; (
    <div>
      <input value="{text('value'," size="{select('size'," width="{number('width'," disabled="{boolean('disabled',"> null}
        placeholder={text('placeholder', '待输入...')}
      /&gt;
    </div>
  ))
github Synerise / synerise-design / packages / portal / stories / components / Avatar / index.stories.tsx View on Github external
color={text('CustomIconColor', '#ff5831')}
              size={number('CustomIconSize', 32)}
              component={}
            /&gt;
          }
          size={number('CustomIconSize', 32)}
          shape={select('shape', shapes, 'circle')}
          style={{
            background: '#fcc600',
          }}
        /&gt;
        
        
      
    
  );
});
github influxdata / clockface / src / Components / Dropdowns / Dropdown.stories.tsx View on Github external
onSelect={option => {
          alert(option)
        }}
        buttonStatus={
          ComponentStatus[
            select('buttonStatus', mapEnumKeys(ComponentStatus), 'Default')
          ]
        }
        buttonColor={
          ComponentColor[
            select('buttonColor', mapEnumKeys(ComponentColor), 'Primary')
          ]
        }
        buttonSize={
          ComponentSize[
            select('buttonSize', mapEnumKeys(ComponentSize), 'Small')
          ]
        }
        buttonIcon={
          IconFont[
            select(
              'buttonIcon',
              {None: 'none', ...mapEnumKeys(IconFont)},
              'BarChart'
            )
          ]
        }
        emptyText={text('emptyText', 'None selected')}
        selectedOptions={array(
          'selectedOptions',
          defaultMultiSelectSelectedOptions
        )}
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / ExpandCollapse / ExpandCollapse.stories.js View on Github external
withInfo('This is the ExpandCollapse component.')(() =&gt; (
    <div style="{{">
      
        <p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
        <p>And other text comes here.</p>
      
    </div>
  ))
);