docs: legg til tabelleksempel above the fold

affects: @fremtind/jkl-table-react
fremtind · Nov 11, 2021 · 489b450 · 489b450
1 parent f23351a
commit 489b450
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 10 deletions.
diff --git a/packages/table-react/documentation/Table.mdx b/packages/table-react/documentation/Table.mdx
@@ -6,6 +6,7 @@ group: annet
 discussion: https://github.com/fremtind/jokul/discussions/2333
 ---
 
+import TableExample, { tableExampleCode } from "./TableExample";
 import DataTableExample, { dataTableExampleCode } from "./DataTableExample";
 import HeadlessTableExample, { headlessTableExampleCode } from "./HeadlessTableExample";
 import ClickableTableExample, { clickableTableExampleCode } from "./ClickableTableExample";
@@ -15,6 +16,16 @@ import MobileListTableExample, { mobileListTableExampleCode } from "./MobileList
 
 <Ingress>Vi bruker tabeller for å vise data på en ordnet måte som gjør sammenlikning enkelt.</Ingress>
 
+<ComponentExample
+    scrollable={true}
+    title="Tabell"
+    component={TableExample}
+    knobs={{
+        boolProps: ["Kompakt"],
+    }}
+    codeExample={tableExampleCode}
+/>
+
 Jøkul tilbyr enkeltkomponenter tilsvarende de du finner i HTML. Hvert tabell-element har sin egen Jøkul-motpart du kan ta i bruk:
 
 <table className="jkl-spacing-xl--top jkl-spacing-2xl--bottom">

diff --git a/packages/table-react/documentation/TableExample.tsx b/packages/table-react/documentation/TableExample.tsx
@@ -0,0 +1,69 @@
+import { ExampleComponentProps } from "doc-utils";
+import React, { VFC } from "react";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "../src";
+
+const columns = ["Dato", "Saksnummer", "Kundenummer", "Kundenavn", "Milepæl", "Følger saken"];
+
+const rows = [
+    ["24.02.2020", "20-1234567", "010203 99887", "Ola Nordmann", "Opprettet", "Siri Saksbehandler"],
+    ["13.04.2019", "20-8382811", "010203 99887", "Kari Nordkvinne", "Opprettet", "Siri Saksbehandler"],
+    ["31.07.2017", "20-1111", "010203 99887", "Kari Nordkvinne", "Opprettet", "Per Persen"],
+];
+
+const TableExample: VFC<ExampleComponentProps> = ({ boolValues }) => {
+    return (
+        <Table compact={boolValues?.["Kompakt"]} fullWidth>
+            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>
+            <TableHead>
+                <TableRow>
+                    {columns.map((column, index) => (
+                        <TableHeader key={index}>{column}</TableHeader>
+                    ))}
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {rows.map((row, rowIndex) => (
+                    <TableRow key={rowIndex}>
+                        {row.map((cell, cellIndex) => (
+                            <TableCell key={cellIndex}>{cell}</TableCell>
+                        ))}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+};
+
+export default TableExample;
+
+export const tableExampleCode = ({ boolValues }: ExampleComponentProps): string => `
+const columnHeaders = ["Dato", "Saksnummer", "Kundenummer", "Kundenavn", "Milepæl", "Følger saken"];
+
+const rows = [
+    ["24.02.2020", "20-1234567", "010203 99887", "Ola Nordmann", "Opprettet", "Siri Saksbehandler"],
+    ["13.04.2019", "20-8382811", "010203 99887", "Kari Nordkvinne", "Opprettet", "Siri Saksbehandler"],
+    ["31.07.2017", "20-1111", "010203 99887", "Kari Nordkvinne", "Opprettet", "Per Persen"],
+];
+
+<Table compact={${boolValues?.["Kompakt"]}} fullWidth>
+    <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>
+    <TableHead>
+        <TableRow>
+            {columnHeaders.map((header, index) => (
+                <TableHeader key={index}>
+                    {header}
+                </TableHeader>
+            ))}
+        </TableRow>
+    </TableHead>
+    <TableBody>
+        {rows.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+                {row.map((cell, cellIndex) => (
+                    <TableCell key={cellIndex}>{cell}</TableCell>
+                ))}
+            </TableRow>
+        ))}
+    </TableBody>
+</Table>
+`;
diff --git a/packages/table-react/integration/table.spec.js b/packages/table-react/integration/table.spec.js
@@ -1,10 +1,14 @@
 /// <reference types="cypress" />
 
 describe("Table", () => {
-    const mobilScroll = 0;
-    const mobilListe = 1;
-    const skjulteHeaders = 2;
-    const radMedHandling = 4;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const intro = 0;
+    const mobilScroll = 1;
+    const mobilListe = 2;
+    const skjulteHeaders = 3;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const datatabell = 4;
+    const radMedHandling = 5;
 
     beforeEach(() => {
         cy.testComponent("table");
@@ -14,9 +18,7 @@ describe("Table", () => {
         cy.getComponent().eq(mobilScroll).toMatchImageSnapshot();
         cy.getComponent().eq(skjulteHeaders).toMatchImageSnapshot();
 
-        cy.get('input[value="Liste"]').then(($input) => {
-            $input.click();
-        });
+        cy.get('input[value="Liste"]').click({ multiple: true });
         cy.getComponent().eq(mobilListe).toMatchImageSnapshot();
         cy.getComponent().eq(radMedHandling).toMatchImageSnapshot();
     });
@@ -28,9 +30,7 @@ describe("Table", () => {
             cy.getComponent().eq(mobilScroll).toMatchImageSnapshot();
             cy.getComponent().eq(skjulteHeaders).toMatchImageSnapshot();
 
-            cy.get('input[value="Liste"]').then(($input) => {
-                $input.click();
-            });
+            cy.get('input[value="Liste"]').click({ multiple: true });
             cy.getComponent().eq(mobilListe).toMatchImageSnapshot();
             cy.getComponent().eq(radMedHandling).toMatchImageSnapshot();
         });