Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
Gift

Displays an additional item to purchase as a gift.

The Gift component is a compound of the following:
  • Gift: renders a <div> as wrapper with an Icon, GiftImage, and GiftContent.
  • GiftImage: renders a <div> as wrapper with an Image.
  • GiftContent: renders a <div> as wrapper with the gift information as children.

Overview

Example
Code
Magicwhite

Get a Apple Magic Mouse

Original price:$999
Free
Magicwhite

Get a Apple Magic Mouse

Original price:$999
Free
Magicwhite

Get a Apple Magic Mouse

Original price:$999
Free
Magicwhite

Get a Apple Magic Mouse

Original price:$999
Free

Import

Import the component from @faststore/ui

_10
import { Gift, GiftImage, GiftContent } 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/Gift/styles.scss';

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

Usage

Example
Code
Magicwhite

Get a Apple Magic Mouse

Original price:$999
Free

Props

All gift-related components support all attributes also supported by the <div> tag.
Besides those attributes, the following props are also supported:

Gift

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-gift
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.

GiftContent

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-gift-content
productName*stringSpecifies the product's name.
price*PriceDefinitionSpecifies product's prices.
badgeLabelstringBadge's labelFree
titleMessagestringAdditional message in the titleGet a

GiftImage

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-gift-image

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local tokenDefault value/Global token linked
--fs-gift-heightvar(--fs-spacing-12)
--fs-gift-bkg-color
var(--fs-control-bkg)
--fs-gift-border-widthvar(--fs-border-width)
--fs-gift-border-color
var(--fs-border-color-light)
--fs-gift-border-radiusvar(--fs-border-radius)

Nested Elements

Content

Local tokenDefault value/Global token linked
--fs-gift-content-paddingvar(--fs-gift-gap) var(--fs-gift-gap) var(--fs-gift-gap) 0
--fs-gift-content-row-gapvar(--fs-spacing-0)

Title

Local tokenDefault value/Global token linked
--fs-gift-title-line-height1.25
--fs-gift-title-sizevar(--fs-text-size-body)
--fs-gift-title-color
var(--fs-color-text)

Icon

Local tokenDefault value/Global token linked
--fs-gift-icon-size1.75rem
--fs-gift-icon-paddingvar(--fs-spacing-0)
--fs-gift-icon-color
var(--fs-gift-title-color)
--fs-gift-icon-bkg-color
var(--fs-color-body-bkg)

Price

Local tokenDefault value/Global token linked
--fs-gift-price-sizevar(--fs-text-size-legend)

Customization

For further customization, you can use the following data attributes:
data-fs-gift
data-fs-gift-icon
data-fs-gift-wrapper
data-fs-gift-image
data-fs-gift-content
data-fs-gift-product-title
data-fs-gift-product-summary
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page