From 8fe0b27a85ea93469603952bf60802838d65ed65 Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Fri, 11 Jun 2021 16:16:20 -0300
Subject: [PATCH 1/6] Adding docs to Button and migrating to MDX

---
 packages/store-ui/package.json                |  1 +
 .../src/atoms/Button/Button.stories.mdx       | 20 +++++++++++++++++++
 .../src/atoms/Button/Button.stories.tsx       | 16 ---------------
 packages/store-ui/src/atoms/Button/Button.tsx | 11 +++++++++-
 yarn.lock                                     |  5 ++++-
 5 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 packages/store-ui/src/atoms/Button/Button.stories.mdx
 delete mode 100644 packages/store-ui/src/atoms/Button/Button.stories.tsx

diff --git a/packages/store-ui/package.json b/packages/store-ui/package.json
index 1e54dd5a41..d07e8001cf 100644
--- a/packages/store-ui/package.json
+++ b/packages/store-ui/package.json
@@ -37,6 +37,7 @@
   "dependencies": {
     "@reach/popover": "^0.15.0",
     "@reach/router": "^1.3.4",
+    "@storybook/addon-docs": "^6.2.9",
     "@theme-ui/match-media": "^0.3.1",
     "@theme-ui/preset-base": "^0.3.0",
     "@types/react-modal": "^3.12.0",
diff --git a/packages/store-ui/src/atoms/Button/Button.stories.mdx b/packages/store-ui/src/atoms/Button/Button.stories.mdx
new file mode 100644
index 0000000000..3f5e771354
--- /dev/null
+++ b/packages/store-ui/src/atoms/Button/Button.stories.mdx
@@ -0,0 +1,20 @@
+import { Meta, Story, Preview, ArgsTable } from "@storybook/addon-docs/blocks";
+import Button from "./Button";
+
+<Meta title="Atoms/Button" />
+
+export const Template = (args) => <Button {...args} />
+
+# Preview
+
+<Preview>
+  <Story name="Button" args={{
+    children: "Button"
+  }}>
+    {Template.bind({})}
+  </Story>
+</Preview>
+
+# Props
+
+<ArgsTable of={Button} />
\ No newline at end of file
diff --git a/packages/store-ui/src/atoms/Button/Button.stories.tsx b/packages/store-ui/src/atoms/Button/Button.stories.tsx
deleted file mode 100644
index d88fc7fea7..0000000000
--- a/packages/store-ui/src/atoms/Button/Button.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React from 'react'
-
-import type { ButtonProps } from './Button'
-import Root from './Button'
-
-export default {
-  title: 'Atoms/Button',
-} as Meta
-
-const ButtonTemplate: Story<ButtonProps> = (args) => <Root {...args} />
-
-export const Button = ButtonTemplate.bind({})
-Button.args = {
-  children: 'Button',
-}
diff --git a/packages/store-ui/src/atoms/Button/Button.tsx b/packages/store-ui/src/atoms/Button/Button.tsx
index be8d3f41e6..900703cb94 100644
--- a/packages/store-ui/src/atoms/Button/Button.tsx
+++ b/packages/store-ui/src/atoms/Button/Button.tsx
@@ -2,8 +2,17 @@ import type { ButtonHTMLAttributes, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Specifies the URL of the page this button click goes to.
+   */
   href?: string
-  as?: ElementType
+  /**
+   * Set the HTML element tag of this component.
+   */
+  as: ElementType
+  /**
+   * ID to find this component in Cypress tests.
+   */
   testId?: string
 }
 
diff --git a/yarn.lock b/yarn.lock
index 77359e6fce..906548598f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3815,7 +3815,7 @@
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.2.9":
+"@storybook/addon-docs@6.2.9", "@storybook/addon-docs@^6.2.9":
   version "6.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.2.9.tgz#61271e54ff4ea490409e4873ed022e62577366c1"
   integrity sha512-qOtwgiqI3LMqT0eXYNV6ykp7qSu0LQGeXxy3wOBGuDDqAizfgnAjomYEWGFcyKp5ahV7HCRCjxbixAklFPUmyw==
@@ -17839,6 +17839,9 @@ minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
   integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
 
 mississippi@^3.0.0:
   version "3.0.0"

From 9834e71e4b4cbc34c760e108d8c68ac03dc81536 Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Fri, 11 Jun 2021 16:39:14 -0300
Subject: [PATCH 2/6] Fix optional typing

---
 packages/store-ui/src/atoms/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/store-ui/src/atoms/Button/Button.tsx b/packages/store-ui/src/atoms/Button/Button.tsx
index 900703cb94..a52ccfd5a1 100644
--- a/packages/store-ui/src/atoms/Button/Button.tsx
+++ b/packages/store-ui/src/atoms/Button/Button.tsx
@@ -9,7 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Set the HTML element tag of this component.
    */
-  as: ElementType
+  as?: ElementType
   /**
    * ID to find this component in Cypress tests.
    */

From fdfae10567d80a14f8a82018dd21d304f5744486 Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Mon, 14 Jun 2021 15:22:44 -0300
Subject: [PATCH 3/6] Fix show code content

---
 packages/store-ui/src/atoms/Button/Button.stories.mdx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/store-ui/src/atoms/Button/Button.stories.mdx b/packages/store-ui/src/atoms/Button/Button.stories.mdx
index 3f5e771354..7778f99fbe 100644
--- a/packages/store-ui/src/atoms/Button/Button.stories.mdx
+++ b/packages/store-ui/src/atoms/Button/Button.stories.mdx
@@ -3,15 +3,13 @@ import Button from "./Button";
 
 <Meta title="Atoms/Button" />
 
-export const Template = (args) => <Button {...args} />
-
 # Preview
 
 <Preview>
   <Story name="Button" args={{
     children: "Button"
   }}>
-    {Template.bind({})}
+    {(args) => <Button {...args} />}
   </Story>
 </Preview>
 

From 1461ded2a0a1f779ea81c24e21b9221638944d76 Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Mon, 14 Jun 2021 17:47:24 -0300
Subject: [PATCH 4/6] Fix prop description

---
 packages/store-ui/src/atoms/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/store-ui/src/atoms/Button/Button.tsx b/packages/store-ui/src/atoms/Button/Button.tsx
index a52ccfd5a1..5f59577d92 100644
--- a/packages/store-ui/src/atoms/Button/Button.tsx
+++ b/packages/store-ui/src/atoms/Button/Button.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   as?: ElementType
   /**
-   * ID to find this component in Cypress tests.
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
 }

From 9a735f2a1ae2051cd5c771a99bc87a916ad73e2d Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Tue, 15 Jun 2021 15:01:15 -0300
Subject: [PATCH 5/6] Removing href prop from button

---
 packages/store-ui/src/atoms/Button/Button.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/store-ui/src/atoms/Button/Button.tsx b/packages/store-ui/src/atoms/Button/Button.tsx
index 5f59577d92..ecd13f5d39 100644
--- a/packages/store-ui/src/atoms/Button/Button.tsx
+++ b/packages/store-ui/src/atoms/Button/Button.tsx
@@ -2,10 +2,6 @@ import type { ButtonHTMLAttributes, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * Specifies the URL of the page this button click goes to.
-   */
-  href?: string
   /**
    * Set the HTML element tag of this component.
    */

From cd1a5042c83e9acf33f10a396192e07f102816ac Mon Sep 17 00:00:00 2001
From: VTEX <gabriel.antiqueira@vtex.com.br>
Date: Wed, 16 Jun 2021 16:46:23 -0300
Subject: [PATCH 6/6] Removing href and as props

---
 .../store-ui/src/atoms/Button/Button.stories.mdx  | 15 +++++++++------
 packages/store-ui/src/atoms/Button/Button.tsx     | 15 ++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/store-ui/src/atoms/Button/Button.stories.mdx b/packages/store-ui/src/atoms/Button/Button.stories.mdx
index 7778f99fbe..ba2d8ccaab 100644
--- a/packages/store-ui/src/atoms/Button/Button.stories.mdx
+++ b/packages/store-ui/src/atoms/Button/Button.stories.mdx
@@ -1,18 +1,21 @@
-import { Meta, Story, Preview, ArgsTable } from "@storybook/addon-docs/blocks";
-import Button from "./Button";
+import { Meta, Story, Preview, ArgsTable } from '@storybook/addon-docs/blocks'
+import Button from './Button'
 
 <Meta title="Atoms/Button" />
 
 # Preview
 
 <Preview>
-  <Story name="Button" args={{
-    children: "Button"
-  }}>
+  <Story
+    name="Button"
+    args={{
+      children: 'Button',
+    }}
+  >
     {(args) => <Button {...args} />}
   </Story>
 </Preview>
 
 # Props
 
-<ArgsTable of={Button} />
\ No newline at end of file
+<ArgsTable of={Button} />
diff --git a/packages/store-ui/src/atoms/Button/Button.tsx b/packages/store-ui/src/atoms/Button/Button.tsx
index ecd13f5d39..7630e64c05 100644
--- a/packages/store-ui/src/atoms/Button/Button.tsx
+++ b/packages/store-ui/src/atoms/Button/Button.tsx
@@ -1,11 +1,8 @@
-import type { ButtonHTMLAttributes, ElementType } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * Set the HTML element tag of this component.
-   */
-  as?: ElementType
+export interface ButtonProps<T = HTMLButtonElement>
+  extends ButtonHTMLAttributes<T> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -13,13 +10,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { children, as: Component = 'button', testId = 'store-button', ...props },
+  { children, testId = 'store-button', ...props },
   ref
 ) {
   return (
-    <Component ref={ref} data-store-button data-testid={testId} {...props}>
+    <button ref={ref} data-store-button data-testid={testId} {...props}>
       {children}
-    </Component>
+    </button>
   )
 })