From 406aa929c0b06390b29136c367e6a5c5cf00afe7 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 12:28:53 -0600
Subject: [PATCH 1/9] Add missing block attr props

---
 .../Gutenberg/BlockButton/BlockButton.js      | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index eba8c950d..efd92e0ef 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -7,22 +7,32 @@ import PropTypes from 'prop-types'
  * The core Button block from Gutenberg.
  *
  * @author WebDevStudios
- * @param  {object}  props            The component properties.
- * @param  {string}  props.anchor     Optional anchor/id.
- * @param  {string}  props.className  Optional classnames.
- * @param  {string}  props.linkTarget The target for the link.
- * @param  {string}  props.rel        The rel attribute for the link.
- * @param  {string}  props.text       The link label.
- * @param  {string}  props.url        The link for the button.
- * @return {Element}                  The Button component.
+ * @param  {object}  props                    The component properties.
+ * @param  {string}  props.anchor             Optional anchor/id.
+ * @param  {string}  props.backgroundColorHex The background color hex value.
+ * @param  {number}  props.borderRadius       The border radius in pixels.
+ * @param  {string}  props.className          Optional classnames.
+ * @param  {string}  props.linkTarget         The target for the link.
+ * @param  {string}  props.rel                The rel attribute for the link.
+ * @param  {object}  props.style              The style attributes.
+ * @param  {string}  props.text               The link label.
+ * @param  {string}  props.textColorHex       The text color hex value.
+ * @param  {string}  props.url                The link for the button.
+ * @param  {number}  props.width              The width in percent.
+ * @return {Element}                          The Button component.
  */
 export default function BlockButton({
   anchor,
+  backgroundColorHex,
+  borderRadius,
   className,
   linkTarget,
   rel,
+  style,
   text,
-  url
+  textColorHex,
+  url,
+  width
 }) {
   return (
     <Button
@@ -41,9 +51,14 @@ export default function BlockButton({
 
 BlockButton.propTypes = {
   anchor: PropTypes.string,
+  backgroundColorHex: PropTypes.string,
+  border: PropTypes.number,
   className: PropTypes.string,
   linkTarget: PropTypes.string,
   rel: PropTypes.string,
+  style: PropTypes.object,
   text: PropTypes.string,
-  url: PropTypes.string
+  textColorHex: PropTypes.string,
+  url: PropTypes.string,
+  width: PropTypes.number
 }

From d9f475578b3ad8d9b00fd16c0b70fcb8759b25d1 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 13:39:33 -0600
Subject: [PATCH 2/9] Reorder props

---
 components/atoms/Button/Button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/atoms/Button/Button.js b/components/atoms/Button/Button.js
index efa17d4a5..eabbf6ce3 100644
--- a/components/atoms/Button/Button.js
+++ b/components/atoms/Button/Button.js
@@ -34,7 +34,6 @@ ButtonInner.propTypes = {
 /**
  * @param  {object}   props             The props object.
  * @param  {string}   props.attributes  Optional attributes to add to the button.
- * @param  {string}   props.tag         The wrapper tag.
  * @param  {string}   props.className   Optional classNames.
  * @param  {boolean}  props.disabled    Whether the button is disabled.
  * @param  {boolean}  props.fluid       Whether the button should be full width.
@@ -43,6 +42,7 @@ ButtonInner.propTypes = {
  * @param  {string}   props.iconLeft    Whether to render the icon on the left.
  * @param  {Function} props.onClick     Button onClick function.
  * @param  {string}   props.size        Button size.
+ * @param  {string}   props.tag         The wrapper tag.
  * @param  {string}   props.text        Button text.
  * @param  {string}   props.type        Button type.
  * @param  {string}   props.url         Button link url.
@@ -51,7 +51,6 @@ ButtonInner.propTypes = {
  */
 export default function Button({
   attributes,
-  tag,
   className,
   disabled,
   fluid,
@@ -60,6 +59,7 @@ export default function Button({
   iconLeft,
   onClick,
   size,
+  tag,
   text,
   type,
   url,

From bae56be8cdd05bf1193c49ed77068ab5e2e5741d Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 14:19:02 -0600
Subject: [PATCH 3/9] Add custom style prop to Button

---
 components/atoms/Button/Button.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/atoms/Button/Button.js b/components/atoms/Button/Button.js
index eabbf6ce3..578b6bf4f 100644
--- a/components/atoms/Button/Button.js
+++ b/components/atoms/Button/Button.js
@@ -42,6 +42,7 @@ ButtonInner.propTypes = {
  * @param  {string}   props.iconLeft    Whether to render the icon on the left.
  * @param  {Function} props.onClick     Button onClick function.
  * @param  {string}   props.size        Button size.
+ * @param  {object}   props.style       Custom button styles.
  * @param  {string}   props.tag         The wrapper tag.
  * @param  {string}   props.text        Button text.
  * @param  {string}   props.type        Button type.
@@ -59,6 +60,7 @@ export default function Button({
   iconLeft,
   onClick,
   size,
+  style,
   tag,
   text,
   type,
@@ -82,6 +84,7 @@ export default function Button({
         href={url}
         className={buttonClassNames}
         aria-label={text}
+        style={style}
         {...attributes}
       >
         <ButtonInner
@@ -93,7 +96,12 @@ export default function Button({
       </a>
     ) : (
       <NextLink href={url}>
-        <a className={buttonClassNames} aria-label={text} {...attributes}>
+        <a
+          className={buttonClassNames}
+          aria-label={text}
+          style={style}
+          {...attributes}
+        >
           <ButtonInner
             icon={icon}
             iconOnly={iconOnly}
@@ -113,7 +121,8 @@ export default function Button({
           'aria-label': text,
           onClick,
           ...attributes,
-          disabled
+          disabled,
+          style
         },
         <ButtonInner
           icon={icon}
@@ -136,6 +145,11 @@ Button.propTypes = {
   iconLeft: PropTypes.bool,
   onClick: PropTypes.func,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  style: PropTypes.shape({
+    background: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string
+  }),
   tag: PropTypes.string,
   text: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['primary', 'secondary']),

From 6f24ba9373be21c2115e094c06a3448be10f382f Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 14:20:44 -0600
Subject: [PATCH 4/9] Pass styles through button block

---
 .../Gutenberg/BlockButton/BlockButton.js      | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index efd92e0ef..caf631272 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -34,17 +34,30 @@ export default function BlockButton({
   url,
   width
 }) {
+  // Determine background and text colors, using stylelint-accepted const names.
+  const backgroundcolor =
+    backgroundColorHex || style?.color?.background || 'inherit'
+  const textcolor = textColorHex || style?.color?.text || 'inherit'
+
+  // Create style object for button.
+  const buttonStyle = {
+    background: style?.color?.gradient || 'inherit',
+    backgroundColor: backgroundcolor,
+    color: textcolor
+  }
+
   return (
     <Button
-      className={className}
-      text={text}
-      url={url}
-      urlExternal={true}
       attributes={{
         id: anchor || null,
         target: linkTarget || null,
         rel: rel || null
       }}
+      className={className}
+      style={buttonStyle}
+      text={text}
+      url={url}
+      urlExternal={true}
     />
   )
 }

From fdba5e4afef8ad436a44b712897a1d686167660a Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 14:22:28 -0600
Subject: [PATCH 5/9] Add border radius support

---
 components/atoms/Button/Button.js                      | 1 +
 components/blocks/Gutenberg/BlockButton/BlockButton.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/atoms/Button/Button.js b/components/atoms/Button/Button.js
index 578b6bf4f..781a6be6b 100644
--- a/components/atoms/Button/Button.js
+++ b/components/atoms/Button/Button.js
@@ -148,6 +148,7 @@ Button.propTypes = {
   style: PropTypes.shape({
     background: PropTypes.string,
     backgroundColor: PropTypes.string,
+    borderRadius: PropTypes.string,
     color: PropTypes.string
   }),
   tag: PropTypes.string,
diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index caf631272..db1a1d1ac 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -43,6 +43,7 @@ export default function BlockButton({
   const buttonStyle = {
     background: style?.color?.gradient || 'inherit',
     backgroundColor: backgroundcolor,
+    borderRadius: `${borderRadius}px`,
     color: textcolor
   }
 
@@ -65,7 +66,7 @@ export default function BlockButton({
 BlockButton.propTypes = {
   anchor: PropTypes.string,
   backgroundColorHex: PropTypes.string,
-  border: PropTypes.number,
+  borderRadius: PropTypes.number,
   className: PropTypes.string,
   linkTarget: PropTypes.string,
   rel: PropTypes.string,

From 0f6b64f3214a8ac62aa30f095356b8a66f636e74 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 14:42:16 -0600
Subject: [PATCH 6/9] Add flex wrap to button group

---
 components/molecules/ButtonGroup/ButtonGroup.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/molecules/ButtonGroup/ButtonGroup.module.css b/components/molecules/ButtonGroup/ButtonGroup.module.css
index a2fc9da8d..c90ed8a2b 100644
--- a/components/molecules/ButtonGroup/ButtonGroup.module.css
+++ b/components/molecules/ButtonGroup/ButtonGroup.module.css
@@ -2,7 +2,7 @@
   @apply mb-8;
 
   &.horizontal {
-    @apply flex;
+    @apply flex flex-wrap;
   }
 
   &.center {

From b90055e177f2db276a058e6782c954391307a9c1 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 14:45:09 -0600
Subject: [PATCH 7/9] Add width to button handling

---
 components/atoms/Button/Button.js                      | 3 ++-
 components/blocks/Gutenberg/BlockButton/BlockButton.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/atoms/Button/Button.js b/components/atoms/Button/Button.js
index 781a6be6b..e53451492 100644
--- a/components/atoms/Button/Button.js
+++ b/components/atoms/Button/Button.js
@@ -149,7 +149,8 @@ Button.propTypes = {
     background: PropTypes.string,
     backgroundColor: PropTypes.string,
     borderRadius: PropTypes.string,
-    color: PropTypes.string
+    color: PropTypes.string,
+    width: PropTypes.string
   }),
   tag: PropTypes.string,
   text: PropTypes.string.isRequired,
diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index db1a1d1ac..66712c046 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -44,7 +44,8 @@ export default function BlockButton({
     background: style?.color?.gradient || 'inherit',
     backgroundColor: backgroundcolor,
     borderRadius: `${borderRadius}px`,
-    color: textcolor
+    color: textcolor,
+    width: width ? `${width}%` : 'auto'
   }
 
   return (

From 6f9453f1d370aef1c73c905ec472c96dd928708d Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 15:04:54 -0600
Subject: [PATCH 8/9] Add handling for style outline

---
 components/atoms/Button/Button.js             | 40 ++++++++++---------
 components/atoms/Button/Button.module.css     |  5 +++
 .../Gutenberg/BlockButton/BlockButton.js      |  7 ++++
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/components/atoms/Button/Button.js b/components/atoms/Button/Button.js
index e53451492..53bc583c6 100644
--- a/components/atoms/Button/Button.js
+++ b/components/atoms/Button/Button.js
@@ -32,23 +32,24 @@ ButtonInner.propTypes = {
 }
 
 /**
- * @param  {object}   props             The props object.
- * @param  {string}   props.attributes  Optional attributes to add to the button.
- * @param  {string}   props.className   Optional classNames.
- * @param  {boolean}  props.disabled    Whether the button is disabled.
- * @param  {boolean}  props.fluid       Whether the button should be full width.
- * @param  {string}   props.icon        Icon to render inside the button.
- * @param  {boolean}  props.iconOnly    Whether this button should render as an icon only button.
- * @param  {string}   props.iconLeft    Whether to render the icon on the left.
- * @param  {Function} props.onClick     Button onClick function.
- * @param  {string}   props.size        Button size.
- * @param  {object}   props.style       Custom button styles.
- * @param  {string}   props.tag         The wrapper tag.
- * @param  {string}   props.text        Button text.
- * @param  {string}   props.type        Button type.
- * @param  {string}   props.url         Button link url.
- * @param  {boolean}  props.urlExternal Whether the url on this button links to an external site.
- * @return {Element}                    The button component.
+ * @param  {object}   props              The props object.
+ * @param  {string}   props.attributes   Optional attributes to add to the button.
+ * @param  {string}   props.className    Optional classNames.
+ * @param  {boolean}  props.disabled     Whether the button is disabled.
+ * @param  {boolean}  props.fluid        Whether the button should be full width.
+ * @param  {string}   props.icon         Icon to render inside the button.
+ * @param  {boolean}  props.iconOnly     Whether this button should render as an icon only button.
+ * @param  {string}   props.iconLeft     Whether to render the icon on the left.
+ * @param  {Function} props.onClick      Button onClick function.
+ * @param  {string}   props.size         Button size.
+ * @param  {object}   props.style        Custom button styles.
+ * @param  {boolean}  props.styleOutline Whether this button has the outline style.
+ * @param  {string}   props.tag          The wrapper tag.
+ * @param  {string}   props.text         Button text.
+ * @param  {string}   props.type         Button type.
+ * @param  {string}   props.url          Button link url.
+ * @param  {boolean}  props.urlExternal  Whether the url on this button links to an external site.
+ * @return {Element}                     The button component.
  */
 export default function Button({
   attributes,
@@ -61,6 +62,7 @@ export default function Button({
   onClick,
   size,
   style,
+  styleOutline,
   tag,
   text,
   type,
@@ -75,7 +77,8 @@ export default function Button({
     fluid && styles.fluid,
     disabled && styles.disabled,
     styles[size],
-    styles[type]
+    styles[type],
+    styleOutline && styles.styleOutline
   )
 
   if (url) {
@@ -152,6 +155,7 @@ Button.propTypes = {
     color: PropTypes.string,
     width: PropTypes.string
   }),
+  styleOutline: PropTypes.bool,
   tag: PropTypes.string,
   text: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['primary', 'secondary']),
diff --git a/components/atoms/Button/Button.module.css b/components/atoms/Button/Button.module.css
index 58add4350..050960708 100644
--- a/components/atoms/Button/Button.module.css
+++ b/components/atoms/Button/Button.module.css
@@ -62,4 +62,9 @@
       @apply m-0;
     }
   }
+
+  /* STYLES */
+  &.styleOutline {
+    border: 2px solid;
+  }
 }
diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index 66712c046..8811805af 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -48,6 +48,12 @@ export default function BlockButton({
     width: width ? `${width}%` : 'auto'
   }
 
+  // Extract button style.
+  const styleOutline = className.includes('is-style-outline')
+
+  // Remove styles from className.
+  className.replace('is-style-outline', '').replace('is-style-fill', '')
+
   return (
     <Button
       attributes={{
@@ -57,6 +63,7 @@ export default function BlockButton({
       }}
       className={className}
       style={buttonStyle}
+      styleOutline={styleOutline}
       text={text}
       url={url}
       urlExternal={true}

From 23d8e02e45e44533d23b55294e64e66e3ea426b6 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Thu, 3 Jun 2021 15:19:06 -0600
Subject: [PATCH 9/9] Adds checks to avoid errors

---
 components/blocks/Gutenberg/BlockButton/BlockButton.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js
index 8811805af..73146af45 100644
--- a/components/blocks/Gutenberg/BlockButton/BlockButton.js
+++ b/components/blocks/Gutenberg/BlockButton/BlockButton.js
@@ -49,10 +49,11 @@ export default function BlockButton({
   }
 
   // Extract button style.
-  const styleOutline = className.includes('is-style-outline')
+  const styleOutline = className && className.includes('is-style-outline')
 
   // Remove styles from className.
-  className.replace('is-style-outline', '').replace('is-style-fill', '')
+  className &&
+    className.replace('is-style-outline', '').replace('is-style-fill', '')
 
   return (
     <Button