feat: fieldset component

nl-design-system · Jul 8, 2021 · 93652a7 · 93652a7
1 parent d144cf3
commit 93652a7
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 0 deletions.
diff --git a/components/form-fieldset/README.md b/components/form-fieldset/README.md
@@ -0,0 +1 @@
+# Fieldset
diff --git a/components/form-fieldset/bem.css b/components/form-fieldset/bem.css
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-form-fieldset--distanced {
+  margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
+  margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
+}
+
+.utrecht-form-fieldset__legend {
+  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
+  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);
+  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
+}
+
+.utrecht-form-fieldset__legend--distanced {
+  margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
+  margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
+}
diff --git a/components/form-fieldset/bem.stories.mdx b/components/form-fieldset/bem.stories.mdx
@@ -0,0 +1,63 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+<!-- Import component and component styles -->
+
+import "./bem.css";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const Template = ({ content, legend }) =>
+  `<div class="utrecht-form-fieldset">
+  ${legend ? `<div class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--distanced">${legend}</div>` : ""}
+  ${content}
+</div>`;
+
+<Meta
+  title="Components/Form fieldset"
+  argTypes={{
+    content: {
+      description: "Set the content of the fieldset",
+      control: "text",
+    },
+    legende: {
+      description: "Set the content of the legend",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Fieldset
+
+Styling via the `.utrecht-form-fieldset` and `.utrecht-form-fieldset__legend` class names:
+
+<Canvas>
+  <Story
+    name="Fieldset"
+    args={{
+      content: "<p>Fieldset body</p>",
+      legend: "Fieldset legend",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Fieldset" />
diff --git a/components/form-fieldset/block.style-dictionary.json b/components/form-fieldset/block.style-dictionary.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "form-fieldset": {
+      "margin-block-end": {},
+      "margin-block-start": {}
+    }
+  }
+}
diff --git a/components/form-fieldset/element.style-dictionary.json b/components/form-fieldset/element.style-dictionary.json
@@ -0,0 +1,15 @@
+{
+  "utrecht": {
+    "form-fieldset": {
+      "legend": {
+        "color": {},
+        "font-family": {},
+        "font-size": {},
+        "font-weight": {},
+        "line-height": {},
+        "margin-block-end": {},
+        "margin-block-start": {}
+      }
+    }
+  }
+}
diff --git a/components/form-fieldset/html.scss b/components/form-fieldset/html.scss
@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+@mixin reset-fieldset {
+  border: 0;
+  margin: 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--distanced;
+}
+
+.utrecht-html legend {
+  @include reset-legend;
+  @extend .utrecht-form-fieldset__legend;
+  @extend .utrecht-form-fieldset__legend--distanced;
+}
diff --git a/components/form-fieldset/html.stories.mdx b/components/form-fieldset/html.stories.mdx
@@ -0,0 +1,65 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+<!-- Import component and component styles -->
+
+import "./html.scss";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const Template = ({ content, legend }) =>
+  `<div class="utrecht-html">
+  <fieldset>
+    ${legend ? `<legend>${legend}</legend>` : ""}
+    ${content}
+  </fieldset>
+</div>`;
+
+<Meta
+  title="Semantic HTML/Form fieldset"
+  argTypes={{
+    content: {
+      description: "Set the content of the fieldset",
+      control: "text",
+    },
+    legende: {
+      description: "Set the content of the legend",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Fieldset
+
+Styling via the `<fieldset>` and `<legend>` elements:
+
+<Canvas>
+  <Story
+    name="Fieldset"
+    args={{
+      content: "<p>Fieldset body</p>",
+      legend: "Fieldset legend",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Fieldset" />
diff --git a/components/html-content/html.scss b/components/html-content/html.scss
@@ -9,6 +9,7 @@
 @import "../button/html";
 @import "../checkbox/html";
 @import "../form-label/html";
+@import "../form-fieldset/html";
 @import "../heading/html";
 @import "../link/html";
 @import "../paragraph/html";