Merge pull request #119 from dnbexperience/develop

New portal content and features

.drone.yml

@@ -18,12 +18,14 @@ steps:
     when:
       event:
         - push
+        - pull-request
       branch:
         exclude:
           - release
           - develop
           - gh-pages
           - rc/*
+          - ftr/*
 
   - name: deploy-preview
     image: tujoworker/docker-node-puppeteer
@@ -51,39 +53,11 @@ steps:
     when:
       event:
         - push
+        - pull-request
       branch:
         include:
           - develop
           - rc/*
-
-  - name: deploy-pull-preview
-    image: tujoworker/docker-node-puppeteer
-    environment:
-      FIGMA_MAIN_FILE:
-        from_secret: FIGMA_MAIN_FILE
-      FIGMA_TOKEN:
-        from_secret: FIGMA_TOKEN
-      GH_EMAIL:
-        from_secret: GH_EMAIL
-      GH_NAME:
-        from_secret: GH_NAME
-      GH_TOKEN:
-        from_secret: GH_TOKEN
-    commands:
-      - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.13.0
-      - export PATH="$HOME/.yarn/bin:$PATH"
-      - yarn install
-      - yarn audit-ci
-      - yarn lint-ci
-      - yarn test-ci
-      - yarn prepublish-ci
-      - yarn build-ci
-      - yarn test-ci-screenshots
-    when:
-      event:
-        - pull-request
-      branch:
-        include:
           - ftr/*
 
   - name: deploy-release

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

@@ -3,17 +3,22 @@
  *
  */
 
-import { applyPageFocus } from 'dnb-ui-lib/src/shared/global-helpers'
+import { applyPageFocus } from 'dnb-ui-lib/src/shared/helpers'
 
 // Load dev styles (to use hot reloading, we do have to import the styles in here)
 if (process.env.NODE_ENV === 'development') {
+  // import styles
+  require('dnb-ui-lib/src/style/patterns') // import ony patterns
   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
   require('dnb-ui-lib/src/style/themes/ui') // import the default theme
+  // // require('dnb-ui-lib/src/style/themes/open-banking') // import the "open-banking" theme
   // require('dnb-ui-lib/src/style/elements') // import also styling for HTML elements/tags
+
+  // Only for testing legacy CSS code
+  // require('../examples/example-styling/src/legacy/reset.css')
+  // require('../examples/example-styling/src/legacy/dnb.css')
 }
 
 // UI Style production styles here to prevent loading flickering

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

@@ -50,45 +50,45 @@
     "react-dom": "^16.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.3",
+    "@babel/core": "^7.3.4",
     "@babel/node": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
     "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "0.17.5",
-    "@mdx-js/tag": "0.17.5",
+    "@mdx-js/mdx": "0.20.1",
+    "@mdx-js/tag": "0.18.0",
     "babel-plugin-emotion": "^10.0.7",
     "camelcase": "^5.0.0",
     "ci-info": "^2.0.0",
     "classnames": "^2.2.6",
     "clean-html": "^1.5.0",
     "color": "^3.1.0",
     "cross-env": "^5.2.0",
-    "del": "^3.0.0",
+    "del": "^4.0.0",
     "emotion": "^10.0.7",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
+    "enzyme-adapter-react-16": "^1.10.0",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "^5.14.1",
+    "eslint": "^5.15.0",
     "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.18",
-    "gatsby-link": "^2.0.12",
+    "gatsby": "^2.1.19",
+    "gatsby-link": "^2.0.13",
     "gatsby-mdx": "^0.4.0",
-    "gatsby-plugin-catch-links": "^2.0.11",
+    "gatsby-plugin-catch-links": "^2.0.12",
     "gatsby-plugin-emotion": "^4.0.4",
-    "gatsby-plugin-manifest": "^2.0.19",
+    "gatsby-plugin-manifest": "^2.0.20",
     "gatsby-plugin-offline": "^2.0.24",
     "gatsby-plugin-postcss": "^2.0.5",
     "gatsby-plugin-react-helmet": "^3.0.7",
     "gatsby-plugin-sass": "^2.0.10",
-    "gatsby-plugin-sharp": "^2.0.22",
+    "gatsby-plugin-sharp": "^2.0.23",
     "gatsby-remark-images": "^3.0.5",
     "gatsby-source-filesystem": "^2.0.23",
     "gh-pages": "^2.0.1",
@@ -98,17 +98,17 @@
     "jest-emotion": "^10.0.7",
     "jest-raw-loader": "^1.0.1",
     "keycode": "^2.2.0",
-    "lint-staged": "^8.1.4",
+    "lint-staged": "^8.1.5",
     "live-server": "^1.2.1",
     "mdx-component-autolink-header": "^0.0.1",
     "mime": "^2.4.0",
     "nodemon": "^1.18.10",
-    "ora": "^3.1.0",
-    "postcss-preset-env": "^6.5.0",
+    "ora": "^3.2.0",
+    "postcss-preset-env": "^6.6.0",
     "prettier": "^1.16.4",
     "prettier-package-json": "^2.1.0",
     "pretty": "^2.0.0",
-    "prism-react-renderer": "^0.1.5",
+    "prism-react-renderer": "^0.1.6",
     "raw-loader": "^1.0.0",
     "react-anchor-link-smooth-scroll": "^1.0.11",
     "react-fake-props": "^0.3.1",

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

@@ -7,6 +7,7 @@ import Img from 'Tags/Img'
 import FigmaTeam from 'Pages/quickguide-designer/assets/figma-team.svg'
 import FigmaLibraries from 'Pages/quickguide-designer/assets/figma-libraries.svg'
 import FigmaLayoutGrid from 'Pages/quickguide-designer/assets/figma-layout-grid.svg'
+import FigmaLibrary from 'Pages/quickguide-designer/assets/figma-library.svg'
 
 # QuickStart - Designers
 
@@ -35,8 +36,11 @@ What you should read from brand guidelines before starting to design for DNB
 <Img src={FigmaTeam} caption="Join the DNB UX team" alt="Join the DNB UX team" height="224" />
 
 5. Create a new file
-6. Add Eufemia library to your file by selecting the 'open book' icon on the top right of the Figma interface. This opens a new dialogue window:
-7. Choose Eufemia by toggling the switch.
+6. Add Eufemia library to your file by selecting the 'open book' icon on the top right of the Figma interface.
+
+<Img src={FigmaLibrary} caption="Figma's library icon" alt="Library icon" height="120" />
+
+7. This opens a new dialogue window. Choose Eufemia by toggling the switch:
 
 <Img src={FigmaLibraries} caption="Add the Eufemia library" alt="Add Eufemia team" height="320" />
 

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

@@ -6,8 +6,6 @@ icon: 'accessibility'
 
 # Accessibility, Inclusivness and WCAG
 
-#### Principles
-
 Accessibility affects all users, not just those with stereotypical disabilities. The extra work that may be required to ensure good accessibility in DNB applications and services will be worth it.
 
 Remember - test for accessibility early in the design process.
@@ -21,7 +19,7 @@ The four main tenets of the WCAG 2.1 are:
 - Understandable
 - Robust
 
-#### Perceivable
+### Perceivable
 
 Perceivable content must be readable.
 
@@ -41,7 +39,7 @@ Avoid fixed pixel sizes - use relative sizing.
 
 Never put important text as part of an image.
 
-#### Operable
+### Operable
 
 All users should be able to get to all the pages and forms.
 
@@ -62,7 +60,7 @@ Keyboard shortcuts can increase task efficiency.
 
 Forms, navigation and other essential components and actions should work on older browsers and devices. Styling comes second to content and accessibility.
 
-#### Understandable
+### Understandable
 
 Contents' intended meaning is easily understandable.
 
@@ -74,7 +72,7 @@ This especially applies to use of icons and symbols. What may be obvious to a de
 
 Back up icons and symbols with clear labels, captions or subtitles.
 
-#### Robustness
+### Robustness
 
 Make content accessible from a wide variety of devices.
 

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

@@ -26,7 +26,7 @@ You wish to......
 ##### Example:
 
 <div class="typography-box">
-<h1>
+<h1 class="dnb-h1">
 Quem facilisi moderatius id eam, id tamquam albucius per.
 </h1>
 <p>
@@ -51,7 +51,7 @@ You wish to......
 ##### Example:
 
 <div class="typography-box">
-<h1>
+<h1 class="dnb-h1">
 <small>This part is small facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire</small>
 </h1>
 <p>

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

@@ -72,6 +72,7 @@ class Example extends PureComponent {
   text="Tertiary button with icon on left"
   icon_position="left"
   icon="chevron_left"
+  data-dnb-test="button-tertiary"
 />
           `}
         </ComponentBox>
@@ -114,6 +115,12 @@ class Example extends PureComponent {
   disabled
 />
 <Button title="Button with Icon only" icon="calendar" />
+<Button
+  title="Small sized button with default Icon"
+  icon="add"
+  icon_size="default"
+  size="small"
+/>
 <Button
   title="Default sized Button with medium Icon"
   icon="calendar"
@@ -133,21 +140,20 @@ class Example extends PureComponent {
           {/* @jsx */ `
 <Button
   variant="signal"
-  text="Signal Button (large size)"
-  size="large"
+  text="Signal Button"
   icon={Bell}
-  icon_size="medium"
+  data-dnb-test="button-signal"
 />
           `}
         </ComponentBox>
         <ComponentBox scope={{ Bell }}>
           {/* @jsx */ `
 <Button
   variant="signal"
-  text="Disabled Signal Button"
+  text="Large Signal Button"
   icon={<Bell />}
+  size="large"
   icon_size="medium"
-  disabled
 />
           `}
         </ComponentBox>

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

@@ -26,7 +26,11 @@ class Example extends PureComponent {
           data-dnb-test="dropdown-closed"
         >
           {/* @jsx */ `
-<Dropdown data={data} selected_item={2} label="Label:" />
+<Dropdown data={data} selected_item={2} label="Label:" ${
+            typeof window !== 'undefined' && window.IS_TEST
+              ? ' no_animation={true} '
+              : ''
+          }/>
           `}
         </ComponentBox>
         <ComponentBox
@@ -101,9 +105,15 @@ const Wrapper = styled.div`
   .dnb-form-label {
     margin-right: 1rem;
   }
+  [data-dnb-test] {
+    .dnb-dropdown__shell,
+    .dnb-dropdown__text__inner {
+      width: var(--dropdown-width);
+    }
+  }
   [data-dnb-test='dropdown-list'] .dnb-dropdown__options {
     position: relative;
-    max-width: var(--dropdown-width);
+    width: var(--dropdown-width);
   }
 `
 
@@ -117,7 +127,7 @@ export default () => (
 const data = [
   {
     selected_value: 'Brukskonto - Kari Nordmann',
-    outside_value: '1234.56.78901',
+    // outside_value: '1234.56.78901',
     content: 'Brukskonto - Kari Nordmann'
   },
   {
@@ -126,15 +136,15 @@ const data = [
   {
     selected_value:
       'Feriekonto - Kari Nordmann med et kjempelangt etternavnsen',
-    outside_value: '1134.56.78962',
+    // outside_value: '1134.56.78962',
     content: [
       '1134.56.78962',
       'Feriekonto - Kari Nordmann med et kjempelangt etternavnsen'
     ]
   },
   {
     selected_value: 'Oppussing - Ole Nordmann',
-    outside_value: '1534.96.48901',
+    // outside_value: '1534.96.48901',
     content: ['1534.96.48901', 'Oppussing - Ole Nordmann']
   }
 ]

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

@@ -33,7 +33,7 @@ const numberMask = createNumberMask({
   thousandsSeparatorSymbol: '.',
   prefix: '',
   suffix: ',-'
-})
+});
 render(<InputMasked
   label="Amount"
   autocomplete="off"
@@ -58,7 +58,7 @@ const numberMask = createNumberMask({
   allowDecimal: false,
   thousandsSeparatorSymbol: '.',
   prefix: 'NOK '
-})
+});
 render(<InputMasked
   label="Amount"
   autocomplete="off"

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

@@ -131,10 +131,9 @@ class Example extends PureComponent {
   status="Numbers are ligned by using Proportional Lining"
   status_state="info"
   status_animation="fade-in"
+  value="This is the value 1234567890"
   on_change={handleInputChange}
->
-  This is the value 1234567890
-</Input>
+/>
           `}
         </ComponentBox>
       </Fragment>