- Corrects colors

- Cleanup stories - Adds zeplinLinks where available - Adds descriptive children/labels
bitcrowd · May 4, 2023 · a9bc8dd · a9bc8dd
1 parent c9d64a2
commit a9bc8dd
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 41 deletions.
diff --git a/scss/bitstyles/base/forms/Label.js b/scss/bitstyles/base/forms/Label.js
@@ -2,13 +2,15 @@ export default ({
   children,
   htmlFor = null,
   ariaInvalid = false,
+  ariaDisabled = false,
   classnames = [],
 }) => {
   const label = document.createElement('label');
   children.forEach((child) => {
     label.append(child);
   });
   if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
+  if (ariaDisabled) label.setAttribute('aria-disabled', ariaDisabled);
   if (htmlFor) label.setAttribute('for', htmlFor);
   classnames.forEach((classname) => label.classList.add(classname));
   return label;

diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
@@ -26,6 +26,11 @@ label {
   align-items: baseline;
   margin-bottom: settings.$label-gap;
   cursor: pointer;
+  font-weight: settings.$label-font-weight;
+
+  &[aria-disabled="true"] {
+    color: settings.$label-disabled-color;
+  }
 }
 
 [type='color'] {

diff --git a/scss/bitstyles/base/forms/_settings.scss b/scss/bitstyles/base/forms/_settings.scss
@@ -1,3 +1,5 @@
+@use '../../settings/typography';
+@use '../../tools/palette';
 @use '../../tools/size';
 
 //
@@ -20,4 +22,6 @@ $legend-color: inherit !default;
 //
 // Label ////////////////////////////////////////
 
-$label-gap: size.get('s7');
+$label-gap: size.get('s7') !default;
+$label-font-weight: typography.$font-weight-medium !default;
+$label-disabled-color: palette.get('grayscale') !default;
diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -2,6 +2,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Base/Forms/Overview" />
 
+<Story id="ui-data-forms--login-form-with-errors" />
+
 # Forms
 
 ## Inputs and labels
@@ -18,37 +20,63 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
   <Story id="base-forms-input-text--text-with-value" />
   <Story id="base-forms-input-text--text-with-value-invalid" />
   <Story id="base-forms-input-text--text-with-value-disabled" />
+</Canvas>
+
+<Canvas isColumn>
   <Story id="base-forms-input-text--text-empty" />
   <Story id="base-forms-input-text--text-empty-invalid" />
   <Story id="base-forms-input-text--text-empty-disabled" />
 </Canvas>
 
 ## Textareas
 
+### No values
+
 <Canvas isColumn>
-  <Story id="base-forms-textarea--with-value" />
-  <Story id="base-forms-textarea--with-value-invalid" />
-  <Story id="base-forms-textarea--with-value-disabled" />
   <Story id="base-forms-textarea--empty" />
   <Story id="base-forms-textarea--empty-invalid" />
   <Story id="base-forms-textarea--empty-disabled" />
 </Canvas>
 
-## Checkboxes and Radios
+### With values
+
+<Canvas isColumn>
+  <Story id="base-forms-textarea--with-value" />
+  <Story id="base-forms-textarea--with-value-invalid" />
+  <Story id="base-forms-textarea--with-value-disabled" />
+</Canvas>
+
+## Checkboxes
+
+### Unchecked
 
 <Canvas isColumn>
   <Story id="base-forms-input-checkbox--base" />
   <Story id="base-forms-input-checkbox--invalid" />
   <Story id="base-forms-input-checkbox--disabled" />
+</Canvas>
+
+### Checked
+
+<Canvas isColumn>
   <Story id="base-forms-input-checkbox--checked" />
   <Story id="base-forms-input-checkbox--checked-invalid" />
   <Story id="base-forms-input-checkbox--checked-disabled" />
 </Canvas>
 
+## Radios
+
+### Unchecked
+
 <Canvas isColumn>
   <Story id="base-forms-input-radio--base" />
   <Story id="base-forms-input-radio--invalid" />
   <Story id="base-forms-input-radio--disabled" />
+</Canvas>
+
+### Checked
+
+<Canvas isColumn>
   <Story id="base-forms-input-radio--checked" />
   <Story id="base-forms-input-radio--checked-invalid" />
   <Story id="base-forms-input-radio--checked-disabled" />

diff --git a/scss/bitstyles/base/forms/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -12,12 +12,13 @@ const Template = (args) => {
   return Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [Input(args), args.label],
     classname: 'u-items-baseline',
   });
 };
 
-// ***** Text inputs with values ****************** //
+// ***** Unchecked radios ****************** //
 
 export const Base = Template.bind({});
 Base.args = { type: 'checkbox', label: 'Unchecked' };
@@ -56,6 +57,8 @@ Disabled.parameters = {
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc971830548239007431f',
 };
 
+// ***** Checked radios ****************** //
+
 export const Checked = Template.bind({});
 Checked.args = {
   type: 'checkbox',

diff --git a/scss/bitstyles/base/forms/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -12,12 +12,13 @@ const Template = (args) => {
   return Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [Input(args), args.label],
     classname: 'u-items-baseline',
   });
 };
 
-// ***** Text inputs with values ****************** //
+// ***** Unchecked radios ****************** //
 
 export const Base = Template.bind({});
 Base.args = { type: 'radio', label: 'Unchecked' };
@@ -43,6 +44,12 @@ Invalid.args = { type: 'radio', ariaInvalid: true, label: 'Unchecked invalid' };
 
 export const Disabled = Template.bind({});
 Disabled.args = { type: 'radio', disabled: true, label: 'Unchecked disabled' };
+Disabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2bfc40d7123d9858e06',
+};
+
+// ***** Checked radios ****************** //
 
 export const Checked = Template.bind({});
 Checked.args = { type: 'radio', checked: true, label: 'Checked' };
@@ -78,3 +85,7 @@ CheckedDisabled.args = {
   disabled: true,
   label: 'Checked disabled',
 };
+CheckedDisabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2ba62f9d023b1e53c19',
+};
diff --git a/scss/bitstyles/base/forms/input-text.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
@@ -13,6 +13,7 @@ const Template = (args) => {
   const label = Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [args.label],
   });
   const input = Input(args);
@@ -75,7 +76,7 @@ TextWithValueDisabled.parameters = {
 export const TextEmpty = Template.bind({});
 TextEmpty.args = {
   value: '',
-  placeholder: 'Input text empty',
+  placeholder: 'Input text empty placeholder',
   label: 'Input text empty',
 };
 TextEmpty.parameters = {
@@ -98,7 +99,7 @@ TextEmpty.parameters = {
 export const TextEmptyInvalid = Template.bind({});
 TextEmptyInvalid.args = {
   value: '',
-  placeholder: 'Input text empty invalid',
+  placeholder: 'Input text empty invalid placeholder',
   label: 'Input text empty invalid',
   ariaInvalid: true,
 };
@@ -110,7 +111,7 @@ TextEmptyInvalid.parameters = {
 export const TextEmptyDisabled = Template.bind({});
 TextEmptyDisabled.args = {
   value: '',
-  placeholder: 'Input text empty disabled',
+  placeholder: 'Input text empty disabled placeholder',
   label: 'Input text empty disabled',
   disabled: true,
 };

diff --git a/scss/bitstyles/base/forms/label.stories.js b/scss/bitstyles/base/forms/label.stories.js
@@ -23,6 +23,12 @@ Invalid.args = {
   ariaInvalid: true,
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: ['Simple text label for a disabled input'],
+  ariaDisabled: true,
+};
+
 export const WithFor = Template.bind({});
 WithFor.args = {
   children: ['Simple text label with a for attribute'],

diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
@@ -1,6 +1,5 @@
 import Label from './Label';
 import Select from './Select';
-import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
   title: 'Base/Forms/Select',
@@ -21,8 +20,6 @@ const Template = (args) => {
   return wrapper;
 };
 
-// ***** Selects with values ****************** //
-
 export const Base = Template.bind({});
 Base.args = {
   label: 'Select',

diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -41,6 +41,13 @@
       color: settings.$color-hover;
     }
 
+    &:active {
+      border-color: settings.$border-color-active;
+      background-color: settings.$background-color-active;
+      box-shadow: settings.$box-shadow-active;
+      color: settings.$color-active;
+    }
+
     &::after {
       content: '';
       display: block;

diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -7,14 +7,14 @@
 // Base styles ////////////////////////////////////////
 $border-radius: size.get('s6') !default;
 $gap: size.get('s4') !default;
-$border-width: size.get('s7') !default;
-$size: size.get('l1') !default;
+$border-width: 0.1875rem !default;
+$size: size.get('l2') !default;
 
 //
 // Base colors ////////////////////////////////////////
 $color: palette.get('grayscale') !default;
 $background-color: palette.get('grayscale', 'white') !default;
-$border-color: palette.get('grayscale') !default;
+$border-color: palette.get('grayscale', 'dark-2') !default;
 $box-shadow: none !default;
 
 //
@@ -24,11 +24,18 @@ $background-color-hover: palette.get('grayscale', 'white') !default;
 $border-color-hover: palette.get('brand-1') !default;
 $box-shadow-hover: none !default;
 
+//
+// Active colors ////////////////////////////////////////
+$color-active: palette.get('brand-1', 'dark-1') !default;
+$background-color-active: palette.get('grayscale', 'white') !default;
+$border-color-active: palette.get('brand-1', 'dark-1') !default;
+$box-shadow-active: none !default;
+
 //
 // Checked colors ////////////////////////////////////////
 $color-checked: palette.get('grayscale', 'white') !default;
-$background-color-checked: palette.get('brand-1') !default;
-$border-color-checked: palette.get('brand-1') !default;
+$background-color-checked: palette.get('brand-1', 'dark-1') !default;
+$border-color-checked: palette.get('brand-1', 'dark-1') !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked: shadows.get('default') !default;
 
@@ -44,7 +51,7 @@ $box-shadow-checked-hover: none !default;
 // Checked active colors ////////////////////////////////////////
 $color-checked-active: palette.get('grayscale', 'white') !default;
 $background-color-checked-active: palette.get('brand-1') !default;
-$border-color-checked-active: palette.get('brand-1') !default;
+$border-color-checked-active: palette.get('brand-1', 'dark-1') !default;
 $background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked-active: none !default;
 
@@ -67,16 +74,13 @@ $box-shadow-invalid-checked: none !default;
 //
 // Disabled colors ////////////////////////////////////////
 $color-disabled: palette.get('grayscale', 'light-2') !default;
-$background-color-disabled: palette.get('grayscale', 'light-2') !default;
-$border-color-disabled: palette.get('grayscale', 'light-2') !default;
+$background-color-disabled: palette.get('grayscale', 'white') !default;
+$border-color-disabled: palette.get('grayscale', 'light-1') !default;
 $box-shadow-disabled: none !default;
 
 //
 // Disabled-checked colors ////////////////////////////////////////
-$color-disabled-checked: palette.get('grayscale', 'light-1') !default;
-$background-color-disabled-checked: palette.get(
-  'grayscale',
-  'light-2'
-) !default;
+$color-disabled-checked: palette.get('grayscale', 'white') !default;
+$background-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
 $border-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
 $box-shadow-disabled-checked: none !default;
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
@@ -4,14 +4,12 @@
 @use '../../settings/focus';
 
 [type='radio'] {
-  display: inline-block;
   position: relative;
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
   font-size: settings.$size;
-  vertical-align: middle;
   cursor: pointer;
   appearance: none;
   top: calc(settings.$gap / 2);