Merge pull request #94 from dnbexperience/develop

release of new style structure - v3

CHANGELOG.md

@@ -1,15 +1,26 @@
-**February, 14. 2019**
+## February, 19. 2019
 
-## Changes to the default styles
+**Changes to the default styles**
+
+- Anchor (Text Link): Has now white background color on focus state
+- Tables how now always a bottom border
+
+**UI library**
+
+- **Breaking change:** [Styles](/uilib/usage/customisation/styling) got new structure. You have now to declare the [HTML Elements with a class](/uilib/elements#how-to-use)
+
+---
+
+## February, 14. 2019
 
 - Anchor (Text Link): Removed underline on hover and active states
 - Tables (the default once) has now always a border line on the bottom
 
 ---
 
-**January 2019**
+## January 2019
 
-## Changes to the default styles
+**Changes to the default styles**
 
 - Change from 1px to 2px outline on input for error state
 - Signal Orange is replaced by Emerald Green for focus state

packages/dnb-design-system-portal/gatsby-browser.js

@@ -10,6 +10,7 @@ if (process.env.NODE_ENV === 'development') {
   require('dnb-ui-lib/src/style/components') // import ony components
   // // require('dnb-ui-lib/src/style/themes/open-banking') // import the "open-banking" theme
   require('dnb-ui-lib/src/style/themes/ui') // import the default theme
+  // require('dnb-ui-lib/src/style/elements') // import also styling for HTML elements/tags
 }
 
 // UI Style production styles here to prevent loading flickering

packages/dnb-design-system-portal/package.json

@@ -50,16 +50,16 @@
     "react-dom": "^16.8.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.3.3",
     "@babel/node": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.3",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "0.17.3",
-    "@mdx-js/tag": "0.17.0",
+    "@mdx-js/mdx": "0.17.5",
+    "@mdx-js/tag": "0.17.5",
     "babel-plugin-emotion": "^10.0.7",
     "camelcase": "^5.0.0",
     "ci-info": "^2.0.0",
@@ -69,16 +69,16 @@
     "cross-env": "^5.2.0",
     "del": "^3.0.0",
     "emotion": "^10.0.7",
-    "enzyme": "^3.8.0",
+    "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "^5.13.0",
+    "eslint": "^5.14.1",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
-    "gatsby": "^2.1.2",
+    "gatsby": "^2.1.4",
     "gatsby-link": "^2.0.10",
     "gatsby-mdx": "^0.3.6",
     "gatsby-plugin-catch-links": "^2.0.11",
@@ -89,7 +89,7 @@
     "gatsby-plugin-react-helmet": "^3.0.6",
     "gatsby-plugin-sass": "^2.0.10",
     "gatsby-plugin-sharp": "^2.0.20",
-    "gatsby-remark-images": "^3.0.3",
+    "gatsby-remark-images": "^3.0.4",
     "gatsby-source-filesystem": "^2.0.20",
     "gh-pages": "^2.0.1",
     "github-slugger": "^1.2.1",
@@ -106,7 +106,7 @@
     "ora": "^3.1.0",
     "postcss-preset-env": "^6.5.0",
     "prettier": "^1.16.4",
-    "prettier-package-json": "^2.0.1",
+    "prettier-package-json": "^2.1.0",
     "pretty": "^2.0.0",
     "prism-react-renderer": "^0.1.5",
     "raw-loader": "^1.0.0",

packages/dnb-design-system-portal/src/pages/quickguide-designer/colors.md

@@ -23,7 +23,7 @@ Get the plugin for Sketch. This is for sharing the master DNB color palette
 
 -->
 
-### WCAG color contrast tests - AAA / AA
+## WCAG color contrast tests - AAA / AA
 
 Use a calculator such as this:
 https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333
@@ -32,26 +32,26 @@ https://webaim.org/resources/contrastchecker/
 
 to test your text color and size against background for contrast values.
 
-<h4>
-Gradients
-</h4>
+## Gradients
 
 The DNB brand consists mainly of solid fill colors. Gradients should be avoided despite there being an illustration in Brandbook on page 39 (pdf) showing a graph with a purple gradient.
 
-#### Shadows
+## Shadows
 
 Shadows are used to depict depth along the z-axis. Typical use cases are interface components which are laid 'above' the main interface such as calendar widgets.
 Currently Android development for DNB use Google Material Design Guidelines regarding shadow color, depth, blur etc.
 
 See the DNB Figma master guide for shadow specifications.
 
-### DNB color table for **web**
+## DNB color table for **web**
 
 DNB color names for design and development are in _english_.
 
-#### Usage - Tints and Shades
+## Usage - Tints and Shades
 
 Tints are lighter versions of the color that are made by mixing a color with white, whereas shades are darker versions of the color that are made by mixing a color with black.
 If a lighter version of a primary color is required (due to accessability, contrast or for illustration), then ....
 
+## Colors Table
+
 <ColorsTable />

packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js

@@ -94,6 +94,7 @@ class Example extends PureComponent {
   title="This is a link"
   icon_position="right"
   icon="chevron_right"
+  data-dnb-test="button-anchor"
 />
 <Button
   variant="secondary"
@@ -105,7 +106,7 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <ComponentBox scope={{ question }}>
+        <ComponentBox scope={{ question }} caption="Button with Icon only">
           {/* @jsx */ `
 <Button
   title="Disabled Icon only Button"
@@ -123,7 +124,6 @@ class Example extends PureComponent {
   title="Button with custom, Secondary Icon only"
   icon={question}
 />
-<p className="example-caption">Button with Icon only</p>
           `}
         </ComponentBox>
         <ComponentBox

packages/dnb-design-system-portal/src/pages/uilib/development/naming.md

@@ -30,6 +30,7 @@ The DNB Design System Eufemia uses the following naming conventions.
 - CSS classes and the files containing the styles use **lisp case**.
 - CSS classes are prefixed with: `dnb-`
 - CSS `Custom Properties` (CSS Variables) use **lisp case**.
+- SCSS Mixins use **camel case**.
 
 ## Javascript
 

packages/dnb-design-system-portal/src/pages/uilib/elements.md

@@ -5,6 +5,7 @@ draft: false
 order: 6
 ---
 
+import CodeBlock from 'Tags/CodeBlock'
 import OtherElements from 'Pages/uilib/elements/other'
 import Anchor from 'Pages/uilib/elements/anchor'
 import Blockquote from 'Pages/uilib/elements/blockquote'
@@ -14,9 +15,24 @@ import Lists from 'Pages/uilib/elements/lists'
 
 # HTML Elements
 
-## Description
+The `dnb-ui-lib` contains a DNB styling for the most common used [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), defined by the UX Team at DNB. You may also have a look at [Typography](/uilib/typography) for Headings and Paragraph usage.
 
-The `dnb-ui-lib` contains a DNB styling for the most common used [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), defined by the UX Team at DNB. You may also have a look at [Typography](/uilib/typography)
+### How to use
+
+By default, no HTML Element Tag will be styled, except for [Headings and Paragraphs](/uilib/typography) with no CSS class defined.
+
+In order to apply a style, You have to define a CSS class, like:
+
+<CodeBlock reactLive hidePreview>
+{`
+<a href="/" className="dnb-anchor">Text Link</a>
+<blockquote className="dnb-blockquote">
+  Dis leo ala tractatos ei quo.
+</blockquote>
+`}
+</CodeBlock>
+
+Although, You have also the possibility to load a [sub package](/uilib/usage/customisation/styling#sub-packages), called **dnb-ui-elements** witch applies all the styles to the HTML tags automatically. Use it with caution, as they can effect existing styles as well.
 
 ## Overview
 

packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md

@@ -10,16 +10,16 @@ import CodeBlock from 'Tags/CodeBlock'
 {`
 <ul className="dnb-unstyled-list">
   <li>
-    <a data-dnb-test="anchor-default" href="/" >Default Style</a>
+    <a href="/" data-dnb-test="anchor-default" className="dnb-anchor">Default Style</a>
   </li>
   <li>
-    <a data-dnb-test="anchor-hover" href="/" className="dnb-anchor--hover">Hover Style</a>
+    <a href="/" data-dnb-test="anchor-hover" className="dnb-anchor dnb-anchor--hover">Hover Style</a>
   </li>
   <li>
-    <a data-dnb-test="anchor-active" href="/" className="dnb-anchor--active">Active Style</a>
+    <a href="/" data-dnb-test="anchor-active" className="dnb-anchor dnb-anchor--active">Active Style</a>
   </li>
   <li>
-    <a data-dnb-test="anchor-focus" href="/" className="dnb-anchor--focus">Focus Style</a>
+    <a href="/" data-dnb-test="anchor-focus" className="dnb-anchor dnb-anchor--focus">Focus Style</a>
   </li>
 </ul>
 `}

packages/dnb-design-system-portal/src/pages/uilib/elements/blockquote.md

@@ -8,7 +8,7 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode caption="Default Blockquote">
 {`
-<blockquote data-dnb-test="blockquote-default">
+<blockquote data-dnb-test="blockquote-default" className="dnb-blockquote">
   Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.
   <cite>Cite Referance</cite>
 </blockquote>
@@ -17,8 +17,8 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode caption="Blockquote with graphics on top">
 {`
-<blockquote data-dnb-test="blockquote-top" className="dnb-blockquote--top">
-  Dis leo aliquam neque aptent nascetur metus ad ut eu Choro <a href="/uilib/elements#blockquote">vivendum tractatos</a> ei quo.
+<blockquote data-dnb-test="blockquote-top" className="dnb-blockquote dnb-blockquote--top">
+  Dis leo aliquam neque aptent nascetur metus ad ut eu Choro <a className="dnb-anchor" href="/uilib/elements#blockquote">vivendum tractatos</a> ei quo.
 </blockquote>
 `}
 </CodeBlock>

packages/dnb-design-system-portal/src/pages/uilib/elements/lists.md

@@ -10,7 +10,7 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode>
 {`
-<ul>
+<ul className="dnb-ul">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>
@@ -32,7 +32,7 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode>
 {`
-<ol>
+<ol className="dnb-ol">
   <li>Item</li>
   <li>
     Item
@@ -56,7 +56,7 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode>
 {`
-<dl>
+<dl className="dnb-dl">
   <dt>Item Title 1</dt>
   <dd>Item Description 1</dd>
   <dt>Item Title 1</dt>

packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md

@@ -9,15 +9,15 @@ import { IconPrimary } from 'dnb-ui-lib/src'
 
 <CodeBlock scope={{IconPrimary}} reactLive hideCode>
 {`
-<table data-dnb-test="table">
+<table data-dnb-test="table" className="dnb-table">
   <thead>
     <tr>
       <th colSpan="2">Column 1 + 2</th>
       <th>
-        <a href="#sort">Column 3</a>
+        <a href="#sort" className="dnb-anchor">Column 3</a>
       </th>
       <th className="dnb-no-wrap">
-        <a href="#sort" className="dnb-anchor-no-underline">
+        <a href="#sort" className="dnb-anchor dnb-anchor-no-underline">
           Column 4 <IconPrimary icon="chevron-down" />
         </a>
       </th>
@@ -31,7 +31,7 @@ import { IconPrimary } from 'dnb-ui-lib/src'
         </p>
       </td>
       <td>
-        <code>Column 2 with code</code>
+        <code className="dnb-code">Column 2 with code</code>
       </td>
       <td>
         <span>Column 3 with span</span>

packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md

@@ -13,7 +13,7 @@ import ComponentBox from 'Tags/ComponentBox'
   <label htmlFor="textarea-default">
     Label:
   </label>
-  <textarea data-dnb-test="textarea-default" id="textarea-default" rows="2" cols="20" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
+  <textarea data-dnb-test="textarea-default" id="textarea-default"  className="dnb-textarea" rows="2" cols="20" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
 </div>
 `}
 </CodeBlock>
@@ -24,7 +24,7 @@ import ComponentBox from 'Tags/ComponentBox'
   <label htmlFor="vestibulum">
     Label:
   </label>
-  <textarea id="vestibulum" rows="5" cols="33" disabled defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
+  <textarea id="vestibulum" className="dnb-textarea" rows="5" cols="33" disabled defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
 </div>
 `}
 </CodeBlock>
@@ -35,7 +35,7 @@ import ComponentBox from 'Tags/ComponentBox'
   <label htmlFor="vestibulum">
     Label:
   </label>
-  <textarea id="vestibulum" className="status--error" rows="5" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
+  <textarea id="vestibulum" className="dnb-textarea status--error" rows="5" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
   <FormStatus text="Message to the user" />
 </div>
 `}
@@ -48,7 +48,7 @@ import ComponentBox from 'Tags/ComponentBox'
     Label:
   </label>
   <div className="dnb-form-group dnb-form-group__position--vertical" >
-    <textarea id="gravida" rows="3" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
+    <textarea id="gravida" className="dnb-textarea" rows="3" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
     <FormStatus status="info" text="Message to the user" />
   </div>
 </div>

packages/dnb-design-system-portal/src/pages/uilib/patterns/helper-classes.md

@@ -1,7 +1,7 @@
 ---
-title: 'HelperClasses'
-draft: false
-status: dep
+# title: 'Helper Classes'
+draft: true
+status: wip
 order: 9
 ---