Merge pull request #52 from dnbexperience/develop

Portal IE11 experiment

.circleci/config.yml

@@ -130,4 +130,3 @@ workflows:
             branches:
               only:
                 - master
-                - /^release\/.*/

.drone.yml

@@ -24,7 +24,6 @@ steps:
           - develop
           - gh-pages
           - rc/*
-          - release/*
 
   - name: deploy-preview
     image: node:10.6
@@ -87,7 +86,6 @@ steps:
       branch:
         include:
           - master
-          - release/*
 
   - name: slack
     image: plugins/slack

.travis.yml

@@ -45,4 +45,4 @@ stages:
     if: (branch =~ /^(develop|rc\/.*)/)
 
   - name: deploy-release
-    if: (branch =~ /^(master|release\/.*)/)
+    if: (branch = master)

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

@@ -4,7 +4,13 @@
  */
 
 // UI Style
-require('dnb-ui-lib/src/style/patterns') // import ony patterns
-require('dnb-ui-lib/src/style') // import both all components and the default theme
+if (process.env.NODE_ENV === 'development') {
+  require('dnb-ui-lib/src/style/patterns') // import ony patterns
+  require('dnb-ui-lib/src/style') // import both all components and the default theme
+} else {
+  // As the gatsby-plugin-postcss plugin dont processes the scss file in the package "dnb-ui-lib" - we have to use the preprocessed version
+  // import both all components, patterns and the default theme
+  require('dnb-ui-lib/style/lib-IE11')
+}
 
 exports.disableCorePrefetching = () => false

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

@@ -75,17 +75,13 @@ module.exports = {
     },
     'gatsby-plugin-sass',
     'gatsby-plugin-emotion',
+    // 'gatsby-plugin-postcss',
     {
       resolve: 'gatsby-plugin-postcss',
       options: {
-        postCssPlugins: [
-          require('postcss-calc'),
-          require('postcss-custom-properties'),
-          require('postcss-preset-env')({ stage: 0 }),
-          require('autoprefixer')({
-            browsers: ['last 1 versions', 'explorer >= 11']
-          })
-        ]
+        postCssPlugins: require('../dnb-ui-lib/scripts/prepub/config/postcssConfig')(
+          { IE11: true }
+        )
       }
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

packages/dnb-design-system-portal/src/pages/dev/index.js

@@ -0,0 +1,17 @@
+/**
+ * Main App
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import { Button } from 'dnb-ui-lib/src'
+
+export default class App extends PureComponent {
+  render() {
+    return (
+      <Fragment>
+        Hello <Button text="Button" />
+      </Fragment>
+    )
+  }
+}

packages/dnb-design-system-portal/src/pages/dev/tabs.js

@@ -0,0 +1,35 @@
+/**
+ * Main App
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import { Input, Tabs } from 'dnb-ui-lib/src'
+
+export default class App extends PureComponent {
+  render() {
+    return (
+      <Fragment>
+        <Tabs data={data}>{exampleContent}</Tabs>
+      </Fragment>
+    )
+  }
+}
+
+const exampleContent = {
+  first: <h2>First</h2>,
+  second: <Input>Focus me with next Tab key</Input>,
+  third: (
+    <p>
+      Eros semper blandit tellus mollis primis quisque platea sollicitudin
+      ipsum
+    </p>
+  ),
+  fourth: <h2>Fourth</h2>
+}
+const data = [
+  { title: 'First', key: 'first' },
+  { title: 'Second', key: 'second' },
+  { title: 'Third', key: 'third', disabled: true },
+  { title: 'Fourth', key: 'fourth' }
+]

packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.js

@@ -4,9 +4,9 @@
 
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Icon from '../../../../../dnb-ui-lib/src/components/icon/Icon'
-import * as PrimaryIcons from '../../../../../dnb-ui-lib/src/icons/primary_icons'
-import * as SecondaryIcons from '../../../../../dnb-ui-lib/src/icons/secondary_icons'
+import Icon from 'dnb-ui-lib/src/components/icon/Icon'
+import * as PrimaryIcons from 'dnb-ui-lib/src/icons/primary_icons'
+import * as SecondaryIcons from 'dnb-ui-lib/src/icons/secondary_icons'
 import styled from '@emotion/styled'
 
 export default class Icons extends PureComponent {

packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js

@@ -206,7 +206,7 @@ class ItemWrapper extends PureComponent {
         {!hideTabs && (
           <Tabs
             id={this._id}
-            do_set_hash
+            use_hash
             data={tabsUsed}
             on_change={this.openTab}
             render={({ Wrapper, TabsList, Tabs }) => {

packages/dnb-design-system-portal/src/uilib/components/examples/FormStatus.txt

@@ -0,0 +1,5 @@
+<Input
+  label="Input with Status:"
+  status={this.state.status}
+  value="Input value with status"
+/>

packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt

@@ -1,7 +1,7 @@
 <Tabs data={data}>{exampleContent}</Tabs>
 <Tabs
   selected_key="second"
-  direction="right"
+  align="right"
   label="Some Tabs label"
   data={data}
   on_change={this.openTab}

packages/dnb-ui-lib/package.json

@@ -46,7 +46,8 @@
     "publish:postpack": "yarn pack && nodemon --exec 'babel-node ./scripts/release/postpack.js' ",
     "prepublish:update": "babel-node ./scripts/prepub/updateAndPrepub.js",
     "prepublishOnly:disabled": "yarn prepublish:update && jest --ci",
-    "story": "start-storybook -s / -p 3002 --ci",
+    "start": "yarn story",
+    "story": "start-storybook -s / -p 8002 --ci",
     "story:build": "build-storybook",
     "t": "jest --watch --testPathPattern ",
     "test": "jest --watch",

packages/dnb-ui-lib/scripts/figma/version.lock

@@ -1 +1 @@
-{"1a3caba565dddc0a936aaddc29a82887":"102283444"}
+{"1a3caba565dddc0a936aaddc29a82887":"102556061"}

packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js

@@ -0,0 +1,23 @@
+/**
+ * Make it possible to load the config outside this repo package
+ * This way we can reuse the config for post css
+ *
+ */
+
+module.exports = ({ IE11 = false } = {}) => {
+  const config = [
+    require('postcss-preset-env')({ stage: 0 }),
+    require('autoprefixer')({
+      browsers: ['last 2 versions', 'explorer >= 11']
+    })
+  ]
+
+  if (IE11) {
+    config.unshift(
+      require('postcss-calc')(),
+      require('postcss-custom-properties')()
+    )
+  }
+
+  return config
+}

packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js

@@ -5,22 +5,25 @@
 
 import gulp from 'gulp'
 import sass from 'gulp-sass'
-import autoprefixer from 'autoprefixer'
 import postcss from 'gulp-postcss'
-import postcssCustomProperties from 'postcss-custom-properties'
-import postcssCalc from 'postcss-calc'
-import postcssPresetEnv from 'postcss-preset-env'
 import onceImporter from 'node-sass-once-importer'
-// import jsonImporter from 'node-sass-json-importer'
 import babel from 'gulp-babel'
 import sourcemaps from 'gulp-sourcemaps'
-// import uglify from 'gulp-uglify'
 import cssnano from 'gulp-cssnano'
 import clone from 'gulp-clone'
 import rename from 'gulp-rename'
 import transform from 'gulp-transform'
 import { log } from '../../lib'
 
+// import the post css config
+import postcssConfig from '../config/postcssConfig'
+
+// Theese gets loaded by the postcssConfig config
+// import autoprefixer from 'autoprefixer'
+// import postcssCustomProperties from 'postcss-custom-properties'
+// import postcssCalc from 'postcss-calc'
+// import postcssPresetEnv from 'postcss-preset-env'
+
 export default async () => {
   await transformStyleModules()
   await runFactory('./src/style/**/themes/*.scss', { importOnce: false })
@@ -79,21 +82,6 @@ export const runFactory = (
         importer: importOnce ? [onceImporter()] : []
       }).on('error', sass.logError)
 
-      const postcssConfig = IE11
-        ? [
-            postcssCalc(),
-            postcssCustomProperties(),
-            postcssPresetEnv({ stage: 0 }),
-            autoprefixer({
-              browsers: ['last 2 versions', 'explorer >= 11']
-            })
-          ]
-        : [
-            autoprefixer({
-              browsers: ['last 1 versions']
-            }),
-            postcssPresetEnv({ stage: 0 })
-          ]
       const cloneSink = clone.sink()
 
       gulp
@@ -102,7 +90,7 @@ export const runFactory = (
         })
         .pipe(stream)
         .pipe(transform('utf8', transformMainStyleContent))
-        .pipe(postcss(postcssConfig))
+        .pipe(postcss(postcssConfig({ IE11 })))
         .pipe(cloneSink)
         .pipe(cssnano())
         .pipe(rename({ suffix: '.min' }))

packages/dnb-ui-lib/src/components/form-status/Example.js

@@ -3,7 +3,7 @@
  *
  */
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import Input from '../input/Input'
 
 class Example extends PureComponent {
@@ -19,14 +19,16 @@ class Example extends PureComponent {
   }
   render() {
     return (
-      <div className="example-box">
-        <Input
-          label="Input with Status:"
-          status={this.state.status}
-          value="Input value with status"
-        />
-        <p className="example-caption">A form status</p>
-      </div>
+      <Fragment>
+        <div className="example-box">
+          <Input
+            label="Input with Status:"
+            status={this.state.status}
+            value="Input value with status"
+          />
+          <p className="example-caption">A form status</p>
+        </div>
+      </Fragment>
     )
   }
 }

packages/dnb-ui-lib/src/components/icon-primary/__tests__/IconPrimary.test.js

@@ -16,7 +16,6 @@ const props = fakeProps(require.resolve('../../icon/IconPrimary'), {
   optional: true
 })
 props.icon = 'question'
-props.size = null
 
 describe('IconPrimary component', () => {
   it('have to match snapshot', () => {
@@ -36,6 +35,15 @@ describe('IconPrimary component', () => {
     expect(elem.props().height).toBe(height)
   })
 
+  it('has valid medium size', () => {
+    const Comp = mount(<Component {...props} size="medium" />)
+    const svg = Comp.find('svg')
+    const path = svg.find('path')
+    expect(svg.exists()).toBe(true)
+    expect(path.exists()).toBe(true)
+    expect(svg.props().viewBox).toBe('0 0 24 24')
+  })
+
   it('should validate with ARIA rules', async () => {
     const Comp = mount(<Component {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()

packages/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap

@@ -11,18 +11,23 @@ exports[`IconPrimary component have to match snapshot 1`] = `
   height={null}
   icon="question"
   modifier={null}
-  size={null}
+  size={16}
   width={null}
 >
   <span
     aria-label="question"
-    className="dnb-icon has-custom-size"
+    className="dnb-icon dnb-icon--default"
     role="img"
   >
-    <question>
+    <question
+      height={null}
+      width={null}
+    >
       <svg
         fill="none"
+        height={null}
         viewBox="0 0 16 16"
+        width={null}
       >
         <path
           clipRule="evenodd"

packages/dnb-ui-lib/src/components/icon/Icon.js

@@ -190,10 +190,10 @@ export default class Icon extends PureComponent {
     )
 
     return {
+      ...props,
       icon,
       svgParams,
-      wrapperParams,
-      ...props
+      wrapperParams
     }
   }
 
@@ -231,7 +231,7 @@ export const loadSVG = (icon, size = null, listOfIcons = null) => {
   // for importing react component
   try {
     icon = iconCase(icon)
-    if (size) {
+    if (size && !/[0-9]/.test(size)) {
       icon = `${icon}_${size}`
     }
     const mod = (listOfIcons.dnbIcons

packages/dnb-ui-lib/src/components/tabs/Example.js

@@ -37,7 +37,7 @@ class Example extends PureComponent {
         <div className="example-box">
           <Tabs
             selected_key="second"
-            direction="right"
+            align="right"
             label="Some Tabs label"
             data={data}
             on_change={this.openTab}