- Updates stories to cover all states

- Adds sass variables for the extra states on checkboxes & radios
- All stories now include labels

Author: planktonic

scss/bitstyles/base/forms/Label.js

@@ -1,9 +1,15 @@
-export default ({ children, htmlFor = null, ariaInvalid = false }) => {
+export default ({
+  children,
+  htmlFor = null,
+  ariaInvalid = false,
+  classnames = [],
+}) => {
   const label = document.createElement('label');
   children.forEach((child) => {
     label.append(child);
   });
   if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
   if (htmlFor) label.setAttribute('for', htmlFor);
+  classnames.forEach((classname) => label.classList.add(classname));
   return label;
 };

scss/bitstyles/base/forms/forms.stories.js

@@ -15,39 +15,49 @@ The exception is for radios & checkboxes (see below), which should always be a c
 This includes all standard `type="text"` inputs, plus all the text-based inputs such as `email`, `password`, `tel` — take a look at the other stories in the forms section for examples of the other input types.
 
 <Canvas isColumn>
-  <Story id="base-forms--text-input" />
-  <Story id="base-forms--text-input-invalid" />
-  <Story id="base-forms--text-input-disabled" />
+  <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" />
+  <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
 
 <Canvas isColumn>
-  <Story id="base-forms--textarea-base" />
-  <Story id="base-forms--textarea-invalid" />
-  <Story id="base-forms--textarea-disabled" />
+  <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
 
 <Canvas isColumn>
-  <Story id="base-forms--checkbox-input" />
-  <Story id="base-forms--checkbox-input-checked" />
-  <Story id="base-forms--checkbox-input-invalid" />
-  <Story id="base-forms--checkbox-input-disabled" />
+  <Story id="base-forms-input-checkbox--base" />
+  <Story id="base-forms-input-checkbox--invalid" />
+  <Story id="base-forms-input-checkbox--disabled" />
+  <Story id="base-forms-input-checkbox--checked" />
+  <Story id="base-forms-input-checkbox--checked-invalid" />
+  <Story id="base-forms-input-checkbox--checked-disabled" />
 </Canvas>
 
 <Canvas isColumn>
-  <Story id="base-forms--radio-input" />
-  <Story id="base-forms--radio-input-checked" />
-  <Story id="base-forms--radio-input-invalid" />
-  <Story id="base-forms--radio-input-disabled" />
+  <Story id="base-forms-input-radio--base" />
+  <Story id="base-forms-input-radio--invalid" />
+  <Story id="base-forms-input-radio--disabled" />
+  <Story id="base-forms-input-radio--checked" />
+  <Story id="base-forms-input-radio--checked-invalid" />
+  <Story id="base-forms-input-radio--checked-disabled" />
 </Canvas>
 
 ## Selects
 
 <Canvas isColumn>
-  <Story id="base-forms--select-base" />
-  <Story id="base-forms--select-invalid" />
-  <Story id="base-forms--select-disabled" />
+  <Story id="base-forms-select--base" />
+  <Story id="base-forms-select--invalid" />
+  <Story id="base-forms-select--disabled" />
 </Canvas>