Adding more button stuff

src/ApplicationAlert/ApplicationAlert.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import ApplicationAlert from '@harvest-profit/npk/ApplicationAlert';
-import { Maintenance } from '@harvest-profit/npk/icons';
+import * as Icons from '@harvest-profit/npk/icons';
 
-const icons = { None: null, Maintenance }
+const icons = { None: null, ...Icons }
 
 export default {
   title: 'Components/ApplicationAlert',
@@ -42,6 +42,7 @@ export default {
 }
 
 export const Default = () => <ApplicationAlert>Example of an application wide alert</ApplicationAlert>
-export const WithIcon = () => <ApplicationAlert icon={Maintenance}>We are performing a update to our services from 2am to 4am on Wednesday.</ApplicationAlert>
-export const WithIconElement = () => <ApplicationAlert icon={<Maintenance />}>Example of an application wide alert</ApplicationAlert>
+export const Playground = (props) => <ApplicationAlert {...props}>Example of an application wide alert</ApplicationAlert>
+export const WithIcon = () => <ApplicationAlert icon={Icons.MaintenanceIcon}>We are performing a update to our services from 2am to 4am on Wednesday.</ApplicationAlert>
+export const WithIconElement = () => <ApplicationAlert icon={<Icons.MaintenanceIcon />}>Example of an application wide alert</ApplicationAlert>
 export const DemoUpgrade = () => <ApplicationAlert variant="primary" as="a" href="https://harvestprofit.com/pricing">You have 6 days left on your trial. <b>Upgrade your account here »</b></ApplicationAlert>

src/Button/Button.js

@@ -1,20 +1,57 @@
 import React from 'react';
 import classes from './Button.module.css';
+import { Spinner } from '../';
 
 const Button = ({
   variant = 'default',
-  icon: Icon,
+  leadingVisual: ProvidedLeadingVisual,
+  trailingVisual: ProvidedTrailingVisual,
+  trailingAction: TrailingAction,
+  block,
+  disabled: providedDisabled,
+  loading,
+  size = 'md',
+  align = 'center',
   as: Component = 'button',
+  count,
   children,
   ...props
 }) => {
 
+  let LeadingVisual = ProvidedLeadingVisual;
+  let TrailingVisual = ProvidedTrailingVisual;
+  let textLoading;
+  let disabled = providedDisabled;
+
+  let state = '';
+
+  if (disabled) state = 'disabled';
+
+  if (Number.isFinite(count)) {
+    TrailingVisual = <span aria-hidden="true" data-component="ButtonCounter">{count}</span>;
+  }
+
+  if (loading) {
+    state = 'loading';
+    disabled = true;
+    if (LeadingVisual) {
+      LeadingVisual = <span data-component="loading"><Spinner size="sm" /></span>;
+    } else if (TrailingVisual) {
+      TrailingVisual = <span data-component="loading"><Spinner size="sm" /></span>;
+    } else {
+      textLoading = <span data-component="loading"><Spinner size="sm" /></span>;
+    }
+  }
+
   return (
-    <Component className={classes.Button} data-variant={variant} {...props}>
-      {Icon && <div className={classes.ButtonIcon}>{React.isValidElement(Icon) ? Icon : <Icon />}</div>}
-      <p className={classes.ButtonText}>
-        {children}
-      </p>
+    <Component className={classes.Button} disabled={disabled} data-alignment={align} data-size={size} data-block={block} data-state={state} data-variant={variant} {...props}>
+      <span data-component="contents" data-icon={!!(!children && (TrailingVisual || LeadingVisual))}>
+        {LeadingVisual && <span data-component="leadingVisual">{React.isValidElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}</span>}
+        {textLoading}
+        {children && <span data-component="text">{children}</span>}
+        {TrailingVisual && <span data-component="trailingVisual">{React.isValidElement(TrailingVisual) ? TrailingVisual : <TrailingVisual />}</span>}
+      </span>
+      {TrailingAction && <span data-component="trailingAction">{React.isValidElement(TrailingVisual) ? TrailingVisual : <TrailingAction />}</span>}
     </Component>
   )
 }