Issues/2024 12 06

.storybook/fixtures/products.ts

@@ -101,7 +101,8 @@ export const FIXTURE_PRODUCTS = [
   {
     id: 10,
     name: "Smart TV",
-    description: "65-inch smart TV with 4K resolution and streaming capabilities.",
+    description:
+      "65-inch smart TV with 4K resolution and streaming capabilities.",
     url: "https://www.example.com/products/10",
     price: 599.99,
     stock: 10,
@@ -110,3 +111,5 @@ export const FIXTURE_PRODUCTS = [
     releaseDate: "2023-10-01",
   },
 ];
+
+export const FIXTURE_PRODUCT = FIXTURE_PRODUCTS[0];

src/components/data/attributelist/attributelist.tsx

@@ -21,8 +21,11 @@ export type AttributeListProps<T extends object = object> =
   };
 
 /**
- * AttributeList component, shows multiple `fields` in `object`.
- * TODO: tooltip
+ * AttributeList Component
+ *
+ * Shows key/value pairs, optionally grouped by `title`.
+ *
+ * @typeParam T - The shape of a single item.
  */
 export const AttributeList = <T extends object = object>({
   title = "",

src/components/data/attributetable/attributetable.scss

@@ -22,11 +22,6 @@
         padding-block-start: 0;
       }
     }
-
-    // Cell key bold
-    & .mykn-attributetable__cell--key {
-      font-weight: var(--typography-font-weight-bold);
-    }
   }
 
   &__body {
@@ -63,6 +58,7 @@
     margin: 0;
 
     &--key {
+      font-weight: var(--typography-font-weight-bold);
       grid-column: 1;
 
       > .mykn-icon:last-child {

src/components/data/attributetable/attributetable.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import * as React from "react";
 
+import { FIXTURE_PRODUCT } from "../../../../.storybook/fixtures/products";
 import { ButtonLink } from "../../button";
 import { Outline } from "../../icon";
 import { AttributeTable } from "./attributetable";
@@ -16,51 +17,37 @@ type Story = StoryObj<typeof meta>;
 
 export const AttributeTableComponent: Story = {
   args: {
-    object: {
-      url: "https://www.example.com",
-      omschrijving: "Afvalpas vervangen",
-      zaaktype: "https://www.example.com",
-      versie: 2,
-      opmerkingen: null,
-      actief: false,
-      toekomstig: false,
-      concept: true,
-    },
+    object: FIXTURE_PRODUCT,
   },
 };
 
 export const AttributeTableComponentCompact: Story = {
   args: {
-    object: {
-      url: "https://www.example.com",
-      omschrijving: "Afvalpas vervangen",
-      zaaktype: "https://www.example.com",
-      versie: 2,
-      opmerkingen: null,
-      actief: false,
-      toekomstig: false,
-      concept: true,
-    },
+    object: FIXTURE_PRODUCT,
     compact: true,
   },
 };
 
 export const LabeledAttributeTableComponent: Story = {
   args: {
     labeledObject: {
-      url: { label: "Url", value: "https://www.example.com" },
-      omschrijving: { label: "Omschrijving", value: "Afvalpas vervangen" },
-      zaaktype: { label: "Zaaktype", value: "https://www.example.com" },
-      versie: { label: "Versie", value: 2 },
-      opmerkingen: { label: "Opmerkingen", value: null },
-      actief: { label: "Actief", value: false },
-      toekomstig: { label: "Toekomstig", value: false },
-      concept: { label: "Concept", value: true },
+      id: { label: "Identifier", value: FIXTURE_PRODUCT.id },
+      name: { label: "Name", value: FIXTURE_PRODUCT.name },
+      description: { label: "Description", value: FIXTURE_PRODUCT.description },
+      url: { label: "Link", value: FIXTURE_PRODUCT.url },
+      price: { label: "Price", value: FIXTURE_PRODUCT.price },
+      stock: { label: "In stock", value: FIXTURE_PRODUCT.stock },
+      category: { label: "Category", value: FIXTURE_PRODUCT.category },
+      is_available: { label: "Available", value: FIXTURE_PRODUCT.isAvailable },
+      release_date: {
+        label: "Release date",
+        value: FIXTURE_PRODUCT.releaseDate,
+      },
     },
   },
 };
 
-export const LabeledAttributeTableComponentWithNodes: Story = {
+export const LabeledAttributeTableComponentWithJSX: Story = {
   args: {
     labeledObject: {
       button: {

src/components/data/attributetable/attributetable.tsx

@@ -16,10 +16,10 @@ import "./attributetable.scss";
 export type AttributeTableProps<T extends object = object> = {
   object?: T;
   // TODO: Deprecate?
-  labeledObject?: Record<string, { label: string; value: unknown }>;
+  labeledObject?: Record<string, { label: React.ReactNode; value: unknown }>;
   editable?: boolean;
   fields?: Field<T>[] | TypedField<T>[];
-  formProps?: FormProps;
+  formProps?: FormProps<T>;
   labelCancel?: string;
   labelEdit?: string;
   valign?: "middle" | "start";
@@ -29,7 +29,8 @@ export type AttributeTableProps<T extends object = object> = {
 /**
  * AttributeTable Component
  *
- * Shows key/value pairs, optionally grouped by `title`.
+ * Shows key/value pairs.
+ * @see DataGrid for more advanced table layout.
  *
  * @typeParam T - The shape of a single item.
  */
@@ -117,7 +118,7 @@ export type AttributeTableRowProps<T extends object = object> = {
   editable?: boolean;
   object?: T;
   // TODO: Deprecate in favor of using TypedField for labels in the future?
-  labeledObject?: Record<string, { label: string; value: unknown }>;
+  labeledObject?: Record<string, { label: React.ReactNode; value: unknown }>;
   field: TypedField<T>;
   isFormOpen: boolean;
   labelEdit?: string;

src/style/tokens/dark.scss

@@ -11,6 +11,7 @@
   --typography-color-body: #e3e5e8;
   --typography-color-border: #535353;
   --typography-color-h: #e3e5e8;
+  --typography-color-muted: #8c8c8c;
 
   --button-color-text-outline: #f3f3f3;
   --button-color-text-primary: #313741;