wix-style-react/src/AutoCompleteWithLabel/docs/AutoCompleteWithLabel.examples.js

wix-style-react

export const _status = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel label="Error" status="error" options={options} />
      <AutoCompleteWithLabel
        label="Warning"
        status="warning"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _statusMessage = `
<AutoCompleteWithLabel
    label="Error"
    options={[
      { id: 0, value: 'Option 1' },
      { id: 1, value: 'Option 2' },
      { id: 2, value: 'Option 3' },
    ]}
    status="error"
    statusMessage="Message that explains the status"
  />
`;

export const _disabled = `
<AutoCompleteWithLabel label="Disabled" disabled />;
`;

export const _suffix = `
<AutoCompleteWithLabel
  suffix={[<Text>Suffix</Text>]}
  label="my autocomplete"
  options={[
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ]}
/>;
`;

export const _listItemBuilders = `
() => {
  const listItemSectionOptions = [
    listItemSectionBuilder({
      id: 0,
      type: 'title',
      title: 'Group Title',
    }),
    { id: 1, value: 'Option 1' },
    { id: 2, value: 'Option 2' },
    { id: 3, value: 'Option 3' },
    listItemSectionBuilder({
      id: 3,
      type: 'divider',
    }),
    { id: 4, value: 'Option 4' },
  ];

  const listItemActionOptions = [
    listItemActionBuilder({
      id: 0,
      title: 'Action',
    }),
    { id: 1, value: 'Option 1' },
    { id: 2, value: 'Option 2' },
    { id: 3, value: 'Option 3' },
  ];

  const listItemSelectOptions = [
    listItemSelectBuilder({
      id: 0,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel
        label="List Item Section"
        options={listItemSectionOptions}
      />
      <AutoCompleteWithLabel
        label="List Item Action"
        options={listItemActionOptions}
      />
      <AutoCompleteWithLabel
        label="List Item Select"
        options={listItemSelectOptions}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _listContainerHeight = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
    { id: 4, value: 'Option 5' },
    { id: 5, value: 'Option 6' },
    { id: 0, value: 'Option 7' },
    { id: 1, value: 'Option 8' },
    { id: 2, value: 'Option 9' },
    { id: 3, value: 'Option 10' },
    { id: 4, value: 'Option 11' },
    { id: 5, value: 'Option 12' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel
        label="Max Height 180px"
        maxHeightPixels="180px"
        options={options}
      />
      <AutoCompleteWithLabel
        label="Max Height 400px"
        maxHeightPixels="400px"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _checkoutForm = `
() => {
  const countries = [
    { id: 0, value: 'Australia' },
    { id: 1, value: 'Austria' },
    { id: 2, value: 'Guinea-Bissau' },
    { id: 3, value: 'Mauritania' },
    { id: 4, value: 'Mauritius' },
    { id: 5, value: 'Nauru' },
  ];

  return (
    <Layout>
      <Cell>
        <LabelledElement label="Address">
          <Input
            suffix={
              <Input.Affix>
                <InfoIcon content="Your address must match your credit card's billing address." />
              </Input.Affix>
            }
          />
        </LabelledElement>
      </Cell>
      <Cell span={6}>
        <LabelledElement label="City">
          <Input />
        </LabelledElement>
      </Cell>
      <Cell span={6}>
        <LabelledElement label="Postal Code">
          <Input />
        </LabelledElement>
      </Cell>
      <Cell span={6}>
        <AutoCompleteWithLabel label="Country" options={countries} />
      </Cell>
      <Cell span={6}>
        <LabelledElement label="Phone">
          <Input />
        </LabelledElement>
      </Cell>
    </Layout>
  );
};
`;