Simplify button icon position

Author: itsamoreh

components/atoms/Button/Button.js

@@ -8,21 +8,17 @@ import styles from './Button.module.css'
 /**
  * Render the common inner part of the button component.
  *
- * @param {object}  props              The props object.
- * @param {string}  props.icon         Optional icon.
- * @param {boolean} props.iconOnly     Whether this button is an icon only.
- * @param {string}  props.iconPosition Position to render the icon.
- * @param {string}  props.text         Button text or aria-label.
- * @return {Element}                   The inside of the Button component.
+ * @param {object}  props          The props object.
+ * @param {string}  props.icon     Optional icon.
+ * @param {boolean} props.iconOnly Whether this button is an icon only.
+ * @param {string}  props.text     Button text or aria-label.
+ * @return {Element}               The inside of the Button component.
  */
-function ButtonInner({icon, iconOnly, iconPosition, text}) {
+function ButtonInner({icon, iconOnly, text}) {
   return (
     <>
-      {icon && iconPosition === 'left' && (
-        <Icon icon={icon} title={text} ariaHidden={text ? true : false} />
-      )}
       {!iconOnly && <span className={styles.text}>{text}</span>}
-      {icon && iconPosition === 'right' && (
+      {icon && (
         <Icon icon={icon} title={text} ariaHidden={text ? true : false} />
       )}
     </>
@@ -32,27 +28,26 @@ function ButtonInner({icon, iconOnly, iconPosition, text}) {
 ButtonInner.propTypes = {
   icon: PropTypes.string,
   iconOnly: PropTypes.bool,
-  iconPosition: PropTypes.bool,
   text: PropTypes.string
 }
 
 /**
- * @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.
- * @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.iconPosition Position to render the icon.
- * @param {Function} props.onClick      Button onClick function.
- * @param {string}   props.size         Button size.
- * @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.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.
+ * @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 {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,
@@ -62,7 +57,7 @@ export default function Button({
   fluid,
   icon,
   iconOnly,
-  iconPosition,
+  iconLeft,
   onClick,
   size,
   text,
@@ -74,6 +69,7 @@ export default function Button({
     styles.button,
     className,
     iconOnly && styles.iconOnly,
+    iconLeft && styles.iconLeft,
     fluid && styles.fluid,
     disabled && styles.disabled,
     styles[size],
@@ -91,7 +87,7 @@ export default function Button({
         <ButtonInner
           icon={icon}
           iconOnly={iconOnly}
-          iconPosition={iconPosition}
+          iconLeft={iconLeft}
           text={text}
         />
       </a>
@@ -101,7 +97,7 @@ export default function Button({
           <ButtonInner
             icon={icon}
             iconOnly={iconOnly}
-            iconPosition={iconPosition}
+            iconLeft={iconLeft}
             text={text}
           />
         </a>
@@ -122,7 +118,7 @@ export default function Button({
         <ButtonInner
           icon={icon}
           iconOnly={iconOnly}
-          iconPosition={iconPosition}
+          iconLeft={iconLeft}
           text={text}
         />
       )
@@ -137,7 +133,7 @@ Button.propTypes = {
   fluid: PropTypes.bool,
   icon: PropTypes.string,
   iconOnly: PropTypes.bool,
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconLeft: PropTypes.bool,
   onClick: PropTypes.func,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   tag: PropTypes.string,
@@ -150,7 +146,7 @@ Button.propTypes = {
 Button.defaultProps = {
   disabled: false,
   iconOnly: false,
-  iconPosition: 'left',
+  iconLeft: false,
   size: 'md',
   tag: 'button',
   type: 'primary',

components/atoms/Button/Button.module.css

@@ -1,25 +1,25 @@
 .button {
   @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase font-secondary;
 
+  & svg {
+    @apply ml-12;
+  }
+
+  &.iconLeft {
+    @apply flex-row-reverse;
+
+    & svg {
+      @apply mr-12 ml-0;
+    }
+  }
+
   &:hover,
   &:focus,
   &:active:not([disabled]) {
     @apply no-underline;
   }
 
   /* SIZES */
-  &.lg,
-  &.md,
-  &.sm {
-    & svg + span {
-      @apply ml-12;
-    }
-
-    & span + svg {
-      @apply ml-12;
-    }
-  }
-
   &.lg {
     @apply px-16 py-12 text-h5;
 
@@ -62,4 +62,10 @@
   &.disabled {
     @apply cursor-not-allowed;
   }
+
+  &.iconOnly {
+    & svg {
+      @apply m-0;
+    }
+  }
 }

components/atoms/Button/Button.stories.mdx

@@ -103,15 +103,15 @@ Buttons can contain an icon with text or just an icon.
   </Story>
 </Canvas>
 
-## Icon Position
+## Icon Left
 
-Icons are positioned on the left by default. Set `iconPoisition` to `right` to render the icon to the right of the text.
+Icons are positioned on the right by default. Set `iconLeft` to `true` to render the icon to the left of the text.
 
 <Canvas>
   <Story name="Icon Position">
     <Button
       icon="arrowLeft"
-      iconPosition="right"
+      iconLeft={true}
       type="secondary"
       text="Button with icon"
       className="mx-8"

components/organisms/Hero/Hero.js

@@ -37,7 +37,6 @@ export default function Hero({backgroundImage, body, cta, subtitle, title}) {
             icon={cta.icon ? cta.icon : null}
             text={cta.text ? cta.text : null}
             type="primary"
-            iconPosition="right"
             size="md"
           />
         )}

components/organisms/MediaText/MediaText.js

@@ -43,7 +43,6 @@ export default function MediaText({
               url={cta.url ? cta.url : null}
               text={cta.text ? cta.text : null}
               icon={cta.icon ? cta.icon : null}
-              iconPosition="right"
               type="primary"
               size="md"
             />