✨ #11 - feat: add datagrid component

src/components/button/button.scss

@@ -46,6 +46,7 @@
     );
     --mykn-button-padding-v: 0;
     --mykn-button-padding-h: 0;
+    flex-shrink: 0;
   }
 
   &--variant-primary {

src/components/datagrid/datagrid.scss

@@ -0,0 +1,143 @@
+@use "../../settings/style";
+
+.mykn-datagrid {
+  background-color: var(--typography-color-background);
+  border-radius: var(--border-radus-m);
+
+  &__table {
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  &__caption {
+    padding: var(--spacing-v-m) var(--spacing-h-m);
+    text-align: start;
+  }
+
+  &__head {
+    background-color: var(--typography-color-background);
+    position: sticky;
+    top: 0;
+  }
+
+  &__head &__row:first-child &__cell {
+    border-top: 1px solid var(--theme-shade-300);
+  }
+
+  &__cell {
+    border-bottom: 1px solid var(--theme-shade-300);
+    box-sizing: border-box;
+    padding: var(--spacing-v-m) var(--spacing-h-m);
+  }
+
+  &__cell--type-boolean {
+    text-align: center;
+  }
+
+  &__cell--type-number {
+    text-align: end;
+  }
+
+  &__foot {
+    position: sticky;
+    bottom: 0;
+  }
+
+  &__foot &__cell {
+    border-bottom: none;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media screen and (max-width: style.$breakpoint-desktop - 1px) {
+    background-color: transparent;
+    overflow: visible;
+
+    &__table {
+      display: block;
+    }
+
+    &__caption {
+      background-color: var(--typography-color-background);
+      border-radius: var(--border-radus-m);
+      display: block;
+    }
+
+    &__head {
+      display: none;
+    }
+
+    &__body {
+      display: block;
+    }
+
+    &__row {
+      background-color: var(
+        --typography-color-background
+      ); //border-radius: var(--border-radus-m);
+      display: flex;
+      flex-wrap: wrap;
+
+      &:nth-child(even) {
+        background-color: var(--theme-shade-100);
+      }
+    }
+
+    &__row:nth-child(even) &__cell {
+      border-bottom: 1px solid var(--typography-color-background);
+    }
+
+    &__cell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-h-m);
+      width: 100%;
+      position: relative;
+
+      .mykn-p {
+        font-weight: var(--typography-font-weight-bold);
+        width: 100%;
+      }
+
+      &:before {
+        color: var(--theme-shade-700);
+        content: attr(aria-description);
+        font-family: Inter, sans-serif;
+        font-size: var(--typography-font-size-body-xs);
+        font-weight: var(--typography-font-weight-normal);
+        line-height: var(--typography-line-height-body-xs);
+        display: block;
+        text-align: start;
+        width: 40%;
+      }
+
+      &:first-child .mykn-a:has(.mykn-icon) {
+        float: right;
+      }
+    }
+
+    &__foot {
+      display: flex;
+    }
+
+    &__foot &__row {
+      width: 100%;
+    }
+
+    &__foot &__cell {
+      padding: 0;
+
+      &:before {
+        display: none;
+      }
+    }
+
+    .mykn-toolbar {
+      border-radius: var(--border-radus-m);
+    }
+
+    .mykn-paginator .mykn-icon--spin:first-child {
+      display: none;
+    }
+  }
+}

src/components/datagrid/datagrid.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+
+import { Page } from "../page";
+import { PaginatorProps } from "../paginator";
+import { DataGrid } from "./datagrid";
+
+const meta = {
+  title: "Data/DataGrid",
+  component: DataGrid,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
+} satisfies Meta<typeof DataGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DataridComponent = {
+  args: {
+    booleanProps: {
+      labelTrue: "This value is true",
+      labelFalse: "This value is false",
+    },
+    paginatorProps: {
+      count: 100,
+      page: 1,
+      pageSize: 10,
+      pageSizeOptions: [
+        { label: 10 },
+        { label: 20 },
+        { label: 30 },
+        { label: 40 },
+        { label: 50 },
+      ],
+      labelLoading: "Loading",
+      labelPagination: "pagination",
+      labelCurrentPageRange: "{pageStart} - {pageEnd} of {pageCount}",
+      labelGoToPage: "Go to",
+      labelPageSize: "Show rows",
+      labelPrevious: "Go to previous page",
+      labelNext: "Go to next page",
+    },
+    results: [
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Afvalpas vervangen",
+        Versie: 2,
+        Actief: false,
+        Toekomstig: false,
+        Concept: true,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Erfpacht wijzigen",
+        Versie: 4,
+        Actief: true,
+        Toekomstig: true,
+        Concept: true,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Dakkapel vervangen",
+        Versie: 1,
+        Actief: false,
+        Toekomstig: false,
+        Concept: false,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Dakkapel vervangen",
+        Versie: 4,
+        Actief: true,
+        Toekomstig: true,
+        Concept: true,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Erfpacht wijzigen",
+        Versie: 2,
+        Actief: false,
+        Toekomstig: false,
+        Concept: true,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Dakkapel vervangen",
+        Versie: 4,
+        Actief: true,
+        Toekomstig: true,
+        Concept: true,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Erfpacht wijzigen",
+        Versie: 1,
+        Actief: false,
+        Toekomstig: false,
+        Concept: false,
+      },
+      {
+        url: "https://www.example.com",
+        Omschrijving: "Dakkapel vervangen",
+        Versie: 1,
+        Actief: false,
+        Toekomstig: false,
+        Concept: false,
+      },
+    ],
+    title: "Posts",
+    urlFields: ["url"],
+  },
+};
+
+export const DatagridOnMobile: Story = {
+  ...DataridComponent,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    chromatic: {
+      viewports: ["mobile1"],
+    },
+  },
+};
+
+export const JSONPlaceholderExample: Story = {
+  args: {
+    booleanProps: {
+      labelTrue: "This value is true",
+      labelFalse: "This value is false",
+    },
+    paginatorProps: {
+      count: 100,
+      page: 1,
+      pageSize: 10,
+      pageSizeOptions: [
+        { label: 10 },
+        { label: 20 },
+        { label: 30 },
+        { label: 40 },
+        { label: 50 },
+      ],
+      labelLoading: "Loading",
+      labelPagination: "pagination",
+      labelCurrentPageRange: "{pageStart} - {pageEnd} of {pageCount}",
+      labelGoToPage: "Go to",
+      labelPageSize: "Show rows",
+      labelPrevious: "Go to previous page",
+      labelNext: "Go to next page",
+    },
+    results: [],
+    title: "Posts",
+  },
+  render: (args) => {
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState<number>(args.paginatorProps?.page || 1);
+    const [pageSize, setPageSize] = useState<number>(
+      args.paginatorProps?.pageSize || 10,
+    );
+    const [results, setResults] = useState(args.results);
+    const paginatorProps = args.paginatorProps as PaginatorProps;
+
+    paginatorProps.pageSize = pageSize;
+
+    useEffect(() => {
+      setLoading(true);
+      const index = page - 1;
+      const abortController = new AbortController();
+
+      fetch("https://jsonplaceholder.typicode.com/posts", {
+        signal: abortController.signal,
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          // Paginate locally for demonstration purposes.
+          const posts = data.slice(
+            index * pageSize,
+            index * pageSize + pageSize,
+          );
+          setResults(posts);
+          setLoading(false);
+        });
+
+      return () => {
+        abortController.abort();
+        setLoading(false);
+      };
+    }, [page, pageSize]);
+
+    paginatorProps.loading = loading;
+    paginatorProps.onPageChange = (page) => setPage(page);
+    paginatorProps.onPageSizeChange = async (pageSize) => setPageSize(pageSize);
+
+    return <DataGrid {...args} results={results} />;
+  },
+};