Adding more stuff to buttons

src/Button/Button.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classes from './Button.module.css';
-import { Spinner } from '../';
+import { Spinner, Tooltip } from '../';
 
 const Button = ({
   variant = 'default',
+  icon,
   leadingVisual: ProvidedLeadingVisual,
   trailingVisual: ProvidedTrailingVisual,
   trailingAction: TrailingAction,
@@ -20,6 +21,7 @@ const Button = ({
   ...props
 }) => {
 
+  const ref = useRef();
   let LeadingVisual = ProvidedLeadingVisual;
   let TrailingVisual = ProvidedTrailingVisual;
   let textLoading;
@@ -33,6 +35,12 @@ const Button = ({
     TrailingVisual = <span aria-hidden="true" data-component="ButtonChip">{chip}</span>;
   }
 
+  if (icon) {
+    LeadingVisual = icon;
+
+    if (!props['aria-label'] && !props['aria-describedby']) console.warn('Please provide a tooltip to this button.')
+  }
+
   if (loading) {
     state = 'loading';
     disabled = true;
@@ -46,15 +54,22 @@ const Button = ({
   }
 
   return (
-    <Component className={classes.Button} disabled={disabled} data-alignment={align} data-size={size} data-block={block} data-elevated={elevated} data-invisible={invisible} 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(TrailingAction) ? TrailingAction : <TrailingAction />}</span>}
-    </Component>
+    <>
+      <Component ref={ref} className={classes.Button} disabled={disabled} data-alignment={align} data-size={size} data-block={block} data-elevated={elevated} data-invisible={invisible} 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(TrailingAction) ? TrailingAction : <TrailingAction />}</span>}
+      </Component>
+      {props['aria-label'] && (
+        <Tooltip targetRef={ref}>
+          {props['aria-label']}
+        </Tooltip>
+      )}
+    </>
   )
 }
 

src/Button/Button.stories.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import Button from '@harvest-profit/npk/Button';
+import Tooltip from '@harvest-profit/npk/Tooltip';
 import * as Icons from '@harvest-profit/npk/icons/regular';
 
 const icons = { None: null, ...Icons }
 
 export default {
-  title: 'WIP/Buttons',
+  title: 'Components/Buttons',
   component: Button,
   argTypes: {
     leadingVisual: {
@@ -105,5 +106,79 @@ export default {
   }
 }
 
-export const Default = () => <Button>Example of an application wide alert</Button>
+export const Default = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button>default</Button>
+  <Button loading>default</Button>
+  <Button disabled>Disabled</Button>
+  <Button leadingVisual={Icons.ExportIcon}>Leading Vis</Button>
+  <Button leadingVisual={Icons.ExportIcon} loading>Leading Vis</Button>
+  <Button trailingVisual={Icons.ExportIcon}>Trailing Vis</Button>
+  <Button leadingVisual={Icons.ExportIcon} trailingAction={Icons.DropdownIndicatorIcon}>Dropdown</Button>
+  <Button leadingVisual={Icons.ExportIcon} chip="10">With Chip</Button>
+  <Button size="sm">Small</Button>
+</div>
+
+export const Primary = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button variant="primary">Primary</Button>
+  <Button variant="primary" loading>Primary</Button>
+  <Button variant="primary" disabled>Disabled</Button>
+  <Button variant="primary" leadingVisual={Icons.ExportIcon}>Leading Vis</Button>
+  <Button variant="primary" leadingVisual={Icons.ExportIcon} loading>Leading Vis</Button>
+  <Button variant="primary" trailingVisual={Icons.ExportIcon}>Trailing Vis</Button>
+  <Button variant="primary" leadingVisual={Icons.ExportIcon} trailingAction={Icons.DropdownIndicatorIcon}>Dropdown</Button>
+  <Button variant="primary" leadingVisual={Icons.ExportIcon} chip="10">With Chip</Button>
+  <Button variant="primary" size="sm">Small</Button>
+</div>
+
+export const Danger = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button variant="danger">danger</Button>
+  <Button variant="danger" loading>danger</Button>
+  <Button variant="danger" disabled>Disabled</Button>
+  <Button variant="danger" leadingVisual={Icons.ExportIcon}>Leading Vis</Button>
+  <Button variant="danger" leadingVisual={Icons.ExportIcon} loading>Leading Vis</Button>
+  <Button variant="danger" trailingVisual={Icons.ExportIcon}>Trailing Vis</Button>
+  <Button variant="danger" leadingVisual={Icons.ExportIcon} trailingAction={Icons.DropdownIndicatorIcon}>Dropdown</Button>
+  <Button variant="danger" leadingVisual={Icons.ExportIcon} chip="10">With Chip</Button>
+  <Button variant="danger" size="sm">Small</Button>
+</div>
+
+export const Elevated = () => <div>
+
+  <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+    <Button variant="danger" elevated>Delete Selected</Button>
+    <Button elevated leadingVisual={Icons.EditIcon}>Bulk Edit</Button>
+    <Button elevated leadingVisual={Icons.ExportIcon} trailingAction={Icons.DropdownIndicatorIcon} chip="12">Export</Button>
+  </div>
+
+
+  <h4>CTAs</h4>
+  <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+    <Button elevated size="lg" leadingVisual={Icons.ExportIcon}>Export</Button>
+    <Button variant="primary" size="lg" elevated leadingVisual={Icons.AddIcon} loading>Adding Item...</Button>
+    <Button variant="primary" size="lg" elevated leadingVisual={Icons.AddIcon} trailingAction={Icons.DropdownIndicatorIcon}>Add Something</Button>
+  </div>
+</div>
+
+
+export const IconButtons = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button variant="primary" icon={Icons.ExportIcon} aria-label="Primary Export" />
+  <Button variant="danger" icon={Icons.ExportIcon} aria-label="Destructive Export" />
+  <Button icon={Icons.ExportIcon} aria-label="Export" />
+  <Button icon={Icons.ExportIcon} />
+</div>
+
+export const Invisible = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button variant="primary" invisible>Primary</Button>
+  <Button variant="danger" invisible>Primary</Button>
+  <Button invisible>Primary</Button>
+  <Button invisible loading>Primary</Button>
+  <Button invisible disabled>Disabled</Button>
+  <Button invisible chip="Beta">With Chip</Button>
+</div>
+
+export const WithTooltip = () => <div style={{ display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <Button aria-label="Hello!">I have a Tooltip</Button>
+  <Button aria-describedby="btn-tooltip-id">Described By</Button>
+  <Tooltip id="btn-tooltip-id">Describedby Tooltip</Tooltip>
+</div>
 export const Playground = (props) => <Button {...props} />

src/Button/Usage.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories.jsx';
+
+<Meta of={ButtonStories} />
+
+# Buttons
+
+
+### Default
+<small>Use: General</small>
+
+Default buttons should be used for everything by default. These are made to look clickable.
+<Canvas of={ButtonStories.Default} />
+
+### Primary
+<small>Use: Primary Actions</small>
+
+Primary buttons should be used to indicate a call to action, indicating to the user that it is the
+main way to interact with the content.
+<Canvas of={ButtonStories.Primary} />
+
+### Danger
+<small>Use: Destructive Actions</small>
+
+Danger buttons should be used to indicate a destructive action. 
+<Canvas of={ButtonStories.Danger} />
+
+### Elevated
+<small>Use: Bulk Actions, Main CTA</small>
+
+Elevated buttons are used to display actions on tables for things like bulk actions as well as 
+`size="lg"` buttons which are used for the main CTA set of buttons on the top right of the page.
+**Do not mix invisible and elevated.**
+
+These buttons have a little shadow and is intended for them to stick out just a little bit more.
+<Canvas of={ButtonStories.Elevated} />
+
+### Invisible
+<small>Use: Minor Actions</small>
+
+Invisible buttons are used as clickable elements while remaining minimal in the UI. This is good for
+minor features and clickable items within blocks of text. **Do not mix invisible and elevated.**
+<Canvas of={ButtonStories.Invisible} />
+
+### Icon Buttons
+**All icons buttons should use `aria-label` to specify a tooltip.**. These are great for buttons that take up minimal
+amount of size. A warning will be logged to the console if the tooltip is missing.
+<Canvas of={ButtonStories.IconButtons} />
+
+### Tooltips & Buttons
+You can specify the `aria-label` prop to add a tooltip to a button. You can also use the `aria-describedby`
+prop and a tooltip with an id to link them together.
+<Canvas of={ButtonStories.WithTooltip} />
+
+## Props
+
+<Controls />