@storybook/addon-knobs#text TypeScript Examples

The following examples show how to use @storybook/addon-knobs#text. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: stories.tsx    From bouncecode-cms with GNU General Public License v3.0 6 votes vote down vote up 
LayoutModule = () => {
  // const drawer = <AdminLayoutDrawerModule />;

  const data = {
    me: {
      id: 1,
      email: text('Email', '[email protected]'),
      isAdmin: false,
      createdDate: new Date(),
      updatedDate: new Date(),
    },
  };

  return (
    <AdminLayoutModule
      // drawer={drawer}
      data={data}
      handleLogout={action('handleLogout')}
    />
  );
}
Example #2
Source File: with-dynamic-content.stories.ts    From angular-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
withDynamicContent = (): any => ({
    template: `
        <blui-app-bar
         [expandedHeight]="expandedHeight"
         [collapsedHeight]="collapsedHeight"
         [scrollThreshold]="scrollThreshold"
         [scrollContainerId]="scrollContainerId"
         (collapsedChange)="isCollapsed = $event"
         variant="snap">
             <blui-three-liner
                [title]="title"
                [subtitle]="subtitle"
                [info]="info"
                [style.top.px]="isCollapsed ? 0 : expandedYOffset">
            </blui-three-liner>
        </blui-app-bar>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
        title: text('title', 'title'),
        subtitle: text('subtitle', 'subtitle'),
        info: text('info', 'info'),
        isCollapsed: undefined,
        expandedYOffset: number('Expanded Y Offset', 80),
    },
})
Example #3
Source File: with-full-config.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
withFullConfig = (): StoryFnReactReturnType => {
    const value = text('value', '123');
    const units = text('units', 'hz');
    const textColor = color('color', Colors.black[500]);
    const iconColor = color('icon.htmlColor', Colors.red[500]);
    const icon = boolean('Show Icon', true) ? (
        <Trend htmlColor={iconColor} style={getLeftToRightIconTransform()} />
    ) : (
        undefined
    );
    const fontSize = number('fontSize', 30);
    const prefix = boolean('prefix', false);
    const unitSpace = select('unitSpace', ['show', 'hide', 'auto'], 'auto');
    return (
        <ChannelValue
            value={value}
            units={units}
            color={textColor}
            icon={icon}
            fontSize={fontSize}
            prefix={prefix}
            unitSpace={unitSpace}
        />
    );
}
Example #4
Source File: Stream.stories.tsx    From stream-react with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
poster = () => {
  const controls = boolean("controls", true);

  const poster = text(
    "poster",
    "https://cloudflarestream.com/644822f93dcddab3e9441587d184ca2f/thumbnails/thumbnail.jpg?time=109s&height=1200"
  );

  return (
    <Stream
      src={defaultVideo}
      controls={controls}
      poster={poster}
      {...streamActionProps}
    />
  );
}
Example #5
Source File: Avatar.stories.tsx    From ui with MIT License 6 votes vote down vote up 
demo = () => (
  <StoryContainer>
    <Avatar
      size={select("Size", ["default", "small"], "default")}
      disabled={boolean("Disabled", false)}
      intent={select(
        "Intent",
        ["default", "active", "pending", "invalid"],
        "active",
      )}
      onClick={action("button-click")}
      selectable={boolean("Selectable", true)}
      transformCase={select(
        "transformCase",
        ["none", "uppercase"],
        "uppercase",
      )}
    >
      {text("Text", "RL")}
    </Avatar>
  </StoryContainer>
)
Example #6
Source File: CompareApiBreadcrumbs.stories.tsx    From substrate-api-explorer with Apache License 2.0 6 votes vote down vote up 
storiesOf('COMPONENTS|CompareApiBreadcrumbs', module)
  .addDecorator(story => (
    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('default', () => {
    const apiNameKnob = text(
      'apiName',
      'wss://kusama-rpc.polkadot.io/',
      'props'
    )
    const urlKnob = text(
      'apiexplorer.polkalert.com/compare-api/',
      'query/staking',
      'other'
    )

    return (
      <div style={{ padding: '24px' }}>
        <CompareApiBreadcrumbs
          apiName={apiNameKnob}
          match={{ url: `/compare-api/${urlKnob}` }}
        />
      </div>
    )
  })
Example #7
Source File: Node.stories.tsx    From devtools-ds with MIT License 6 votes vote down vote up 
Playground = () => {
  const name = text("Tag Name", "div");
  const isSelfClosing = boolean("Self Closing", false);
  const isClosingTag = boolean("Closing", false);
  const key = text("Property Key", "class");
  const value = text("Property Value", "nodeClass");

  const property = {
    [key]: value,
  };

  return (
    <Node
      closing={isClosingTag}
      selfClosing={isSelfClosing}
      name={name}
      properties={property}
    />
  );
}
Example #8
Source File: alert.stories.ts    From kickstand-ui with MIT License 6 votes vote down vote up 
defaultHeading = () => {
    const color = select('color', colors, 'primary');
    const header = text('header', 'The Facts of Life by Michael Scott');
    const note = boolean('note', false);
    const dismissible = boolean('dismissible', false);
    const display = boolean('display', false);
    const icon = text('icon', 'warning');
    const hideIcon = boolean('hide-icon', false);
    return (`
        <div class="m-xxl">
            <ks-alert id="alert_test" icon="${icon}" hide-icon="${hideIcon}" header="${header}" note="${note}" color="${color}" dismissible="${dismissible}" display="${display}">${dummyText}</ks-alert>
            <p>Some random text.</p>
            <div>
                <ks-button shows="alert_test">Show Alert</ks-button>
            </div>
        </div>
    `);
}
Example #9
Source File: Modal.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
ModalStory: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Container>
      <Button
        aria-haspopup="dialog"
        aria-expanded={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        Open Modal
      </Button>
      <Modal
        isOpen={isOpen}
        title={text('title', 'Dialog Example')}
        fullWidth={boolean('is full width?', false)}
        size={select('size', [0, 1], 0)}
        onDismiss={() => {
          console.log('closing...');
          setIsOpen(false);
        }}
        disableDismissOnClickOutside={boolean(
          'disableDismissOnClickOutside',
          false
        )}
      />
    </Container>
  );
}
Example #10
Source File: Avatar.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Variants = () => (
  <StoryWrapper title="Variants">
    <StoryContainer title="Image">
      <Avatar type="image" size="medium" imgSource={NatAvatar} />
    </StoryContainer>
    <StoryContainer title="Letter">
      <Avatar type="letter" size="medium" text={textSample} />
    </StoryContainer>
    <StoryContainer title="Icon">
      <Avatar type="icon" size="medium" iconName={iconSample} />
    </StoryContainer>
  </StoryWrapper>
)