@faststore/components 2.2.56 → 2.2.67

package/src/organisms/Newsletter/NewsletterAddendum.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, DetailedHTMLProps } from 'react'
+
+export interface NewsletterAddendumProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+  /**
+   * Specifies the addendum for the subscription.
+   */
+  addendum?: string
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NewsletterAddendum = forwardRef<HTMLSpanElement, NewsletterAddendumProps>(
+  function NewsletterAddendum(
+    { addendum, testId = 'fs-newsletter-addendum', ...otherProps },
+    ref
+  ) {
+    return (
+      <span
+        ref={ref}
+        data-testid={testId}
+        data-fs-newsletter-addendum
+        {...otherProps}
+      >
+        {addendum}
+      </span>
+    )
+  }
+)
+
+export default NewsletterAddendum

package/src/organisms/Newsletter/NewsletterContent.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, DetailedHTMLProps } from 'react'
+
+export interface NewsletterContentProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NewsletterContent = forwardRef<HTMLDivElement, NewsletterContentProps>(
+  function NewsletterContent(
+    { children, testId = 'fs-newsletter-content', ...otherProps },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-testid={testId}
+        data-fs-newsletter-content
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default NewsletterContent

package/src/organisms/Newsletter/NewsletterForm.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+import type { FormEvent, HTMLAttributes, DetailedHTMLProps } from 'react'
+
+export interface NewsletterFormProps
+  extends DetailedHTMLProps<
+    Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'>,
+    HTMLFormElement
+  > {
+  /**
+   * Function called when submit button is clicked.
+   */
+  onSubmit: (event: FormEvent) => void
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NewsletterForm = forwardRef<HTMLFormElement, NewsletterFormProps>(
+  function NewsletterForm(
+    { children, onSubmit, testId = 'fs-newsletter-form', ...otherProps },
+    ref
+  ) {
+    return (
+      <form
+        ref={ref}
+        data-testid={testId}
+        data-fs-newsletter-form
+        onSubmit={onSubmit}
+        {...otherProps}
+      >
+        {children}
+      </form>
+    )
+  }
+)
+
+export default NewsletterForm

package/src/organisms/Newsletter/NewsletterHeader.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+import type { ReactNode, HTMLAttributes, DetailedHTMLProps } from 'react'
+
+export interface NewsletterHeaderProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
+  /**
+   * Icon for the section.
+   */
+  icon?: ReactNode
+  /**
+   * Title for the section.
+   */
+  title: string
+  /**
+   * A description for the section.
+   */
+  description?: string
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NewsletterHeader = forwardRef<HTMLHeadElement, NewsletterHeaderProps>(
+  function NewsletterHeader(
+    {
+      icon,
+      title,
+      description,
+      testId = 'fs-newsletter-header',
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <header
+        ref={ref}
+        data-testid={testId}
+        data-fs-newsletter-header
+        {...otherProps}
+      >
+        <h3 data-fs-newsletter-header-title>
+          {icon}
+          {title}
+        </h3>
+
+        {description && (
+          <span data-fs-newsletter-header-description>{description}</span>
+        )}
+      </header>
+    )
+  }
+)
+
+export default NewsletterHeader

package/src/organisms/Newsletter/index.ts

@@ -0,0 +1,14 @@
+export { default } from './Newsletter'
+export type { NewsletterProps } from './Newsletter'
+
+export { default as NewsletterAddendum } from './NewsletterAddendum'
+export type { NewsletterAddendumProps } from './NewsletterAddendum'
+
+export { default as NewsletterContent } from './NewsletterContent'
+export type { NewsletterContentProps } from './NewsletterContent'
+
+export { default as NewsletterForm } from './NewsletterForm'
+export type { NewsletterFormProps } from './NewsletterForm'
+
+export { default as NewsletterHeader } from './NewsletterHeader'
+export type { NewsletterHeaderProps } from './NewsletterHeader'