style: data-list with utrecht component

nl-design-system · Sep 28, 2022 · 0c94b89 · 0c94b89
1 parent 00346ed
commit 0c94b89
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 1 deletion.
diff --git a/documentation/demopages/nl-design-system/algemeen/Datalist.tsx b/documentation/demopages/nl-design-system/algemeen/Datalist.tsx
@@ -0,0 +1,32 @@
+import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template';
+import { DataListItem, DataListKey, DataList as DataListNL, DataListValue } from '@utrecht/component-library-react';
+import '../common/style.scss';
+
+const DataList = () => {
+  return (
+    <div className="rvo-nl-demo-page">
+      <LayoutColumnRow size="lg">
+        <main className="rvo-max-width-layout rvo-max-width-layout--lg">
+          <div className="rvo-content">
+            <DataListNL appearance="rows">
+              <DataListItem>
+                <DataListKey>Voornaam</DataListKey>
+                <DataListValue>Mees</DataListValue>
+              </DataListItem>
+              <DataListItem>
+                <DataListKey>Achternaam</DataListKey>
+                <DataListValue>de Vos</DataListValue>
+              </DataListItem>
+              <DataListItem>
+                <DataListKey>Gereserveerde zitplaats</DataListKey>
+                <DataListValue>42</DataListValue>
+              </DataListItem>
+            </DataListNL>
+          </div>
+        </main>
+      </LayoutColumnRow>
+    </div>
+  );
+};
+
+export default DataList;
diff --git a/documentation/demopages/nl-design-system/algemeen/algemeen.stories.mdx b/documentation/demopages/nl-design-system/algemeen/algemeen.stories.mdx
@@ -2,6 +2,7 @@ import frameworkDecorator from "@nl-rvo/storybook/frameworkDecorator";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import Breadcrumbs from "./Breadcrumbs";
 import Content from "./Content";
+import Datalist from "./Datalist";
 import Formulier from "./Formulier";
 
 <Meta
@@ -39,3 +40,9 @@ import Formulier from "./Formulier";
     <Breadcrumbs />
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story name="Datalist">
+    <Datalist />
+  </Story>
+</Canvas>
diff --git a/documentation/demopages/nl-design-system/common/mixins/_datalist.scss b/documentation/demopages/nl-design-system/common/mixins/_datalist.scss
@@ -0,0 +1,31 @@
+@mixin datalist {
+  .utrecht-data-list {
+    border-color: var(--utrecht-data-list-border-color, transparent);
+    border-style: solid;
+    border-width: var(--utrecht-data-list-border-width, 0);
+
+    &__item {
+      &:last-child {
+        /* Hide the bottom border of the table */
+        margin-block-end: calc(var(--utrecht-data-list-rows-border-bottom-width, 0) * -1);
+      }
+    }
+
+    &__item-key {
+      border-right-color: var(--utrecht-data-list-item-key-border-right-color, transparent);
+      border-right-style: solid;
+      border-right-width: var(--utrecht-data-list-item-key-border-right-width, 0);
+      padding-block-end: var(--utrecht-data-list-item-key-padding-block-end, 0);
+      padding-block-start: var(--utrecht-data-list-item-key-padding-block-start, 0);
+      padding-inline-end: var(--utrecht-data-list-item-key-padding-inline-end, 0);
+      padding-inline-start: var(--utrecht-data-list-item-key-padding-inline-start, 0);
+    }
+
+    &__item-value {
+      padding-block-end: var(--utrecht-data-list-item-value-padding-block-end, 0);
+      padding-block-start: var(--utrecht-data-list-item-value-padding-block-start, 0);
+      padding-inline-end: var(--utrecht-data-list-item-value-padding-inline-end, 0);
+      padding-inline-start: var(--utrecht-data-list-item-value-padding-inline-start, 0);
+    }
+  }
+}
diff --git a/documentation/demopages/nl-design-system/common/mixins/_index.scss b/documentation/demopages/nl-design-system/common/mixins/_index.scss
@@ -4,6 +4,7 @@
 @forward "menu";
 @forward "form";
 @forward "data";
+@forward "datalist";
 @forward "table";
 @forward "alerts";
 @forward "submenu";

diff --git a/documentation/demopages/nl-design-system/common/overrides.scss b/documentation/demopages/nl-design-system/common/overrides.scss
@@ -4,6 +4,7 @@
 .utrecht-link {
   font-weight: var(--rvo-link-font-weight);
 }
+
 .utrecht-link:focus,
 .utrecht-link:focus-visible {
   outline: none;
@@ -25,3 +26,23 @@
   align-self: flex-start;
   flex: 24px 0 0;
 }
+
+/* display hack for storybook  */
+.utrecht-data-list {
+  width: min(600px, 100vw - 2rem);
+}
+
+/* Remove old utrecht data list code */
+.utrecht-data-list--rows .utrecht-data-list__item {
+  grid-template-areas: unset;
+  margin-block-start: 0;
+}
+
+.utrecht-data-list--rows .utrecht-data-list__item-value {
+  margin-block-start: 0;
+}
+
+.utrecht-data-list__item-key,
+.utrecht-data-list__item-value {
+  grid-area: revert;
+}
diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss
@@ -10,8 +10,8 @@
 
   @include mixins.menu;
   @include mixins.form;
+  @include mixins.datalist;
 
-  // @include mixins.data;
   // @include mixins.table;
   // @include mixins.alerts;
   // @include mixins.submenu;

diff --git a/proprietary/design-tokens/src/components/utrecht/data-list.tokens.json b/proprietary/design-tokens/src/components/utrecht/data-list.tokens.json
@@ -0,0 +1,91 @@
+{
+  "utrecht": {
+    "data-list": {
+      "border-color": {
+        "value": "{rvo.color.grijs4}"
+      },
+      "border-width": {
+        "value": "1px"
+      },
+      "margin-block-end": {
+        "value": "{rvo.space.md}"
+      },
+      "margin-block-start": {
+        "value": "{rvo.space.md}"
+      },
+      "item-key": {
+        "border-right-color": {
+          "value": "{utrecht.data-list.border-color}"
+        },
+        "border-right-width": {
+          "value": "{utrecht.data-list.border-width}"
+        },
+        "color": {},
+        "font-size": {},
+        "font-weight": {
+          "value": "{rvo.font-weight.bold}"
+        },
+        "line-height": {},
+        "padding-block-end": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-block-start": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-inline-end": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-inline-start": {
+          "value": "{rvo.space.sm}"
+        }
+      },
+      "item-value": {
+        "color": {},
+        "font-size": {},
+        "line-height": {},
+        "padding-block-end": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-block-start": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-inline-end": {
+          "value": "{rvo.space.sm}"
+        },
+        "padding-inline-start": {
+          "value": "{rvo.space.sm}"
+        }
+      },
+      "rows": {
+        "border-bottom-color": {
+          "value": "{utrecht.data-list.border-color}"
+        },
+        "border-bottom-width": {
+          "value": "{utrecht.data-list.border-width}"
+        },
+        "item": {
+          "margin-block-start": {
+            "value": "{rvo.space.md}"
+          },
+          "padding-inline-start": {
+            "value": "{rvo.space.sm}"
+          }
+        },
+        "item-value": {
+          "margin-block-start": {
+            "value": "{rvo.space.md}"
+          }
+        },
+        "column": {
+          "inline-size": {
+            "value": "50%"
+          },
+          "min-inline-size": {
+            "value": "25ch"
+          }
+        },
+        "gap": {}
+      }
+    }
+  }
+}