wix-style-react
Version:
48 lines (47 loc) • 2.01 kB
JavaScript
export default {
description:
'Address Input Item is an internal component that displays address list item in a dropdown selection. It’s mainly used as a part of the `<AddressInput/>` component.',
do: ['Use it to represent address selection items.'],
dont: [
'Don’t use it to represent an option of any select component. Use <ListItemSelect/> instead.',
],
featureExamples: [
{
title: 'Structure',
description: `The component consists of two labels accompanied by a location icon:<br/>
 - \`mainLabel\` - use it to display a main keywords for search suggestions;<br/>
 - \`secondaryLabel\` - use it for secondary address data, such as country or region.`,
example: '_structure',
},
{
title: 'States',
description: `Control the state of a component with:<br/>
 - \`highlighted\` - use it to mark a suggested value<br/>
 - \`selected\` use it to mark an active selection<br/>
 - \`disabled\` - use it to mark an unavailable item`,
example: '_states',
},
{
title: 'Layout',
description: `Control option layout with optionLayout prop. It supports 2 values:<br/>
 - \`single-line\` (default) - use in all common cases<br/>
 - \`double-line\` - use for addresses that display more data (include country, region, post code and more)`,
example: '_layout',
},
{
title: '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: '_affix',
},
],
commonUseCaseExamples: [
{
title: 'List item builders',
description: `Use it as a list item to build custom address input suggestions.`,
example: '_listItemBuilders',
},
],
};