214 implement first iteration of table

packages/fhi-designsystem/src/components/table/docs.mdx

@@ -0,0 +1,33 @@
+import { FhiDataTable } from './fhi-data-table/fhi-data-table.component.ts';
+
+import * as FhiDataTableStories from './fhi-data-table/fhi-data-table.stories.ts';
+import * as FhiDataTableRowStories from './fhi-data-table-row/fhi-data-table-row.stories.ts';
+import * as FhiDataTableCellStories from './fhi-data-table-cell/fhi-data-table-cell.stories.ts';
+
+import { Meta, Primary, Canvas, Controls } from '@storybook/addon-docs/blocks';
+
+import { ApiDefinition } from '../../../.storybook/blocks/api-definition.jsx';
+
+<Meta of={FhiDataTableStories} />
+
+# Data Table
+
+Data babell brukes for å presentere data og informasjon på en ryddig måte. Brukeren kan raskt få oversikt og skanne innholdet effektivt.
+
+Tabellen består av rader med celler som inneholder data. Rader defineres med `<fhi-data-table-row>`, og celler med `<fhi-data-table-cell>`.
+
+## Passer til
+
+- Å vise lister med større mengder strukturert data på en måte som er lett å lese og sammenligne.
+
+<Canvas of={FhiDataTableStories.Preview} />
+<Controls of={FhiDataTableStories.Preview} />
+
+## Eksempler
+<Canvas of={FhiDataTableStories.ComplexData} />
+<br />
+<Canvas of={FhiDataTableStories.WithCheckboxes} />
+
+<ApiDefinition of={FhiDataTableStories.Preview} />
+<ApiDefinition of={FhiDataTableRowStories.Preview} />
+<ApiDefinition of={FhiDataTableCellStories.Preview} />

packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.component.ts

@@ -0,0 +1,94 @@
+import { html, css, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export const FhiDataTableCellSelector = 'fhi-data-table-cell';
+
+/**
+ * ## FHI Table Cell
+ *
+ * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}
+ *
+ * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.
+ * It allows users to properly display data within a `<fhi-data-table-row>`.
+ *
+ * The `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.
+ *
+ * @tag fhi-data-table-cell
+ * @element fhi-data-table-cell
+ */
+@customElement(FhiDataTableCellSelector)
+export class FhiDataTableCell extends LitElement {
+  /**
+   * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.
+   * @type {'header' | 'body'}
+   */
+  @property({ type: String, reflect: true })
+  variant: 'header' | 'body' = 'body';
+
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      this.role = this.variant === 'header' ? 'columnheader' : 'cell';
+    }
+
+    super.update(changedProperties);
+  }
+
+  render() {
+    return html`
+      <div class="cell-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      --fhi-data-table-cell-justify-content: unset;
+      --fhi-data-table-cell-align-items: unset;
+
+      --fhi-data-table-cell-border-style: unset;
+      --fhi-data-table-cell-border-width: unset;
+      --fhi-data-table-cell-border-color: unset;
+    }
+
+    :host {
+      --fhi-data-table-cell-justify-content: start;
+      --fhi-data-table-cell-align-items: center;
+
+      display: table-cell;
+
+      padding: var(--fhi-spacing-150);
+      color: var(--fhi-color-neutral-text-default);
+
+      border-style: var(--fhi-data-table-cell-border-style);
+      border-width: var(--fhi-data-table-cell-border-width);
+      border-color: var(--fhi-data-table-cell-border-color);
+
+      .cell-content {
+        display: flex;
+        justify-content: var(--fhi-data-table-cell-justify-content);
+        align-items: var(--fhi-data-table-cell-align-items);
+      }
+    }
+
+    :host([variant='body']) {
+      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
+
+      font: var(--fhi-typography-body-medium-font-weight)
+        var(--fhi-typography-body-medium-font-size) /
+        var(--fhi-typography-body-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+
+    :host([variant='header']) {
+      white-space: nowrap;
+
+      letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
+
+      font: var(--fhi-typography-label-medium-font-weight)
+        var(--fhi-typography-label-medium-font-size) /
+        var(--fhi-typography-label-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+  `;
+}

packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.stories.ts

@@ -0,0 +1,45 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { FhiDataTableCell } from './fhi-data-table-cell.component';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { FhiStorybookMeta } from '../../../../.storybook/fhi-meta';
+
+new FhiDataTableCell();
+
+const meta: FhiStorybookMeta<FhiDataTableCell> = {
+  title: 'Komponenter/Table/Cell',
+  component: 'fhi-data-table-cell',
+  parameters: {
+    slotTypes: [
+      {
+        name: '-',
+        description:
+          'Innholdet i cellen. Kan være tekst eller andre HTML-elementer.',
+      },
+    ],
+  },
+  decorators: [],
+  render: args =>
+    html`<fhi-data-table-cell variant="${ifDefined(args.variant)}">
+      374 964
+    </fhi-data-table-cell>`,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['header', 'body'],
+      description:
+        'Definerer om cellen er en header eller body celle. Når <fhi-data-table-cell> brukes i en header <fhi-data-table-row>, vil variant automatisk bli satt til header.',
+      defaultValue: { summary: 'body' },
+    },
+  },
+};
+
+type Story = StoryObj<FhiDataTableCell>;
+
+export const Preview: Story = {
+  tags: ['!dev'],
+  args: {},
+};
+
+export default meta;

packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.test.ts

@@ -0,0 +1,60 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { FhiDataTableCell } from './fhi-data-table-cell.component';
+import { FhiDataTableRow } from '../fhi-data-table-row/fhi-data-table-row.component';
+import { FhiDataTable } from '../fhi-data-table/fhi-data-table.component';
+
+describe('fhi-data-table-cell', () => {
+  new FhiDataTableCell();
+  new FhiDataTableRow();
+  new FhiDataTable();
+
+  let component: FhiDataTableCell;
+
+  describe('accessibility', () => {
+    beforeEach(async () => {
+      component = await fixture(
+        html`<fhi-data-table-cell></fhi-data-table-cell>`,
+      );
+    });
+
+    it('is accessible when it has a correct parent structure', async () => {
+      const table = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row>
+            <fhi-data-table-cell></fhi-data-table-cell>
+          </fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const cell = table.querySelector('fhi-data-table-cell');
+      await expect(cell).to.be.accessible();
+    });
+
+    it('is not accessible when it does not have a correct parent', async () => {
+      await expect(component).not.to.be.accessible();
+    });
+
+    it('should have the role "cell" by default', async () => {
+      expect(component.getAttribute('role')).to.equal('cell');
+    });
+
+    it('should have the role "columnheader" when variant is set to "header"', async () => {
+      component.variant = 'header';
+      await component.updateComplete;
+
+      expect(component.getAttribute('role')).to.equal('columnheader');
+    });
+  });
+
+  describe('setting attributes', () => {
+    it('has an attribute to set the variant', async () => {
+      component = await fixture(
+        html`<fhi-data-table-cell variant="header"></fhi-data-table-cell>`,
+      );
+
+      expect(component.getAttribute('variant')).to.equal('header');
+      expect(component.variant).to.equal('header');
+    });
+  });
+});

packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.component.ts

@@ -0,0 +1,110 @@
+import { html, css, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';
+
+export const FhiDataTableRowSelector = 'fhi-data-table-row';
+
+/**
+ * ## FHI Table Row
+ *
+ * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs}
+ *
+ * The `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.
+ * It allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.
+ *
+ * For various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.
+ *
+ * @tag fhi-data-table-row
+ * @element fhi-data-table-row
+ */
+@customElement(FhiDataTableRowSelector)
+export class FhiDataTableRow extends LitElement {
+  /**
+   * Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.
+   * If the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.
+   * @type {'header' | 'body'}
+   */
+  @property({ type: String, reflect: true })
+  variant: 'header' | 'body' = 'body';
+
+  @queryAssignedElements()
+  slotElements!: Array<HTMLElement>;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'row';
+  }
+
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      if (this.variant !== 'body' && this.variant !== 'header') {
+        this.variant = 'body';
+      }
+    }
+
+    super.update(changedProperties);
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      this.setCellVariants();
+    }
+
+    super.updated(changedProperties);
+  }
+
+  private handleSlotChange() {
+    this.setCellVariants();
+  }
+
+  private setCellVariants() {
+    this.slotElements.forEach(element => {
+      if (element.tagName.toLowerCase() === 'fhi-data-table-cell') {
+        const tableCell = element as FhiDataTableCell;
+
+        if (tableCell.variant !== this.variant) {
+          tableCell.variant = this.variant;
+        }
+      }
+    });
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+
+  static styles = css`
+    :host {
+      --fhi-data-table-row-border-style: unset;
+      --fhi-data-table-row-border-width: unset;
+      --fhi-data-table-row-border-color: unset;
+
+      --fhi-data-table-row-background: unset;
+    }
+
+    :host {
+      display: table-row;
+      background: var(--fhi-data-table-row-background);
+
+      --fhi-data-table-row-border-style: none none solid none;
+      --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);
+      --fhi-data-table-row-border-color: var(
+        --fhi-color-neutral-surface-active
+      );
+
+      ::slotted(fhi-data-table-cell) {
+        --fhi-data-table-cell-background: var(--fhi-data-table-row-background);
+        --fhi-data-table-cell-border-style: var(
+          --fhi-data-table-row-border-style
+        );
+        --fhi-data-table-cell-border-width: var(
+          --fhi-data-table-row-border-width
+        );
+        --fhi-data-table-cell-border-color: var(
+          --fhi-data-table-row-border-color
+        );
+      }
+    }
+  `;
+}

packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.stories.ts

@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { FhiDataTableRow } from './fhi-data-table-row.component';
+
+import { FhiStorybookMeta } from '../../../../.storybook/fhi-meta';
+
+new FhiDataTableRow();
+
+const meta: FhiStorybookMeta<FhiDataTableRow> = {
+  title: 'Komponenter/Table/Row',
+  component: 'fhi-data-table-row',
+  parameters: {
+    slotTypes: [
+      {
+        name: '-',
+        description:
+          'Alle celler i raden. Bruk <fhi-data-table-cell> for å definere celler i raden.',
+      },
+    ],
+  },
+  decorators: [],
+  render: () => html`<fhi-data-table-row></fhi-data-table-row>`,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['header', 'body'],
+      description:
+        'Definerer om raden er en header-rad eller en vanlig rad. Header-rader har en annen stil og brukes for å definere kolonneoverskrifter. Alle <fhi-data-table-cell> elementer i en header <fhi-data-table-row> vil automatisk få variant satt til header.',
+      defaultValue: { summary: 'body' },
+    },
+  },
+};
+
+type Story = StoryObj<FhiDataTableRow>;
+
+export const Preview: Story = {
+  tags: ['!dev'],
+  args: {},
+};
+
+export default meta;