Region Bar

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

Import

Import the component from @faststore/ui

import { RegionBar } from '@faststore/ui'

Import Styles

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

Usage

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

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>> \| ReactFragment \| 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>> \| ReactFragment \| 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

Rating Search Auto Complete