feat(Table): Sbanken styling (#2513)

packages/dnb-design-system-portal/src/docs/uilib/components/table.mdx

@@ -5,6 +5,7 @@ status: 'new'
 showTabs: true
 redirect_from:
   - /uilib/elements/tables
+theme: 'sbanken'
 ---
 
 import TableInfo from 'Docs/uilib/components/table/info'

packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx

@@ -57,6 +57,10 @@ A `small` sized table is only for special circumstances, where a lot of data nee
 
 ### Table with accordion rows
 
+<VisibilityByTheme visible="sbanken">
+  This example is not yet fully supported using the Sbanken theme.
+</VisibilityByTheme>
+
 The second example uses both a `border` and an `outline`.
 
 <TableAccordion />
@@ -92,6 +96,10 @@ With no (empty) `head` and `foot` content.
 
 ### Table with pagination
 
+<VisibilityByTheme visible="sbanken">
+  This example is not yet fully supported using the Sbanken theme.
+</VisibilityByTheme>
+
 <PaginationTable />
 
 ### Example usage without and with classes

packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap

@@ -180,12 +180,7 @@ export default {
   '--shadow-default-y': '8px',
   '--shadow-default-blur-radius': '16px',
   '--shadow-default-color': 'rgb(51 51 51 / 8%)',
-  '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)',
-  '--scrollbar-track-width': '0.5rem',
-  '--scrollbar-thumb-width': '0.5rem',
-  '--scrollbar-track-color': 'var(--color-black-8)',
-  '--scrollbar-thumb-color': 'var(--color-sea-green)',
-  '--scrollbar-thumb-hover-color': 'var(--color-emerald-green)'
+  '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)'
 }; // prettier-ignore
 "
 `;

packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.ts

@@ -10,8 +10,11 @@ import {
 
 const defaults = { wrapperStyle: { margin: '0 !important' } } // because of ScrollView overflow
 
-describe('Table', () => {
-  setupPageScreenshot({ url: '/uilib/components/table/demos', each: true })
+describe.each(['ui', 'sbanken'])('Table for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/components/table/demos',
+  })
 
   it('have to match the default choice of table styles', async () => {
     const screenshot = await makeScreenshot({
@@ -103,7 +106,7 @@ describe('Table', () => {
         width: '30rem',
       },
       selector,
-      waitAfterSimulate: 200,
+      waitAfterSimulate: 100,
       executeBeforeSimulate: () => {
         document
           .querySelector(
@@ -112,6 +115,11 @@ describe('Table', () => {
           .scrollIntoView({
             behavior: 'auto',
           })
+
+        // Ensure the window.resize event gets triggered in order to force the shadow to appear (after React v18 upgrade)
+        setTimeout(() => {
+          window.dispatchEvent(new Event('resize'))
+        }, 100)
       },
     })
     expect(screenshot).toMatchImageSnapshot()
@@ -176,110 +184,122 @@ describe('Table', () => {
   })
 })
 
-describe('Table with skeleton', () => {
-  setupPageScreenshot({ url: '/uilib/components/table/demos?skeleton' })
-
-  it('have to match default table', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '40rem',
-      },
-      selector: '[data-visual-test="table-default"]',
+describe.each(['ui', 'sbanken'])(
+  'Table with skeleton for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/table/demos?skeleton',
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
 
-describe('Table with accordion', () => {
-  setupPageScreenshot({ url: '/uilib/components/table', each: true })
+    it('have to match default table', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '40rem',
+        },
+        selector: '[data-visual-test="table-default"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+  }
+)
 
-  it('have to match default state', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-      },
-      selector: '[data-visual-test="table-accordion"] .dnb-table',
+describe.each(['ui', 'sbanken'])(
+  'Table with accordion for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/table',
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match hover state on first row', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-      },
-      selector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
-      simulateSelector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:first-of-type',
-      simulate: 'hover',
+    it('have to match default state', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+        },
+        selector: '[data-visual-test="table-accordion"] .dnb-table',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match hover state on last row', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-      },
-      selector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
-      simulateSelector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
-      simulate: 'hover',
+    it('have to match hover state on first row', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+        },
+        selector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
+        simulateSelector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:first-of-type',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match focus state on last row', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-      },
-      selector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
-      simulateSelector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
-      simulate: 'focus',
+    it('have to match hover state on last row', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+        },
+        selector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
+        simulateSelector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match active state on last row', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-      },
-      selector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
-      simulateSelector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
-      simulate: 'active',
+    it('have to match focus state on last row', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+        },
+        selector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
+        simulateSelector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
+        simulate: 'focus',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot({
-      failureThreshold: 0.01, // locally as well
+
+    it('have to match active state on last row', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+        },
+        selector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
+        simulateSelector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:nth-last-child(2)',
+        simulate: 'active',
+      })
+      expect(screenshot).toMatchImageSnapshot({
+        failureThreshold: 0.01, // locally as well
+      })
     })
-  })
 
-  it('have to match expanded state on first row', async () => {
-    const screenshot = await makeScreenshot({
-      ...defaults,
-      style: {
-        width: '35rem',
-        height: '20rem',
-      },
-      selector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
-      simulateSelector:
-        '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:first-of-type',
-      simulate: 'click',
+    it('have to match expanded state on first row', async () => {
+      const screenshot = await makeScreenshot({
+        ...defaults,
+        style: {
+          width: '35rem',
+          height: '20rem',
+        },
+        selector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type',
+        simulateSelector:
+          '[data-visual-test="table-accordion"] .dnb-scroll-view:last-of-type tbody tr:first-of-type',
+        simulate: 'click',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
+  }
+)

packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-sbanken.scss

@@ -0,0 +1,95 @@
+/*
+* Table theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+@import '../table-mixins.scss';
+
+@mixin tableFocusRing() {
+  &::before {
+    top: -0.1875rem;
+    bottom: -0.0625rem;
+    left: -0.5rem;
+    right: -0.25rem;
+  }
+}
+
+.dnb-table {
+  text-align: left;
+
+  & thead {
+    border-bottom: var(--border);
+  }
+
+  &__th,
+  & thead th {
+    padding: 0.5rem 1.5rem 0.25rem;
+    background-color: var(--sb-color-white);
+  }
+
+  & &__tr--even {
+    background-color: var(--sb-color-gray-light-3);
+  }
+
+  &__td,
+  & tbody &__th,
+  & tbody td,
+  & tbody th {
+    padding: 1rem 1.5rem;
+  }
+
+  /* BUTTONS INSIDE TABLE */
+
+  // No sorting applied
+  & > thead > tr > th#{&}--sortable,
+  & &__th#{&}--sortable {
+    .dnb-table__sort-button.dnb-button {
+      color: var(--sb-color-violet);
+      & .dnb-button__text::after {
+        bottom: -0.0625rem;
+        left: 0;
+        opacity: 0;
+        color: var(--sb-color-violet);
+      }
+      &:not(:focus) .dnb-button__text::after {
+        color: var(--sb-color-violet);
+      }
+      @include hover() {
+        color: var(--sb-color-violet);
+      }
+      @include active() {
+        color: var(--sb-color-violet);
+        @include tableFocusRing();
+      }
+      @include focus() {
+        @include tableFocusRing();
+      }
+    }
+  }
+
+  & > thead > tr > th#{&}--active,
+  & &__th#{&}--active {
+    .dnb-table__sort-button.dnb-button {
+      @include hover() {
+        & .dnb-button__text::after {
+          color: var(--sb-color-violet);
+        }
+      }
+    }
+  }
+}
+
+.dnb-table,
+.dnb-table__container {
+  --border-width: 0.0625rem;
+  --outline-width: 0.0625rem;
+
+  // table border
+  --border: var(--border-width) solid var(--sb-color-gray-light-2);
+
+  // table outline
+  --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
+
+  background-color: var(--sb-color-white);
+}