Gift

It 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

Import the component from @faststore/ui

import { Gift, GiftImage, GiftContent } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

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

All gift-related components support all attributes also supported by the <div> tag.

Besides those attributes, the following props are also supported:

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-gift`
icon	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-gift-content`
productName*	`string`	Specifies the product's name.
price*	`PriceDefinition`	Specifies product's prices.
badgeLabel	`string`	Badge's label	`Free`
titleMessage	`string`	Additional message in the title	`Get a`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-gift-image`

Name	Type	Description
value	`number`	The raw price value.
listPrice	`number`	Product's list price
formatter	`PriceFormatter`	(price: number, variant: PriceVariant) => ReactNode

Local token	Default value/Global token linked
`--fs-gift-height`	`var(--fs-spacing-12)`
`--fs-gift-bkg-color`	`var(--fs-control-bkg)`

`--fs-gift-border-width`	`var(--fs-border-width)`
`--fs-gift-border-color`	`var(--fs-border-color-light)`
`--fs-gift-border-radius`	`var(--fs-border-radius)`

Local token	Default value/Global token linked
`--fs-gift-content-padding`	`var(--fs-gift-gap) var(--fs-gift-gap) var(--fs-gift-gap) 0`
`--fs-gift-content-row-gap`	`var(--fs-spacing-0)`

Local token	Default value/Global token linked
`--fs-gift-title-line-height`	`1.25`
`--fs-gift-title-size`	`var(--fs-text-size-body)`
`--fs-gift-title-color`	`var(--fs-color-text)`

Local token	Default value/Global token linked
`--fs-gift-icon-size`	`1.75rem`
`--fs-gift-icon-padding`	`var(--fs-spacing-0)`
`--fs-gift-icon-color`	`var(--fs-gift-title-color)`
`--fs-gift-icon-bkg-color`	`var(--fs-color-body-bkg)`

Local token	Default value/Global token linked
`--fs-gift-price-size`	`var(--fs-text-size-legend)`

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