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

wix-style-react

export const _authorization = `<AtlasAddressInput placeholder="Search..." token="some_auth_token" />;`;

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

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

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

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

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

export const _clearButton = `
() => {
  const [value, setValue] = React.useState(
    '903  Wilmar Farm Road, Rockville, Maryland',
  );
  return (
    <AtlasAddressInput
      placeholder="Search for address..."
      value={value}
      onChange={e => setValue(e.target.value)}
      clearButton={true}
      onClear={() => setValue('')}
    />
  );
};`;

export const _noResultsMessage = `
<AtlasAddressInput
  placeholder="Type # to see no results message"
  noResultsText="No results found"
/>;
`;

export const _optionsLayout = `
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput placeholder="Single Line" optionLayout="single-line" />
  <AtlasAddressInput placeholder="Double Line" optionLayout="double-line" />
</StorybookComponents.Stack>;
`;

export const _optionsAffix = `
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput
    optionPrefix={<Icons.Toolbox />}
    placeholder="Option prefix"
  />
  <AtlasAddressInput optionSuffix="5km away" placeholder="Option suffix" />
</StorybookComponents.Stack>;
`;

export const _customAddress = `() => {
  const [value, setValue] = React.useState('');

  const onChange = event => setValue(event.target.value);

  const onClear = () => setValue('');

  const onSelect = (option, getAddress) => {
    getAddress().then(address => {
      setValue(\`\${option.label} - \${address.postalCode}\`);
    });
  };

  return (
    <AtlasAddressInput
      onChange={onChange}
      onClear={onClear}
      onSelect={onSelect}
      value={value}
      token="some_auth_token"
      placeholder="Type address and select it"
    />
  );
};`;