feat: support type="password" for textbox component

nl-design-system · Aug 9, 2021 · 2a1b0a0 · 2a1b0a0
1 parent 64e57bd
commit 2a1b0a0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/components/textbox/html.scss b/components/textbox/html.scss
@@ -8,6 +8,7 @@
 .utrecht-html {
   input[type="text"],
   input[type="email"],
+  input[type="password"],
   input[type="search"],
   input[type="tel"],
   input[type="url"] {

diff --git a/components/textbox/html.stories.mdx b/components/textbox/html.stories.mdx
@@ -49,7 +49,7 @@ export const Template = ({
     type: {
       description: "Type",
       control: "select",
-      options: ["email", "search", "tel", "text", "url"],
+      options: ["email", "search", "password", "tel", "text", "url"],
     },
     value: {
       description: "Set the value of the text box",
@@ -141,3 +141,19 @@ Styling via the `<input>` element:
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## Password input
+
+<Canvas>
+  <Story
+    name="Password input"
+    args={{
+      autoComplete: "current-password",
+      required: true,
+      value: "very$ecret2021",
+      type: "password",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>