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
_10import {_10 Newsletter,_10 NewsletterAddendum,_10 NewsletterContent,_10 NewsletterForm,_10 NewsletterHeader,_10} 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/organisms/Newsletter/styles.scss";
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Uses
NewsletterForm, NewsletterHeader and NewsletterContent as compound components.Example
Code
Props
Newsletter
| 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 |
NewsletterAddendum
| 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 |
NewsletterContent
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter-content |
NewsletterForm
| 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 |
NewsletterHeader
| 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 |
Design Tokens
| 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) |
Nested Elements
Title
| 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) |
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-icon-size | var(--fs-spacing-5) |
Variants
Card
Example
Code
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-card-border-radius | var(--fs-border-radius) |
Main
Example
Code
| 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) |
Light
Example
Code
| 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) |
Accent
Example
Code
| 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) |
Customization
For further customization, you can use the following data attributes:
data-fs-newsletterdata-fs-newsletter-color-variant="main" | "light" | "accent"data-fs-newsletter-formdata-fs-newsletter-headerdata-fs-newsletter-header-titledata-fs-newsletter-header-descriptiondata-fs-newsletter-contentdata-fs-newsletter-addendum