wix-style-react
Version:
98 lines (97 loc) • 4.61 kB
JavaScript
export default {
description: `AtlasAddressInput allows users to search for an address with a built-in autocomplete service.<br/>
<br/>
To use this component you must install the following peer-dependencies:<br/>
<b>npm install @wix/ambassador @wix/ambassador-wix-atlas-service-web</b>`,
do: [
'Use it as a built-in solution for a location search.',
'Use it to enter addresses that must be validated before submitting.',
],
dont: [
'Don’t use it when a custom address provider is necessary. Use <AddressInput/> which provides the UI only.',
],
featureExamples: [
{
title: 'Authorization',
description: `Requests to Atlas must be authorized using an authorization header.
Check out this
<a href="https://bo.wix.com/wix-docs/rnd/platformization-guidelines/authenticating-as-api-client#platformization-guidelines_authenticating-as-api-client_authenticating-from-a-browser---site-requests"> Wix Doc</a>
about how to retrieve a signed instance in your environment.
Pass an authorization token to AtlasAddressInput using the \`token\` prop.`,
example: '_authorization',
},
{
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 more dense and narrow layouts.`,
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 filter.<br/>
 - \`standard\` - use it in a form.<br/>
 - \`bottomLine\` - use it as a title which can be edited on the click.`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight invalid input value.<br/>
 - \`warning\` - use it to highlight 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 mouse 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 \`clearButton\` prop.
It allows you to clear the field quickly when a value is optional.`,
example: '_clearButton',
},
// TODO: uncomment this when figured out how to mock noResultsText
// {
// title: 'No results message',
// description: `Control the message displayed in a dropdown layout when no results are found via \`noResultsText\`.<br/>
// <br/>
// Use \`<EmptyState/>\` component in a prop to emphasize.`,
// example: '_noResultsMessage',
// },
{
title: 'Options layout',
description: `Control options list layout with \`optionLayout\` prop. It supports 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`,
example: '_optionsLayout',
},
{
title: 'Options affix',
description: `Add supportive info to an options list in defined affix areas:<br/>
 - \`optionPrefix\` - use the location icon by default. Override only in cases where more specific context is needed, i.e. defining work address.<br/>
 - \`optionSuffix\` - use it to provide extra info about address.`,
example: '_optionsAffix',
},
],
commonUseCaseExamples: [
{
title: 'Custom address',
description: `Define custom address formatting using onSelect callback that provides a getAddress function to fetch a
<a href="https://github.com/wix-private/p13n/blob/master/protos/common/src/main/proto/wix/common/address.proto">Wix Address Object</a> from Atlas.<br/>
<br/>
This example displays a post code along with the address.`,
example: '_customAddress',
},
],
};