maykinmedia · svenvandescheur · Feb 9, 2024 · Feb 8, 2024 · Feb 8, 2024 · Feb 8, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.DS_STORE
 .idea
 build-storybook.log
 dist

diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
@@ -3,7 +3,7 @@
   align-items: center;
   border-radius: var(--border-radius-m);
   display: inline-flex;
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-xs);
   font-weight: var(--typography-font-weight-normal);
   height: var(--typography-line-height-body-s);

diff --git a/src/components/boolean/boolean.scss → src/components/boolean/bool.scss b/src/components/boolean/boolean.scss → src/components/boolean/bool.scss
@@ -1,4 +1,4 @@
-.mykn-boolean {
+.mykn-bool {
   align-items: center;
   border-radius: var(--border-radius-m);
   display: inline-flex;

diff --git a/src/components/boolean/boolean.stories.tsx → src/components/boolean/bool.stories.tsx b/src/components/boolean/boolean.stories.tsx → src/components/boolean/bool.stories.tsx
@@ -3,12 +3,12 @@ import { expect, within } from "@storybook/test";
 import React from "react";
 
 import { Body, H1, H2, H3, P } from "../typography";
-import { Boolean } from "./boolean";
+import { Bool } from "./bool";
 
 const meta = {
-  title: "Icon/Boolean",
-  component: Boolean,
-} satisfies Meta<typeof Boolean>;
+  title: "Icon/Bool",
+  component: Bool,
+} satisfies Meta<typeof Bool>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -65,20 +65,20 @@ export const BooleanInText: Story = {
   render: (args) => (
     <Body>
       <H1>
-        The quick brown fox jumps over the lazy dog <Boolean {...args} />
+        The quick brown fox jumps over the lazy dog <Bool {...args} />
       </H1>
       <H2>
-        The quick brown fox jumps over the lazy dog <Boolean {...args} />
+        The quick brown fox jumps over the lazy dog <Bool {...args} />
       </H2>
       <H3>
-        The quick brown fox jumps over the lazy dog <Boolean {...args} />
+        The quick brown fox jumps over the lazy dog <Bool {...args} />
       </H3>
       <P size="s">
         The quick brown fox jumps over the lazy dog{" "}
-        <Boolean {...args} value={false} explicit />
+        <Bool {...args} value={false} explicit />
       </P>
       <P size="xs">
-        The quick brown fox jumps over the lazy dog <Boolean {...args} />
+        The quick brown fox jumps over the lazy dog <Bool {...args} />
       </P>
     </Body>
   ),

diff --git a/src/components/boolean/boolean.tsx → src/components/boolean/bool.tsx b/src/components/boolean/boolean.tsx → src/components/boolean/bool.tsx
@@ -2,9 +2,9 @@ import clsx from "clsx";
 import React from "react";
 
 import { Outline } from "../../components/icon";
-import "./boolean.scss";
+import "./bool.scss";
 
-export type BooleanProps = {
+export type BoolProps = {
   /** The accessible label when value is true. */
   labelTrue: string;
 
@@ -19,22 +19,22 @@ export type BooleanProps = {
 };
 
 /**
- * Boolean component, shows a checkmark if `value` is `true`. If `value` is
+ * Bool component, shows a checkmark if `value` is `true`. If `value` is
  * `false` the icon is hidden, unless `explicit` is `true`.
  * @param children
  * @param props
  * @constructor
  */
-export const Boolean: React.FC<BooleanProps> = ({
+export const Bool: React.FC<BoolProps> = ({
   explicit = false,
   value,
   labelTrue,
   labelFalse,
   ...props
 }) => (
   <span
-    className={clsx("mykn-boolean", `mykn-boolean--value-${value}`, {
-      "mykn-boolean--explicit": explicit,
+    className={clsx("mykn-bool", `mykn-bool--value-${value}`, {
+      "mykn-bool--explicit": explicit,
     })}
     {...props}
     title={value ? labelTrue : labelFalse}

diff --git a/src/components/boolean/index.ts b/src/components/boolean/index.ts
@@ -1 +1 @@
-export * from "./boolean";
+export * from "./bool";
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -27,7 +27,7 @@
   display: inline-flex;
   gap: 0.5em;
   height: var(--mykn-button-height);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--mykn-button-font-size);
   font-weight: var(--mykn-button-font-weight);
   justify-content: center;

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -2,9 +2,8 @@
   background-color: var(--typography-color-background);
   border-radius: var(--border-radius-l);
   box-sizing: border-box;
-  padding: var(--spacing-v-xxl) var(--spacing-h-xxl);
 
   & + & {
-    margin-top: var(--spacing-v-m);
+    margin-block-start: var(--spacing-v-m);
   }
 }
diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { Page } from "../page";
+import { Body, P } from "../typography";
 import { Card } from "./card";
 
 const meta = {
@@ -24,6 +25,10 @@ type Story = StoryObj<typeof meta>;
 
 export const CardComponent: Story = {
   args: {
-    children: "The quick brown fox jumps over the lazy dog.",
+    children: (
+      <Body>
+        <P>The quick brown fox jumps over the lazy dog.</P>
+      </Body>
+    ),
   },
 };
diff --git a/src/components/data/attributelist/attributelist.scss b/src/components/data/attributelist/attributelist.scss
@@ -0,0 +1,43 @@
+@use "../../../settings/constants";
+
+.mykn-attributelist {
+  .mykn-h2 {
+    margin-block-end: 16px;
+  }
+
+  &__list {
+    display: grid;
+    gap: 0 var(--gutter-h-mobile);
+    grid-template-columns: 1fr;
+    margin: 0;
+  }
+
+  &__key,
+  &__value {
+    font-family: var(--typography-font-family-body);
+    font-size: var(--typography-font-size-body-s);
+    font-weight: var(--typography-font-weight-normal);
+    line-height: var(--typography-line-height-body-s);
+    margin: 0;
+  }
+
+  &__key {
+    color: var(--typography-color-muted);
+  }
+
+  &__value {
+    color: var(--typography-color-body);
+    margin-block-end: var(--gutter-v-mobile);
+  }
+
+  &__value:last-child {
+    margin-block-end: 0;
+  }
+
+  @media screen and (min-width: constants.$breakpoint-desktop) {
+    &__list {
+      gap: var(--gutter-v-desktop) var(--gutter-h-desktop);
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
diff --git a/src/components/data/attributelist/attributelist.stories.tsx b/src/components/data/attributelist/attributelist.stories.tsx
@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Grid } from "../../layout";
+import { Column } from "../../layout/column";
+import { Body, Hr } from "../../typography";
+import { AttributeList } from "./attributelist";
+
+const meta = {
+  title: "Data/AttributeList",
+  component: AttributeList,
+} satisfies Meta<typeof AttributeList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AttributeListComponent: Story = {
+  args: {
+    title: "Eigenschappen",
+    data: {
+      url: "https://www.example.com",
+      Omschrijving: "Afvalpas vervangen",
+      Zaaktype: "https://www.example.com",
+      Versie: 2,
+      Opmerkingen: null,
+    },
+  },
+};
+
+export const AttributeListOnMobile: Story = {
+  ...AttributeListComponent,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};
+
+export const WithBool: Story = {
+  ...AttributeListComponent,
+  args: {
+    ...AttributeListComponent.args,
+    data: {
+      url: "https://www.example.com",
+      Omschrijving: "Afvalpas vervangen",
+      Zaaktype: "https://www.example.com",
+      Versie: 2,
+      Opmerkingen: null,
+      Actief: false,
+      Toekomstig: false,
+      Concept: true,
+    },
+    boolProps: {
+      labelTrue: "This value is true",
+      labelFalse: "This value is false",
+    },
+  },
+};
+
+export const SelectedFieldOnly: Story = {
+  ...AttributeListComponent,
+  args: {
+    ...AttributeListComponent.args,
+    data: {
+      ...AttributeListComponent.args.data,
+      userId: 1,
+    },
+    fields: ["Omschrijving", "url"],
+  },
+};
+
+export const MultipleAttributeLists: Story = {
+  ...WithBool,
+  render: ({ ...args }) => (
+    <Body>
+      <Grid>
+        <Column span={12}>
+          <AttributeList {...args} />
+        </Column>
+      </Grid>
+
+      <Hr size="xxl" />
+
+      <Grid>
+        <Column span={6}>
+          <AttributeList {...args} />
+        </Column>
+        <Column span={6}>
+          <AttributeList {...args} />
+        </Column>
+      </Grid>
+
+      <Hr size="xxl" />
+
+      <Grid>
+        <Column span={6}>
+          <AttributeList {...args} />
+        </Column>
+        <Column span={6}>
+          <AttributeList {...args} />
+        </Column>
+      </Grid>
+    </Body>
+  ),
+};
diff --git a/src/components/data/attributelist/attributelist.tsx b/src/components/data/attributelist/attributelist.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+
+import { Attribute, AttributeData } from "../../../lib/data/attributedata";
+import { field2Title } from "../../../lib/format/string";
+import { BoolProps } from "../../boolean";
+import { H2 } from "../../typography";
+import { Value } from "../value";
+import "./attributelist.scss";
+
+export type AttributeListProps = React.ComponentPropsWithoutRef<"div"> & {
+  /** The fields in data to show. */
+  fields?: Array<keyof AttributeData>;
+
+  /** A title for the attribute list. */
+  title?: string;
+} & BoolPropsRequiredIfValueBool;
+
+type BoolPropsRequiredIfValueBool = BoolValueProps | NotBoolValueProps;
+
+// `value` can possibly be `boolean`, mandatory `boolProps`.
+type BoolValueProps = {
+  data: AttributeData;
+  boolProps: Omit<BoolProps, "value">;
+};
+
+// `value` can not be `boolean`, optional `boolProps`.
+type NotBoolValueProps = {
+  data: AttributeData<Exclude<Attribute, boolean>>;
+  boolProps?: Omit<BoolProps, "value">;
+};
+
+/**
+ * AttributeList component
+ * TODO: tooltip
+ * @param boolProps
+ * @param title
+ * @param data
+ * @param fields
+ * @param props
+ * @constructor
+ */
+export const AttributeList: React.FC<AttributeListProps> = ({
+  boolProps,
+  title = "",
+  data = {},
+  fields = Object.keys(data),
+  ...props
+}) => (
+  <div className="mykn-attributelist" {...props}>
+    {title && <H2>{title}</H2>}
+
+    <dl className="mykn-attributelist__list">
+      {fields.map((f) => (
+        <AttributePair
+          key={f}
+          boolProps={boolProps as BoolProps}
+          data={data}
+          field={f}
+        />
+      ))}
+    </dl>
+  </div>
+);
+
+export type AttributePairProps = {
+  data: AttributeData;
+  field: keyof AttributeData;
+} & BoolPropsRequiredIfValueBool;
+
+/**
+ * A single attribute in an AttributeList
+ * @param boolProps
+ * @param data
+ * @param field
+ * @constructor
+ * @private
+ */
+export const AttributePair: React.FC<AttributePairProps> = ({
+  boolProps,
+  data,
+  field,
+}) => {
+  return (
+    <>
+      <dt className="mykn-attributelist__key">{field2Title(field)}</dt>
+      <dd className="mykn-attributelist__value">
+        <Value value={data[field]} boolProps={boolProps as BoolProps} />
+      </dd>
+    </>
+  );
+};
diff --git a/src/components/data/attributelist/index.ts b/src/components/data/attributelist/index.ts
@@ -0,0 +1 @@
+export * from "./attributelist";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./boolean";
		export * from "./bool";