Merge pull request #92 from dnbexperience/develop

release doc updates
dnbexperience · Feb 15, 2019 · cef6523 · cef6523
2 parents 4a22e89 + ad0ca4e
commit cef6523
Show file tree

Hide file tree

Showing 221 changed files with 1,050 additions and 777 deletions.
diff --git a/.drone.yml b/.drone.yml
@@ -82,9 +82,6 @@ steps:
     when:
       event:
         - pull-request
-      branch:
-        exclude:
-          - wip/*
 
   - name: deploy-release
     image: tujoworker/docker-node-puppeteer

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+**February, 14. 2019**
+
+## Changes to the default styles
+
+- 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**
 
 ## Changes to the default styles

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1 +1 @@
-Read more on [how to contribute](https://eufemia.dnb.no/uilib/development).
+Read more on [how to contribute](https://eufemia.dnb.no/uilib/development)
diff --git a/packages/dnb-design-system-portal/gatsby-node.js b/packages/dnb-design-system-portal/gatsby-node.js
@@ -96,7 +96,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       node,
       value:
         node.frontmatter.title ||
-        parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
+        // parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
         null
     })
 

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -29,7 +29,7 @@
     "make-ui-lib-pages": "babel-node ./scripts/uilib/makeDemosFactory.js && yarn prettier:components",
     "make-ui-lib-pages:dev": "nodemon --exec 'yarn make-ui-lib-pages' --ext js --watch '../dnb-ui-lib/src/**/*' --watch '**/makeDemosFactory.js' --watch '**/tasks/*' --watch '**/Template.js'  --watch '**/template.md'",
     "reset": "cd ../../ && yarn reset && cd - && yarn build",
-    "serve": "live-server public --watch --no-browser --port=8001",
+    "serve": "live-server public --watch --no-browser --port=8000",
     "start": "rm -rf .cache; rm -rf ./public/**; cross-env DEBUG=gatsby:query-watcher gatsby develop",
     "test": "jest --watch",
     "test-ci": "jest --ci",
@@ -45,9 +45,9 @@
   },
   "dependencies": {
     "dnb-ui-lib": "*",
-    "prop-types": "^15.7.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -58,7 +58,7 @@
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "0.17.0",
+    "@mdx-js/mdx": "0.17.3",
     "@mdx-js/tag": "0.17.0",
     "babel-plugin-emotion": "^10.0.7",
     "camelcase": "^5.0.0",
@@ -78,7 +78,7 @@
     "eslint-plugin-react": "^7.12.4",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
-    "gatsby": "^2.0.119",
+    "gatsby": "^2.1.2",
     "gatsby-link": "^2.0.10",
     "gatsby-mdx": "^0.3.6",
     "gatsby-plugin-catch-links": "^2.0.11",
@@ -98,7 +98,7 @@
     "jest-emotion": "^10.0.7",
     "jest-raw-loader": "^1.0.1",
     "keycode": "^2.2.0",
-    "lint-staged": "^8.1.3",
+    "lint-staged": "^8.1.4",
     "live-server": "^1.2.1",
     "mdx-component-autolink-header": "^0.0.1",
     "mime": "^2.4.0",
@@ -114,7 +114,7 @@
     "react-fake-props": "^0.3.1",
     "react-helmet": "^5.2.0",
     "react-live": "^1.12.0",
-    "react-live-replacement": "https://github.com/tujoworker/react-live/tarball/d9a44a8b8093a3cb57734d901200f7b66cd30515",
+    "react-live-replacement": "https://github.com/tujoworker/react-live/tarball/fcf128dd05719fcad5e99e9c2ab462ee01c91520",
     "stylelint": "^9.10.1",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.5.2"

diff --git a/packages/dnb-design-system-portal/src/pages/design-system/contact.md b/packages/dnb-design-system-portal/src/pages/design-system/contact.md
@@ -9,21 +9,30 @@ order: 2
 
 ## Slack Channel on [DNB IT](https://dnb-it.slack.com)
 
-- `# eufemia-design-system`
+- `eufemia-design-system`
 
 ### Related channels
 
+- `# figma`
 - `# frontend`
 - `# ux-design`
 - `# experience-design`
 
-## Designers
+---
+
+## People
+
+### Administrators
+
+- **Jens Thuland** (_[email protected]_)
+
+### Designers
 
-- **Jens Thuland** (Figma, Lead DNB Digital Design)
+- **Jens Thuland** (Figma, Web Design, )
 - **Sindre Marken** (Figma, Typography)
 - **Casper Brekke** (Figma, iOS Design)
 - **Kevin Murphy** (Design System)
 
-## Developers
+### Developers
 
-- **Tobias Høegh** (GitHub)
+- **Tobias Høegh** (GitHub, dnb-ui-lib)
diff --git a/packages/dnb-design-system-portal/src/pages/icons.md b/packages/dnb-design-system-portal/src/pages/icons.md
@@ -11,17 +11,17 @@ import IconNearestNeighbour from 'Pages/quickguide-designer/assets/icon-nearest-
 
 At DNB we are currently using Streamline icons as our source for off-the-shelf vector icons.
 
-Link: https://www.streamlineicons.com/
+[Link to streamlineicons.com](https://www.streamlineicons.com/)
 
-#### Using Icons
+## Using Icons
 
 The icons are in SVG format and are optimized for performance and to have the smallest footprint possible in the package build process.
 
 The sources are located in the [assets folder](https://unpkg.com/dnb-ui-lib@latest/assets/icons/).
 
 They also exists as [React Components](/uilib/components/icon) to be easily integrated, without need of an additional SVG file loader.
 
-#### Color
+## Color
 
 The icons SVG format have to satisfy the requirement to colorize the CSS fill- and stoke colors by simply using the inherited color.
 
@@ -37,7 +37,7 @@ svg {
 }
 ```
 
-#### Sizing
+## Sizing
 
 Eufemia icons come in **two** sizes:
 
@@ -46,7 +46,7 @@ Eufemia icons come in **two** sizes:
 
 The reason why there are two sizes, is mainly do to the SVG artifact, that the Icons, alongside with the strokes, will scale up, once we use them with a larger width and height.
 
-##### Scalability in web
+### Scalability in web
 
 To ensure that the relative size of the SVG icons are scalable by the inherited CSS font size, do not explicitly specify the SVG, unless for older browsers like Internet Explorer.
 
@@ -60,7 +60,7 @@ svg {
 }
 ```
 
-#### Spacing
+## Spacing
 
 Icons should have a minimum area of 8px between them and their nearest neighbor.
 
@@ -73,10 +73,6 @@ Icons should have a minimum area of 8px between them and their nearest neighbor.
   />
 </div>
 
-#### Custom Icons
+## Custom Icons
 
-Streamline caters for pretty much all of Eufemia's icon needs. However, sometimes there is a need for a custom icon. In these cases please contact one of Eufemia's design leads.
-
-```
-
-```
+[Streamline](https://www.streamlineicons.com/) caters for pretty much all of Eufemia's icon needs. However, sometimes there is a need for a custom icon. In these cases please contact one of Eufemia's [design leads](/design-system/contact).
diff --git a/packages/dnb-design-system-portal/src/pages/icons/primary.md b/packages/dnb-design-system-portal/src/pages/icons/primary.md
@@ -13,7 +13,7 @@ The Primary Icons are included in the [UI Library](/uilib) and also shipped bund
 
 Primary Icons can easily be included, for instance, in [Buttons](/uilib/components/button). They are integrated by using the `<IconPrimary />` [Icon Component](/uilib/components/icon-primary).
 
-#### A list of all Primary Icons
+## A list of all Primary Icons
 
 Title in parentheses are the icon's variable name used in coding.
 

diff --git a/packages/dnb-design-system-portal/src/pages/icons/secondary.md b/packages/dnb-design-system-portal/src/pages/icons/secondary.md
@@ -15,7 +15,7 @@ The Secondary Icons can be extended infinitely.
 
 **Technically:** The consequence is that they have to be [imported](/uilib/components/icon) where ever they have to be used.
 
-#### A list of all Secondary Icons
+## A list of all Secondary Icons
 
 ---
 

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/about-the-lib.md b/packages/dnb-design-system-portal/src/pages/uilib/about-the-lib.md
@@ -16,6 +16,10 @@ Simply to unify and to maintain consistency of the most commonly used HTML Eleme
 
 This part of the Design System is dedicated to **application development**.
 
+## License
+
+The `dnb-ui-lib` is for internal DNB development only. Also, make sure You act within the [license](/license).
+
 ---
 
 <WatchingReleases />

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/form-radio.md b/packages/dnb-design-system-portal/src/pages/uilib/components/form-radio.md
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/development/assets/eufemia-logo.js b/packages/dnb-design-system-portal/src/pages/uilib/development/assets/eufemia-logo.js
@@ -2,6 +2,8 @@ import React from 'react'
 
 export default props => (
   <svg
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/development/assets/github-logo.js b/packages/dnb-design-system-portal/src/pages/uilib/development/assets/github-logo.js
@@ -1,7 +1,13 @@
 import React from 'react'
 
 export default props => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
   </svg>
 )
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements.md b/packages/dnb-design-system-portal/src/pages/uilib/elements.md
@@ -5,6 +5,7 @@ draft: false
 order: 6
 ---
 
+import OtherElements from 'Pages/uilib/elements/other'
 import Anchor from 'Pages/uilib/elements/anchor'
 import Blockquote from 'Pages/uilib/elements/blockquote'
 import Textarea from 'Pages/uilib/elements/textarea'
@@ -15,20 +16,25 @@ import Lists from 'Pages/uilib/elements/lists'
 
 ## 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.
+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)
 
 ## Overview
 
-- [Anchor (Link)](#anchor)
+- [Anchor (Text Link)](#anchor)
 - [Blockquote](#blockquote)
 - [Lists](#lists)
 - [Tables](#tables)
 - [Textarea](#textarea)
-
----
+- [Select](#missing-html-elements)
+- [Radio](#missing-html-elements)
+- [Checkbox](#missing-html-elements)
 
 <Anchor />
 <Blockquote />
 <Lists />
 <Tables />
 <Textarea />
+
+---
+
+<OtherElements />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md
@@ -8,18 +8,18 @@ import CodeBlock from 'Tags/CodeBlock'
 
 <CodeBlock reactLive hideCode>
 {`
-<ul data-dnb-test="anchor" className="dnb-unstyled-list">
+<ul className="dnb-unstyled-list">
   <li>
-    <a href="/" >Default Style</a>
+    <a data-dnb-test="anchor-default" href="/" >Default Style</a>
   </li>
   <li>
-    <a href="/" className="dnb-hover-style">Hover Style</a>
+    <a data-dnb-test="anchor-hover" href="/" className="dnb-anchor--hover">Hover Style</a>
   </li>
   <li>
-    <a href="/" className="dnb-active-style">Active Style</a>
+    <a data-dnb-test="anchor-active" href="/" className="dnb-anchor--active">Active Style</a>
   </li>
   <li>
-    <a href="/" className="dnb-focus-style">Focus Style</a>
+    <a data-dnb-test="anchor-focus" href="/" className="dnb-anchor--focus">Focus Style</a>
   </li>
 </ul>
 `}

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/blockquote.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/blockquote.md
@@ -18,7 +18,7 @@ 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 vivendum tractatos ei quo.
+  Dis leo aliquam neque aptent nascetur metus ad ut eu Choro <a href="/uilib/elements#blockquote">vivendum tractatos</a> ei quo.
 </blockquote>
 `}
 </CodeBlock>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/other.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/other.md
@@ -0,0 +1,13 @@
+---
+draft: true
+---
+
+import CodeBlock from 'Tags/CodeBlock'
+
+## Missing HTML Elements
+
+Several commonly used HTML Elements are not included in the `dnb-ui-lib`. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target.
+
+- For the `select` element, use e.g. [**Dropdown**](/uilib/components/dropdown) or [**Accordion**](/uilib/components/accordion) component.
+
+- For `checkbox` or `radio` inputs, use e.g. [**Toggle Button**](/uilib/components/button) or [**Switch**](/uilib/components/switch) component.
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,15 +7,17 @@ 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">
-        <a href="#sort" className="dnb-no-anchor-underline">
+      <th className="dnb-no-wrap">
+        <a href="#sort" className="dnb-anchor-no-underline">
           Column 4 <IconPrimary icon="chevron-down" />
         </a>
       </th>
@@ -50,3 +52,5 @@ import { IconPrimary } from 'dnb-ui-lib/src'
     </tr>
   </tbody>
 </table>
+`}
+</CodeBlock>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Read more on [how to contribute](https://eufemia.dnb.no/uilib/development).
		Read more on [how to contribute](https://eufemia.dnb.no/uilib/development)
-Original file line number
+Diff line change
@@ Expand Up / @@ -96,7 +96,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => { @@
           node,
           value:
             node.frontmatter.title ||
-            parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
+            // parent.name.replace(/^[a-z]/, parent.name[0].toUpperCase()) ||
             null
         })
@@ Expand Down @@