feat: add placeholder design tokens

nl-design-system · Aug 21, 2021 · 0d71278 · 0d71278
1 parent 193545d
commit 0d71278
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 11 deletions.
diff --git a/components/textarea/bem.scss b/components/textarea/bem.scss
@@ -89,6 +89,14 @@
   );
 }
 
+.utrecht-textarea__placeholder {
+  color: var(
+    --utrecht-textarea-placeholder-color,
+    var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color)))
+  );
+  opacity: 100%;
+}
+
 .utrecht-textarea--html-textarea {
   &:disabled {
     @extend .utrecht-textarea--disabled;
@@ -106,4 +114,8 @@
   &:read-only {
     @extend .utrecht-textarea--read-only;
   }
+
+  &::placeholder {
+    @extend .utrecht-textarea__placeholder;
+  }
 }
diff --git a/components/textarea/element.style-dictionary.json b/components/textarea/element.style-dictionary.json
@@ -0,0 +1,14 @@
+{
+  "utrecht": {
+    "textarea": {
+      "placeholder": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/textarea/html.stories.mdx b/components/textarea/html.stories.mdx
@@ -10,15 +10,23 @@ export const defaultArgs = {
   invalid: false,
   readOnly: false,
   disabled: false,
+  placeholder: "",
   required: false,
   textContent: "",
 };
 
-export const Template = ({ invalid = false, readOnly = false, disabled = false, required = false, textContent = "" }) =>
+export const Template = ({
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  required = false,
+  textContent = "",
+}) =>
   `<section class="utrecht-html">
-  <textarea${invalid ? ' aria-invalid="true"' : ""}${disabled ? " disabled" : ""}${required ? " required" : ""}${
-    readOnly ? " readonly" : ""
-  }>${textContent}</textarea>
+  <textarea${invalid ? ' aria-invalid="true"' : ""}${disabled ? " disabled" : ""}${
+    placeholder ? ` placeholder="${placeholder}"` : ""
+  }${required ? " required" : ""}${readOnly ? " readonly" : ""}>${textContent}</textarea>
 </section>`;
 
 <Meta
@@ -36,6 +44,10 @@ export const Template = ({ invalid = false, readOnly = false, disabled = false,
       description: "Disabled",
       control: "boolean",
     },
+    placeholder: {
+      description: "Placeholder",
+      control: "text",
+    },
     required: {
       description: "Required",
       control: "boolean",
@@ -73,7 +85,9 @@ Styling via the `<textarea>` element:
 
 <ArgsTable story="Textarea" />
 
-## Invalid
+## States
+
+### Invalid
 
 <Canvas>
   <Story
@@ -87,7 +101,7 @@ Styling via the `<textarea>` element:
   </Story>
 </Canvas>
 
-## Disabled
+### Disabled
 
 <Canvas>
   <Story
@@ -101,7 +115,7 @@ Styling via the `<textarea>` element:
   </Story>
 </Canvas>
 
-## Read-only
+### Read-only
 
 <Canvas>
   <Story
@@ -115,7 +129,7 @@ Styling via the `<textarea>` element:
   </Story>
 </Canvas>
 
-## Required
+### Required
 
 <Canvas>
   <Story
@@ -128,3 +142,16 @@ Styling via the `<textarea>` element:
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## Placeholder
+
+<Canvas>
+  <Story
+    name="Textarea with placeholder"
+    args={{
+      placeholder: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/textbox/bem.scss b/components/textbox/bem.scss
@@ -90,6 +90,14 @@
   );
 }
 
+.utrecht-textbox__placeholder {
+  color: var(
+    --utrecht-textbox-placeholder-color,
+    var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color)))
+  );
+  opacity: 100%;
+}
+
 .utrecht-textbox--html-input {
   &:disabled {
     @extend .utrecht-textbox--disabled;
@@ -107,4 +115,8 @@
   &:read-only {
     @extend .utrecht-textbox--read-only;
   }
+
+  &::placeholder {
+    @extend .utrecht-textbox__placeholder;
+  }
 }
diff --git a/components/textbox/element.style-dictionary.json b/components/textbox/element.style-dictionary.json
@@ -0,0 +1,14 @@
+{
+  "utrecht": {
+    "textarea": {
+      "placeholder": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/textbox/html.stories.mdx b/components/textbox/html.stories.mdx
@@ -5,13 +5,15 @@ Copyright (c) 2021 Robbert Broersma
 
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import "./html.scss";
+
 export const Template = ({
   autoComplete = null,
   disabled = false,
   invalid = false,
   min = "",
   max = "",
   pattern = "",
+  placeholder = "",
   readOnly = false,
   required = false,
   type = "text",
@@ -20,9 +22,11 @@ export const Template = ({
   `<div class="utrecht-html">
   <input${type ? ` type="${type}"` : ""}${invalid ? ' aria-invalid="true"' : ""}${disabled ? " disabled" : ""}${
     min !== "" ? ` min="${min}"` : ""
-  }${max !== "" ? ` max="${max}"` : ""}${pattern ? ` pattern="${pattern}"` : ""}${required ? " required" : ""}${
-    readOnly ? " readonly" : ""
-  } value="${value}"${autoComplete ? ` autocomplete="${autoComplete}"` : ""}>
+  }${max !== "" ? ` max="${max}"` : ""}${pattern ? ` pattern="${pattern}"` : ""}${
+    placeholder ? ` placeholder="${placeholder}"` : ""
+  }${required ? " required" : ""}${readOnly ? " readonly" : ""} value="${value}"${
+    autoComplete ? ` autocomplete="${autoComplete}"` : ""
+  }>
 </div>`;
 
 <Meta
@@ -52,6 +56,10 @@ export const Template = ({
       description: "Pattern",
       control: "text",
     },
+    placeholder: {
+      description: "Placeholder",
+      control: "text",
+    },
     readOnly: {
       description: "Read-only",
       control: "boolean",
@@ -195,3 +203,16 @@ Styling via the `<input>` element:
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## Placeholder
+
+<Canvas>
+  <Story
+    name="Textbox with placeholder"
+    args={{
+      placeholder: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>