⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 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/molecules/RegionBar/styles.scss' @import
  '@faststore/ui/src/components/atoms/Button/styles.scss';

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


Usage

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

Props

NameTypeDescriptionDefault
postalCodestringPostal code string to be display in the component
onButtonClick() => voidFunction called when button is clicked.
iconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.
label*stringSpecifies a label for the location text.
editLabelstringSpecifies a label for the edit text.
buttonIconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.

Design Tokens

Local tokenDefault value/Global token linked
--fs-region-bar-width100%
--fs-region-bar-paddingvar(--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-widthvar(--fs-border-width)
--fs-region-bar-border-bottom-colorvar(--fs-border-color-light)

Nested Elements

CTA (Call To Action)

Local tokenDefault value/Global token linked
--fs-region-bar-cta-margin-leftauto
--fs-region-bar-cta-text-decorationunderline

Message

Local tokenDefault value/Global token linked
--fs-region-bar-message-margin-rightauto

Postal Code

Local tokenDefault value/Global token linked
--fs-region-bar-postal-code-margin-rightauto

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