Make switch sticky above table header

Author: magnurh-cx

packages/bygger/src/translations/components/NewTranslationRow.tsx

@@ -1,6 +1,6 @@
 import { Table, TextField } from '@navikt/ds-react';
 import { useEditGlobalTranslations } from '../../context/translations/EditGlobalTranslationsContext';
-import useTranslationTableStyles from './styles';
+import { useTranslationTableStyles } from './styles';
 
 const NewTranslationRow = () => {
   const { newTranslation, updateNewTranslation, errors } = useEditGlobalTranslations();

packages/bygger/src/translations/components/TranslationDisplayCell.tsx

@@ -1,7 +1,7 @@
 import { PadlockLockedIcon } from '@navikt/aksel-icons';
 import { Table } from '@navikt/ds-react';
 import { InnerHtml, htmlUtils } from '@navikt/skjemadigitalisering-shared-components';
-import useTranslationTableStyles from './styles';
+import { useTranslationTableStyles } from './styles';
 
 interface Props {
   text?: string;

packages/bygger/src/translations/components/TranslationRow.tsx

@@ -4,9 +4,9 @@ import { FormsApiTranslation, formsApiTranslations, TranslationLang } from '@nav
 import { useEffect, useMemo, useState } from 'react';
 import { TranslationError } from '../../context/translations/utils/errorUtils';
 import { getInputHeightInRows } from '../utils/translationsUtils';
-import useTranslationTableStyles from './styles';
 import TranslationDisplayCell from './TranslationDisplayCell';
 import TranslationInput from './TranslationInput';
+import { useTranslationTableStyles } from './styles';
 
 interface Props<Translation extends FormsApiTranslation> {
   translation: Translation;

packages/bygger/src/translations/components/TranslationTable.tsx

@@ -1,7 +1,7 @@
 import { SortState, Table } from '@navikt/ds-react';
 import { SkeletonList } from '@navikt/skjemadigitalisering-shared-components';
 import { ReactNode } from 'react';
-import useTranslationTableStyles from './styles';
+import { useTranslationTableStyles } from './styles';
 
 const defaultColumns = [
   { key: 'nb', label: 'Bokmål' },
@@ -15,6 +15,7 @@ interface Props {
   sort?: SortState;
   onSortChange?: (sortkey: string) => void;
   loading?: boolean;
+  stickyHeaderClassname?: string;
   children?: ReactNode[];
 }
 
@@ -24,6 +25,7 @@ const TranslationTable = ({
   sort,
   onSortChange,
   loading = false,
+  stickyHeaderClassname,
   children,
 }: Props) => {
   const styles = useTranslationTableStyles();
@@ -34,7 +36,7 @@ const TranslationTable = ({
 
   return (
     <Table className={styles.table} sort={sort} onSortChange={onSortChange}>
-      <Table.Header className={styles.header}>
+      <Table.Header className={stickyHeaderClassname}>
         <Table.Row>
           {columns.map((column) => (
             <Table.ColumnHeader

packages/bygger/src/translations/components/UnusedTranslationRow.tsx

@@ -2,7 +2,7 @@ import { Button, Table } from '@navikt/ds-react';
 import { FormsApiTranslation, formsApiTranslations } from '@navikt/skjemadigitalisering-shared-domain';
 import { useState } from 'react';
 import TranslationDisplayCell from './TranslationDisplayCell';
-import useTranslationTableStyles from './styles';
+import { useTranslationTableStyles } from './styles';
 
 interface Props {
   translation: FormsApiTranslation;

packages/bygger/src/translations/components/UnusedTranslations.tsx

@@ -2,6 +2,7 @@ import { ReadMore } from '@navikt/ds-react';
 import { FormsApiTranslation } from '@navikt/skjemadigitalisering-shared-domain';
 import TranslationTable, { defaultColumns } from './TranslationTable';
 import UnusedTranslationRow from './UnusedTranslationRow';
+import { useStickyStyles } from './styles';
 
 interface Props {
   translations?: FormsApiTranslation[];
@@ -10,6 +11,7 @@ interface Props {
 }
 
 const UnusedTranslations = ({ translations, onRemove, showKeys = false }: Props) => {
+  const stickyStyles = useStickyStyles();
   const columns = showKeys ? [{ key: 'key', label: 'Nøkkel' }, ...defaultColumns] : defaultColumns;
 
   if (!translations || translations.length === 0) {
@@ -18,7 +20,11 @@ const UnusedTranslations = ({ translations, onRemove, showKeys = false }: Props)
 
   return (
     <ReadMore header={`Se alle ubrukte oversettelser (${translations.length})`}>
-      <TranslationTable columns={columns} actionColumn={{ key: 'deleteButton', label: '' }}>
+      <TranslationTable
+        columns={columns}
+        actionColumn={{ key: 'deleteButton', label: '' }}
+        stickyHeaderClassname={stickyStyles.unusedTranslations}
+      >
         {translations.map((translation) => (
           <UnusedTranslationRow
             key={translation.key}

packages/bygger/src/translations/components/styles.ts

@@ -1,15 +1,30 @@
 import { makeStyles } from '@navikt/skjemadigitalisering-shared-components';
 
+const sticky = {
+  position: 'sticky',
+  top: '0',
+  backgroundColor: 'var(--a-bg-default)',
+  zIndex: '10000',
+};
+const useStickyStyles = makeStyles({
+  filterRow: {
+    ...sticky,
+    top: '9.5rem',
+  },
+  unusedTranslations: {
+    ...sticky,
+    top: '8.5rem',
+  },
+  mainTable: {
+    ...sticky,
+    top: '12.5rem',
+  },
+});
+
 const useTranslationTableStyles = makeStyles({
   table: {
     marginBottom: '4rem',
   },
-  header: {
-    position: 'sticky',
-    top: '8.5rem',
-    backgroundColor: 'var(--a-bg-default)',
-    zIndex: '10000',
-  },
   column: {
     width: '12rem',
     maxWidth: '12rem',
@@ -28,4 +43,4 @@ const useTranslationTableStyles = makeStyles({
   },
 });
 
-export default useTranslationTableStyles;
+export { useStickyStyles, useTranslationTableStyles };

packages/bygger/src/translations/form/FormTranslationsTable.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 import { useEditFormTranslations } from '../../context/translations/EditFormTranslationsContext';
 import TranslationRow from '../components/TranslationRow';
 import TranslationTable from '../components/TranslationTable';
+import { useStickyStyles } from '../components/styles';
 
 interface Props {
   translations: FormsApiFormTranslation[] | undefined;
@@ -15,6 +16,7 @@ const FormTranslationsTable = ({ translations, loading = false }: Props) => {
   const [isFilterChecked, setIsFilterChecked] = useState(false);
   const [sortState, setSortState] = useState<SortState>();
   const { updateTranslation, errors, editState } = useEditFormTranslations();
+  const stickyStyles = useStickyStyles();
 
   const handleSort = (sortKey: string) => {
     setSortState((currentState) => {
@@ -36,10 +38,17 @@ const FormTranslationsTable = ({ translations, loading = false }: Props) => {
 
   return (
     <>
-      <Switch checked={isFilterChecked} onChange={(event) => setIsFilterChecked(event.target.checked)}>
-        Vis kun manglende oversettelser
-      </Switch>
-      <TranslationTable loading={loading || !sortedRows} sort={sortState} onSortChange={handleSort}>
+      <div className={stickyStyles.filterRow}>
+        <Switch checked={isFilterChecked} onChange={(event) => setIsFilterChecked(event.target.checked)}>
+          Vis kun manglende oversettelser
+        </Switch>
+      </div>
+      <TranslationTable
+        loading={loading || !sortedRows}
+        sort={sortState}
+        onSortChange={handleSort}
+        stickyHeaderClassname={stickyStyles.mainTable}
+      >
         {sortedRows?.map((row) => (
           <TranslationRow
             key={row.key}

packages/bygger/src/translations/global/GlobalTranslationsTable.tsx

@@ -6,6 +6,7 @@ import { useEditGlobalTranslations } from '../../context/translations/EditGlobal
 import NewTranslationRow from '../components/NewTranslationRow';
 import TranslationRow from '../components/TranslationRow';
 import TranslationTable from '../components/TranslationTable';
+import { useStickyStyles } from '../components/styles';
 
 interface Props {
   translations: FormsApiGlobalTranslation[] | undefined;
@@ -17,6 +18,7 @@ const GlobalTranslationsTable = ({ translations, addNewRow, loading = false }: P
   const [isFilterChecked, setIsFilterChecked] = useState(false);
   const [sortState, setSortState] = useState<SortState>();
   const { updateTranslation, errors, editState } = useEditGlobalTranslations();
+  const stickyStyles = useStickyStyles();
 
   const handleSort = (sortKey: string) => {
     setSortState((currentState) => {
@@ -40,10 +42,17 @@ const GlobalTranslationsTable = ({ translations, addNewRow, loading = false }: P
 
   return (
     <>
-      <Switch checked={isFilterChecked} onChange={(event) => setIsFilterChecked(event.target.checked)}>
-        Vis kun manglende oversettelser
-      </Switch>
-      <TranslationTable loading={loading || !sortedRows} sort={sortState} onSortChange={handleSort}>
+      <div className={stickyStyles.filterRow}>
+        <Switch checked={isFilterChecked} onChange={(event) => setIsFilterChecked(event.target.checked)}>
+          Vis kun manglende oversettelser
+        </Switch>
+      </div>
+      <TranslationTable
+        loading={loading || !sortedRows}
+        sort={sortState}
+        onSortChange={handleSort}
+        stickyHeaderClassname={stickyStyles.mainTable}
+      >
         {addNewRow && <NewTranslationRow />}
         {sortedRows?.map((row) => (
           <TranslationRow