Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
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.
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

Usage

Import the component


_10
import { Gift, GiftImage, GiftContent } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/molecules/Gift/styles.scss";


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)

Data attributes

You can target and override Gift styles using 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

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
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page