Merge pull request #100 from dnbexperience/ftr/enhance-core-style

feat: dnb-core-style
dnbexperience · Feb 20, 2019 · 210b385 · 210b385
2 parents a05334b + e88cfc4
commit 210b385
Show file tree

Hide file tree

Showing 37 changed files with 7,909 additions and 879 deletions.
diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js
@@ -8,6 +8,7 @@ import { applyPageFocus } from 'dnb-ui-lib/src/shared/tools'
 // Load dev styles (to use hot reloading, we do have to import the styles in here)
 if (process.env.NODE_ENV === 'development') {
   require('dnb-ui-lib/src/style/core') // import the core styles
+  // require('dnb-ui-lib/src/style/basis') // in case we want to test ".dnb-core-style"
   require('dnb-ui-lib/src/style/patterns') // import ony patterns
   require('dnb-ui-lib/src/style/components') // import ony components
   // // require('dnb-ui-lib/src/style/themes/open-banking') // import the "open-banking" theme

diff --git a/packages/dnb-design-system-portal/src/pages/404.js b/packages/dnb-design-system-portal/src/pages/404.js
@@ -17,9 +17,9 @@ export default class PageNotFound extends PureComponent {
     return (
       <Center className="dnb-spacing">
         <Inner>
-          <h1>404</h1>
-          <h2>We couldn't find that page:</h2>
-          <p>
+          <h1 className="dnb-h1">404</h1>
+          <h2 className="dnb-h2">We couldn't find that page:</h2>
+          <p className="dnb-p">
             There's not a page at <code>{pathname}</code>
           </p>
         </Inner>

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md
@@ -44,6 +44,16 @@ The following Diagram gives an overall overview how the packages are structured.
 
 The **dnb-ui-core** package includes some styles witch effects the global scope (body and CSS reset). To avoid interference with existing styles, let's say a header or a menu, You could only use the **dnb-ui-basis** package in combination with other packages like **dnb-theme-ui** and **dnb-ui-components**.
 
+### Use Body Styles
+
+If You neither include the **dnb-ui-core** nor the **dnb-ui-body** package, then You ending up having no Eufemia styles for the Document `<body>`. To having them inside a wrapper anyway, simply use the following helper class: `.dnb-core-style`
+
+```html
+<div class="dnb-core-style">
+  Wrapper with the DNB Body Styles
+</div>
+```
+
 ### Example imports
 
 ```js

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -482,6 +482,7 @@ export default class SidebarLayout extends PureComponent {
                   return (
                     <Sidebar
                       className={classnames(
+                        // 'dnb-core-style',
                         isOpen && 'show-mobile-menu',
                         isClosing && 'hide-mobile-menu'
                       )}

diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -5,6 +5,7 @@
 
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { StaticQuery, graphql } from 'gatsby'
 import { css } from '@emotion/core'
 import styled from '@emotion/styled'
@@ -151,7 +152,11 @@ export default class StickyMenuBar extends PureComponent {
                   css={[
                     hideSiebarToggleButton && hideSiebarToggleButtonStyle
                   ]}
-                  className="sticky-menu dev-grid"
+                  className={classnames(
+                    // 'dnb-core-style',
+                    'sticky-menu',
+                    'dev-grid'
+                  )}
                 >
                   <BarInner>
                     <MainMenuToggleButton />

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -105,7 +105,12 @@ const Content = ({ className, children }) => (
   <ContentWrapper
     id="dnb-app-content"
     css={markdownStyle}
-    className={classnames('dnb-spacing', 'dnb-app-content', className)}
+    className={classnames(
+      // 'dnb-core-style',
+      'dnb-spacing',
+      'dnb-app-content',
+      className
+    )}
   >
     {children}
   </ContentWrapper>

diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
@@ -206,9 +206,9 @@ class ItemWrapper extends PureComponent {
     return (
       <div className="wrapped-item">
         {!hideTabs ? (
-          <h1>{title}</h1>
+          <h1 className="dnb-h1">{title}</h1>
         ) : (
-          <h4>
+          <h4 className="dnb-h4">
             <Link to={`/uilib/components/${id}`} className="dnb-anchor">
               {title}
             </Link>

diff --git a/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js b/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js
@@ -119,7 +119,7 @@ export default class PerformanceTest extends Component {
           />
         </div>
         <br />
-        <h1>Rendered Components</h1>
+        <h1 className="dnb-h1">Rendered Components</h1>
         {this.components}
         <p>{text}</p>
       </div>