EMULSIF-235: Convert forms to support SDC

src/components/forms/forms.component.yml

@@ -0,0 +1,42 @@
+name:  Forms
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - checkboxes
+    - radios
+    - select
+  properties:
+    checkboxes:
+      type: array
+      title: Checkboxes
+      description: The options of checkbox.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    radios:
+      type: array
+      title: Radio buttons
+      description: The options of radio buttons.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    select:
+      type: array
+      title: Select
+      description: The options for select.
+      data:
+        - title: 'Choose an Option'
+        - title: 'Option 1'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'

src/components/forms/forms.stories.js

@@ -3,19 +3,21 @@ import radio from './radio/radio.twig';
 import select from './select/select.twig';
 import textfields from './textfields/textfields.twig';
 
-import checkboxData from './checkbox/checkbox.yml';
-import radioData from './radio/radio.yml';
-import selectOptionsData from './select/select.yml';
+import { props } from './forms.component.yml';
+
+const checkboxData = props.properties.checkboxes.data;
+const radioData = props.properties.radios.data;
+const selectOptionsData = props.properties.select.data;
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Forms' };
 
-export const checkboxes = () => checkbox(checkboxData);
+export const checkboxes = () => checkbox({ checkboxes: checkboxData });
 
-export const radioButtons = () => radio(radioData);
+export const radioButtons = () => radio({ radios: radioData });
 
-export const selectDropdowns = () => select(selectOptionsData);
+export const selectDropdowns = () => select({ select: selectOptionsData });
 
 export const textfieldsExamples = () => textfields();

src/components/forms/select/_select.scss

@@ -12,7 +12,7 @@
   &::after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 9px solid var(--colors-text-body);
+    border-top: 9px solid var(--color-text-body);
     content: ' ';
     position: absolute;
     top: 42%;
@@ -25,21 +25,21 @@
   }
 
   :hover {
-    background: var(--selectdropdown-button-fill-hover);
+    background: var(--selectdropdown-color-button-fill-hover);
   }
 }
 
 .form-item__select {
-  border: var(--border-sm) solid var(--selectdropdown-button-stroke);
-  border-radius: var(--selectdropdown-radius);
+  border: var(--border-sm) solid var(--selectdropdown-color-button-stroke);
+  border-radius: var(--selectdropdown-color-radius);
   height: 41px; // set height required for discrepancy between .form-item__dropdown border and the select :focus border
   font-size: 16px;
   margin: 0;
   outline: none;
   padding: 0.6em 0.8em 0.5em;
   width: 100%;
-  color: var(--selectdropdown-label);
-  background: var(--selectdropdown-button-fill);
+  color: var(--selectdropdown-color-label);
+  background: var(--selectdropdown-color-button-fill);
 
   :focus {
     outline: none;

src/components/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Aug 2024 16:09:06 GMT
+ * Generated on Mon, 05 Aug 2024 16:15:34 GMT
  */
 
 :root {