FastStore Documentation

The Newsletter component is a section with at least one input text with an action allowing users to submit their input.

Import

Import the components from @faststore/ui

import {
  Newsletter,
  NewsletterAddendum,
  NewsletterContent,
  NewsletterForm,
  NewsletterHeader,
} 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/organisms/Newsletter/styles.scss';

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

Uses NewsletterForm, NewsletterHeader and NewsletterContent as compound components.

Name	Type	Description	Default
card*	`false \| true`	Enables the card Variant.
colorVariant	`"main" \| "light" \| "accent"`	Specifies the component's color variant combination.	`main`
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-newsletter`

Name	Type	Description	Default
addendum	`string`	Specifies the addendum for the subscription.
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-newsletter-addendum`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-newsletter-content`

Name	Type	Description	Default
onSubmit*	`(event: FormEvent<Element>) => void`	Function called when submit button is clicked.
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-newsletter-form`

Name	Type	Description	Default
icon	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Icon for the section.
title*	`string`	Title for the section.
description	`string`	A description for the section.
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-newsletter-header`

Local token	Default value/Global token linked
`--fs-newsletter-padding-mobile`	`var(--fs-spacing-5)`
`--fs-newsletter-padding-desktop`	`var(--fs-spacing-9) 10%`
`--fs-newsletter-border-radius`	`var(--fs-border-radius)`

Local token	Default value/Global token linked
`--fs-newsletter-title-size`	`var(--fs-text-size-title-section)`
`--fs-newsletter-title-weight`	`var(--fs-text-weight-bold)`

Local token	Default value/Global token linked
`--fs-newsletter-icon-size`	`var(--fs-spacing-5)`

Local token	Default value/Global token linked
`--fs-newsletter-card-border-radius`	`var(--fs-border-radius)`

Local token	Default value/Global token linked
`--fs-newsletter-main-bkg-color`	`var(--fs-color-primary-bkg)`
`--fs-newsletter-main-text-color`	`var(--fs-color-primary-text)`

Local token	Default value/Global token linked
`--fs-newsletter-light-bkg-color`	`var(--fs-color-secondary-bkg-light)`
`--fs-newsletter-light-text-color`	`var(--fs-color-text-display)`

Local token	Default value/Global token linked
`--fs-newsletter-accent-bkg-color`	`var(--fs-color-highlighted-bkg)`
`--fs-newsletter-accent-text-color`	`var(--fs-newsletter-light-text-color)`

For further customization, you can use the following data attributes:

data-fs-newsletter

data-fs-newsletter-color-variant="main" | "light" | "accent"

data-fs-newsletter-form

data-fs-newsletter-header

data-fs-newsletter-header-title

data-fs-newsletter-header-description

data-fs-newsletter-content

data-fs-newsletter-addendum