Region Modal
It's a Modal with some region configurations. The component is part of Regionalization feature.
Import
Import the component from @faststore/ui
import { RegionModal } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/organisms/RegionModal/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-region-modal |
| title | string | The region modal's title. | Set your location |
| description | string | Description for region modal. | Prices, offers and availability may vary according to your location. |
| closeButtonAriaLabel | string | Close button aria-label. | Close Region Modal |
| idkPostalCodeLinkProps | Partial<LinkProps<LinkElementType>> | Props for the link `I don't know my Postal Code`. | |
| linkText | Partial<LinkProps<LinkElementType>> | Props for the `I don't know my Postal Code` link on modal body content. | |
| errorMessage | string | Message of error for input. | |
| inputRef | MutableRefObject<HTMLInputElement> | Postal code input's ref. | |
| inputValue | string | Postal code input's value. | |
| inputLabel | string | Postal code input's label. | Postal Code |
| fadeOutOnSubmit | false | true | Enables fadeOut effect on modal after onSubmit function | |
| overlayProps | Props | Props forwarded to the `Overlay` component. | |
| onClose | () => void | Function called when Close button is clicked. | |
| onInput | (event: React.FormEvent<HTMLInputElement>) => void | Callback function when input is typed. | |
| onSubmit | () => void | Callback function when form is submitted. | |
| onClear | () => void | Callback function when the input clear button is clicked. | |
| aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby | |
| isOpen | false | true | A boolean value that represents the state of the Modal | |
| onDismiss | () => void | Event emitted when the modal is closed |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-region-modal-margin-bottom | var(--fs-spacing-6) |
--fs-region-modal-link-padding | 0 |
--fs-region-modal-link-column-gap | var(--fs-spacing-0) |
--fs-region-modal-link-color | var(--fs-color-link) |
Customization
For further customization, you can use the following data attributes:
data-fs-region-modal
data-fs-region-modal-input
data-fs-region-modal-link