@storybook/addon-knobs#text JavaScript Examples

WithKnobs = () => {
  return {
    components: { AvatarImage },
    props: {
      border: {
        default: boolean('Border', false),
      },
      image: {
        default: text('Image', image),
      },
      initials: {
        default: text('Initials', 'XO'),
      },
      name: {
        default: text('Name', ''),
      },
      size: {
        default: number('Size', 40),
      },
      square: {
        default: boolean('Square', false),
      },
    },
    template: `
      <AvatarImage
        :border="border"
        :image="image"
        :initials="initials"
        :name="name"
        :size="size"
        :square="square"
      />
    `,
  };
}

withKnobs = () => {
  const tag = text('Tag', 'p');
  const copy = text('Text', sampleText);
  const size = select('Size', Object.values(BodyCopySizes), BodyCopy.defaultProps.size);
  const weight = select('Weight', Object.values(BodyCopyWeights), BodyCopy.defaultProps.weight);
  const color = select('Color', Object.keys(theme.colors), BodyCopy.defaultProps.color);
  return (
    <div>
      <BodyCopy
        as={tag}
        size={size}
        weight={weight}
        color={color}
      >
        {copy}
      </BodyCopy>
    </div>
  );
}

Text = () => {
  const [clicked, setClicked] = React.useState(false)

  return (
    <React.Fragment>
      <Button
        onClick={() => {
          action('click')('foo', 'bar')
          setClicked(true)
        }}
      >
        Hello Button
      </Button>
      <div id="knob">{text('text', 'Default Knob')}</div>
      <div id="clicked">{clicked ? 'clicked!' : ''}</div>
    </React.Fragment>
  )
}

storiesOf('Icon', module).add('Default', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(Icon, null);
}).add('Color', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(ThemeProvider, {
    theme: customTheme
  }, React.createElement(Icon, {
    size: text('Size', 'xlarge'),
    color: text('Color', 'attention')
  }));
}).add('Plain', function () {
  return React.createElement(Icons.Facebook, {
    color: "plain"
  });
}).add('Custom Theme', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(ThemeProvider, {
    theme: customTheme
  }, React.createElement(Icon, {
    size: text('Size', 'xlarge')
  }));
});

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

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

Basic = () => {
  const variantOptions = {
    text: "text",
    password: "password",
    textarea: "textarea",
  };
  const variantDefaultValue = "text";

  const inputProps = {
    inputType: radios("Input Type", variantOptions, variantDefaultValue),
    label: text("Label", "This is input label"),
    dataId: text("Data id", "input-data-id"),
    inputName: text("Name", "input-name"),
  };
  return <Input {...inputProps} />;
}

renderHelper = (
  Component,
  defaultErrorMessage,
  defaultIsFirst = false,
  defaultIsSelected = false,
  defaultMessagePartition = 0,
  defaultMessageOffset = 100,
  defaultMessageValue = 'Hello World!',
  defaultMessageTimestamp = new Date().getTime()
) => () => {
  const isFirst = boolean('First message', defaultIsFirst);
  const isSelected = boolean('Selected message', defaultIsSelected);
  const message = {
    topic: 'demo',
  };
  message.partition = number('Message partition', defaultMessagePartition);
  message.offset = number('Message offset', defaultMessageOffset);
  message.value = text('Message value', defaultMessageValue);
  message.timestamp = number('Message timestamp', defaultMessageTimestamp);

  const className = text('Custom CSS classname', undefined);
  const props = {
    isFirst,
    isSelected,
    message,
    className,
    onInteraction: action('handleClick'),
  };

  const errorMessage = text('Error message', defaultErrorMessage);
  if (errorMessage) {
    props.error = {
      message: errorMessage,
    };
  }

  return <Component {...props} />;
}

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

storiesOf('Atoms/Button', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Native Button"
      url="components/atoms/button"
      storyFn={storyFn}
    >
      An example story in a <InlineCode code=".native.js" /> file. This story is
      only visible when exploring storybook on a native device
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('Native Only', () => (
    <DocItem
      sectionTitle="Native Only"
      name="title"
      description="The title to be used for the buttons content"
      typeInfo="string"
      required
      example={{
        render: (
          <Button
            onPress={action('Button Pressed')}
            title={text('text', 'Native Button')}
          />
        ),
        code: '<Button title="Native Button" onPress={handleButtonPress}>'
      }}
    />
  ))

Default = () => {
    return (
        <CustomView
            backRoute={boolean("noBack", false)}
            noBack={boolean("noBack", false)}
            isReceive={boolean("showBackBg", false)}
            onGoBack={() => {
                console.log("go back")
            }}
            rightComponent={() => { }}
            children={() => {
                <div>Content</div>
            }}
            title={text("title", "title")}>
        </CustomView>
    )
}

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

Button = () => {
  return {
    content: {
      link: text('Link', 'https://www.adobe.com'),
      icon: text('Icon', 'adobe'),
      text: text('Text', 'Hello world'),
    },
    resourceType: 'core/wcm/components/button/v1/button',  // todo: derive from path
  };
}

loggedIn = () => {
  const name = text("Name", "Tomas Vera");
  const picture = text(
    "Image URL",
    "https://lh6.googleusercontent.com/--uwV3lVyjdo/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucluEUnOKuLSIx3lXPUeRVThS3oI7w/photo.jpg"
  );
  const user = { name, picture };
  return <AppNavbar user={user} />;
}

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) => {}} />
  );
}

Default = () => ({
  components: { BaseButton, AlertModal },
  props: {
    cancelLabel: {
      default: text('Cancel label', 'Cancel'),
    },
    confirmLabel: {
      default: text('Confirm label', 'Continue'),
    },
    message: {
      default: text(
        'Message',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      ),
    },
    title: {
      default: text('Title', 'What a success!'),
    },
    variant: {
      default: select(
        'Variant',
        Object.values(Modal.Alerts),
        Modal.Alerts.SUCCESS
      ),
    },
  },
  data() {
    return { isModalOpen: true };
  },
  methods: {
    handleCancel: action('cancel'),
    handleConfirm: action('confirm'),
  },
  template: `
  <div>
    <BaseButton @click="isModalOpen = !isModalOpen">Toggle Modal</BaseButton>
    <AlertModal
      v-if="isModalOpen"
      :cancel-label="cancelLabel"
      :confirm-label="confirmLabel"
      :variant="variant"
      :title="title"
      :message="message"
      @close="isModalOpen = false"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    />
  </div>
  `,
})

withKnobs = () => {
  const buttonText = text('Text', 'Click me');
  const level = getLevelOptions();
  const size = getSizeOptions();
  return (<Button level={level} size={size} onClick={handleClick}>{buttonText}</Button>);
}