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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Large" size="large" />
  <AddressInput placeholder="Medium" size="medium" />
  <AddressInput placeholder="Small" size="small" />
</StorybookComponents.Stack>;`;

export const _border = `
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Round" border="round" />
  <AddressInput placeholder="Standard" border="standard" />
  <AddressInput placeholder="Bottom Line" border="bottomLine" />
</StorybookComponents.Stack>;`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Error" status="error" />
  <AddressInput placeholder="Warning" status="warning" />
  <AddressInput placeholder="Loading" status="loading" />
</StorybookComponents.Stack>;`;

export const _statusMessage = `
<AddressInput
  placeholder="Hover the mouse on status icon"
  status="error"
  statusMessage="Message explaining the status"
/>;`;

export const _disabled = `
<AddressInput placeholder="Disabled" disabled />;`;

export const _clearButton = `
() => {
  const [value, setValue] = React.useState(
    '903  Wilmar Farm Road, Rockville, Maryland',
  );

  return (
    <AddressInput
      placeholder="Search for address..."
      value={value}
      onChange={e => setValue(e.target.value)}
      clearButton={true}
      onClear={() => setValue('')}
    />
  );
};`;

export const _noResultsMessage = `
<AddressInput
  value="Invalid search term"
  noResultsText="No results found"
/>;`;

export const _optionsLayout = `() => {
  const singleLineOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      optionLayout: 'single-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      optionLayout: 'single-line',
    }),
  ];
  const doubleLineOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      optionLayout: 'double-line',
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AddressInput
        placeholder="Single Line"
        options={singleLineOptions}
      />
      <AddressInput
        placeholder="Double Line"
        options={doubleLineOptions}
      />
    </StorybookComponents.Stack>
  );
};`;

export const _prefix = `() => {
  const noPrefixOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      prefix: null,
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      prefix: null,
    }),
  ];
  const customPrefixOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      prefix: <Icons.Toolbox />,
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      prefix: <Icons.Home />,
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AddressInput
        placeholder="No prefix"
        options={noPrefixOptions}
      />
      <AddressInput
        placeholder="Custom prefix"
        options={customPrefixOptions}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _customOptionsList = `() => {
  const [value, setValue] = React.useState('');
  const options = [
    listItemActionBuilder({
      id: 0,
      prefixIcon: <Icons.Send />,
      title: 'Use current location',
      href: 'https://www.wix.com',
      target: '_blank',
    }),
    listItemSectionBuilder({
      title: 'Saved Addresses',
      type: 'subheader',
    }),
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Work 2818 Saint Patrick Pl, Helena, AL, 35080',
      mainLabel: 'Work',
      secondaryLabel: '2818 Saint Patrick Pl, Helena, AL, 35080',
      prefix: <Icons.Toolbox />,
      suffix: '2km away',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Home 512 4th St NE, Montgomery, MN, 56069',
      mainLabel: 'Home',
      secondaryLabel: '512 4th St NE, Montgomery, MN, 56069',
      prefix: <Icons.Home />,
      suffix: '34km away',
      optionLayout: 'double-line',
    }),
  ];
  handleSelect = value =>
    setValue(
      value.id === 0 ? 'Didžioji gatvė 28, Vilnius Lithuania' : value.label,
    );
  return (
    <AddressInput
      value={value}
      onSelect={handleSelect}
      placeholder="Search places..."
      options={options}
      onClear={() => setValue('')}
      onChange={e => setValue(e.target.value)}
    />
  );
};`;