fix: wip

emulsify-ds · May 29, 2023 · d43752f · d43752f
1 parent 14692b1
commit d43752f
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 111 deletions.
diff --git a/src/components/forms/checkbox/checkbox.twig b/src/components/forms/checkbox/checkbox.twig
@@ -1,6 +1,6 @@
 {% if not attributes %}
 	<fieldset class="form-item form-item--checkbox">
-		<legend class="h3">Options as Checkboxes</legend>
+		<legend>Options as Checkboxes</legend>
 		<ul class="form-item--checkboxes">
 		{% endif %}
 		{% for key, checkbox in checkboxes %}

diff --git a/src/components/forms/radio/radio.twig b/src/components/forms/radio/radio.twig
@@ -1,6 +1,6 @@
 {% if not attributes %}
 	<fieldset class="form-item form-item--radio">
-		<legend class="h3">Options as Radio Buttons</legend>
+		<legend>Options as Radio Buttons</legend>
 		<ul class="form-item--radios">
 		{% endif %}
 		{% for key, radio in radios %}

diff --git a/src/components/forms/select/_select.scss b/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 clr(accent);
+    border-top: 9px solid var(--colors-text-body);
     content: ' ';
     position: absolute;
     top: 42%;
@@ -31,6 +31,7 @@
 
 .form-item__select {
   border: var(--border-sm) solid var(--selectdropdown-button-stroke);
+  border-radius: var(--selectdropdown-radius);
   height: 41px; // set height required for discrepancy between .form-item__dropdown border and the select :focus border
   font-size: 16px;
   margin: 0;

diff --git a/src/components/forms/select/select.twig b/src/components/forms/select/select.twig
@@ -1,6 +1,6 @@
 {% if not attributes %}
 	<div class="form-item">
-		<label for="select" class="h4">Select Dropdown</label>
+		<label for="select" class="form-item__label">Select Dropdown</label>
 		<div class="form-item__dropdown">
 			<select class="form-item__select" id="select">
 				<optgroup label="Whatever">

diff --git a/src/components/forms/textfields/_textfields.scss b/src/components/forms/textfields/_textfields.scss
@@ -1,7 +1,6 @@
 .form-item {
   color: var(--colors-text-body);
   margin-bottom: 1em;
-  max-width: 32em;
 
   @include clearfix;
 }
@@ -26,6 +25,8 @@
   border-radius: var(--input-radius);
   padding: var(--input-padding-y) var(--input-padding-x);
   max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
 
   &:focus {
     border-color: clr(accent-high);
@@ -50,10 +51,15 @@
 
   .form-item {
     margin-left: 1em;
-    max-width: 31em;
   }
 }
 
 legend {
   color: var(--color-fieldset-label);
+}
+
+.form-item--warning {
+  --input-color-label: var(--colors-warning-default);
+  --input-border-color: var(--colors-warning-default);
+  --input-color-help-text: var(--colors-warning-default);
 }
diff --git a/src/components/forms/textfields/textfields.twig b/src/components/forms/textfields/textfields.twig
@@ -1,37 +1,51 @@
-<div class="form-item">
-  <label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield">Name</label>
-  <input id="edit-name" autocorrect="none" autocapitalize="none" spellcheck="false" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" placeholder="First, Middle, Last">
-</div>
+<div style="max-width: 700px; margin: 0 auto;">
+	<div class="form-item">
+		<label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield">Name</label>
+		<input id="edit-name" autocorrect="none" autocapitalize="none" spellcheck="false" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" placeholder="First, Middle, Last">
+	</div>
 
-<div class="form-item">
-  <label for="edit-pass" class="form-item__label form-item__label--required form-item__label--textfield">Password</label>
-  <input id="edit-pass" type="password" name="pass" size="60" maxlength="128" class="form-item__textfield form-item__textfield--password form-item__textfield--required" required="required" aria-required="true">
-  <div class="form-item__description">
-    Enter the password that accompanies your username.
-  </div>
-</div>
+	<div class="form-item">
+		<label for="edit-pass" class="form-item__label form-item__label--required form-item__label--textfield">Password</label>
+		<input id="edit-pass" type="password" name="pass" size="60" maxlength="128" class="form-item__textfield form-item__textfield--password form-item__textfield--required" required="required" aria-required="true">
+		<div class="form-item__description">
+			Enter the password that accompanies your username.
+		</div>
+	</div>
+
+	<form>
+		<fieldset class="form-fieldset">
+			<legend class="heading-2 with-icon">Web and Email Address (fieldset example)</legend>
+			<div class="form-item">
+				<label for="webaddress" class="form-item__label form-item__label--textfield">Web Address</label>
+				<input id="webaddress" type="url" class="form-item__textfield" placeholder="http://yoursite.com">
+			</div>
 
-<form>
-  <fieldset class="form-fieldset">
-  <legend class="heading-2 with-icon">Web and Email Address (fieldset example)</legend>
-    <div class="form-item">
-       <label for="webaddress" class="form-item__label form-item__label--textfield">Web Address</label>
-       <input id="webaddress" type="url" class="form-item__textfield" placeholder="http://yoursite.com">
-     </div>
+			<div class="form-item">
+				<label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
+				<input id="emailaddress" type="email" class="form-item__textfield" placeholder="[email protected]">
+			</div>
+		</fieldset>
+	</form>
 
-     <div class="form-item">
-       <label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
-       <input id="emailaddress" type="email" class="form-item__textfield" placeholder="[email protected]">
-     </div>
-  </fieldset>
- </form>
+	<div class="form-item">
+		<label for="text" class="form-item__label form-item__label--textfield">Number Input</label>
+		<input id="text" type="number" class="form-item__textfield" placeholder="Enter a Number" pattern="[0-9]*">
+	</div>
 
- <div class="form-item">
-   <label for="text" class="form-item__label form-item__label--textfield">Number Input</label>
-   <input id="text" type="number" class="form-item__textfield" placeholder="Enter a Number" pattern="[0-9]*">
- </div>
+	<div class="form-item form-item--warning">
+		<label for="text" class="form-item__label form-item__label--textfield">Error</label>
+		<input id="text" type="text" class="form-item__textfield" value="Wrong information">
+		<div class="form-item__description">
+			Enter the correct information.
+		</div>
+	</div>
 
- <div class="form-item">
-   <label for="textarea" class="form-item__label form-item__label--textfield">Textarea</label>
-   <textarea id="textarea" class="form-item__textfield form-item__textarea"  rows="8" cols="48" placeholder="Enter your message here"></textarea>
- </div>
+	<div class="form-item">
+		<label for="textarea" class="form-item__label form-item__label--textfield">Textarea</label>
+		<textarea id="textarea" class="form-item__textfield form-item__textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
+	</div>
+
+	{% include "@components/button/button.twig" with {
+    button__content: 'Submit',
+  } %}
+</div>
diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss
diff --git a/src/components/input/input.stories.js b/src/components/input/input.stories.js
diff --git a/src/components/input/input.twig b/src/components/input/input.twig
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 29 May 2023 18:16:20 GMT
+ * Generated on Mon, 29 May 2023 19:48:19 GMT
  */
 
 :root {
@@ -48,7 +48,7 @@
   --selectdropdown-button-stroke-hover: #00202e;
   --selectdropdown-button-stroke-disabled: #a9afb1;
   --selectdropdown-gap: 0.25rem;
-  --select-dropdown-radius: 0.25rem;
+  --selectdropdown-radius: 0.25rem;
   --radio-label: #00202e;
   --radio-label-disabled: #a9afb1;
   --radio-button-fill: #007fb6;
@@ -77,7 +77,7 @@
   --input-padding-y: 0.5rem;
   --input-color-label: #005f89;
   --input-color-help-text: #005f89;
-  --input-color-placeholder: #66c5ef;
+  --input-color-placeholder: #a9afb1;
   --input-border-color: #009fe4;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -234,9 +234,7 @@
     "gap": {
       "value": 4,
       "type": "spacing"
-    }
-  },
-  "selectDropdown": {
+    },
     "radius": {
       "value": 4,
       "type": "borderRadius"
@@ -386,7 +384,7 @@
         "type": "color"
       },
       "placeholder": {
-        "value": "#66c5ef",
+        "value": "#a9afb1",
         "type": "color"
       }
     },

diff --git a/tokens-studio.json b/tokens-studio.json
@@ -1721,7 +1721,7 @@
           "type": "color"
         },
         "placeholder": {
-          "value": "{colors.EmulsifyBlue.400}",
+          "value": "{colors.grays.300}",
           "type": "color"
         }
       },
@@ -1911,9 +1911,7 @@
       "gap": {
         "value": "{spacing.sm}",
         "type": "spacing"
-      }
-    },
-    "selectDropdown": {
+      },
       "radius": {
         "value": "{radius.sm}",
         "type": "borderRadius"