feat: add #table default style to the core styling

dnbexperience · Dec 5, 2018 · 82d33ab · 82d33ab
1 parent 54a6560
commit 82d33ab
Show file tree

Hide file tree

Showing 18 changed files with 196 additions and 102 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -43,9 +43,7 @@ const Sidebar = styled.aside`
     max-height: calc(100vmin - 4em - 10px);
 
     margin: 0;
-    padding: 0;
-    padding-top: 2em;
-    padding-bottom: 1em;
+    padding: 2rem 0 1rem;
   }
 
   /*
@@ -89,6 +87,8 @@ const StyledListItem = styled.li`
     flex-direction: column;
     justify-content: center;
 
+    line-height: 1.5rem;
+
     /* external link icon */
     svg {
       float: right;
@@ -133,32 +133,6 @@ const StyledListItem = styled.li`
     font-size: 0.875em;
   }
 
-  .status-badge {
-    position: absolute;
-    right: 1.5rem;
-
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    padding: 2px 0 0;
-
-    height: 1.25rem;
-    width: 1.25rem;
-    border-radius: 50%;
-
-    background-color: var(--color-sea-green-alt-30);
-    color: var(--color-black);
-
-    font-size: 0.5rem;
-    font-weight: 300;
-    text-align: center;
-    text-transform: uppercase;
-  }
-  ${'' /* &.status-wip .status-badge {
-    color: red;
-  } */}
-
   &.active a {
     color: var(--color-ocean-green);
 
@@ -222,6 +196,38 @@ const StyledListItem = styled.li`
     animation: hide-mobile-menu 300ms cubic-bezier(0.19, 1, 0.22, 1) 1
       calc(10ms - var(--delay)) forwards;
   }
+
+  .status-badge {
+    position: absolute;
+    z-index: 2;
+    right: 1.5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: baseline; /* then we can set line-height */
+
+    font-size: 0.4375rem;
+    line-height: 1.3125rem; /* same as height + 1px */
+    font-weight: 100;
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--color-black);
+
+    /* bg */
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+
+    background-color: var(--color-sea-green-alt-30);
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 1;
+    }
+  }
+  ${'' /* &.status-wip .status-badge {
+    color: red;
+  } */}
 `
 
 const showAlwaysMenuItems = [] // like "uilib" som someting like that

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -17,7 +17,8 @@ import PropTypes from 'prop-types'
 import Sidebar from '../menu/SidebarMenu'
 import StickyMenuBar from '../menu/StickyMenuBar'
 import { markdownStyle } from './Markdown'
-import styled, { cx } from 'react-emotion'
+import styled from 'react-emotion'
+import classnames from 'classnames'
 import { buildVersion } from '../../../package.json'
 import { SidebarMenuProvider } from '../menu/SidebarMenuContext'
 
@@ -94,7 +95,7 @@ const Wrapper = styled.div`
 
 const Content = ({ className, children }) => (
   <Main
-    className={cx(
+    className={classnames(
       'dnb-style',
       'dnb-page-content',
       'dnb-no-focus',

diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
@@ -8,45 +8,6 @@ import bluegridSvg from '../../../static/assets/images/grid-32x32-blue.svg'
 import greygridSvg from '../../../static/assets/images/grid-32x32.svg'
 
 export default css`
-  /* TODO: Have to be moved into a seperate Table style sheet */
-  table {
-    display: block;
-    width: 100%;
-
-    overflow: auto;
-    margin-top: 0;
-    margin-bottom: 1rem;
-
-    border-spacing: 0;
-    border-collapse: collapse;
-    border-top: 8px solid var(--border-color);
-  }
-  table th {
-    font-weight: 600;
-    white-space: nowrap;
-  }
-  table th,
-  table td {
-    padding: 0.5rem 0.5rem 0.4375rem 0.5rem;
-
-    font-size: 1em;
-    line-height: 1rem;
-
-    border-bottom: 1px solid var(--border-color);
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-  table tr {
-    background-color: #fff;
-    border-top: 0;
-  }
-  table tr:nth-child(2n) {
-    background-color: var(--table-color);
-  }
-  table td {
-    white-space: nowrap;
-  }
-
   table td.selectable {
     position: relative;
     z-index: 1;
@@ -61,6 +22,9 @@ export default css`
     transform: scale(1.1);
     user-select: all;
   }
+  table td em {
+    padding-right: 0.5em;
+  }
 
   hr {
     box-sizing: content-box;
@@ -70,7 +34,7 @@ export default css`
 
     background: transparent;
     border: 0;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--color-black-border);
   }
 
   hr::before {

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -253,6 +253,13 @@ exports[`Button scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -300,7 +307,7 @@ exports[`Button scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -237,6 +237,13 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -292,7 +299,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -442,7 +449,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,
@@ -624,7 +631,7 @@ input[type='range']:focus {
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-dropdown *,
   .dnb-dropdown ::before,

diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -113,6 +113,13 @@ exports[`Icon scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -93,6 +93,13 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -148,7 +155,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -298,7 +305,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,
@@ -480,7 +487,7 @@ input[type='range']:focus {
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input-masked *,
   .dnb-input-masked ::before,

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -179,6 +179,13 @@ exports[`Input scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -230,7 +237,7 @@ exports[`Input scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -380,7 +387,7 @@ exports[`Input scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,

diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -96,6 +96,13 @@ exports[`Logo scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -111,7 +118,7 @@ exports[`Logo scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-logo *,
   .dnb-logo ::before,

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -309,6 +309,13 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -360,7 +367,7 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -510,7 +517,7 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-modal *,
   .dnb-modal ::before,