From 42b9470aa33204c79b2dc1938676c7c6b1342f07 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Wed, 18 May 2022 20:54:05 -0300
Subject: [PATCH 01/12] Adds base code for Hero component

---
 packages/ui/src/index.ts                      |  3 +++
 packages/ui/src/organisms/Hero/Hero.test.tsx  | 21 ++++++++++++++++
 packages/ui/src/organisms/Hero/Hero.tsx       | 24 +++++++++++++++++++
 packages/ui/src/organisms/Hero/index.tsx      |  2 ++
 .../ui/src/organisms/Hero/stories/Hero.mdx    | 20 ++++++++++++++++
 .../organisms/Hero/stories/Hero.stories.tsx   | 22 +++++++++++++++++
 .../theme-b2c-tailwind/src/organisms/hero.css |  3 +++
 .../src/organisms/index.css                   |  1 +
 8 files changed, 96 insertions(+)
 create mode 100644 packages/ui/src/organisms/Hero/Hero.test.tsx
 create mode 100644 packages/ui/src/organisms/Hero/Hero.tsx
 create mode 100644 packages/ui/src/organisms/Hero/index.tsx
 create mode 100644 packages/ui/src/organisms/Hero/stories/Hero.mdx
 create mode 100644 packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
 create mode 100644 themes/theme-b2c-tailwind/src/organisms/hero.css

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 7d1c99d55a..87f80df47c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -176,6 +176,9 @@ export type {
 } from './molecules/Dropdown'
 
 // Organisms
+export { default as Hero } from './organisms/Hero'
+export type { HeroProps } from './organisms/Hero'
+
 
 // Hooks
 export { default as useSlider } from './hooks/useSlider'
diff --git a/packages/ui/src/organisms/Hero/Hero.test.tsx b/packages/ui/src/organisms/Hero/Hero.test.tsx
new file mode 100644
index 0000000000..c3e92976bf
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/Hero.test.tsx
@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import Hero from './Hero'
+
+describe('Hero', () => {
+  it('should have `data-store-hero` attribute', () => {
+    const { getByTestId } = render(<Hero>Testing</Hero>)
+
+    expect(getByTestId('store-hero')).toHaveAttribute('data-store-hero')
+  })
+
+  describe('Accessibility', () => {
+    it('should have no violations', async () => {
+      const { getByTestId } = render(<Hero>Testing</Hero>)
+
+      expect(await axe(getByTestId('store-hero'))).toHaveNoViolations()
+    })
+  })
+})
diff --git a/packages/ui/src/organisms/Hero/Hero.tsx b/packages/ui/src/organisms/Hero/Hero.tsx
new file mode 100644
index 0000000000..5559f0451d
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/Hero.tsx
@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  children: React.ReactNode
+}
+
+const Hero = forwardRef<HTMLDivElement, HeroProps>(function Hero(
+  { testId = 'store-hero', children, ...otherProps },
+  ref
+) {
+  return (
+    <article ref={ref} data-store-hero data-testid={testId} {...otherProps}>
+      {children}
+    </article>
+  )
+})
+
+export default Hero
diff --git a/packages/ui/src/organisms/Hero/index.tsx b/packages/ui/src/organisms/Hero/index.tsx
new file mode 100644
index 0000000000..fe53bfb6b2
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './Hero'
+export type { HeroProps } from './Hero'
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..6c15ed0772
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/stories/Hero.mdx
@@ -0,0 +1,20 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Hero from '../Hero'
+
+# Hero
+
+<Canvas>
+  <Story id="organisms-hero--hero" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ Hero } />
+
+## CSS Selectors
+
+```css
+[data-store-hero] {
+}
+```
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..9fd5ba72fa
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
@@ -0,0 +1,22 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { HeroProps } from '../Hero'
+import Component from '../Hero'
+import mdx from './Hero.mdx'
+
+const HeroTemplate: Story<HeroProps> = ({ testId }) => (
+  <Component testId={testId}>Hero</Component>
+)
+
+export const Hero = HeroTemplate.bind({})
+Hero.storyName = 'Hero'
+
+export default {
+  title: 'Organisms/Hero',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta
diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/themes/theme-b2c-tailwind/src/organisms/hero.css
new file mode 100644
index 0000000000..95594bdbcf
--- /dev/null
+++ b/themes/theme-b2c-tailwind/src/organisms/hero.css
@@ -0,0 +1,3 @@
+[data-store-hero] {
+
+}
diff --git a/themes/theme-b2c-tailwind/src/organisms/index.css b/themes/theme-b2c-tailwind/src/organisms/index.css
index e69de29bb2..239f4dcd01 100644
--- a/themes/theme-b2c-tailwind/src/organisms/index.css
+++ b/themes/theme-b2c-tailwind/src/organisms/index.css
@@ -0,0 +1 @@
+@import './hero.css';

From 36e0da76316a00ccf360e73d693d8d03e49225ac Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Wed, 18 May 2022 21:09:44 -0300
Subject: [PATCH 02/12] Adds Hero components

---
 .../ui/src/organisms/Hero/HeroContent.tsx     | 24 ++++++++++++
 packages/ui/src/organisms/Hero/HeroImage.tsx  | 22 +++++++++++
 packages/ui/src/organisms/Hero/HeroLink.tsx   | 22 +++++++++++
 packages/ui/src/organisms/Hero/index.tsx      |  9 +++++
 .../ui/src/organisms/Hero/stories/Hero.mdx    | 38 ++++++++++++++++++-
 5 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/organisms/Hero/HeroContent.tsx
 create mode 100644 packages/ui/src/organisms/Hero/HeroImage.tsx
 create mode 100644 packages/ui/src/organisms/Hero/HeroLink.tsx

diff --git a/packages/ui/src/organisms/Hero/HeroContent.tsx b/packages/ui/src/organisms/Hero/HeroContent.tsx
new file mode 100644
index 0000000000..d1583cca4b
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/HeroContent.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroContentProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroContent = forwardRef<HTMLDivElement, HeroContentProps>(
+  function BannerContent(
+    { testId = 'store-hero-content', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <section ref={ref} data-hero-content data-testid={testId} {...otherProps}>
+        {children}
+      </section>
+    )
+  }
+)
+
+export default HeroContent
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<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(
+  { testId = 'store-hero-image', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-hero-image data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default HeroImage
diff --git a/packages/ui/src/organisms/Hero/HeroLink.tsx b/packages/ui/src/organisms/Hero/HeroLink.tsx
new file mode 100644
index 0000000000..ee0bfdd8e9
--- /dev/null
+++ b/packages/ui/src/organisms/Hero/HeroLink.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroLinkProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroLink = forwardRef<HTMLDivElement, HeroLinkProps>(function HeroLink(
+  { testId = 'store-hero-link', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-hero-link data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default HeroLink
diff --git a/packages/ui/src/organisms/Hero/index.tsx b/packages/ui/src/organisms/Hero/index.tsx
index fe53bfb6b2..f3a381edd0 100644
--- a/packages/ui/src/organisms/Hero/index.tsx
+++ b/packages/ui/src/organisms/Hero/index.tsx
@@ -1,2 +1,11 @@
 export { default } from './Hero'
 export type { HeroProps } from './Hero'
+
+export { default as HeroImage } from './HeroImage'
+export type { HeroImageProps } from './HeroImage'
+
+export { default as HeroContent } from './HeroContent'
+export type { HeroContentProps } from './HeroContent'
+
+export { default as HeroLink } from './HeroLink'
+export type { HeroLinkProps } from './HeroLink'
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.mdx b/packages/ui/src/organisms/Hero/stories/Hero.mdx
index 6c15ed0772..fb7d0499a1 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.mdx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.mdx
@@ -1,6 +1,9 @@
 import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
 
 import Hero from '../Hero'
+import HeroImage from '../HeroImage'
+import HeroContent from '../HeroContent'
+import HeroLink from '../HeroLink'
 
 # Hero
 
@@ -8,13 +11,46 @@ import Hero from '../Hero'
   <Story id="organisms-hero--hero" />
 </Canvas>
 
+## 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.
+- `HeroContent`: the component that can receive a title, description, and a `HeroLink`.
+- `HeroLink`: the hero's call-to-action link.
+
 ## Props
 
-<ArgsTable of={ Hero } />
+All hero-related components support all attributes also supported by the `<div>` tag.
+
+Besides those attributes, the following props are also supported:
+
+### `Hero`
+
+<ArgsTable of={Hero} />
+
+### `HeroImage`
+
+<ArgsTable of={HeroImage} />
+
+### `HeroContent`
+
+<ArgsTable of={HeroContent} />
+
+### `HeroLink`
+
+<ArgsTable of={HeroLink} />
 
 ## CSS Selectors
 
 ```css
 [data-store-hero] {
 }
+[data-hero-image] {
+}
+[data-hero-content] {
+}
+[data-hero-link] {
+}
 ```

From bebd095d3b26c92277505139383a169fad5a95f5 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Wed, 18 May 2022 21:45:47 -0300
Subject: [PATCH 03/12] Adds base styles to example

---
 .../organisms/Hero/stories/Hero.stories.tsx   | 40 ++++++++++++++++++-
 .../theme-b2c-tailwind/src/organisms/hero.css | 32 +++++++++++++++
 2 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
index 9fd5ba72fa..04ab58e69f 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
@@ -1,12 +1,48 @@
 import type { Story, Meta } from '@storybook/react'
 import React from 'react'
 
+import HeroComponent from '../Hero'
+import HeroImage from '../HeroImage'
+import HeroContent from '../HeroContent'
+import HeroLink from '../HeroLink'
 import type { HeroProps } from '../Hero'
-import Component from '../Hero'
+import { Icon } from '../../..'
 import mdx from './Hero.mdx'
 
+const RightArrow = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+  >
+    <path
+      d="M10.6553 3.40717C10.3624 3.11428 9.88756 3.11428 9.59467 3.40717C9.30178 3.70006 9.30178 4.17494 9.59467 4.46783L13.3768 8.25H2.8125C2.39829 8.25 2.0625 8.58579 2.0625 9C2.0625 9.41421 2.39829 9.75 2.8125 9.75H13.3768L9.59467 13.5322C9.30178 13.8251 9.30178 14.2999 9.59467 14.5928C9.88756 14.8857 10.3624 14.8857 10.6553 14.5928L15.7178 9.53033C15.8643 9.38388 15.9375 9.19194 15.9375 9C15.9375 8.89831 15.9173 8.80134 15.8806 8.71291C15.844 8.62445 15.7897 8.54158 15.7178 8.46967L10.6553 3.40717Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 const HeroTemplate: Story<HeroProps> = ({ testId }) => (
-  <Component testId={testId}>Hero</Component>
+  <HeroComponent testId={testId}>
+    <HeroImage>
+      <img
+        alt="Quest 2 Controller on a table"
+        src="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+      />
+    </HeroImage>
+    <HeroContent>
+      <h1>New Products Available</h1>
+      <p>
+        At BaseStore you can shop the best tech of 2022. Enjoy and get 10% off
+        on your first purchase.
+      </p>
+      <HeroLink>
+        <a href="/">See all</a>
+        <Icon component={<RightArrow />} />
+      </HeroLink>
+    </HeroContent>
+  </HeroComponent>
 )
 
 export const Hero = HeroTemplate.bind({})
diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/themes/theme-b2c-tailwind/src/organisms/hero.css
index 95594bdbcf..49ceacf71f 100644
--- a/themes/theme-b2c-tailwind/src/organisms/hero.css
+++ b/themes/theme-b2c-tailwind/src/organisms/hero.css
@@ -1,3 +1,35 @@
 [data-store-hero] {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  min-height: 20rem;
+}
+
+[data-hero-content] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem;
+}
+
+[data-hero-content] h1 {
+  font-size: 1.75rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+}
+
+[data-hero-image] {
+  height: 100%;
+  overflow: hidden;
+}
 
+[data-hero-link] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  margin-top: 3rem;
+  min-width: 11.25rem;
+  width: fit-content;
+  border: 1px solid #171a1c;
 }

From 181873b43cc49e762710cdf6555aa5c1bae75745 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Fri, 20 May 2022 12:48:45 -0300
Subject: [PATCH 04/12] Updates styles

---
 themes/theme-b2c-tailwind/src/organisms/hero.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/themes/theme-b2c-tailwind/src/organisms/hero.css
index 49ceacf71f..75c4e45184 100644
--- a/themes/theme-b2c-tailwind/src/organisms/hero.css
+++ b/themes/theme-b2c-tailwind/src/organisms/hero.css
@@ -3,13 +3,15 @@
   flex-direction: row-reverse;
   width: 100%;
   min-height: 20rem;
+  background-color: #001947;
+  color: #fff;
 }
 
 [data-hero-content] {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 4rem;
+  padding: 0 4rem;
 }
 
 [data-hero-content] h1 {
@@ -28,8 +30,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  margin-top: 3rem;
+  margin-top: 2rem;
   min-width: 11.25rem;
   width: fit-content;
+  color: #001947;
   border: 1px solid #171a1c;
+  background-color: #fff;
 }

From b51828f330577b9607b539a49cc121d7681463fd Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Tue, 24 May 2022 11:28:16 -0300
Subject: [PATCH 05/12] Renames `HeroContent` to `HeroHeading`

---
 packages/ui/src/organisms/Hero/Hero.test.tsx  | 54 +++++++++++++++++--
 .../ui/src/organisms/Hero/HeroContent.tsx     | 24 ---------
 .../ui/src/organisms/Hero/HeroHeading.tsx     | 24 +++++++++
 packages/ui/src/organisms/Hero/index.tsx      |  4 +-
 .../ui/src/organisms/Hero/stories/Hero.mdx    | 10 ++--
 .../organisms/Hero/stories/Hero.stories.tsx   |  6 +--
 .../theme-b2c-tailwind/src/organisms/hero.css |  4 +-
 7 files changed, 86 insertions(+), 40 deletions(-)
 delete mode 100644 packages/ui/src/organisms/Hero/HeroContent.tsx
 create mode 100644 packages/ui/src/organisms/Hero/HeroHeading.tsx

diff --git a/packages/ui/src/organisms/Hero/Hero.test.tsx b/packages/ui/src/organisms/Hero/Hero.test.tsx
index c3e92976bf..613591ff3a 100644
--- a/packages/ui/src/organisms/Hero/Hero.test.tsx
+++ b/packages/ui/src/organisms/Hero/Hero.test.tsx
@@ -3,17 +3,63 @@ import { axe } from 'jest-axe'
 import React from 'react'
 
 import Hero from './Hero'
+import HeroImage from './HeroImage'
+import HeroHeading from './HeroHeading'
+import HeroLink from './HeroLink'
+
+const HeroTest = () => {
+  return (
+    <Hero data-custom-attribute>
+      <HeroImage>
+        <img
+          alt="Quest 2 Controller on a table"
+          src="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+        />
+      </HeroImage>
+      <HeroHeading>
+        <div>
+          <h3>Get yo know our next release</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <HeroLink>Shop now</HeroLink>
+      </HeroHeading>
+    </Hero>
+  )
+}
 
 describe('Hero', () => {
-  it('should have `data-store-hero` attribute', () => {
-    const { getByTestId } = render(<Hero>Testing</Hero>)
+  describe('Data attributes', () => {
+    const { getByTestId } = render(<HeroTest />)
+
+    const hero = getByTestId('store-hero')
+    const heroImage = getByTestId('store-hero-image')
+    const HeroHeading = getByTestId('store-hero-heading')
+    const heroLink = getByTestId('store-hero-link')
+
+    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')
+    })
 
-    expect(getByTestId('store-hero')).toHaveAttribute('data-store-hero')
+    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')
+    })
+
+    it('`HeroLink` component should have `data-hero-link` attribute', () => {
+      expect(heroLink).toHaveAttribute('data-hero-link')
+    })
   })
 
   describe('Accessibility', () => {
     it('should have no violations', async () => {
-      const { getByTestId } = render(<Hero>Testing</Hero>)
+      const { getByTestId } = render(<HeroTest />)
 
       expect(await axe(getByTestId('store-hero'))).toHaveNoViolations()
     })
diff --git a/packages/ui/src/organisms/Hero/HeroContent.tsx b/packages/ui/src/organisms/Hero/HeroContent.tsx
deleted file mode 100644
index d1583cca4b..0000000000
--- a/packages/ui/src/organisms/Hero/HeroContent.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface HeroContentProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const HeroContent = forwardRef<HTMLDivElement, HeroContentProps>(
-  function BannerContent(
-    { testId = 'store-hero-content', children, ...otherProps },
-    ref
-  ) {
-    return (
-      <section ref={ref} data-hero-content data-testid={testId} {...otherProps}>
-        {children}
-      </section>
-    )
-  }
-)
-
-export default HeroContent
diff --git a/packages/ui/src/organisms/Hero/HeroHeading.tsx b/packages/ui/src/organisms/Hero/HeroHeading.tsx
new file mode 100644
index 0000000000..8ac7a8e08b
--- /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<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
+  function BannerContent(
+    { testId = 'store-hero-heading', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <header ref={ref} data-hero-heading data-testid={testId} {...otherProps}>
+        {children}
+      </header>
+    )
+  }
+)
+
+export default HeroHeading
diff --git a/packages/ui/src/organisms/Hero/index.tsx b/packages/ui/src/organisms/Hero/index.tsx
index f3a381edd0..8be701944c 100644
--- a/packages/ui/src/organisms/Hero/index.tsx
+++ b/packages/ui/src/organisms/Hero/index.tsx
@@ -4,8 +4,8 @@ export type { HeroProps } from './Hero'
 export { default as HeroImage } from './HeroImage'
 export type { HeroImageProps } from './HeroImage'
 
-export { default as HeroContent } from './HeroContent'
-export type { HeroContentProps } from './HeroContent'
+export { default as HeroHeading } from './HeroHeading'
+export type { HeroHeadingProps } from './HeroHeading'
 
 export { default as HeroLink } from './HeroLink'
 export type { HeroLinkProps } from './HeroLink'
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.mdx b/packages/ui/src/organisms/Hero/stories/Hero.mdx
index fb7d0499a1..5bf579a929 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.mdx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.mdx
@@ -2,7 +2,7 @@ import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
 
 import Hero from '../Hero'
 import HeroImage from '../HeroImage'
-import HeroContent from '../HeroContent'
+import HeroHeading from '../HeroHeading'
 import HeroLink from '../HeroLink'
 
 # Hero
@@ -17,7 +17,7 @@ The `Hero` uses the [Compound Component](https://kentcdodds.com/blog/compound-co
 
 - `Hero`: the wrapper component.
 - `HeroImage`: the component that wraps the image displayed in the component.
-- `HeroContent`: the component that can receive a title, description, and a `HeroLink`.
+- `HeroHeading`: the component should have a title, description, and a `HeroLink`.
 - `HeroLink`: the hero's call-to-action link.
 
 ## Props
@@ -34,9 +34,9 @@ Besides those attributes, the following props are also supported:
 
 <ArgsTable of={HeroImage} />
 
-### `HeroContent`
+### `HeroHeading`
 
-<ArgsTable of={HeroContent} />
+<ArgsTable of={HeroHeading} />
 
 ### `HeroLink`
 
@@ -49,7 +49,7 @@ Besides those attributes, the following props are also supported:
 }
 [data-hero-image] {
 }
-[data-hero-content] {
+[data-hero-heading] {
 }
 [data-hero-link] {
 }
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
index 04ab58e69f..d56aa93c22 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 import HeroComponent from '../Hero'
 import HeroImage from '../HeroImage'
-import HeroContent from '../HeroContent'
+import HeroHeading from '../HeroHeading'
 import HeroLink from '../HeroLink'
 import type { HeroProps } from '../Hero'
 import { Icon } from '../../..'
@@ -31,7 +31,7 @@ const HeroTemplate: Story<HeroProps> = ({ testId }) => (
         src="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
       />
     </HeroImage>
-    <HeroContent>
+    <HeroHeading>
       <h1>New Products Available</h1>
       <p>
         At BaseStore you can shop the best tech of 2022. Enjoy and get 10% off
@@ -41,7 +41,7 @@ const HeroTemplate: Story<HeroProps> = ({ testId }) => (
         <a href="/">See all</a>
         <Icon component={<RightArrow />} />
       </HeroLink>
-    </HeroContent>
+    </HeroHeading>
   </HeroComponent>
 )
 
diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/themes/theme-b2c-tailwind/src/organisms/hero.css
index 75c4e45184..6c0cf8d5d3 100644
--- a/themes/theme-b2c-tailwind/src/organisms/hero.css
+++ b/themes/theme-b2c-tailwind/src/organisms/hero.css
@@ -7,14 +7,14 @@
   color: #fff;
 }
 
-[data-hero-content] {
+[data-hero-heading] {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 4rem;
 }
 
-[data-hero-content] h1 {
+[data-hero-heading] h1 {
   font-size: 1.75rem;
   font-weight: bold;
   margin-bottom: 1.5rem;

From 5e8eea159c60641ded74265fe765744d6fa6141e Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Tue, 31 May 2022 19:57:09 -0300
Subject: [PATCH 06/12] Updates styles

---
 .../theme-b2c-tailwind/src/organisms/hero.css  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/themes/theme-b2c-tailwind/src/organisms/hero.css
index 6c0cf8d5d3..64c1ebc9db 100644
--- a/themes/theme-b2c-tailwind/src/organisms/hero.css
+++ b/themes/theme-b2c-tailwind/src/organisms/hero.css
@@ -1,6 +1,6 @@
 [data-store-hero] {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
   width: 100%;
   min-height: 20rem;
   background-color: #001947;
@@ -11,11 +11,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 4rem;
+  padding: 2rem;
 }
 
 [data-hero-heading] h1 {
-  font-size: 1.75rem;
+  font-size: 1.81rem;
   font-weight: bold;
   margin-bottom: 1.5rem;
 }
@@ -37,3 +37,15 @@
   border: 1px solid #171a1c;
   background-color: #fff;
 }
+
+@media only screen and (min-width: 769px) {
+  [data-store-hero] {
+    flex-direction: row-reverse;
+  }
+  [data-hero-heading] {
+    padding: 0 4rem;
+  }
+  [data-hero-heading] h1 {
+    font-size: 3rem;
+  }
+}

From 73273ae9d6ca6ef07c7642efaaaed1ec80893286 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Tue, 31 May 2022 22:31:19 -0300
Subject: [PATCH 07/12] Adds missing flie

---
 .../theme-b2c-tailwind => packages/styles}/src/organisms/hero.css | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {themes/theme-b2c-tailwind => packages/styles}/src/organisms/hero.css (100%)

diff --git a/themes/theme-b2c-tailwind/src/organisms/hero.css b/packages/styles/src/organisms/hero.css
similarity index 100%
rename from themes/theme-b2c-tailwind/src/organisms/hero.css
rename to packages/styles/src/organisms/hero.css

From b77694f978e501fa51c0c4f5688d176590c29b0d Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Tue, 31 May 2022 22:31:34 -0300
Subject: [PATCH 08/12] Fixes typo

---
 packages/ui/src/organisms/Hero/Hero.test.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/organisms/Hero/Hero.test.tsx b/packages/ui/src/organisms/Hero/Hero.test.tsx
index 613591ff3a..739fd30bc3 100644
--- a/packages/ui/src/organisms/Hero/Hero.test.tsx
+++ b/packages/ui/src/organisms/Hero/Hero.test.tsx
@@ -17,10 +17,8 @@ const HeroTest = () => {
         />
       </HeroImage>
       <HeroHeading>
-        <div>
-          <h3>Get yo know our next release</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </div>
+        <h3>Get yo know our next release</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <HeroLink>Shop now</HeroLink>
       </HeroHeading>
     </Hero>
@@ -33,7 +31,7 @@ describe('Hero', () => {
 
     const hero = getByTestId('store-hero')
     const heroImage = getByTestId('store-hero-image')
-    const HeroHeading = getByTestId('store-hero-heading')
+    const heroHeading = getByTestId('store-hero-heading')
     const heroLink = getByTestId('store-hero-link')
 
     it('`Hero` component should have `data-store-hero` attribute', () => {
@@ -49,7 +47,7 @@ describe('Hero', () => {
     })
 
     it('`HeroHeading` component should have `data-hero-heading` attribute', () => {
-      expect(HeroHeading).toHaveAttribute('data-hero-heading')
+      expect(heroHeading).toHaveAttribute('data-hero-heading')
     })
 
     it('`HeroLink` component should have `data-hero-link` attribute', () => {

From ede523a0f5a0aa87810279a098f9d901bfb86801 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Wed, 1 Jun 2022 12:55:52 -0300
Subject: [PATCH 09/12] Removes `HeroLink` component

---
 packages/styles/src/organisms/hero.css        | 12 +++++-----
 packages/ui/src/index.ts                      |  8 +++++--
 packages/ui/src/organisms/Hero/Hero.test.tsx  |  8 +------
 packages/ui/src/organisms/Hero/HeroLink.tsx   | 22 -------------------
 packages/ui/src/organisms/Hero/index.tsx      |  3 ---
 .../ui/src/organisms/Hero/stories/Hero.mdx    | 10 +--------
 .../organisms/Hero/stories/Hero.stories.tsx   |  8 +++----
 7 files changed, 17 insertions(+), 54 deletions(-)
 delete mode 100644 packages/ui/src/organisms/Hero/HeroLink.tsx

diff --git a/packages/styles/src/organisms/hero.css b/packages/styles/src/organisms/hero.css
index 64c1ebc9db..8718304329 100644
--- a/packages/styles/src/organisms/hero.css
+++ b/packages/styles/src/organisms/hero.css
@@ -20,12 +20,7 @@
   margin-bottom: 1.5rem;
 }
 
-[data-hero-image] {
-  height: 100%;
-  overflow: hidden;
-}
-
-[data-hero-link] {
+[data-hero-heading] a {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -38,6 +33,11 @@
   background-color: #fff;
 }
 
+[data-hero-image] {
+  height: 100%;
+  overflow: hidden;
+}
+
 @media only screen and (min-width: 769px) {
   [data-store-hero] {
     flex-direction: row-reverse;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e1c1054c2d..86f217e9b1 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -187,8 +187,12 @@ export type {
   OutOfStockTitleProps,
 } from './organisms/OutOfStock'
 
-export { default as Hero } from './organisms/Hero'
-export type { HeroProps } from './organisms/Hero'
+export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
+export type {
+  HeroProps,
+  HeroHeadingProps,
+  HeroImageProps,
+} from './organisms/Hero'
 
 // Hooks
 export { default as useSlider } from './hooks/useSlider'
diff --git a/packages/ui/src/organisms/Hero/Hero.test.tsx b/packages/ui/src/organisms/Hero/Hero.test.tsx
index 739fd30bc3..e1ab49ac4e 100644
--- a/packages/ui/src/organisms/Hero/Hero.test.tsx
+++ b/packages/ui/src/organisms/Hero/Hero.test.tsx
@@ -5,7 +5,6 @@ import React from 'react'
 import Hero from './Hero'
 import HeroImage from './HeroImage'
 import HeroHeading from './HeroHeading'
-import HeroLink from './HeroLink'
 
 const HeroTest = () => {
   return (
@@ -19,7 +18,7 @@ const HeroTest = () => {
       <HeroHeading>
         <h3>Get yo know our next release</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <HeroLink>Shop now</HeroLink>
+        <a href="/">Shop Now</a>
       </HeroHeading>
     </Hero>
   )
@@ -32,7 +31,6 @@ describe('Hero', () => {
     const hero = getByTestId('store-hero')
     const heroImage = getByTestId('store-hero-image')
     const heroHeading = getByTestId('store-hero-heading')
-    const heroLink = getByTestId('store-hero-link')
 
     it('`Hero` component should have `data-store-hero` attribute', () => {
       expect(hero).toHaveAttribute('data-store-hero')
@@ -49,10 +47,6 @@ describe('Hero', () => {
     it('`HeroHeading` component should have `data-hero-heading` attribute', () => {
       expect(heroHeading).toHaveAttribute('data-hero-heading')
     })
-
-    it('`HeroLink` component should have `data-hero-link` attribute', () => {
-      expect(heroLink).toHaveAttribute('data-hero-link')
-    })
   })
 
   describe('Accessibility', () => {
diff --git a/packages/ui/src/organisms/Hero/HeroLink.tsx b/packages/ui/src/organisms/Hero/HeroLink.tsx
deleted file mode 100644
index ee0bfdd8e9..0000000000
--- a/packages/ui/src/organisms/Hero/HeroLink.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface HeroLinkProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const HeroLink = forwardRef<HTMLDivElement, HeroLinkProps>(function HeroLink(
-  { testId = 'store-hero-link', children, ...otherProps },
-  ref
-) {
-  return (
-    <div ref={ref} data-hero-link data-testid={testId} {...otherProps}>
-      {children}
-    </div>
-  )
-})
-
-export default HeroLink
diff --git a/packages/ui/src/organisms/Hero/index.tsx b/packages/ui/src/organisms/Hero/index.tsx
index 8be701944c..782bdd8260 100644
--- a/packages/ui/src/organisms/Hero/index.tsx
+++ b/packages/ui/src/organisms/Hero/index.tsx
@@ -6,6 +6,3 @@ export type { HeroImageProps } from './HeroImage'
 
 export { default as HeroHeading } from './HeroHeading'
 export type { HeroHeadingProps } from './HeroHeading'
-
-export { default as HeroLink } from './HeroLink'
-export type { HeroLinkProps } from './HeroLink'
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.mdx b/packages/ui/src/organisms/Hero/stories/Hero.mdx
index 5bf579a929..315421411f 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.mdx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.mdx
@@ -3,7 +3,6 @@ import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
 import Hero from '../Hero'
 import HeroImage from '../HeroImage'
 import HeroHeading from '../HeroHeading'
-import HeroLink from '../HeroLink'
 
 # Hero
 
@@ -17,8 +16,7 @@ The `Hero` uses the [Compound Component](https://kentcdodds.com/blog/compound-co
 
 - `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 `HeroLink`.
-- `HeroLink`: the hero's call-to-action link.
+- `HeroHeading`: the component should have a title, description, and a call to action link.
 
 ## Props
 
@@ -38,10 +36,6 @@ Besides those attributes, the following props are also supported:
 
 <ArgsTable of={HeroHeading} />
 
-### `HeroLink`
-
-<ArgsTable of={HeroLink} />
-
 ## CSS Selectors
 
 ```css
@@ -51,6 +45,4 @@ Besides those attributes, the following props are also supported:
 }
 [data-hero-heading] {
 }
-[data-hero-link] {
-}
 ```
diff --git a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
index d56aa93c22..abda706a19 100644
--- a/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
+++ b/packages/ui/src/organisms/Hero/stories/Hero.stories.tsx
@@ -4,7 +4,6 @@ import React from 'react'
 import HeroComponent from '../Hero'
 import HeroImage from '../HeroImage'
 import HeroHeading from '../HeroHeading'
-import HeroLink from '../HeroLink'
 import type { HeroProps } from '../Hero'
 import { Icon } from '../../..'
 import mdx from './Hero.mdx'
@@ -37,10 +36,9 @@ const HeroTemplate: Story<HeroProps> = ({ testId }) => (
         At BaseStore you can shop the best tech of 2022. Enjoy and get 10% off
         on your first purchase.
       </p>
-      <HeroLink>
-        <a href="/">See all</a>
-        <Icon component={<RightArrow />} />
-      </HeroLink>
+      <a href="/">
+        See all <Icon component={<RightArrow />} />
+      </a>
     </HeroHeading>
   </HeroComponent>
 )

From ebfa9e0aa2a4b94b57fc603ad6301b7c906b5bb6 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Thu, 2 Jun 2022 12:45:04 -0300
Subject: [PATCH 10/12] Update packages/ui/src/organisms/Hero/Hero.test.tsx

Co-authored-by: Eduardo Formiga <eduardo.formiga@gmail.com>
---
 packages/ui/src/organisms/Hero/Hero.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/organisms/Hero/Hero.test.tsx b/packages/ui/src/organisms/Hero/Hero.test.tsx
index e1ab49ac4e..358860dbda 100644
--- a/packages/ui/src/organisms/Hero/Hero.test.tsx
+++ b/packages/ui/src/organisms/Hero/Hero.test.tsx
@@ -54,6 +54,7 @@ describe('Hero', () => {
       const { getByTestId } = render(<HeroTest />)
 
       expect(await axe(getByTestId('store-hero'))).toHaveNoViolations()
+      expect(await axe(getByTestId('store-hero'))).toHaveNoIncompletes()
     })
   })
 })

From 0d78ad720af7aaf039445d2e0829ac8ae00dd88a Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Fri, 3 Jun 2022 14:16:58 -0300
Subject: [PATCH 11/12] Update packages/ui/src/organisms/Hero/HeroHeading.tsx

Co-authored-by: Filipe W. Lima <filipe.lima@vtex.com.br>
---
 packages/ui/src/organisms/Hero/HeroHeading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/organisms/Hero/HeroHeading.tsx b/packages/ui/src/organisms/Hero/HeroHeading.tsx
index 8ac7a8e08b..31ed1966dd 100644
--- a/packages/ui/src/organisms/Hero/HeroHeading.tsx
+++ b/packages/ui/src/organisms/Hero/HeroHeading.tsx
@@ -9,7 +9,7 @@ export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
-  function BannerContent(
+  function HeroHeading(
     { testId = 'store-hero-heading', children, ...otherProps },
     ref
   ) {

From 181cbfdb1499735b4cece63134f65a6e2914b67f Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Fri, 3 Jun 2022 14:23:26 -0300
Subject: [PATCH 12/12] Removing children prop

---
 packages/ui/src/organisms/Hero/Hero.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/organisms/Hero/Hero.tsx b/packages/ui/src/organisms/Hero/Hero.tsx
index 5559f0451d..2eb14ce722 100644
--- a/packages/ui/src/organisms/Hero/Hero.tsx
+++ b/packages/ui/src/organisms/Hero/Hero.tsx
@@ -7,7 +7,6 @@ export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
    * testing-library, and jest).
    */
   testId?: string
-  children: React.ReactNode
 }
 
 const Hero = forwardRef<HTMLDivElement, HeroProps>(function Hero(