Bugfix/button variants and anchor (#93)

* code formatting * Made some tweaks to the reset.css * Added missing variants and anchor buttons to button component * deleted commented code
US-CBP · Nov 3, 2023 · 8772284 · 8772284
1 parent d45e476
commit 8772284
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 103 deletions.
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js
@@ -11,23 +11,32 @@ function getAbsolutePath(value) {
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [getAbsolutePath('@whitespace/storybook-addon-html'), {
-    name: '@storybook/addon-essentials',
-    options: {
-      backgrounds: false,
-      measure: false,
-      outline: false
-    }
-  }, getAbsolutePath('@storybook/addon-themes'), getAbsolutePath('@storybook/addon-interactions'), getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-a11y')],
-  staticDirs: ['../dist', '../assets'],
+  addons: [
+    getAbsolutePath('@whitespace/storybook-addon-html'), 
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        measure: false,
+        outline: false
+      }
+    }, 
+    getAbsolutePath('@storybook/addon-themes'), 
+    getAbsolutePath('@storybook/addon-interactions'), 
+    getAbsolutePath('@storybook/addon-links'), 
+    getAbsolutePath('@storybook/addon-a11y')
+  ],
+  staticDirs: [
+    '../dist',
+    '../assets'
+  ],
   framework: {
     name: getAbsolutePath('@storybook/html-vite'),
     options: {}
   },
   core: {
-    disableTelemetry: true // 👈 Disables telemetry
+    disableTelemetry: true
   },
-
   features: {
     storyStoreV7: true
   },

diff --git a/packages/web-components/src/components/cbp-app/reset.scss b/packages/web-components/src/components/cbp-app/reset.scss
@@ -1,7 +1,20 @@
-/* 
-  https://github.com/Andy-set-studio/modern-css-reset
-  License: MIT
-*/
+/* Prevent iPhones from messing up the font size in landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
 
 /* Box sizing rules */
 *,
@@ -36,17 +49,6 @@ ol[role="list"] {
   padding: 0;
 }
 
-/* Set core root defaults */
-html:focus-within {
-  scroll-behavior: smooth;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
 
 /* A elements that don't have a class get default styles */
 a:not([class]) {
@@ -62,14 +64,6 @@ picture {
 img[width][height] {
   height: auto; /* Preserve aspect ratio */
 }
-/* Let SVG scale without boundaries */
-/*
-img[src$=".svg"] {
-  width: 100%;
-  height: auto;
-  max-width: none;
-}
-*/
 
 /* Inherit fonts for inputs and buttons */
 input,
@@ -82,16 +76,15 @@ address {
   word-spacing: inherit;
 }
 
-/* Add scroll margin to all elements that can be targeted */
-[id],
-[tabindex] {
-  scroll-margin-top: 2ex;
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
 }
 
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-   scroll-behavior: auto;
+  html {
+   scroll-behavior: initial;
   }
   *,
   *::before,

diff --git a/packages/web-components/src/components/cbp-button/cbp-button.scss b/packages/web-components/src/components/cbp-button/cbp-button.scss
@@ -6,7 +6,7 @@
 
   --cbp-button-color-fill: var(--cbp-color-interactive-primary-dark);
   --cbp-button-color-fill-hover: var(--cbp-color-interactive-primary-darker);
-  --cbp-button-color-fill-focus: var(--cbp-color-interactive-primary-darker);
+  --cbp-button-color-fill-focus: var(--cbp-color-interactive-focus-dark);
   --cbp-button-color-fill-active: var(--cbp-color-interactive-active-dark);
 
   --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
@@ -17,24 +17,22 @@
   --cbp-button-color-outline-focus: var(--cbp-color-white);
 }
 
-
 cbp-button {
-
-  button {
+  button, a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-width: var(--cbp-border-size-md);
     border-style: solid;
     border-radius: var(--cbp-border-radius-soft);
-    cursor: pointer;
     font-weight: var(--cbp-font-weight-medium);
+    text-transform: uppercase;
     letter-spacing: var(--cbp-letter-spacing-loose);
     text-decoration: none;
-    text-transform: uppercase;  
     padding: var(--cbp-space-2x) var(--cbp-space-3x);
     transition: all var(--cbp-motion-duration-shorter);
     min-height: 2.25rem;
+    cursor: pointer;
 
     color: var(--cbp-button-color-text);
     background-color: var(--cbp-button-color-fill);
@@ -87,9 +85,9 @@ cbp-button {
     }
 
     &[color=tertiary] {
-      --cbp-button-color-fill: var(--cbp-color-interactive-secondary-dark);
+      --cbp-button-color-fill: var(--cbp-color-interactive-secondary-base);
       --cbp-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker);
-      --cbp-button-color-border: var(--cbp-color-interactive-secondary-dark);
+      --cbp-button-color-border: var(--cbp-color-interactive-secondary-base);
       --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
     }
 
@@ -100,7 +98,8 @@ cbp-button {
       --cbp-button-color-border-hover: var(--cbp-color-danger-dark);
     }
 
-    button:disabled {
+    button:disabled,
+    a[aria-disabled=true] {
       --cbp-button-color-text: var(--cbp-color-interactive-disabled-light);
       --cbp-button-color-text-hover: var(--cbp-button-color-text);
       --cbp-button-color-text-focus: var(--cbp-button-color-text);
@@ -133,13 +132,6 @@ cbp-button {
       --cbp-button-color-border: var(--cbp-color-interactive-secondary-darker);
       --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
     }
-
-    &[color=tertiary] {
-      --cbp-button-color-text: var(--cbp-color-text-lightest);
-      --cbp-button-color-fill-hover: var(--cbp-color-interactive-primary-darker);
-      --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
-      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
-    }
 
     &[color=danger] {
       --cbp-button-color-text: var(--cbp-color-danger-base);
@@ -148,7 +140,8 @@ cbp-button {
       --cbp-button-color-border-hover: var(--cbp-color-danger-dark);
     }
 
-    button:disabled {
+    button:disabled,
+    a[aria-disabled=true] {
       --cbp-button-color-text: var(--cbp-color-interactive-disabled-dark);
       --cbp-button-color-text-hover: var(--cbp-button-color-text);
       --cbp-button-color-text-focus: var(--cbp-button-color-text);
@@ -184,19 +177,8 @@ cbp-button {
       --cbp-button-color-fill-hover: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-border: transparent;
       --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-lighter);
-
     }
 
-    &[color=tertiary] {
-      --cbp-button-color-text: var(--cbp-color-text-lightest);
-      --cbp-button-color-text-hover: var(--cbp-color-text-lightest);
-      --cbp-button-color-fill: var(--cbp-color-interactive-primary-dark);
-      --cbp-button-color-fill-hover: var(--cbp-color-interactive-primary-darker);
-      --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
-      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
-
-    }
-
     &[color=danger] {
       --cbp-button-color-text: var(--cbp-color-danger-base);
       --cbp-button-color-text-hover: var(--cbp-color-danger-darker);
@@ -206,7 +188,8 @@ cbp-button {
       --cbp-button-color-border-hover: var(--cbp-color-danger-light);
     }
 
-    button:disabled {
+    button:disabled,
+    a[aria-disabled=true] {
       --cbp-button-color-text: var(--cbp-color-interactive-disabled-dark);
       --cbp-button-color-text-hover: var(--cbp-button-color-text);
       --cbp-button-color-text-focus: var(--cbp-button-color-text);
@@ -222,7 +205,26 @@ cbp-button {
     }
   }
 
-  button:disabled {
+  &[variant=square] {
+    button, a {
+      padding: unset;
+      letter-spacing: unset;
+      height: 2.25rem;
+      width: 2.25rem;
+    }
+  }
+
+  &[variant=cta] {
+    button, a {
+      font-size: var(--cbp-font-size-heading-sm);
+      padding-left: var(--cbp-space-4x);
+      padding-right: var(--cbp-space-4x);
+      min-height: 3.25rem;
+    }
+  }
+
+  button:disabled,
+  a[aria-disabled=true] {
     font-style: italic;
     outline: 0;
     cursor: not-allowed;

diff --git a/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx b/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx
@@ -4,19 +4,42 @@ export default {
   argTypes: {
     label: {
       name: 'label (slotted)',
-      description: 'Label text in the `<button>` element and used to describe the action when clicked.',
+      description: 'Label text in the `button` element and used to describe the action when clicked.',
       control: 'text'
     },
+    tag: {
+      description: 'Both buttons and anchors may be visually styled like buttons. Be sure to only specify the appropriate attributes for the selected tag.',
+      control: 'select',
+      options: [
+        'button',
+        'a',
+      ]
+    },
     type: {
       description: 'The `type` attribute of the button. (not valid for anchors/links)',
-      defaultValue: 'button',
-      control: 'radio',
+      control: 'select',
       options: [
+        'button',
         'submit',
         'reset',
-        'button'
       ]
     },
+    href: {
+      description: 'Specifies the `href` attribute for anchor buttons. Not valid on actual `button` tags.',
+      control: 'text'
+    },
+    rel: {
+      description: 'Specifies the `rel` attribute for anchor buttons. Not valid on actual `button` tags.',
+      control: 'text'
+    },
+    target: {
+      description: 'Specifies the `target` attribute for anchor buttons. Not valid on actual `button` tags.',
+      control: 'text'
+    },
+    download: {
+      description: 'Indicates whether the `download` attribute is placed on the rendered anchor tag as a browser hint indicating that the linked contents specified in the `href` should be downloaded rather than navigated to. Not valid on actual `button` tags.',
+      control: 'boolean'
+    },
     fill: {
       description: 'Displays button fill in the overall button hierarchy. Available options are: `Solid`, `Outline` and `Ghost`.',
       control: 'select',
@@ -28,17 +51,18 @@ export default {
     },
     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',
+      control: 'select',
       options: [
         'primary',
         'secondary',
+        'tertiary',
         'danger'
       ]
     },
     variant: {
-      description: 'Choose button variant',
-      control: 'radio',
-      options: ['square', 'cta']
+      description: 'Variants includes a larger "Call to Action" and a square button for icons-only.',
+      control: 'select',
+      options: [ 'default', 'square', 'cta']
     },
     accessibilityText: {
       description: 'Accessibility text is applied as an `aria-label` and should be supplied when the button does not contain text or it is not sufficiently and uniquely descriptive.',
@@ -52,18 +76,30 @@ export default {
       description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
       control: 'object'
     },
-
+  },
+  args: {
+    label: 'Default',
+    tag: 'button',
+    type: 'button',
+    variant: 'default',
+    color: 'primary',
+    fill: 'solid',
   }
 };
 
-const Template = ({ label, type, fill, color, variant, accessibilityText, disabled, sx }) => { 
+const Template = ({ label, tag, type, href, rel, target, download, fill, color, variant, accessibilityText, disabled, sx }) => { 
   return ` 
       <cbp-app>
       <cbp-button
+        ${tag !== 'button' ? 'tag="'+tag+'"' : ''}
         type="${type}"
+        ${href ? 'href="'+href+'"' : ''}
+        ${rel ? 'rel="'+rel+'"' : ''}
+        ${target ? 'target="'+target+'"' : ''}
+        ${download ? 'download="'+download+'"' : ''}
         fill="${fill}"
         color="${color}"
-        ${variant ? 'variant="'+variant+'"' : ''}
+        ${variant !== 'default' ? 'variant="'+variant+'"' : ''}
         ${accessibilityText ? 'accessibility-text="'+accessibilityText+'"' : ''}
         ${disabled ? 'disabled="'+disabled+'"' : ''}
         ${sx ? 'sx='+JSON.stringify(sx) : ''}
@@ -75,10 +111,4 @@ const Template = ({ label, type, fill, color, variant, accessibilityText, disabl
 }
 
 export const Button = Template.bind({});
-Button.args = {
-  label: 'Default',
-  type: 'button',
-  variant: 'default',
-  color: 'primary',
-  fill: 'solid',
-};
+