{"size": 3011, "ext": "js", "max_stars_repo_path": "packages/Select/stories/examples/Variations.js", "max_stars_repo_name": "michelle714/paprika", "max_stars_repo_stars_event_min_datetime": "2019-04-30T00:48:35.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-26T09:50:07.000Z", "max_issues_repo_path": "packages/Select/stories/examples/Variations.js", "max_issues_repo_name": "michelle714/paprika", "max_issues_repo_issues_event_min_datetime": "2019-04-30T19:57:02.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T23:03:20.000Z", "max_forks_repo_path": "packages/Select/stories/examples/Variations.js", "max_forks_repo_name": "michelle714/paprika", "max_forks_repo_forks_event_min_datetime": "2020-01-08T05:17:15.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-17T19:07:52.000Z"}
{"max_stars_count": 37, "max_issues_count": 700, "max_forks_count": 6, "avg_line_length": 27.8796296296, "max_line_length": 109, "alphanum_fraction": 0.5888409166}
import React from "react";
import ListBox from "@paprika/list-box";
import ListBoxWithTags from "@paprika/list-box-with-tags";
import StoryHeading from "storybook/components/StoryHeading";
import { Gap, CodeHeading } from "storybook/assets/styles/common.styles";
import Select from "../../src";

function MockOptions() {
  return (
    <>
      <option value="Pepsi">Pepsi</option>
      <option value="Coke">Coke</option>
    </>
  );
}

export default function Variations() {
  return (
    <>
      <Select>
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>placeholder</CodeHeading>
      <Select placeholder="Choose the best one...">
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>defaultValue</CodeHeading>
      <Select defaultValue="Coke">
        <MockOptions />
      </Select>
      <Gap.Small />
      <Select>
        <option value="super long">This is a very long text to test how overflowing text is clipped.</option>
        <MockOptions />
      </Select>

      <Gap />

      <StoryHeading level={1}>Sizes</StoryHeading>
      <CodeHeading>{`size={Select.types.size.SMALL}`}</CodeHeading>
      <Select size={Select.types.size.SMALL}>
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>
        {`size={Input.types.size.MEDIUM}`} <span>(default)</span>
      </CodeHeading>
      <Select>
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>{`size={Input.types.size.LARGE}`}</CodeHeading>
      <Select size={Select.types.size.LARGE}>
        <MockOptions />
      </Select>

      <Gap />

      <StoryHeading level={1}>States</StoryHeading>
      <CodeHeading>isDisabled</CodeHeading>
      <Select isDisabled>
        <MockOptions />
      </Select>
      <Gap.Small />
      <Select isDisabled placeholder="Choose the best one...">
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>isReadOnly</CodeHeading>
      <Select isReadOnly>
        <MockOptions />
      </Select>
      <Gap.Small />
      <Select isReadOnly placeholder="Choose the best one...">
        <MockOptions />
      </Select>
      <Gap.Small />
      <CodeHeading>hasError</CodeHeading>
      <Select hasError>
        <MockOptions />
      </Select>

      <Gap />

      <StoryHeading level={1}>Comparison</StoryHeading>
      <CodeHeading>
        {`<Select>`} <span>vs</span> {`<ListBox>`} <span>vs</span> {`<ListBoxWithTags>`}
      </CodeHeading>
      <Select placeholder="Select...">
        <option value="Coke">Coke</option>
        <option value="Pepsi">Pepsi</option>
      </Select>
      <Gap.Small />
      <ListBox>
        <ListBox.Option>Coke</ListBox.Option>
        <ListBox.Option>Pepsi</ListBox.Option>
      </ListBox>
      <Gap.Small />
      <ListBoxWithTags selectedOptions={[]}>
        <ListBoxWithTags.Option>Coke</ListBoxWithTags.Option>
        <ListBoxWithTags.Option>Pepsi</ListBoxWithTags.Option>
      </ListBoxWithTags>
    </>
  );
}
