@wix/design-system/dist/docs/components/AddressInputItemExamples.md

@wix/design-system

## Feature Examples


### Structure
- description: The component consists of two labels accompanied by a location icon:<br/> 
        &emsp;- `mainLabel` - use it to display a main keywords for search suggestions;<br/>
        &emsp;- `secondaryLabel` - use it for secondary address data, such as country or region.
- example: 
```jsx 
<AddressInputItem mainLabel="Main Label" secondaryLabel="Secondary Label" />;
```

### States
- description: Control the state of a component with:<br/>
        &emsp;- `highlighted` - use it to mark a suggested value<br/>
        &emsp;- `selected` use it to mark an active selection<br/>
        &emsp;- `disabled` - use it to mark an unavailable item
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem mainLabel="Highlighted" highlighted />
  <AddressInputItem mainLabel="Selected" selected />
  <AddressInputItem mainLabel="Disabled" disabled />
</StorybookComponents.Stack>;
```

### Layout
- description: Control option layout with optionLayout prop. It supports 2 values:<br/>
        &emsp;- `single-line` (default) - use in all common cases<br/>
        &emsp;- `double-line` - use for addresses that display more data (include country, region, post code and more)
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem
    mainLabel="Single Line"
    secondaryLabel="Layout"
    optionLayout="single-line"
  />
  <AddressInputItem
    mainLabel="Double Line"
    secondaryLabel="Layout"
    optionLayout="double-line"
  />
</StorybookComponents.Stack>;
```

### Affix
- description: Support option value with additional information added to `prefix` and `suffix` props.
        Props accept text, icons and even badges.<br/>
        <br/>
        `prefix` area by default is filled with a location icon to indicate that this is an address list item.
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a default layout"
  />
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a removed prefix"
    prefix={false}
  />
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a custom prefix and suffix"
    suffix="Suffix"
    prefix={<Icons.Toolbox />}
  />
</StorybookComponents.Stack>
```




    


## Common Use Case Examples


### List item builders
- description: Use it as a list item to build custom address input suggestions.
- example: 
```jsx 
() => {
  const options = [
    listItemSectionBuilder({
      title: 'Saved Addresses',
      type: 'title',
    }),
    addressInputItemBuilder({
      id: 0,
      mainLabel: '2818 Saint Patrick Pl, Helena, 35080',
      secondaryLabel: 'Alabama, USA ',
      prefix: <Icons.Toolbox />,
      suffix: '2km away',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 1,
      mainLabel: '512 4th St NE, Montgomery, 56069',
      secondaryLabel: 'Minnesota, USA',
      prefix: <Icons.Home />,
      suffix: '34km away',
      optionLayout: 'double-line',
    }),
    listItemSectionBuilder({
      type: 'divider',
    }),
    addressInputItemBuilder({
      id: 2,
      mainLabel: '3499  Henry Ford Avenue, Sallisaw, 74955',
      secondaryLabel: 'Oklahoma, USA ',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 3,
      mainLabel: '1382  Goosetown Drive, Newland, 28657',
      secondaryLabel: 'North Carolina, USA',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 4,
      mainLabel: '2887  Eagle Drive, Flat Rock, 48134',
      secondaryLabel: 'Michigan, USA',
      optionLayout: 'double-line',
    }),
  ];

  return <AddressInput options={options} />;
};
```