wix-style-react
Version:
79 lines (78 loc) • 3.39 kB
JavaScript
export default {
description: `Address input allows users to enter a location address. This component provides UI definition only and requires an address provider to be specified from the product side.`,
do: [
'Use it to search for a location.',
'Use it to enter addresses that must be validated before they are submitted.',
'Use it as a UI element together with a required address provider passed from the side.',
],
dont: [
'Don’t use it as a standalone solution. Use <AtlasAddressInput/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where input needs emphasis.<br/>
 - \`medium\` (default) - use in all common cases.<br/>
 - \`small\` - use in dense and narrow layouts.<br/>`,
example: '_size',
},
{
title: 'Border',
description: `Style the component using \`border\` prop. It supports 3 styles:<br/>
 - \`round\` (default) - use it when input acts as a data filter.<br/>
 - \`standard\` - use it in forms.<br/>
 - \`bottomLine\` - use it as a title which can be edited on click.`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight an invalid input value.<br/>
 - \`warning\` - use it to highlight a value that can’t be validated.<br/>
 - \`loading\` - use it to indicate a delayed response from the server.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use it to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Clear button',
description: `Control whether to show a clear button with the \`clearButton\` prop.
It allows to clear the field quickly when a value is optional.`,
example: '_clearButton',
},
{
title: 'No results message',
description: `Control the message displayed in the dropdown layout when no results are found via \`noResultsText\`.`,
example: '_noResultsMessage',
},
{
title: 'Options layout',
description: `Control an options list layout with \`optionLayout\` prop. It support 2 layouts for main and secondary labels:<br/>
 - \`single-line\` (default) - use it to display labels side by side<br/>
 - \`double-line\` - use it to stack labels vertically<br/>`,
example: '_optionsLayout',
},
{
title: 'Prefix',
description: `Specify icons on the left side with \`prefix\` prop or choose not to show it by setting \`prefix\` to null.
By default \`<LocationIcon />\` is displayed`,
example: '_prefix',
},
],
commonUseCaseExamples: [
{
title: 'Custom options list',
description: `Use list item builders to build a custom options list layout.`,
example: '_customOptionsList',
},
],
};