RegionBar

FastStore UI components Molecules

RegionBar

Acts as a custom Button, usually used on mobile devices only. It should trigger the RegionModal.

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

The component is part of Regionalization feature.

Overview

Example

Code

Import

Import the component from @faststore/ui


_10import { RegionBar } 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:


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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


_11const { modal, openModal } = useUI()
_11return (
_11  <>
_11    <RegionBar
_11      icon={<Icon name="MapPin" />}
_11      postalCode={'151515'}
_11      onButtonClick={() => openModal()}
_11    />
_11    {modal && <RegionModal fadeOutOnSubmit={true} />}
_11  </>
_11)

Props

Name	Type	Description
postalCode	`string`	Postal code string to be display in the component
onButtonClick	`() => void`	Function called when button is clicked.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
label*	`string`	Specifies a label for the location text.
editLabel	`string`	Specifies a label for the edit text.
buttonIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.

Design Tokens

Local token	Default value/Global token linked
`--fs-region-bar-width`	`100%`
`--fs-region-bar-padding`	`var(--fs-spacing-0) var(--fs-spacing-1) var(--fs-spacing-1) 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)`

Nested Elements

CTA (Call To Action)

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

Message

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

Postal Code

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

Customization

For further customization, you can use the following data attributes:

data-fs-region-bar

data-fs-region-bar-postal-code

data-fs-region-bar-cta

data-fs-region-bar-message