@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

package/src/Table/Table.stories.tsx

@@ -1,738 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { Meta, StoryFn } from "@storybook/react";
-import Table from "./Table";
-
-/**
- * Tabeller skal brukes til å presentere data (tabulære data), ikke til utforming. Det anbefales å holde tabellene så enkle som mulig. Ved mer kompleksitet kan data heller deles opp i flere tabeller.
- *
- * Tekstformatering, høyrestilling av tekst osv. angis ikke i tabellens stilsett, men gjøres i redaktørgrensesnittet.
- *
- * Titlene kan kuttes ut, plasseres som en topprad (thead), eller som første rad i en tabell (innenfor tbody). De vil bli stilet etter plassering.
- *
- * Dersom du bruker titler både på rader og kolonner må du definere i koden hvilken vei tittelen peker:
- *
- * `<th scope="row">`
- *
- * Tabeller kan ha en tilknyttet tittel ved bruk av elementet: `<caption>`
- */
-
-const meta: Meta = {
-  component: Table,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div style={{ padding: "24px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Base styles/Tables",
-};
-
-export default meta;
-
-export const Tables: StoryFn = () => (
-  <Table>
-    <caption>Tabelltittel</caption>
-    <thead>
-      <tr>
-        <th>
-          10<sup>n</sup>
-        </th>
-        <th>Prefiks</th>
-        <th>Symbol</th>
-        <th>Namn</th>
-        <th>Eksempel</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          10<sup>12</sup>
-        </td>
-        <td>tera</td>
-        <td>T</td>
-        <td>billion</td>
-        <td>1000000000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>9</sup>
-        </td>
-        <td>giga</td>
-        <td>G</td>
-        <td>milliard</td>
-        <td>1000000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>6</sup>
-        </td>
-        <td>mega</td>
-        <td>M</td>
-        <td>million</td>
-        <td>1000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>3</sup>
-        </td>
-        <td>kilo</td>
-        <td>k</td>
-        <td>tusen</td>
-        <td>1000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>2</sup>
-        </td>
-        <td>hekto</td>
-        <td>h</td>
-        <td>hundre</td>
-        <td>100</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>1</sup>
-        </td>
-        <td>deka</td>
-        <td>da</td>
-        <td>ti</td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-1</sup>
-        </td>
-        <td>desi</td>
-        <td>d</td>
-        <td>tidel</td>
-        <td>0,1</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-2</sup>
-        </td>
-        <td>centi</td>
-        <td>c</td>
-        <td>hundredel</td>
-        <td>0,01</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-3</sup>
-        </td>
-        <td>milli</td>
-        <td>m</td>
-        <td>tusendel</td>
-        <td>0,001</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-6</sup>
-        </td>
-        <td>mikro</td>
-        <td />
-        <td>milliondel</td>
-        <td>0,000001</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-9</sup>
-        </td>
-        <td>nano</td>
-        <td>n</td>
-        <td>milliarddel</td>
-        <td>
-          <p>0,000000001</p>
-        </td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithFormatting: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th>
-          10<sup>n</sup>
-        </th>
-        <th>Prefiks</th>
-        <th>Symbol</th>
-        <th>Namn</th>
-        <th style={{ textAlign: "right" }}>Eksempel</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          10<sup>15</sup>
-        </td>
-        <td>peta</td>
-        <td>P</td>
-        <td>billiard</td>
-        <td style={{ textAlign: "right" }}>1000000000000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>12</sup>
-        </td>
-        <td>tera</td>
-        <td>T</td>
-        <td>billion</td>
-        <td style={{ textAlign: "right" }}>1000000000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>9</sup>
-        </td>
-        <td>giga</td>
-        <td>G</td>
-        <td>milliard</td>
-        <td style={{ textAlign: "right" }}>1000000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>6</sup>
-        </td>
-        <td>mega</td>
-        <td>M</td>
-        <td>million</td>
-        <td style={{ textAlign: "right" }}>1000000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>3</sup>
-        </td>
-        <td>kilo</td>
-        <td>k</td>
-        <td>tusen</td>
-        <td style={{ textAlign: "right" }}>1000</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>2</sup>
-        </td>
-        <td>hekto</td>
-        <td>h</td>
-        <td>hundre</td>
-        <td style={{ textAlign: "right" }}>100</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>1</sup>
-        </td>
-        <td>deka</td>
-        <td>da</td>
-        <td>ti</td>
-        <td style={{ textAlign: "right" }}>10</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-1</sup>
-        </td>
-        <td>desi</td>
-        <td>d</td>
-        <td>tidel</td>
-        <td style={{ textAlign: "right" }}>0,1</td>
-      </tr>
-      <tr>
-        <td>
-          <strong>
-            10<sup>-2</sup>
-          </strong>
-        </td>
-        <td>
-          <strong>centi</strong>
-        </td>
-        <td>
-          <strong>c</strong>
-        </td>
-        <td>
-          <strong>hundredel</strong>
-        </td>
-        <td style={{ textAlign: "right" }}>
-          <strong>0,01</strong>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-3</sup>
-        </td>
-        <td>milli</td>
-        <td>m</td>
-        <td>tusendel</td>
-        <td style={{ textAlign: "right" }}>0,001</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-6</sup>
-        </td>
-        <td>mikro</td>
-        <td />
-        <td>milliondel</td>
-        <td style={{ textAlign: "right" }}>0,000001</td>
-      </tr>
-      <tr>
-        <td>
-          10<sup>-9</sup>
-        </td>
-        <td>nano</td>
-        <td>n</td>
-        <td>milliarddel</td>
-        <td style={{ textAlign: "right" }}>
-          <p>0,000000001</p>
-        </td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithTitleInFirstColumn: StoryFn = () => (
-  <Table>
-    <tbody>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>peta</td>
-        <td>P</td>
-        <td>billiard</td>
-        <td>1000000000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>tera</td>
-        <td>T</td>
-        <td>billion</td>
-        <td>1000000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>giga</td>
-        <td>G</td>
-        <td>milliard</td>
-        <td>1000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>mega</td>
-        <td>M</td>
-        <td>million</td>
-        <td>1000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>kilo</td>
-        <td>k</td>
-        <td>tusen</td>
-        <td>1000</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithTitleOnFirstColumnAndTopRow: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th />
-        <th scope="col">Prefiks</th>
-        <th scope="col">Symbol</th>
-        <th scope="col">Namn</th>
-        <th scope="col">Eksempel</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>peta</td>
-        <td>P</td>
-        <td>billiard</td>
-        <td>1000000000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>tera</td>
-        <td>T</td>
-        <td>billion</td>
-        <td>1000000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>giga</td>
-        <td>G</td>
-        <td>milliard</td>
-        <td>1000000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>mega</td>
-        <td>M</td>
-        <td>million</td>
-        <td>1000000</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel</th>
-        <td>kilo</td>
-        <td>k</td>
-        <td>tusen</td>
-        <td>1000</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithTitleSpanningSeveralRows: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th colSpan={2}>Tittel over flere kolonner</th>
-        <th>Tittel</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
-        <td>Data 3</td>
-      </tr>
-      <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
-        <td>Data 3</td>
-      </tr>
-      <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
-        <td>Data 3</td>
-      </tr>
-      <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
-        <td>Data 3</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithCelleSpanningSeveralRows: StoryFn = () => (
-  <Table>
-    <tbody>
-      <tr>
-        <th rowSpan={2} scope="row">
-          Tittel 1
-        </th>
-        <td>Data 1</td>
-        <td>Data 2</td>
-      </tr>
-      <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
-      </tr>
-      <tr>
-        <th scope="row">Tittel 2</th>
-        <td>Data 1</td>
-        <td>Data 2</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-export const WithSeveralTitleRows: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th>Tittel 1</th>
-        <th colSpan={3} align="center">
-          Tittel 2
-        </th>
-        <th>Tittel 3</th>
-      </tr>
-      <tr>
-        <th />
-        <th>Tittel 1</th>
-        <th>Tittel 2</th>
-        <th>Tittel 3</th>
-        <th />
-      </tr>
-    </thead>
-    <tbody>
-      {[1, 2, 3, 4].map((index) => (
-        <tr key={index}>
-          <td>Data</td>
-          <td>Data 1</td>
-          <td>Data 2</td>
-          <td>Data 3</td>
-          <td>Data 4</td>
-        </tr>
-      ))}
-    </tbody>
-  </Table>
-);
-
-export const WithHeaderColumn: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th colSpan={3} align="center">
-          Tittel
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {[1, 2, 3, 4].map((index) => (
-        <tr key={index}>
-          <td>Data</td>
-          <td>Data 1</td>
-          <td>Data 2</td>
-        </tr>
-      ))}
-    </tbody>
-  </Table>
-);
-
-export const WithPicture: StoryFn = () => (
-  <Table>
-    <caption>Caption</caption>
-    <thead>
-      <tr>
-        <th />
-        <th style={{ textAlign: "center" }} scope="col">
-          Fly
-        </th>
-        <th style={{ textAlign: "center" }} scope="col">
-          Buss
-        </th>
-        <th style={{ textAlign: "center" }} scope="col">
-          Sykkel
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">Bilde</th>
-        <td>
-          <img
-            alt="Fly"
-            src="https://images.pexels.com/photos/249581/pexels-photo-249581.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=187&w=315"
-          />
-        </td>
-        <td>
-          <img
-            alt="Buss"
-            src="https://images.pexels.com/photos/34729/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=187&w=315"
-          />
-        </td>
-        <td>
-          <img
-            alt="Sykkel"
-            src="https://images.pexels.com/photos/326678/pexels-photo-326678.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=187&w=315"
-          />
-        </td>
-      </tr>
-      <tr>
-        <th scope="row">Symbol</th>
-        <td style={{ textAlign: "center" }}>
-          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-            <path
-              fill="#6F6F6F"
-              d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"
-            />
-          </svg>
-        </td>
-        <td style={{ textAlign: "center" }}>
-          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-            <path
-              fill="#6F6F6F"
-              d="M18,11H6V6H18M16.5,17A1.5,1.5 0 0,1 15,15.5A1.5,1.5 0 0,1 16.5,14A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 16.5,17M7.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,14A1.5,1.5 0 0,1 9,15.5A1.5,1.5 0 0,1 7.5,17M4,16C4,16.88 4.39,17.67 5,18.22V20A1,1 0 0,0 6,21H7A1,1 0 0,0 8,20V19H16V20A1,1 0 0,0 17,21H18A1,1 0 0,0 19,20V18.22C19.61,17.67 20,16.88 20,16V6C20,2.5 16.42,2 12,2C7.58,2 4,2.5 4,6V16Z"
-            />
-          </svg>
-        </td>
-        <td style={{ textAlign: "center" }}>
-          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-            <path
-              fill="#6F6F6F"
-              d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"
-            />
-          </svg>
-        </td>
-      </tr>
-      <tr>
-        <th scope="row">Ord</th>
-        <td style={{ textAlign: "center" }}>Fly</td>
-        <td style={{ textAlign: "center" }}>Buss</td>
-        <td style={{ textAlign: "center" }}>Sykkel</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithScrollbar: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th>Id</th>
-        <th>Fornavn</th>
-        <th>Etternavn</th>
-        <th>Epost</th>
-        <th>Adresse</th>
-        <th>Land</th>
-        <th>Språk</th>
-        <th>Brukernavn</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>1</td>
-        <td>Rogers</td>
-        <td>Hearson</td>
-        <td>rhearson0@nifty.com</td>
-
-        <td style={{ whiteSpace: "nowrap" }}>34704 Duke Circle</td>
-        <td>Brazil</td>
-        <td>Fijian</td>
-        <td>rhearson0</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Lucie</td>
-        <td>Jikylls</td>
-        <td>ljikylls1@csmonitor.com</td>
-        <td style={{ whiteSpace: "nowrap" }}>9824 Swallow Place</td>
-        <td style={{ whiteSpace: "nowrap" }}>Sweden/Denmark/Norway</td>
-        <td>Italian</td>
-        <td>ljikylls1</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td>Kippie</td>
-        <td>Reeveley</td>
-        <td>kreeveley2@ebay.com</td>
-        <td style={{ whiteSpace: "nowrap" }}>1 Stephen Court</td>
-        <td>Namibia</td>
-        <td>West Frisian</td>
-        <td>kreeveley2</td>
-      </tr>
-      <tr>
-        <td>4</td>
-        <td>Klarrisa</td>
-        <td>Minghetti</td>
-        <td>kminghetti3@163.com</td>
-        <td style={{ whiteSpace: "nowrap" }}>7 Truax Point</td>
-        <td>Greece</td>
-        <td>Luxembourgish</td>
-        <td>kminghetti3</td>
-      </tr>
-      <tr>
-        <td>5</td>
-        <td>Trefor</td>
-        <td>Lambregts</td>
-        <td>tlambregts4@youtu.be</td>
-        <td style={{ whiteSpace: "nowrap" }}>61 Monica Center</td>
-        <td>Sweden</td>
-        <td>Northern Sotho</td>
-        <td>tlambregts4</td>
-      </tr>
-      <tr>
-        <td>6</td>
-        <td>Aridatha</td>
-        <td>Kuhnt</td>
-        <td>akuhnt5@sitemeter.com</td>
-        <td style={{ whiteSpace: "nowrap" }}>2898 Wayridge Terrace</td>
-        <td>China</td>
-        <td>Latvian</td>
-        <td>akuhnt5</td>
-      </tr>
-      <tr>
-        <td>7</td>
-        <td>Kalie</td>
-        <td>Olander</td>
-        <td>kolander6@loc.gov</td>
-        <td style={{ whiteSpace: "nowrap" }}>554 Maywood Parkway</td>
-        <td>China</td>
-        <td>Czech</td>
-        <td>kolander6</td>
-      </tr>
-    </tbody>
-  </Table>
-);
-
-export const WithColumnWidth: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th style={{ width: "33.333%" }}>Fremragende</th>
-        <th style={{ width: "33.333%" }}>Kompetent</th>
-        <th style={{ width: "33.333%" }}>På vei</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>mestrer ulike formater for nettreklame</td>
-        <td>mestrer ett format godt, og er på god vei til å mestre flere</td>
-        <td>mestrer ett reklameformat</td>
-      </tr>
-      <tr>
-        <td>bruker de samme prinsippene for layout og komposisjon i begge annonsene</td>
-        <td>bruker layout og komposisjon i annonsene</td>
-        <td>bruker til dels prinsipper for layout og komposisjon, men hvilke og hvor de er brukt, kan være uklart</td>
-      </tr>
-      <tr>
-        <td>har reflekterte argumenter for hvorfor farger og fonter er valgt og prioritert</td>
-        <td>bruker farger og fonter som virkemidler i annonsene</td>
-        <td>Noen designvalg er gode, andre er mindre gjennomført.</td>
-      </tr>
-      <tr>
-        <td>Godt teknisk håndverk kjennetegner annonsene.</td>
-        <td>Dette er bra, men noen elementer og piksler er upresist plassert eller på avveier.</td>
-        <td>Noen elementer er godt bearbeidet, men det gjenstår litt før annonsen er ferdig designet.</td>
-      </tr>
-      <tr />
-    </tbody>
-  </Table>
-);
-
-export const WithCellAlignment: StoryFn = () => (
-  <Table>
-    <thead>
-      <tr>
-        <th style={{ width: "33.333%" }}>Fremragende</th>
-        <th style={{ width: "33.333%" }}>Kompetent</th>
-        <th style={{ width: "33.333%" }}>På vei</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-align="left">mestrer ulike formater for nettreklame</td>
-        <td data-align="center">mestrer ett format godt, og er på god vei til å mestre flere</td>
-        <td data-align="right">mestrer ett reklameformat</td>
-      </tr>
-      <tr>
-        <td data-align="left">bruker de samme prinsippene for layout og komposisjon i begge annonsene</td>
-        <td data-align="center">bruker layout og komposisjon i annonsene</td>
-        <td data-align="right">
-          bruker til dels prinsipper for layout og komposisjon, men hvilke og hvor de er brukt, kan være uklart
-        </td>
-      </tr>
-      <tr>
-        <td data-align="left">har reflekterte argumenter for hvorfor farger og fonter er valgt og prioritert</td>
-        <td data-align="center">bruker farger og fonter som virkemidler i annonsene</td>
-        <td data-align="right">Noen designvalg er gode, andre er mindre gjennomført.</td>
-      </tr>
-      <tr>
-        <td data-align="left">Godt teknisk håndverk kjennetegner annonsene.</td>
-        <td data-align="center">Dette er bra, men noen elementer og piksler er upresist plassert eller på avveier.</td>
-        <td data-align="right">
-          Noen elementer er godt bearbeidet, men det gjenstår litt før annonsen er ferdig designet.
-        </td>
-      </tr>
-      <tr />
-    </tbody>
-  </Table>
-);