feat: make tables styles ux design compliant + add screenshot test

dnbexperience · Feb 13, 2019 · 67ce50d · 67ce50d
1 parent abc6cbc
commit 67ce50d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 4 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md
@@ -7,14 +7,16 @@ import { IconPrimary } from 'dnb-ui-lib/src'
 
 ## Tables
 
-<table>
+<CodeBlock scope={{IconPrimary}} reactLive hideCode>
+{`
+<table data-dnb-test="table">
   <thead>
     <tr>
       <th colSpan="2">Column 1 + 2</th>
       <th>
         <a href="#sort">Column 3</a>
       </th>
-      <th class="dnb-no-wrap">
+      <th className="dnb-no-wrap">
         <a href="#sort" className="dnb-no-anchor-underline">
           Column 4 <IconPrimary icon="chevron-down" />
         </a>
@@ -50,3 +52,49 @@ import { IconPrimary } from 'dnb-ui-lib/src'
     </tr>
   </tbody>
 </table>
+`}
+</CodeBlock>
+
+<!-- <table data-dnb-test="table">
+  <thead>
+    <tr>
+      <th colSpan="2">Column 1 + 2</th>
+      <th>
+        <a href="#sort">Column 3</a>
+      </th>
+      <th className="dnb-no-wrap">
+        <a href="#sort" className="dnb-no-anchor-underline">
+          Column 4 <IconPrimary icon="chevron-down" />
+        </a>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <p>
+          Column 1 <b>width p</b>
+        </p>
+      </td>
+      <td>
+        <code>Column 2 with code</code>
+      </td>
+      <td>
+        <span>Column 3 with span</span>
+      </td>
+      <td>Column 4</td>
+    </tr>
+    <tr>
+      <td>Column 1</td>
+      <td>Column 2</td>
+      <td>Column 3</td>
+      <td>Column 4</td>
+    </tr>
+    <tr>
+      <td>Column 1</td>
+      <td>Column 2</td>
+      <td>Column 3</td>
+      <td>Column 4</td>
+    </tr>
+  </tbody>
+</table> -->
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js b/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js
@@ -0,0 +1,19 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+  testPageScreenshot,
+  setupPageScreenshot
+} from '../../../core/jest/jestSetupScreenshots'
+
+describe('Table screenshot', () => {
+  setupPageScreenshot({ url: '/uilib/elements/tables' })
+  it('have to match the default choice of table styles', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="table"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/...le-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png b/...le-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss
@@ -49,8 +49,13 @@ table td {
   padding-bottom: 1.1875rem;
 }
 table tr {
-  background-color: #fff;
+  background-color: var(--color-white);
 }
-table tr:nth-child(2n) {
+table tr:nth-of-type(2n) {
   background-color: var(--color-mint-green-12);
 }
+table tr:last-of-type td {
+  // to get the perfect height of pixles, to this:
+  padding-bottom: calc(1.1875rem - 1px);
+  border-bottom: 1px solid var(--color-mint-green-50);
+}