WIP form stories

Author: planktonic

.storybook/helpers.js

@@ -8,7 +8,7 @@ export const generateButtonLabel = ({
   shapeVariant = [],
   colorVariant = [],
   disabled = false,
-  pressed = false
+  pressed = false,
 }) =>
   capitalizeFirstLetter(
     [

scss/bitstyles/base/forms/_index.scss

@@ -21,7 +21,9 @@ legend {
 }
 
 label {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: settings.$label-gap;
   margin-bottom: 0;
   cursor: pointer;
 }

scss/bitstyles/base/forms/_settings.scss

@@ -1,3 +1,5 @@
+@use '../../tools/size';
+
 //
 // Fieldset ////////////////////////////////////////
 
@@ -14,3 +16,8 @@ $legend-background-color: transparent !default;
 $legend-border: 0 !default;
 $legend-border-radius: 0 !default;
 $legend-color: inherit !default;
+
+//
+// Label ////////////////////////////////////////
+
+$label-gap: size.get('s7');

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

@@ -91,6 +91,31 @@ TextInputInvalid.parameters = {
   ],
 };
 
+export const TextInputInvalidWith = InputTemplate.bind({});
+TextInputInvalid.args = {
+  id: 'input-text',
+  label: 'Telephone number',
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+  ariaInvalid: true,
+};
+TextInputInvalid.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
 export const TextInputDisabled = InputTemplate.bind({});
 TextInputDisabled.args = {
   id: 'input-text',

scss/bitstyles/base/input-checkbox/_index.scss

@@ -22,16 +22,16 @@
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
-    color: settings.$color;
     box-shadow: settings.$box-shadow;
+    color: settings.$color;
 
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
       outline: none;
       background-color: settings.$background-color-hover;
-      color: settings.$color-hover;
       box-shadow: settings.$box-shadow-hover;
+      color: settings.$color-hover;
     }
 
     &::after {
@@ -54,8 +54,8 @@
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
-      color: settings.$color-checked;
       box-shadow: settings.$box-shadow-checked;
+      color: settings.$color-checked;
 
       &::after {
         transform: scale(1);
@@ -67,21 +67,21 @@
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
-      color: settings.$color-invalid;
       box-shadow: settings.$box-shadow-invalid;
+      color: settings.$color-invalid;
     }
 
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
-      color: settings.$color-disabled;
       box-shadow: settings.$box-shadow-disabled;
+      color: settings.$color-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
-        color: settings.$color-disabled-checked;
         box-shadow: settings.$box-shadow-disabled-checked;
+        color: settings.$color-disabled-checked;
       }
     }
   }

scss/bitstyles/base/input-radio/_index.scss

@@ -21,8 +21,8 @@
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
-    color: settings.$color;
     box-shadow: settings.$box-shadow;
+    color: settings.$color;
 
     &::after {
       content: '';
@@ -43,15 +43,15 @@
       border-color: settings.$border-color-hover;
       outline: none;
       background-color: settings.$background-color-hover;
-      color: settings.$color-hover;
       box-shadow: settings.$box-shadow-hover;
+      color: settings.$color-hover;
     }
 
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
-      color: settings.$color-checked;
       box-shadow: settings.$box-shadow-checked;
+      color: settings.$color-checked;
 
       &::after {
         transform: scale(0.7);
@@ -62,14 +62,14 @@
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
-      color: settings.$color-disabled;
       box-shadow: settings.$box-shadow-disabled;
+      color: settings.$color-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
-        color: settings.$color-disabled-checked;
         box-shadow: settings.$box-shadow-disabled-checked;
+        color: settings.$color-disabled-checked;
       }
 
       &::after {