RegionBar

This component is a custom button, designed primarily for mobile devices, that triggers the RegionModal.

The RegionBar is a custom button, usually used only on mobile devices. It should trigger the RegionModal.

The component is part of the Regionalization feature.

Example

Code

Usage


_10import { RegionBar } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


_10@import '@faststore/ui/src/components/molecules/RegionBar/styles.scss';

Local token	Default value/Global token linked
`--fs-region-bar-width`	`100%`
`--fs-region-bar-padding`	`var(--fs-spacing-0) 0 var(--fs-spacing-0) var(--fs-spacing-2)`

`--fs-region-bar-text-color`	`var(--fs-color-text-display)`

`--fs-region-bar-bkg-color`	`var(--fs-color-body-bkg)`

`--fs-region-bar-border-bottom-width`	`var(--fs-border-width)`
`--fs-region-bar-border-bottom-color`	`var(--fs-border-color-light)`

Local token	Default value/Global token linked
`--fs-region-bar-cta-margin-left`	`auto`
`--fs-region-bar-cta-text-decoration`	`underline`

Local token	Default value/Global token linked
`--fs-region-bar-message-margin-right`	`auto`

Local token	Default value/Global token linked
`--fs-region-bar-postal-code-margin-right`	`auto`

Local token	Default value/Global token linked
`--fs-region-bar-icon-margin-right`	`var(--fs-spacing-1)`

Local token	Default value/Global token linked
`--fs-region-bar-location-height`	`var(--fs-spacing-4)`

You can target and override RegionBar styles using the following data attributes:

data-fs-region-bar

data-fs-region-bar-postal-code

data-fs-region-bar-cta

data-fs-region-bar-message

data-fs-region-bar-filter

data-fs-region-bar-filter-message

data-fs-region-bar-location

data-fs-region-bar-location-city

data-fs-region-bar-location-message

data-fs-region-bar-location-postal-code

Name	Type	Description	Default
city	`string`	City to be displayed in the component.
postalCode	`string`	Postal code string to be display in the component.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as the location icon.
label*	`string`	Specifies a label for the location text.
editLabel	`string`	Specifies a label for the edit location text. @deprecated
buttonIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
onButtonClick	`() => void`	Function called when location button is clicked.
shouldDisplayPostalCode	`false \| true`	Boolean to control whether postal code should be visible or not.	`true`
filterButton	`{ icon?: ReactNode; label?: string; selectedFilter?: string; shouldDisplayFilterButton?: boolean; onClick?: () => void; }`	Properties of the global filter button.