From 9348dc9ce133bdf10f649dd102ecf9b10be3ca13 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Fri, 18 Sep 2020 08:15:38 -0700
Subject: [PATCH] Refactors React buttons.

---
 .../src/__snapshots__/storybook.test.js.snap  | 84 ++++++++-----------
 agnosticui-react/src/stories/Button.js        | 25 +-----
 .../src/stories/Button.stories.js             | 71 ++++++++--------
 agnosticui-react/src/stories/Button.test.js   |  4 +-
 .../src/stories/ButtonGroup.stories.js        | 72 ++++++++--------
 .../src/stories/ButtonIcon.stories.js         |  6 +-
 6 files changed, 113 insertions(+), 149 deletions(-)

diff --git a/agnosticui-react/src/__snapshots__/storybook.test.js.snap b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
index 3a89be306..51274971f 100644
--- a/agnosticui-react/src/__snapshots__/storybook.test.js.snap
+++ b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
@@ -6,19 +6,19 @@ Array [
     className="btn my-custom-css-klass"
     type="button"
   >
-    Custom CSS Override
+    Go
   </button>,
   <button
     className="btn blank"
     type="button"
   >
-    Blank Button
+    Go
   </button>,
   <button
     className="btnBase"
     type="button"
   >
-    Button Base (no skin)
+    Go
   </button>,
 ]
 `;
@@ -29,43 +29,43 @@ Array [
     className="btn"
     type="button"
   >
-    Default
+    Go
   </button>,
   <button
     className="btn bordered"
     type="button"
   >
-    Default Bordered
+    Go
   </button>,
   <button
     className="btn rounded"
     type="button"
   >
-    Default Rounded
+    Go
   </button>,
   <button
     className="btn bordered rounded"
     type="button"
   >
-    Default Bordered Rounded
+    Go
   </button>,
   <button
     className="btn rounded raised"
     type="button"
   >
-    Default Rounded Raised
+    Go
   </button>,
   <button
     className="btn block"
     type="button"
   >
-    Default Block (aka Stacked)
+    Go
   </button>,
   <button
     className="btn bordered block"
     type="button"
   >
-    Default Block Bordered (aka Stacked)
+    Go
   </button>,
 ]
 `;
@@ -76,25 +76,25 @@ Array [
     className="btn disabled"
     type="button"
   >
-    Default Disabled
+    Go
   </button>,
   <button
     className="btn primary disabled"
     type="button"
   >
-    Primary Disabled
+    Go
   </button>,
   <button
     className="btn secondary disabled"
     type="button"
   >
-    Secondary Disabled
+    Go
   </button>,
   <button
     className="btn secondary bordered disabled"
     type="button"
   >
-    Secondary Bordered Disabled
+    Go
   </button>,
 ]
 `;
@@ -384,7 +384,7 @@ exports[`Storyshots Button Icons Button Icons 1`] = `
 Array [
   <div>
     <button
-      className="btn primary iconLeft"
+      className="btn primary"
       type="button"
     >
       <svg
@@ -401,7 +401,7 @@ Array [
           fillRule="evenodd"
         />
       </svg>
-      Icon on Left
+      Icon Left
     </button>
   </div>,
   <div
@@ -412,10 +412,10 @@ Array [
     }
   >
     <button
-      className="btn primary iconRight"
+      className="btn primary"
       type="button"
     >
-      Icon on Right
+      Icon Right
       <svg
         aria-hidden="true"
         className="btn-icon"
@@ -441,43 +441,43 @@ Array [
     className="btn primary"
     type="button"
   >
-    Primary
+    Go
   </button>,
   <button
     className="btn primary bordered"
     type="button"
   >
-    Primary Bordered
+    Go
   </button>,
   <button
     className="btn primary rounded"
     type="button"
   >
-    Primary Rounded
+    Go
   </button>,
   <button
     className="btn primary bordered rounded"
     type="button"
   >
-    Primary Bordered Rounded
+    Go
   </button>,
   <button
     className="btn primary rounded raised"
     type="button"
   >
-    Primary Rounded Raised
+    Go
   </button>,
   <button
     className="btn primary block"
     type="button"
   >
-    Primary Block (aka Stacked)
+    Go
   </button>,
   <button
     className="btn primary bordered block"
     type="button"
   >
-    Primary Block Bordered (aka Stacked)
+    Go
   </button>,
 ]
 `;
@@ -488,89 +488,77 @@ Array [
     className="btn secondary"
     type="button"
   >
-    Secondary
+    Go
   </button>,
   <button
     className="btn secondary bordered"
     type="button"
   >
-    Secondary Bordered
+    Go
   </button>,
   <button
     className="btn secondary rounded"
     type="button"
   >
-    Secondary Rounded
+    Go
   </button>,
   <button
     className="btn secondary bordered rounded"
     type="button"
   >
-    Secondary Bordered Rounded
+    Go
   </button>,
   <button
     className="btn secondary rounded raised"
     type="button"
   >
-    Secondary Rounded Raised
+    Go
   </button>,
   <button
     className="btn secondary block"
     type="button"
   >
-    Secondary Block (aka Stacked)
+    Go
   </button>,
   <button
     className="btn secondary bordered block"
     type="button"
   >
-    Secondary Block Bordered (aka Stacked)
+    Go
   </button>,
 ]
 `;
 
 exports[`Storyshots Button Sizes 1`] = `
 Array [
-  <button
-    className="btn"
-    type="button"
-  >
-    Size Default
-  </button>,
   <button
     className="btn small"
     type="button"
   >
-    Size Small
+    Go
   </button>,
   <button
     className="btn large"
     type="button"
   >
-    Size Large
+    Go
   </button>,
 ]
 `;
 
 exports[`Storyshots Button Types 1`] = `
 Array [
-  <button
-    className="btn"
-    type="button"
-  >
-    Type Default (Button)
-  </button>,
   <button
     className="btn"
     type="reset"
   >
-    Type Reset
+    Go
   </button>,
   <button
     className="btn"
     type="submit"
   >
-    Type Submit
+    Go
   </button>,
 ]
 `;
diff --git a/agnosticui-react/src/stories/Button.js b/agnosticui-react/src/stories/Button.js
index 125edb98c..e7a24fc33 100644
--- a/agnosticui-react/src/stories/Button.js
+++ b/agnosticui-react/src/stories/Button.js
@@ -5,7 +5,6 @@ import styles from './button.module.css';
 const Button = ({
   children,
   mode,
-  label,
   size,
   isSkinned,
   isBordered,
@@ -13,8 +12,6 @@ const Button = ({
   isDisabled,
   isRaised,
   isBlock,
-  isIconLeft,
-  isIconRight,
   isBlank,
   css,
   type,
@@ -32,8 +29,6 @@ const Button = ({
     isDisabled ? styles.disabled : "",
     isRaised ? styles.raised : "",
     isBlock ? styles.block : "",
-    isIconLeft ? styles.iconLeft : "",
-    isIconRight ? styles.iconRight : "",
     isBlank ? styles.blank : "",
     css ? `${css}` : "",
   ];
@@ -42,26 +37,13 @@ const Button = ({
 
   return (
     <button type={type} className={klasses} onClick={onClick}>
-      <>
-        {isIconLeft && (
-          <>
-            {children}
-          </>
-        )}
-        {label}
-        {isIconRight && (
-          <>
-            {children}
-          </>
-        )}
-      </>
+      {children}
     </button>
   );
 };
 
 Button.propTypes = {
   mode: PropTypes.oneOf(['primary', 'secondary']),
-  label: PropTypes.string,
   size: PropTypes.string,
   css: PropTypes.string,
   type: PropTypes.oneOf(['reset', 'button', 'submit']),
@@ -73,13 +55,10 @@ Button.propTypes = {
   isRaised: PropTypes.bool,
   isBlock: PropTypes.bool,
   isRounded: PropTypes.bool,
-  isIconLeft: PropTypes.bool,
-  isIconRight: PropTypes.bool,
 }
 
 Button.defaultProps = {
   mode: undefined,
-  label: undefined,
   size: undefined,
   css: undefined,
   type: 'button',
@@ -91,8 +70,6 @@ Button.defaultProps = {
   isRaised: false,
   isBlock: false,
   isRounded: false,
-  isIconLeft: false,
-  isIconRight: false,
 }
 
 export const ButtonGroup = ({ ariaLabel, children, css }) => {
diff --git a/agnosticui-react/src/stories/Button.stories.js b/agnosticui-react/src/stories/Button.stories.js
index af3e35d53..c8c97b451 100644
--- a/agnosticui-react/src/stories/Button.stories.js
+++ b/agnosticui-react/src/stories/Button.stories.js
@@ -7,70 +7,67 @@ export default {
 
 export const Primary = () => (
   <>
-    <Button mode="primary" label="Primary" />
-    <Button mode="primary" label="Primary Bordered" isBordered />
-    <Button mode="primary" label="Primary Rounded" isRounded />
-    <Button mode="primary" label="Primary Bordered Rounded" isBordered isRounded />
-    <Button mode="primary" label="Primary Rounded Raised" isRaised isRounded />
-    <Button mode="primary" label="Primary Block (aka Stacked)" isBlock />
-    <Button mode="primary" label="Primary Block Bordered (aka Stacked)" isBordered isBlock />
+    <Button mode="primary">Go</Button>
+    <Button mode="primary" isBordered>Go</Button>
+    <Button mode="primary" isRounded>Go</Button>
+    <Button mode="primary" isBordered isRounded>Go</Button>
+    <Button mode="primary" isRaised isRounded>Go</Button>
+    <Button mode="primary" isBlock>Go</Button>
+    <Button mode="primary" isBordered isBlock>Go</Button>
   </>
 );
 
 export const Secondary = () => (
   <>
-    <Button mode="secondary" label="Secondary" />
-    <Button mode="secondary" label="Secondary Bordered" isBordered />
-    <Button mode="secondary" label="Secondary Rounded" isRounded />
-    <Button mode="secondary" label="Secondary Bordered Rounded" isBordered isRounded />
-    <Button mode="secondary" label="Secondary Rounded Raised" isRaised isRounded />
-    <Button mode="secondary" label="Secondary Block (aka Stacked)" isBlock />
-    <Button mode="secondary" label="Secondary Block Bordered (aka Stacked)" isBordered isBlock />
+    <Button mode="secondary">Go</Button>
+    <Button mode="secondary" isBordered>Go</Button>
+    <Button mode="secondary" isRounded>Go</Button>
+    <Button mode="secondary" isBordered isRounded>Go</Button>
+    <Button mode="secondary" isRaised isRounded>Go</Button>
+    <Button mode="secondary" isBlock>Go</Button>
+    <Button mode="secondary" isBordered isBlock>Go</Button>
   </>
 );
 
 export const Default = () => (
   <>
-    <Button label="Default" />
-    <Button label="Default Bordered" isBordered />
-    <Button label="Default Rounded" isRounded />
-    <Button label="Default Bordered Rounded" isBordered isRounded />
-    <Button label="Default Rounded Raised" isRaised isRounded />
-    <Button label="Default Block (aka Stacked)" isBlock />
-    <Button label="Default Block Bordered (aka Stacked)" isBordered isBlock />
+    <Button>Go</Button>
+    <Button isBordered>Go</Button>
+    <Button isRounded>Go</Button>
+    <Button isBordered isRounded>Go</Button>
+    <Button isRaised isRounded>Go</Button>
+    <Button isBlock>Go</Button>
+    <Button isBordered isBlock>Go</Button>
   </>
-);
+)
 
 export const Sizes = () => (
   <>
-    <Button label="Size Default" />
-    <Button label="Size Small" size="small" />
-    <Button label="Size Large" size="large" />
+    <Button size="small">Go</Button>
+    <Button size="large">Go</Button>
   </>
 );
 
 export const DisabledAll = () => (
   <>
-    <Button label="Default Disabled" isDisabled />
-    <Button mode="primary" label="Primary Disabled" isDisabled />
-    <Button mode="secondary" label="Secondary Disabled" isDisabled />
-    <Button mode="secondary" label="Secondary Bordered Disabled" isBordered isDisabled />
+    <Button isDisabled>Go</Button>
+    <Button mode="primary" isDisabled>Go</Button>
+    <Button mode="secondary" isDisabled>Go</Button>
+    <Button mode="secondary" isDisabled isBordered>Go</Button>
   </>
 );
 
 export const Types = () => (
   <>
-    <Button label="Type Default (Button)" />
-    <Button label="Type Reset" type="reset" />
-    <Button label="Type Submit" type="submit" />
+    <Button type="reset">Go</Button>
+    <Button type="submit">Go</Button>
   </>
 );
 
-
 export const Customizations = () => (
   <>
-    <Button label="Custom CSS Override" css="my-custom-css-klass" />
-    <Button label="Blank Button" isBlank />
-    <Button label="Button Base (no skin)" isSkinned={false} />
+    <Button css="my-custom-css-klass">Go</Button>
+    <Button isBlank>Go</Button>
+    <Button isSkinned={false}>Go</Button>
   </>
-);
\ No newline at end of file
+);
diff --git a/agnosticui-react/src/stories/Button.test.js b/agnosticui-react/src/stories/Button.test.js
index a08b63d14..9de103061 100644
--- a/agnosticui-react/src/stories/Button.test.js
+++ b/agnosticui-react/src/stories/Button.test.js
@@ -9,8 +9,8 @@ test('onClick fires', async () => {
   const clickHandler = () => {
     state = 'click event fired'
   }
-  const { getByText } = render(<Button onClick={clickHandler} label='Go' />);
-  const button = getByText('Go')
+  const { getByRole } = render(<Button onClick={clickHandler} />);
+  const button = getByRole('button')
 
   await fireEvent.click(button)
 
diff --git a/agnosticui-react/src/stories/ButtonGroup.stories.js b/agnosticui-react/src/stories/ButtonGroup.stories.js
index 6461760be..11da689bb 100644
--- a/agnosticui-react/src/stories/ButtonGroup.stories.js
+++ b/agnosticui-react/src/stories/ButtonGroup.stories.js
@@ -9,64 +9,64 @@ export default {
 export const All = () => (
   <>
     <ButtonGroup>
-      <Button label="One" ariaLabel="Button One" />
-      <Button label="Two" ariaLabel="Button Two" />
-      <Button label="Three" ariaLabel="Button Three" />
+      <Button ariaLabel="Button One">One</Button>
+      <Button ariaLabel="Button Two">Two</Button>
+      <Button ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button isRaised label="One" ariaLabel="Button One" />
-      <Button isRaised label="Two" ariaLabel="Button Two" />
-      <Button isRaised label="Three" ariaLabel="Button Three" />
+      <Button isRaised ariaLabel="Button One">One</Button>
+      <Button isRaised ariaLabel="Button Two">Two</Button>
+      <Button isRaised ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button isBordered label="One" ariaLabel="Button One" />
-      <Button isBordered label="Two" ariaLabel="Button Two" />
-      <Button isBordered label="Three" ariaLabel="Button Three" />
+      <Button isBordered ariaLabel="Button One">One</Button>
+      <Button isBordered ariaLabel="Button Two">Two</Button>
+      <Button isBordered ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="secondary" label="One" ariaLabel="Button One" />
-      <Button mode="secondary" label="Two" ariaLabel="Button Two" />
-      <Button mode="secondary" label="Three" ariaLabel="Button Three" />
+      <Button mode="secondary" ariaLabel="Button One">One</Button>
+      <Button mode="secondary" ariaLabel="Button Two">Two</Button>
+      <Button mode="secondary" ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="secondary" isRaised label="One" ariaLabel="Button One" />
-      <Button mode="secondary" isRaised label="Two" ariaLabel="Button Two" />
-      <Button mode="secondary" isRaised label="Three" ariaLabel="Button Three" />
+      <Button mode="secondary" isRaised ariaLabel="Button One">One</Button>
+      <Button mode="secondary" isRaised ariaLabel="Button Two">Two</Button>
+      <Button mode="secondary" isRaised ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="secondary" isBordered label="One" ariaLabel="Button One" />
-      <Button mode="secondary" isBordered label="Two" ariaLabel="Button Two" />
-      <Button mode="secondary" isBordered label="Three" ariaLabel="Button Three" />
+      <Button mode="secondary" isBordered ariaLabel="Button One">One</Button>
+      <Button mode="secondary" isBordered ariaLabel="Button Two">Two</Button>
+      <Button mode="secondary" isBordered ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" label="One" ariaLabel="Button One" />
-      <Button mode="primary" label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" ariaLabel="Button One">One</Button>
+      <Button mode="primary" ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" isRaised label="One" ariaLabel="Button One" />
-      <Button mode="primary" isRaised label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" isRaised label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" isRaised ariaLabel="Button One">One</Button>
+      <Button mode="primary" isRaised ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" isRaised ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" isBordered label="One" ariaLabel="Button One" />
-      <Button mode="primary" isBordered label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" isBordered label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" isBordered ariaLabel="Button One">One</Button>
+      <Button mode="primary" isBordered ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" isBordered ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" isDisabled label="One" ariaLabel="Button One" />
-      <Button mode="primary" label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" isDisabled ariaLabel="Button One">One</Button>
+      <Button mode="primary" ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" ariaLabel="Button Three">Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" isDisabled label="One" ariaLabel="Button One" />
-      <Button mode="primary" label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" isDisabled label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" isDisabled ariaLabel="Button One">One</Button>
+      <Button mode="primary" ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" isDisabled>Three</Button>
     </ButtonGroup>
     <ButtonGroup>
-      <Button mode="primary" isDisabled label="One" ariaLabel="Button One" />
-      <Button mode="primary" isDisabled label="Two" ariaLabel="Button Two" />
-      <Button mode="primary" isDisabled label="Three" ariaLabel="Button Three" />
+      <Button mode="primary" isDisabled ariaLabel="Button One">One</Button>
+      <Button mode="primary" isDisabled ariaLabel="Button Two">Two</Button>
+      <Button mode="primary" isDisabled>Three</Button>
     </ButtonGroup>
   </>
 )
diff --git a/agnosticui-react/src/stories/ButtonIcon.stories.js b/agnosticui-react/src/stories/ButtonIcon.stories.js
index 27758bee0..af1803b85 100644
--- a/agnosticui-react/src/stories/ButtonIcon.stories.js
+++ b/agnosticui-react/src/stories/ButtonIcon.stories.js
@@ -30,12 +30,14 @@ const SampleSvgIcon = () => {
 export const ButtonIcons = () => (
   <>
     <div>
-      <Button label="Icon on Left" mode="primary" isIconLeft={true}>
+      <Button mode="primary">
         <SampleSvgIcon />
+        Icon Left
       </Button>
     </div>
     <div style={{ marginTop: 16 }}>
-      <Button label="Icon on Right" mode="primary" isIconRight={true}>
+      <Button mode="primary">
+        Icon Right
         <SampleSvgIcon />
       </Button>
     </div>