fix: toppjuster tabellinnhold som standard

[wkillerud]

ISSUES CLOSED: #2434

☑️ Sjekkliste

• Jeg har lest CONTRIBUTING og dokumentasjon det henvises til
• Jeg har satt target branch til main, eller external-contributions dersom pull requesten kommer fra en fork
• Jeg har kjørt yarn build og yarn ci:test og disse gir ingen feil
• Jeg har lagt til tester som demonstrerer at feilen er rettet eller featuren fungerer
• Jeg har skrevet relevant dokumentasjon

[piofinn]

Ville kanskje også vurdert å legge til dette (eller tilsvarende) under "Rader med handling" på portalsiden:

Knapper skal komme til slutt i raden og høyrejusteres. Tekstinnholdet i rader med handling bør sentreres vertikalt slik at det kommer på linje med knappene, med mindre det er mye innhold som bryter over flere linjer. I listevisning skal knappene venstrejusteres og vises under en egen overskrift.

[wkillerud]

Ja, kom på her at jeg glemte oppdatere teksten under Typografi også, så der står det fremdeles at vi skal sentrere. Oppdaterer når Cypress gir oss nye snapshots.

[piofinn]

Oppdaterer når Cypress gir oss nye snapshots.

Topp! Jeg ønsker meg fortsatt også et generelt eksempel "above the fold" på portalsiden, forresten 😅 Hva med noe som dette (beklager wall of text 😑), som kan plasseres rett etter ingressen?

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>
`;

[wkillerud]

Har lagt til en "eksempelvelger" i toppen etter ønske i #2333