Gift

FastStore UI components Molecules

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

Get a Apple Magic Mouse

Original price:$999

Free

Get a Apple Magic Mouse

Original price:$999

Free

Get a Apple Magic Mouse

Original price:$999

Free

Get a Apple Magic Mouse

Original price:$999

Free

Import

Import the component from @faststore/ui


_10import { 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

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

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.

GiftContent

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`

GiftImage

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

Other Resources

PriceDefinition

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

Design Tokens

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)`

Nested Elements

Content

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)`

Title

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)`

Icon

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)`

Price

Local token	Default value/Global token linked
`--fs-gift-price-size`	`var(--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