@faststore/components 2.0.18-alpha.0 → 2.0.24-alpha.0

package/src/organisms/Hero/Hero.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useContext, createContext } from 'react'
+import type { HTMLAttributes } from 'react'
+
+type Variant = 'primary' | 'secondary'
+type ColorVariant = 'main' | 'light' | 'accent'
+
+interface HeroContext {
+  variant: Variant
+  colorVariant: ColorVariant
+}
+
+const HeroContext = createContext<HeroContext | undefined>(undefined)
+
+export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Specifies the component variant.
+   */
+  variant?: Variant
+  /**
+   * Specifies the component's color variant combination.
+   */
+  colorVariant?: ColorVariant
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+}
+
+const Hero = forwardRef<HTMLDivElement, HeroProps>(function Hero(
+  {
+    children,
+    testId = 'fs-hero',
+    variant = 'primary',
+    colorVariant = 'main',
+    ...otherProps
+  },
+  ref
+) {
+  const context = { variant, colorVariant }
+
+  return (
+    <HeroContext.Provider value={context}>
+      <article
+        ref={ref}
+        data-fs-hero
+        data-fs-hero-variant={variant}
+        data-fs-hero-color-variant={colorVariant}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </article>
+    </HeroContext.Provider>
+  )
+})
+
+export function useHero() {
+  const context = useContext(HeroContext)
+
+  if (context === undefined) {
+    throw new Error('Do not use Hero components outside the Hero context.')
+  }
+
+  return context
+}
+
+export default Hero

package/src/organisms/Hero/HeroHeading.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode, HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { Icon, LinkButton } from '../..'
+import { ArrowRight } from '../../assets'
+
+import { useHero } from './Hero'
+
+export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content for the h1 tag.
+   */
+  title: string
+  /**
+   * Content for the p tag.
+   */
+  subtitle: string
+  /**
+   * Icon component for additional customization.
+   */
+  icon?: ReactNode
+  /**
+   * Specifies the URL the action button goes to.
+   */
+  link?: string
+  /**
+   * Specifies the action button's content.
+   */
+  linkText?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
+  function HeroHeading(
+    {
+      icon,
+      link,
+      title,
+      linkText,
+      subtitle,
+      children,
+      testId = 'fs-hero-heading',
+      ...otherProps
+    },
+    ref
+  ) {
+    const { variant, colorVariant } = useHero()
+
+    return (
+      <header
+        ref={ref}
+        data-fs-hero-heading
+        data-testid={testId}
+        {...otherProps}
+      >
+        <div data-fs-hero-wrapper className="layout__content">
+          <div data-fs-hero-info>
+            <h1 data-fs-hero-title>{title}</h1>
+            <p data-fs-hero-subtitle>{subtitle}</p>
+            {!!link && (
+              <LinkButton
+                href={link}
+                inverse={colorVariant === 'main'}
+                icon={<ArrowRight />}
+                iconPosition="right"
+              >
+                {linkText}
+              </LinkButton>
+            )}
+          </div>
+          {icon && variant === 'secondary' && (
+            <Icon data-fs-hero-icon component={icon} />
+          )}
+        </div>
+      </header>
+    )
+  }
+)
+
+export default HeroHeading

package/src/organisms/Hero/HeroImage.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroImage = forwardRef<HTMLDivElement, HeroImageProps>(function HeroImage(
+  { children, testId = 'fs-hero-image', ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-hero-image data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default HeroImage

package/src/organisms/Hero/index.tsx

@@ -0,0 +1,8 @@
+export { default } from './Hero'
+export type { HeroProps } from './Hero'
+
+export { default as HeroImage } from './HeroImage'
+export type { HeroImageProps } from './HeroImage'
+
+export { default as HeroHeading } from './HeroHeading'
+export type { HeroHeadingProps } from './HeroHeading'