feat: fieldset and legend styling (#371)

* Fieldset update * Update legend styling * update * refactor: fieldset CSS Co-authored-by: Olling <48805670+Ollie-nl@users.noreply.github.com>
nl-design-system · Sep 4, 2021 · 85e18e1 · 85e18e1
1 parent 9af202e
commit 85e18e1
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 20 deletions.
diff --git a/components/form-fieldset/bem.css → components/form-fieldset/bem.scss b/components/form-fieldset/bem.css → components/form-fieldset/bem.scss
@@ -3,6 +3,34 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
+@mixin reset-fieldset {
+  border: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  min-width: 0;
+  padding-block-end: 0;
+  padding-block-start: 0.01em;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+@mixin reset-legend {
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-form-fieldset {
+}
+
+.utrecht-form-fieldset--reset-fieldset {
+  @include reset-fieldset;
+}
+
+.utrecht-form-fieldset__legend--reset-legend {
+  @include reset-legend;
+}
+
 .utrecht-form-fieldset--distanced {
   margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
   margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
@@ -14,6 +42,7 @@
   font-size: var(--utrecht-form-fieldset-legend-font-size);
   font-weight: var(--utrecht-form-fieldset-legend-font-weight);
   line-height: var(--utrecht-form-fieldset-legend-line-height);
+  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
 }
 
 .utrecht-form-fieldset__legend--distanced {

diff --git a/components/form-fieldset/bem.stories.mdx b/components/form-fieldset/bem.stories.mdx
@@ -4,7 +4,8 @@ Copyright (c) 2021 Robbert Broersma
 -->
 
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
-import "./bem.css";
+import "./bem.scss";
+
 export const Template = ({ content = "", legend = "" }) =>
   `<div class="utrecht-form-fieldset">
   ${legend ? `<div class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--distanced">${legend}</div>` : ""}

diff --git a/components/form-fieldset/element.style-dictionary.json b/components/form-fieldset/element.style-dictionary.json
@@ -43,6 +43,12 @@
             "syntax": "<length>",
             "inherits": true
           }
+        },
+        "text-transform": {
+          "css": {
+            "syntax": "inherit | none | uppercase",
+            "inherits": true
+          }
         }
       }
     }

diff --git a/components/form-fieldset/html.scss b/components/form-fieldset/html.scss
@@ -5,30 +5,14 @@
 
 @import "./bem";
 
-@mixin reset-fieldset {
-  border: 0;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
-  min-width: 0;
-  padding-block-end: 0;
-  padding-block-start: 0.01em;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-@mixin reset-legend {
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
 .utrecht-html fieldset {
-  @include reset-fieldset;
-  @extend .utrecht-form-fieldset !optional;
+  @extend .utrecht-form-fieldset;
+  @extend .utrecht-form-fieldset--reset-fieldset;
   @extend .utrecht-form-fieldset--distanced;
 }
 
 .utrecht-html legend {
-  @include reset-legend;
   @extend .utrecht-form-fieldset__legend;
+  @extend .utrecht-form-fieldset__legend--reset-legend;
   @extend .utrecht-form-fieldset__legend--distanced;
 }
diff --git a/proprietary/design-tokens/src/component/utrecht/form-fieldset/block.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/form-fieldset/block.style-dictionary.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "form-fieldset": {
+      "margin-block-start": { "value": "{utrecht.space.block.2xs.value}" },
+      "margin-block-end": { "value": "{utrecht.space.block.2xs.value}" }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/form-fieldset/element.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/form-fieldset/element.style-dictionary.json
@@ -0,0 +1,16 @@
+{
+  "utrecht": {
+    "form-fieldset": {
+      "legend": {
+        "color": {},
+        "font-family": {},
+        "font-size": { "value": "1rem" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight.value}" },
+        "line-height": { "value": "1.4" },
+        "margin-block-end": { "value": "{utrecht.space.block.sm.value}" },
+        "margin-block-start": { "value": "{utrecht.space.block.lg.value}" },
+        "text-transform": { "value": "uppercase" }
+      }
+    }
+  }
+}