⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Newsletter

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'

Import Styles into your FastStore project

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.


Usage

Uses NewsletterForm, NewsletterHeader and NewsletterContent as compound components.


Props

Newsletter

NameTypeDescriptionDefault
card*false | trueEnables the card Variant.
colorVariant"main" | "light" | "accent"Specifies the component's color variant combination.main
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter

NewsletterAddendum

NameTypeDescriptionDefault
addendumstringSpecifies the addendum for the subscription.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-addendum

NewsletterContent

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-content

NewsletterForm

NameTypeDescriptionDefault
onSubmit*(event: FormEvent<Element>) => voidFunction called when submit button is clicked.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-form

NewsletterHeader

NameTypeDescriptionDefault
iconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon for the section.
title*stringTitle for the section.
descriptionstringA description for the section.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-header

Design Tokens

Local tokenDefault value/Global token linked
--fs-newsletter-padding-mobilevar(--fs-spacing-5)
--fs-newsletter-padding-desktopvar(--fs-spacing-9) 10%
--fs-newsletter-border-radiusvar(--fs-border-radius)

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-newsletter-title-sizevar(--fs-text-size-title-section)
--fs-newsletter-title-weightvar(--fs-text-weight-bold)

Icon

Local tokenDefault value/Global token linked
--fs-newsletter-icon-sizevar(--fs-spacing-5)

Variants

Card

Local tokenDefault value/Global token linked
--fs-newsletter-card-border-radiusvar(--fs-border-radius)

Main

Local tokenDefault value/Global token linked
--fs-newsletter-main-bkg-colorvar(--fs-color-primary-bkg)
--fs-newsletter-main-text-colorvar(--fs-color-primary-text)

Light

Local tokenDefault value/Global token linked
--fs-newsletter-light-bkg-colorvar(--fs-color-secondary-bkg-light)
--fs-newsletter-light-text-colorvar(--fs-color-text-display)

Accent

Local tokenDefault value/Global token linked
--fs-newsletter-accent-bkg-colorvar(--fs-color-highlighted-bkg)
--fs-newsletter-accent-text-colorvar(--fs-newsletter-light-text-color)

Customization

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