Fix/consolidate buttons links (#26)

* fix: link css, delete disabled link stylings and remove old link imports in other scss files * fix: link pattern pseudo class order and added dark mode stylings * fix: clean up button css and re-organize stories * fix: add color property in segment buttons * chore: update vite-builder npm package so MDX works, remove Canvas and Docs from storybook tool bar and added Introduction MDX * chore: button font color and add aria-label to story * fix: review comments for spell check, color/fill, type and aria controls * fix: issue with aria-label showing undefined and bump builder-vite package * fix: remove font weight change in hover and focus for buttons, adjust CTA button padding for height * fix: use token for letter spacing * fix: height issue with padding/border-width * fix: border colors in pseudo classes and variants, add variant control * fix: buttons in card were affected by btn changes * fix: cta button height and float action z-index/position
US-CBP · Apr 26, 2023 · 4006d96 · 4006d96
1 parent 3fade40
commit 4006d96
Show file tree

Hide file tree

Showing 33 changed files with 963 additions and 1,032 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/styles/.storybook/main.cjs b/packages/styles/.storybook/main.cjs
@@ -9,7 +9,6 @@ module.exports = {
       name: "@storybook/addon-essentials",
       options: {
         backgrounds: false,
-        docs: false,
         measure: false,
         outline: false,
       }
@@ -23,7 +22,7 @@ module.exports = {
       },
     },
     "@storybook/addon-interactions",
-    "@storybook/addon-links",
+    "@storybook/addon-links"
   ],
   "staticDirs": [
     "../dist",

diff --git a/packages/styles/.storybook/preview.cjs b/packages/styles/.storybook/preview.cjs
@@ -51,6 +51,10 @@ export const parameters = {
       disable: true,
     },
   },
+  previewTabs: {
+    canvas: { hidden: true },
+    'storybook/docs/panel': { hidden: true }
+  },
   viewport: {
     viewports: CUSTOM_VIEWPORTS,
   },

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -23,7 +23,7 @@
     "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-styling": "^0.3.2",
-    "@storybook/builder-vite": "^0.4.0",
+    "@storybook/builder-vite": "^0.4.2",
     "@storybook/html": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@whitespace/storybook-addon-html": "^5.1.1",

diff --git a/packages/styles/src/components/button/button.md b/packages/styles/src/components/button/button.md
@@ -0,0 +1,26 @@
+# Button
+
+**Variants**
+- Default
+- Square
+- Floating Action
+- Call-to-Action
+
+**Color**
+- Primary
+- Secondary
+- Danger
+
+**Fill**
+- Solid
+- Outline
+- Ghost
+
+### Components Affected
+
+1. Input Group
+2. Breadcrumb
+3. Form Inputs
+4. File Upload (Button Focus)
+5. Drawer (Button Focus)
+6. Banner (`_mixin.scss`)
diff --git a/packages/styles/src/components/button/button.stories.js b/packages/styles/src/components/button/button.stories.js
@@ -1,65 +1,172 @@
 export default {
   title: 'Patterns/Button',
-  argType: {
-    className: { control: 'text' }
+  parameters: {
+    layout: 'centered',
   },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'When `[disabled="true"]` attribute is present, specifies that the button should be disabled. A disabled button is unusable and un-clickable.',
+      control: 'boolean'
+    }
+  }
 };
 
-const Template = ({ className }) => {
-  return `
-    <button class="${className}">
-      <i class="fas fa-clipboard-check"></i>
-      vet passenger
-    </button>
-  `;
-};
+const setBtnFill = (color, fill) => {
+  const btnColor = `cbp-btn__${color}`
 
-export const Primary = Template.bind({});
-Primary.args = {
-  className: 'cbp-btn cbp-btn__primary'
-};
+  if (fill === 'solid') {
+    return btnColor;
+  } else {
+    return `${btnColor}-${fill}`
+  }
+}
 
-export const PrimaryOutline = Template.bind({});
-PrimaryOutline.args = {
-  className: 'cbp-btn cbp-btn__primary--outline'
-};
-
-export const PrimaryGhost = Template.bind({});
-PrimaryGhost.args = {
-  className: 'cbp-btn cbp-btn__primary--ghost'
-};
+const Template = ({ variant, color, fill, label, disabled, type, ariaLabel }) => (
+  `
+    <button
+      class="${variant === 'default' ? 'cbp-btn' : 'cbp-btn-square'} ${setBtnFill(color, fill)}"
+      type=${type}
+      ${disabled ? "disabled='true'" : ''}
+      ${variant === 'default' ? '' : 'aria-label=' + ariaLabel}
+    >
+      <i class="fas fa-clipboard-check"></i>
+      ${variant === 'default' ? label : ''}
+    </button>
+  `
+);
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  className: 'cbp-btn cbp-btn__secondary'
-};
+const FloatingActionTemplate = ({ color, disabled, ariaLabel }) => (
+  `
+    <button 
+      class="cbp-btn cbp-btn__${color}-float"
+      type="button"
+      aria-label="${ariaLabel}"
+      ${disabled ? "disabled='true'" : ''}
+    >
+      <i class="fas fa-arrow-up"></i>
+    </button>
+  `
+)
 
-export const SecondaryOutline = Template.bind({});
-SecondaryOutline.args = {
-  className: 'cbp-btn cbp-btn__secondary--outline'
-};
+const CTATemplate = ({ label, disabled, type }) => (
+  `
+    <button
+      class="cbp-btn-cta cbp-btn__primary"
+      type=${type}
+      ${disabled ? "disabled='true'" : ''}
+    >
+      <i class="fas fa-clipboard-check"></i>
+      ${label}
+    </button>
+  `
+);
 
-export const SecondaryGhost = Template.bind({});
-SecondaryGhost.args = {
-  className: 'cbp-btn cbp-btn__secondary--ghost'
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'default',
+  color: 'primary',
+  fill: 'solid',
+  label: 'Default',
+  type: 'button',
+  disabled: false,
+  ariaLabel: ''
 };
+Default.argTypes = {
+  variant: {
+    name: 'Button Variant',
+    description: 'Choose button variant',
+    control: 'radio',
+    options: ['default', 'square']
+  },
+  label: {
+    name: 'Button Label',
+    description: 'Label text in the `<button>` element and used to describe the action when clicked.',
+    control: 'text'
+  },
+  color: {
+    name: 'Button Color',
+    description: '`primary` is generally the dominant action among their peer buttons, `secondary` is the most common to appear but is not the dominant action over its peers, `danger` can indicate an action that cannot easily be undone.',
+    control: 'radio',
+    options: [
+      'primary',
+      'secondary',
+      'danger'
+    ]
+  },
+  fill: {
+    name: 'Button Fill',
+    description: 'Displays button fill in the overall button hierarchy. Available options are: `Solid`, `Outline` and `Ghost`.',
+    control: 'select',
+    options: [
+      'solid',
+      'outline',
+      'ghost'
+    ],
+  },
+  type: {
+    name: 'Button Type Attribute',
+    description: 'The `type` attribute sets the default behavior of the button',
+    defaultValue: 'button',
+    control: 'radio',
+    options: [
+      'submit',
+      'reset',
+      'button'
+    ]
+  },
+  ariaLabel: { 
+    name: 'Aria Label Attribute',
+    description: 'When a button displays an icon without a label, `aria-label` should be set to define the accessible label.',
+    control: 'text'
+  }
+}
 
-export const Danger = Template.bind({});
-Danger.args = {
-  className: 'cbp-btn cbp-btn__danger'
+export const FloatingActionButton = FloatingActionTemplate.bind({});
+FloatingActionButton.args = {
+  color: 'primary',
+  ariaLabel: 'back to top',
+  disabled: false
 };
+FloatingActionButton.argTypes = {
+  color: {
+    name: 'Button Color',
+    description: 'The floating action button is reserved for actions that must be accessible above all other content because of the nature of what they do.',
+    control: 'radio',
+    options: [
+      'primary',
+      'secondary'
+    ]
+  },
+  ariaLabel: { 
+    name: 'Aria Label Attribute',
+    description: 'When a button displays an icon without a label, `aria-label` should be set to define the accessible label.',
+    control: 'text'
+  }
+}
+FloatingActionButton.storyName = 'Floating Action';
 
-export const DangerOutline = Template.bind({});
-DangerOutline.args = {
-  className: 'cbp-btn cbp-btn__danger--outline'
+export const CTAButton = CTATemplate.bind({});
+CTAButton.args = {
+  label: 'Call-To-Action',
+  disabled: false
 };
-
-export const DangerGhost = Template.bind({});
-DangerGhost.args = {
-  className: 'cbp-btn cbp-btn__danger--ghost'
+CTAButton.argTypes = {
+  label: {
+    name: 'Button Label',
+    description: 'Label text in the `<button>` element and used to describe the action when clicked. There should be no more than one of these on any given page, **CTA buttons are not part of a group and should be the only option given**.',
+    control: 'text'
+  },
+  type: {
+    name: 'Button Type Attribute',
+    description: 'The `type` attribute sets the default behavior of the button',
+    defaultValue: 'button',
+    control: 'radio',
+    options: [
+      'submit',
+      'reset',
+      'button'
+    ]
+  },
 };
-
-export const CTAButton = Template.bind({});
-CTAButton.args = {
-  className: 'cbp-btn cbp-btn__cta'
-};
+CTAButton.storyName = 'Call-To-Action';