How to use the @storybook/addon-knobs.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 isuvorov / storybox / sandbox5 / stories / Button.story.jsx View on Github external
<button> console.log(123)}
      &gt;
        console.log(123)
      </button>
      <button> console.log({
          some: { strong: [{ language: 123 }] },
        }, 123)}
      &gt;
        console.log(Object)
      </button>
      <button>
        {text('text', 'Button text')}
      </button>
    
  ), {
    // notes: 'A very simple component',
github bbc / react-transcript-editor / packages / components / transcript-editor / stories / index.stories.js View on Github external
.add('audio file', () => {
    const fixtureProps = {
      title: text('title', 'Ted Talk'),
      mediaUrl: text(
        'mediaUrl',
        'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'
      ),
      sttJsonType: text('sttJsonType', 'bbckaldi'),
      isEditable: boolean('isEditable', true),
      spellCheck: boolean('spellCheck', false),
      fileName: text('fileName', 'KateDarling_2018S-950k.mp4'),
      // commenting this version of `transcriptData` coz it seems that
      // loading a json this sisde effects storybook performance
      // transcriptData: object('transcriptData', bbcKaldiTranscript),
      transcriptData: bbcKaldiTranscript,
      handleAnalyticsEvents: action('Analytics event'),
      handleAutoSaveChanges: action('handleAutoSaveChange'),
      autoSaveContentType: select(
        'autoSaveContentType',
        [
          'draftjs',
          'digitalpaperedit',
          'txt',
          'txtspeakertimecodes',
github kupibilet-frontend / ui / src / components / ControlsGroup / stories.js View on Github external
.add('Inputs group', () =&gt; (
     console.log('Swap it!')}&gt;
      
       updateKnob('value', 'text', target.value)}
      /&gt;
    
  ))
  .add('Different controls group', () =&gt; (
github Sage / carbon / src / components / button-toggle-group / button-toggle-group.stories.js View on Github external
}).add('default', () =&gt; {
    const label = text('label', 'Example ButtonToggleGroup');
    const labelHelp = text('labelHelp', 'This text provides more information for the label.');
    const inputWidth = text('inputWidth', '');
    const fieldHelp = text('fieldHelp', 'This text provides help for the input.');
    const fieldHelpInline = boolean('fieldHelpInline', false);
    const labelInline = boolean('labelInline', false);
    const labelWidth = labelInline ? text('labelWidth', '') : undefined;
    const labelAlign = labelInline ? select(
      'labelAlign',
      OptionsHelper.alignBinary,
      OptionsHelper.alignBinary[0]
    ) : undefined;

    return (
github kiwicom / margarita / src / PlaceCard / PlaceCard.stories.js View on Github external
.add('Playground', () =&gt; {
    const imageUrl = text('Image URL', null);
    const price = text('Price', '$1234');
    const place = text('Place', 'Place');
    const country = text('Country', 'Country');
    const disabled = boolean('Disabled', false);

    return (
      
    );
  });
github bbc / psammead / packages / components / psammead-play-button / src / index.stories.jsx View on Github external
({ service }) =&gt; (
       {}}
        duration={text('duration', '2:30')}
        durationSpoken={text('durationSpoken', '2 minutes 30 seconds')}
        datetime={text('datetime', 'PT2M30S')}
      /&gt;
    ),
    { notes },