Use Tailwind styling

navikt · Feb 20, 2025 · abab9a9 · abab9a9
1 parent f67c40e
commit abab9a9
Show file tree

Hide file tree

Showing 97 changed files with 301 additions and 517 deletions.
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -39,5 +39,11 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ":\\s*?[\"'`]([^\"'`]*).*?,",
+    "const\\s\\w*Classes\\s+=\\s+[\"'`]([^\"'`]*)",
+    "const\\s\\w*_CLASSES\\s+=\\s+[\"'`]([^\"'`]*)",
+    "@tw\\s\\*/\\s+[\"'`]([^\"'`]*)"
+  ]
 }
diff --git a/frontend/index.css b/frontend/index.css
@@ -2,39 +2,26 @@
 @import "@navikt/ds-css" layer(components);
 @import "./fonts.css" layer(fonts);
 
+@layer components {
+  @theme {
+    --a-font-family: "Source Sans 3", Arial, sans-serif;
+  }
+}
+
 :root {
-  --a-font-family: 'Source Sans 3', Arial, sans-serif;
+  --a-font-family: "Source Sans 3", Arial, sans-serif;
+}
+
+@theme {
+  --font-display: "Source Sans 3", Arial, sans-serif;
 }
 
 html {
   box-sizing: border-box;
-  font-family: 'Source Sans 3', Arial, sans-serif;
-  font-size: var(--a-spacing-4);
 }
 
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
-
-html,
-body,
-#app {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-size: var(--a-spacing-4);
-}
-
-#app {
-  display: flex;
-  flex-flow: column;
-}
-
-.smart-editor {
-  outline: none;
-  min-height: 100%;
-}
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}" data-theme="light">
+<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}" data-theme="light"
+  class="h-full w-full m-0 p-0 overflow-hidden text-base font-display">
 
 <head>
   <meta charset="UTF-8" />
@@ -13,8 +14,8 @@
   <script async type="module" src="/src/index.tsx"></script>
 </head>
 
-<body>
-  <div id="app"></div>
+<body class="h-full w-full m-0 p-0 overflow-hidden text-base">
+  <div id="app" class="flex flex-col h-full w-full m-0 p-0 overflow-hidden text-base"></div>
 </body>
 
 </html>
diff --git a/frontend/src/components/access-rights/access-rights.tsx b/frontend/src/components/access-rights/access-rights.tsx
@@ -9,7 +9,6 @@ import type { IYtelse } from '@app/types/kodeverk';
 import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { Button, HStack, Heading, Loader } from '@navikt/ds-react';
 import { useContext, useState } from 'react';
-import { styled } from 'styled-components';
 import { Body } from './body';
 import { Head } from './head';
 
@@ -68,8 +67,8 @@ const AccessRightsContent = ({ ytelser, saksbehandlere }: Props) => {
   return (
     <>
       <TilgangsstyringHeading />
-      <TableWrapper>
-        <StyledTable onMouseLeave={() => setFocusedCell([-1, -1])}>
+      <div className="shrink-1 overflow-auto">
+        <table className="max-h-full border-separate border-spacing-0" onMouseLeave={() => setFocusedCell([-1, -1])}>
           <Head saksbehandlere={accessRights} focusedCell={focusedCell} setFocusedCell={setFocusedCell} />
           <Body
             ytelser={ytelser}
@@ -78,8 +77,8 @@ const AccessRightsContent = ({ ytelser, saksbehandlere }: Props) => {
             focusedCell={focusedCell}
             setFocusedCell={setFocusedCell}
           />
-        </StyledTable>
-      </TableWrapper>
+        </table>
+      </div>
       <HStack gap="4">
         <Button variant="primary" size="small" onClick={save} loading={isLoading} icon={<CheckmarkIcon aria-hidden />}>
           Lagre
@@ -99,14 +98,3 @@ const TilgangsstyringHeading = () => (
     Tilgangsstyring
   </Heading>
 );
-
-const StyledTable = styled.table`
-  border-collapse: separate;
-  border-spacing: 0;
-  max-height: 100%;
-`;
-
-const TableWrapper = styled.div`
-  flex-shrink: 1;
-  overflow: auto;
-`;
diff --git a/frontend/src/components/access-rights/cell.tsx b/frontend/src/components/access-rights/cell.tsx
@@ -1,5 +1,3 @@
-import { styled } from 'styled-components';
-
 interface Props {
   isChecked: boolean;
   onCheck: (checked: boolean) => void;
@@ -10,72 +8,63 @@ interface Props {
   isCurrentRow: boolean;
 }
 
-export const Cell = ({ isChecked, onCheck, children, onFocus, isFocused, isCurrentColumn, isCurrentRow }: Props) => (
-  <StyledCell
-    title={children}
-    $isChecked={isChecked}
-    onClick={onFocus}
-    onMouseEnter={onFocus}
-    $isFocused={isFocused}
-    $isCurrentColumn={isCurrentColumn}
-    $isCurrentRow={isCurrentRow}
-  >
-    <StyledCheckbox
-      type="checkbox"
+export const Cell = ({ isChecked, onCheck, children, onFocus, isFocused, isCurrentColumn, isCurrentRow }: Props) => {
+  const backgroundClass = VARIANTS[getVariant(isFocused, isCurrentColumn, isCurrentRow, isChecked)];
+
+  return (
+    <td
+      className={`border-(--a-border-on-inverted) border-r-1 border-b-1 p-0 ${backgroundClass}`}
       title={children}
-      checked={isChecked}
-      onChange={({ target }) => onCheck(target.checked)}
-    />
-  </StyledCell>
-);
+      onClick={onFocus}
+      onKeyDown={({ key }) => {
+        if (key === 'Enter' || key === ' ') {
+          onFocus();
+        }
+      }}
+      onMouseEnter={onFocus}
+    >
+      <input
+        type="checkbox"
+        className="m-0 block h-8 w-8 cursor-pointer border-none p-0 opacity-0"
+        title={children}
+        checked={isChecked}
+        onChange={({ target }) => onCheck(target.checked)}
+      />
+    </td>
+  );
+};
 
-interface StyledCellProps {
-  $isChecked: boolean;
-  $isFocused: boolean;
-  $isCurrentColumn: boolean;
-  $isCurrentRow: boolean;
+enum Variant {
+  FOCUSED_OR_CURRENT_CHECKED = 0,
+  FOCUSED_OR_CURRENT_UNCHECKED = 1,
+  CHECKED = 2,
+  NONE = 3,
 }
 
-const getColor = (
-  { $isChecked, $isFocused, $isCurrentColumn, $isCurrentRow }: StyledCellProps,
-  defaultColor = 'var(--a-bg-default)',
-) => {
-  if ($isFocused || $isCurrentColumn || $isCurrentRow) {
-    if ($isChecked) {
-      return 'var(--a-purple-200)';
-    }
-
-    return 'var(--a-blue-200)';
-  }
-
-  if ($isChecked) {
-    return 'var(--a-green-200)';
-  }
-
-  return defaultColor;
+const VARIANTS: Record<Variant, string> = {
+  [Variant.FOCUSED_OR_CURRENT_CHECKED]: 'bg-(--a-purple-200)',
+  [Variant.FOCUSED_OR_CURRENT_UNCHECKED]: 'bg-(--a-blue-200)',
+  [Variant.CHECKED]: 'bg-(--a-green-200)',
+  [Variant.NONE]: 'even:bg-(--a-bg-default) odd:bg-(--a-bg-subtle)',
 };
 
-const StyledCell = styled.td<StyledCellProps>`
-  padding: 0;
-  border-right: 1px solid var(--a-border-on-inverted);
-  border-bottom: 1px solid var(--a-border-on-inverted);
+const getVariant = (
+  isFocused: boolean,
+  isCurrentColumn: boolean,
+  isCurrentRow: boolean,
+  isChecked: boolean,
+): Variant => {
+  if (isFocused || isCurrentColumn || isCurrentRow) {
+    if (isChecked) {
+      return Variant.FOCUSED_OR_CURRENT_CHECKED;
+    }
 
-  &:nth-child(even) {
-    background-color: ${getColor};
+    return Variant.FOCUSED_OR_CURRENT_UNCHECKED;
   }
 
-  &:nth-child(odd) {
-    background-color: ${(props) => getColor(props, 'rgb(247, 247, 247)')};
+  if (isChecked) {
+    return Variant.CHECKED;
   }
-`;
 
-const StyledCheckbox = styled.input`
-  display: block;
-  width: var(--a-spacing-8);
-  height: var(--a-spacing-8);
-  border: none;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  cursor: pointer;
-`;
+  return Variant.NONE;
+};