From c7fe08222a43b36afc9c4eb277f203292228d493 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jimmy.somsanith@gmail.com>
Date: Fri, 28 Jun 2019 00:24:58 +0200
Subject: [PATCH 1/5] feat: ButtonWrapper prop in Button to customise rendering

---
 src/components/Button.js | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index edd093d8..4719096e 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -32,7 +32,7 @@ const SIZES = {
   MEDIUM: 'medium',
 };
 
-const ButtonWrapper = styled.button`
+const StyledButton = styled.button`
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -305,9 +305,17 @@ const ButtonWrapper = styled.button`
 
 `;
 
-const ButtonLink = ButtonWrapper.withComponent('a');
-
-export function Button({ isDisabled, isLoading, loadingText, isLink, children, ...props }) {
+const ButtonLink = StyledButton.withComponent('a');
+
+export function Button({
+  isDisabled,
+  isLoading,
+  loadingText,
+  isLink,
+  children,
+  ButtonWrapper,
+  ...props
+}) {
   const buttonInner = (
     <Fragment>
       <Text>{children}</Text>
@@ -315,17 +323,18 @@ export function Button({ isDisabled, isLoading, loadingText, isLink, children, .
     </Fragment>
   );
 
-  if (isLink) {
-    return (
-      <ButtonLink isLoading={isLoading} disabled={isDisabled} {...props}>
-        {buttonInner}
-      </ButtonLink>
-    );
+  let SelectedButton = StyledButton;
+  if (ButtonWrapper) {
+    const StyledButtonWrapper = StyledButton.withComponent(ButtonWrapper);
+    SelectedButton = StyledButtonWrapper;
+  } else if (isLink) {
+    SelectedButton = ButtonLink;
   }
+
   return (
-    <ButtonWrapper isLoading={isLoading} disabled={isDisabled} {...props}>
+    <SelectedButton isLoading={isLoading} disabled={isDisabled} {...props}>
       {buttonInner}
-    </ButtonWrapper>
+    </SelectedButton>
   );
 }
 
@@ -351,6 +360,7 @@ Button.propTypes = {
   */
   containsIcon: PropTypes.bool,
   size: PropTypes.oneOf(Object.values(SIZES)),
+  ButtonWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 Button.defaultProps = {
@@ -362,4 +372,5 @@ Button.defaultProps = {
   isUnclickable: false,
   containsIcon: false,
   size: SIZES.MEDIUM,
+  ButtonWrapper: undefined,
 };

From a20100e32014274d3316bb208517ea992793cf1f Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jimmy.somsanith@gmail.com>
Date: Fri, 28 Jun 2019 11:29:35 +0200
Subject: [PATCH 2/5] Add wrapper in Button stories

---
 src/components/Button.stories.js | 231 +++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)

diff --git a/src/components/Button.stories.js b/src/components/Button.stories.js
index e87220c9..1c3d4588 100644
--- a/src/components/Button.stories.js
+++ b/src/components/Button.stories.js
@@ -1,8 +1,30 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { action } from '@storybook/addon-actions';
+
 import { Button } from './Button';
 import { Icon } from './Icon';
 
+const CustomButton = styled.button`
+  border: 1px solid green;
+  background: lightgreen;
+  color: rebeccapurple;
+  padding: 1.5em;
+  font-size: 1.5em;
+`;
+
+const CustomAnchor = styled.a`
+  border: 1px solid green;
+  background: lightgreen;
+  color: rebeccapurple;
+  font-size: 1.5em;
+`;
+
+function ButtonWrapper(props) {
+  return <CustomButton onClick={action('button action click')} {...props} />;
+}
+
 storiesOf('Design System|Button', module)
   .addParameters({ component: Button })
   .add('all buttons', () => (
@@ -56,4 +78,213 @@ storiesOf('Design System|Button', module)
         Link
       </Button>
     </div>
+  ))
+  .add('button wrapper', () => (
+    <div>
+      <ButtonWrapper>Original Button Wrapper</ButtonWrapper>
+      <br />
+      <Button ButtonWrapper={ButtonWrapper} appearance="primary">
+        Primary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="secondary">
+        Secondary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="tertiary">
+        Tertiary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline">
+        Outline
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="primaryOutline">
+        Outline primary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="secondaryOutline">
+        Outline secondary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="primary" isDisabled>
+        Disabled
+      </Button>
+      <br />
+      <Button ButtonWrapper={ButtonWrapper} appearance="primary" isLoading>
+        Primary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="secondary" isLoading>
+        Secondary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" isLoading>
+        Tertiary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline" isLoading>
+        Outline
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline" isLoading loadingText="Custom...">
+        Outline
+      </Button>
+      <br />
+      <Button ButtonWrapper={ButtonWrapper} appearance="primary" size="small">
+        Primary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="secondary" size="small">
+        Secondary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" size="small">
+        Tertiary
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
+        Outline
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="primary" isDisabled size="small">
+        Disabled
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small" containsIcon>
+        <Icon icon="link" aria-label="Link" />
+      </Button>
+      <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
+        <Icon icon="link" />
+        Link
+      </Button>
+    </div>
+  ))
+
+  .add('anchor wrapper', () => (
+    <div>
+      <CustomAnchor href="http://storybook.js.org">Original Anchor Wrapper</CustomAnchor>
+      <br />
+      <Button ButtonWrapper={CustomAnchor} appearance="primary" href="http://storybook.js.org">
+        Primary
+      </Button>
+      <Button ButtonWrapper={CustomAnchor} appearance="secondary" href="http://storybook.js.org">
+        Secondary
+      </Button>
+      <Button ButtonWrapper={CustomAnchor} appearance="tertiary" href="http://storybook.js.org">
+        Tertiary
+      </Button>
+      <Button ButtonWrapper={CustomAnchor} appearance="outline" href="http://storybook.js.org">
+        Outline
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="primaryOutline"
+        href="http://storybook.js.org"
+      >
+        Outline primary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="secondaryOutline"
+        href="http://storybook.js.org"
+      >
+        Outline secondary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="primary"
+        isDisabled
+        href="http://storybook.js.org"
+      >
+        Disabled
+      </Button>
+      <br />
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="primary"
+        isLoading
+        href="http://storybook.js.org"
+      >
+        Primary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="secondary"
+        isLoading
+        href="http://storybook.js.org"
+      >
+        Secondary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="tertiary"
+        isLoading
+        href="http://storybook.js.org"
+      >
+        Tertiary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="outline"
+        isLoading
+        href="http://storybook.js.org"
+      >
+        Outline
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="outline"
+        isLoading
+        loadingText="Custom..."
+        href="http://storybook.js.org"
+      >
+        Outline
+      </Button>
+      <br />
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="primary"
+        size="small"
+        href="http://storybook.js.org"
+      >
+        Primary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="secondary"
+        size="small"
+        href="http://storybook.js.org"
+      >
+        Secondary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="tertiary"
+        size="small"
+        href="http://storybook.js.org"
+      >
+        Tertiary
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="outline"
+        size="small"
+        href="http://storybook.js.org"
+      >
+        Outline
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="primary"
+        isDisabled
+        size="small"
+        href="http://storybook.js.org"
+      >
+        Disabled
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="outline"
+        size="small"
+        containsIcon
+        href="http://storybook.js.org"
+      >
+        <Icon icon="link" aria-label="Link" />
+      </Button>
+      <Button
+        ButtonWrapper={CustomAnchor}
+        appearance="outline"
+        size="small"
+        href="http://storybook.js.org"
+      >
+        <Icon icon="link" />
+        Link
+      </Button>
+    </div>
   ));

From 4379c882d793b3013b293e69ddc46fbb4d7dbb7d Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Fri, 28 Jun 2019 09:20:22 -0600
Subject: [PATCH 3/5] refactor: use StoryLinkWrapper for ButtonWrapper link
 implementation

---
 src/components/Button.stories.js   | 52 ++++++++++++++----------------
 src/components/StoryLinkWrapper.js |  4 +--
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/Button.stories.js b/src/components/Button.stories.js
index 1c3d4588..7625ae24 100644
--- a/src/components/Button.stories.js
+++ b/src/components/Button.stories.js
@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';
 import { Icon } from './Icon';
+import { StoryLinkWrapper } from './StoryLinkWrapper';
 
 const CustomButton = styled.button`
   border: 1px solid green;
@@ -14,13 +15,6 @@ const CustomButton = styled.button`
   font-size: 1.5em;
 `;
 
-const CustomAnchor = styled.a`
-  border: 1px solid green;
-  background: lightgreen;
-  color: rebeccapurple;
-  font-size: 1.5em;
-`;
-
 function ButtonWrapper(props) {
   return <CustomButton onClick={action('button action click')} {...props} />;
 }
@@ -148,36 +142,38 @@ storiesOf('Design System|Button', module)
 
   .add('anchor wrapper', () => (
     <div>
-      <CustomAnchor href="http://storybook.js.org">Original Anchor Wrapper</CustomAnchor>
-      <br />
-      <Button ButtonWrapper={CustomAnchor} appearance="primary" href="http://storybook.js.org">
+      <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" href="http://storybook.js.org">
         Primary
       </Button>
-      <Button ButtonWrapper={CustomAnchor} appearance="secondary" href="http://storybook.js.org">
+      <Button
+        ButtonWrapper={StoryLinkWrapper}
+        appearance="secondary"
+        href="http://storybook.js.org"
+      >
         Secondary
       </Button>
-      <Button ButtonWrapper={CustomAnchor} appearance="tertiary" href="http://storybook.js.org">
+      <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" href="http://storybook.js.org">
         Tertiary
       </Button>
-      <Button ButtonWrapper={CustomAnchor} appearance="outline" href="http://storybook.js.org">
+      <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" href="http://storybook.js.org">
         Outline
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="primaryOutline"
         href="http://storybook.js.org"
       >
         Outline primary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="secondaryOutline"
         href="http://storybook.js.org"
       >
         Outline secondary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="primary"
         isDisabled
         href="http://storybook.js.org"
@@ -186,7 +182,7 @@ storiesOf('Design System|Button', module)
       </Button>
       <br />
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="primary"
         isLoading
         href="http://storybook.js.org"
@@ -194,7 +190,7 @@ storiesOf('Design System|Button', module)
         Primary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="secondary"
         isLoading
         href="http://storybook.js.org"
@@ -202,7 +198,7 @@ storiesOf('Design System|Button', module)
         Secondary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="tertiary"
         isLoading
         href="http://storybook.js.org"
@@ -210,7 +206,7 @@ storiesOf('Design System|Button', module)
         Tertiary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="outline"
         isLoading
         href="http://storybook.js.org"
@@ -218,7 +214,7 @@ storiesOf('Design System|Button', module)
         Outline
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="outline"
         isLoading
         loadingText="Custom..."
@@ -228,7 +224,7 @@ storiesOf('Design System|Button', module)
       </Button>
       <br />
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="primary"
         size="small"
         href="http://storybook.js.org"
@@ -236,7 +232,7 @@ storiesOf('Design System|Button', module)
         Primary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="secondary"
         size="small"
         href="http://storybook.js.org"
@@ -244,7 +240,7 @@ storiesOf('Design System|Button', module)
         Secondary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="tertiary"
         size="small"
         href="http://storybook.js.org"
@@ -252,7 +248,7 @@ storiesOf('Design System|Button', module)
         Tertiary
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="outline"
         size="small"
         href="http://storybook.js.org"
@@ -260,7 +256,7 @@ storiesOf('Design System|Button', module)
         Outline
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="primary"
         isDisabled
         size="small"
@@ -269,7 +265,7 @@ storiesOf('Design System|Button', module)
         Disabled
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="outline"
         size="small"
         containsIcon
@@ -278,7 +274,7 @@ storiesOf('Design System|Button', module)
         <Icon icon="link" aria-label="Link" />
       </Button>
       <Button
-        ButtonWrapper={CustomAnchor}
+        ButtonWrapper={StoryLinkWrapper}
         appearance="outline"
         size="small"
         href="http://storybook.js.org"
diff --git a/src/components/StoryLinkWrapper.js b/src/components/StoryLinkWrapper.js
index 248712ff..74800e33 100644
--- a/src/components/StoryLinkWrapper.js
+++ b/src/components/StoryLinkWrapper.js
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 
 const fireClickAction = action('onLinkClick');
 
-export function StoryLinkWrapper({ children, className, href, onClick, to }) {
+export function StoryLinkWrapper({ children, className, href, onClick, to, ...rest }) {
   const modifiedOnClick = event => {
     event.preventDefault();
     onClick();
@@ -14,7 +14,7 @@ export function StoryLinkWrapper({ children, className, href, onClick, to }) {
   };
 
   return (
-    <a className={className} href={href || to} onClick={modifiedOnClick}>
+    <a className={className} href={href || to} onClick={modifiedOnClick} {...rest}>
       {children}
     </a>
   );

From 3bb78f2803122e65ec813295c0107e6c4bcada6b Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jimmy.somsanith@gmail.com>
Date: Fri, 28 Jun 2019 22:54:09 +0200
Subject: [PATCH 4/5] Remove non native attributes

---
 src/components/Button.js         | 16 +++++++++++++++-
 src/components/Button.stories.js |  6 ++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 4719096e..859ac9d5 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -307,6 +307,19 @@ const StyledButton = styled.button`
 
 const ButtonLink = StyledButton.withComponent('a');
 
+const applyStyle = ButtonWrapper => {
+  if (!ButtonWrapper) {
+    return null;
+  }
+
+  return (
+    ButtonWrapper &&
+    StyledButton.withComponent(({ containsIcon, isLoading, isUnclickable, ...rest }) => (
+      <ButtonWrapper {...rest} />
+    ))
+  );
+};
+
 export function Button({
   isDisabled,
   isLoading,
@@ -323,9 +336,10 @@ export function Button({
     </Fragment>
   );
 
+  const StyledButtonWrapper = React.useMemo(() => applyStyle(ButtonWrapper), [ButtonWrapper]);
+
   let SelectedButton = StyledButton;
   if (ButtonWrapper) {
-    const StyledButtonWrapper = StyledButton.withComponent(ButtonWrapper);
     SelectedButton = StyledButtonWrapper;
   } else if (isLink) {
     SelectedButton = ButtonLink;
diff --git a/src/components/Button.stories.js b/src/components/Button.stories.js
index 7625ae24..13194a07 100644
--- a/src/components/Button.stories.js
+++ b/src/components/Button.stories.js
@@ -11,8 +11,8 @@ const CustomButton = styled.button`
   border: 1px solid green;
   background: lightgreen;
   color: rebeccapurple;
-  padding: 1.5em;
-  font-size: 1.5em;
+  padding: 1em;
+  font-size: 1.2em;
 `;
 
 function ButtonWrapper(props) {
@@ -142,6 +142,8 @@ storiesOf('Design System|Button', module)
 
   .add('anchor wrapper', () => (
     <div>
+      <StoryLinkWrapper to="http://storybook.js.org">Original Link Wrapper</StoryLinkWrapper>
+      <br />
       <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" href="http://storybook.js.org">
         Primary
       </Button>

From 75a6d3d2ea0956bffef78ec7e9e7104bc8d88ac9 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jimmy.somsanith@gmail.com>
Date: Fri, 28 Jun 2019 22:58:43 +0200
Subject: [PATCH 5/5] Remove unnecessary if

---
 src/components/Button.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 859ac9d5..1c68d13c 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -308,10 +308,6 @@ const StyledButton = styled.button`
 const ButtonLink = StyledButton.withComponent('a');
 
 const applyStyle = ButtonWrapper => {
-  if (!ButtonWrapper) {
-    return null;
-  }
-
   return (
     ButtonWrapper &&
     StyledButton.withComponent(({ containsIcon, isLoading, isUnclickable, ...rest }) => (