Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Shop Now
+
+
+ )
+}
+
+describe('Hero', () => {
+ describe('Data attributes', () => {
+ const { getByTestId } = render()
+
+ const hero = getByTestId('store-hero')
+ const heroImage = getByTestId('store-hero-image')
+ const heroHeading = getByTestId('store-hero-heading')
+
+ it('`Hero` component should have `data-store-hero` attribute', () => {
+ expect(hero).toHaveAttribute('data-store-hero')
+ })
+
+ it('`Hero` component should have custom data attribute `data-custom-attribute`', () => {
+ expect(hero).toHaveAttribute('data-custom-attribute')
+ })
+
+ it('`HeroImage` component should have `data-hero-image` attribute', () => {
+ expect(heroImage).toHaveAttribute('data-hero-image')
+ })
+
+ it('`HeroHeading` component should have `data-hero-heading` attribute', () => {
+ expect(heroHeading).toHaveAttribute('data-hero-heading')
+ })
+ })
+
+ describe('Accessibility', () => {
+ it('should have no violations', async () => {
+ const { getByTestId } = render()
+
+ expect(await axe(getByTestId('store-hero'))).toHaveNoViolations()
+ expect(await axe(getByTestId('store-hero'))).toHaveNoIncompletes()
+ })
+ })
+})
diff --git a/packages/ui/src/organisms/Hero/Hero.tsx b/packages/ui/src/organisms/Hero/Hero.tsx
new file mode 100644
index 0000000000..2eb14ce722
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/Hero.tsx
@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface HeroProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: cypress,
+ * testing-library, and jest).
+ */
+ testId?: string
+}
+
+const Hero = forwardRef(function Hero(
+ { testId = 'store-hero', children, ...otherProps },
+ ref
+) {
+ return (
+
+ {children}
+
+ )
+})
+
+export default Hero
diff --git a/packages/ui/src/organisms/Hero/HeroHeading.tsx b/packages/ui/src/organisms/Hero/HeroHeading.tsx
new file mode 100644
index 0000000000..31ed1966dd
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/HeroHeading.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroHeadingProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+ */
+ testId?: string
+}
+
+const HeroHeading = forwardRef(
+ function HeroHeading(
+ { testId = 'store-hero-heading', children, ...otherProps },
+ ref
+ ) {
+ return (
+
+ {children}
+
+ )
+ }
+)
+
+export default HeroHeading
diff --git a/packages/ui/src/organisms/Hero/HeroImage.tsx b/packages/ui/src/organisms/Hero/HeroImage.tsx
new file mode 100644
index 0000000000..9323330e27
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/HeroImage.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroImageProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+ */
+ testId?: string
+}
+
+const HeroImage = forwardRef(function HeroImage(
+ { testId = 'store-hero-image', children, ...otherProps },
+ ref
+) {
+ return (
+
+ {children}
+
+ )
+})
+
+export default HeroImage
diff --git a/packages/ui/src/organisms/Hero/index.tsx b/packages/ui/src/organisms/Hero/index.tsx
new file mode 100644
index 0000000000..782bdd8260
--- /dev/null
+++ b/packages/ui/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'
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.mdx b/packages/ui/src/organisms/Hero/stories/Hero.mdx
new file mode 100644
index 0000000000..315421411f
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/stories/Hero.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Hero from '../Hero'
+import HeroImage from '../HeroImage'
+import HeroHeading from '../HeroHeading'
+
+# Hero
+
+
+
+## Components
+
+The `Hero` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `Hero`: the wrapper component.
+- `HeroImage`: the component that wraps the image displayed in the component.
+- `HeroHeading`: the component should have a title, description, and a call to action link.
+
+## Props
+
+All hero-related components support all attributes also supported by the `
` tag.
+
+Besides those attributes, the following props are also supported:
+
+### `Hero`
+
+
+
+### `HeroImage`
+
+
+
+### `HeroHeading`
+
+
+
+## CSS Selectors
+
+```css
+[data-store-hero] {
+}
+[data-hero-image] {
+}
+[data-hero-heading] {
+}
+```
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
new file mode 100644
index 0000000000..abda706a19
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
@@ -0,0 +1,56 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import HeroComponent from '../Hero'
+import HeroImage from '../HeroImage'
+import HeroHeading from '../HeroHeading'
+import type { HeroProps } from '../Hero'
+import { Icon } from '../../..'
+import mdx from './Hero.mdx'
+
+const RightArrow = () => (
+
+)
+
+const HeroTemplate: Story = ({ testId }) => (
+
+
+
+
+
+
New Products Available
+
+ At BaseStore you can shop the best tech of 2022. Enjoy and get 10% off
+ on your first purchase.
+
+