Merge pull request #257 from dnbexperience/develop

release of v4.10

CHANGELOG.md

@@ -1,3 +1,10 @@
+## August, 24. 2019
+
+- Updated [FormStatus](/uilib/components/form-status) with new text color and new icon
+- New component in the `dnb-ui-lib`: [GlobalStatus](/uilib/components/global-status)
+- Added link to example usage of a [Table](/uilib/elements/tables#working-demo) styles using `react-table`
+- Read more about the `dnb-ui-lib` [v4.10 release](/uilib/releases/v4.10-info)
+
 ## July, 21. 2019
 
 - Major Release of `dnb-ui-lib`: Read more about the [v4 release](/uilib/releases/v4-info)

package.json

@@ -36,5 +36,9 @@
   },
   "release": {
     "analyzeCommits": "simple-commit-message"
+  },
+  "volta": {
+    "node": "10.6.0",
+    "yarn": "1.17.3"
   }
-}
+}

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

@@ -58,16 +58,16 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "^1.2.2",
-    "@mdx-js/react": "^1.2.2",
-    "babel-jest": "^24.8.0",
-    "babel-plugin-emotion": "^10.0.15",
+    "@mdx-js/mdx": "^1.3.1",
+    "@mdx-js/react": "^1.3.1",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-emotion": "^10.0.16",
     "camelcase": "^5.3.1",
     "ci-info": "^2.0.0",
     "classnames": "^2.2.6",
     "clean-html": "^1.5.0",
     "cross-env": "^5.2.0",
-    "del": "^5.0.0",
+    "del": "^5.1.0",
     "emotion": "^10.0.14",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -78,27 +78,27 @@
     "eslint-plugin-react": "^7.14.3",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.1.0",
-    "gatsby": "^2.13.55",
-    "gatsby-link": "^2.2.4",
-    "gatsby-plugin-catch-links": "^2.1.2",
-    "gatsby-plugin-emotion": "^4.1.2",
-    "gatsby-plugin-manifest": "^2.2.5",
-    "gatsby-plugin-mdx": "^1.0.23",
-    "gatsby-plugin-offline": "^2.2.5",
-    "gatsby-plugin-page-creator": "^2.1.5",
-    "gatsby-plugin-postcss": "^2.1.2",
-    "gatsby-plugin-react-helmet": "^3.1.3",
-    "gatsby-plugin-sass": "^2.1.5",
-    "gatsby-plugin-sharp": "^2.2.10",
-    "gatsby-remark-images": "^3.1.8",
-    "gatsby-source-filesystem": "^2.1.9",
+    "gatsby": "^2.13.80",
+    "gatsby-link": "^2.2.8",
+    "gatsby-plugin-catch-links": "^2.1.5",
+    "gatsby-plugin-emotion": "^4.1.4",
+    "gatsby-plugin-manifest": "^2.2.9",
+    "gatsby-plugin-mdx": "^1.0.30",
+    "gatsby-plugin-offline": "^2.2.10",
+    "gatsby-plugin-page-creator": "^2.1.11",
+    "gatsby-plugin-postcss": "^2.1.5",
+    "gatsby-plugin-react-helmet": "^3.1.5",
+    "gatsby-plugin-sass": "^2.1.12",
+    "gatsby-plugin-sharp": "^2.2.17",
+    "gatsby-remark-images": "^3.1.17",
+    "gatsby-source-filesystem": "^2.1.16",
     "gh-pages": "^2.1.1",
     "github-slugger": "^1.2.1",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
     "jest-emotion": "^10.0.14",
     "jest-raw-loader": "^1.0.1",
     "keycode": "^2.2.0",
-    "lint-staged": "^9.2.1",
+    "lint-staged": "^9.2.3",
     "nodemon": "^1.19.1",
     "ora": "^3.4.0",
     "postcss-preset-env": "^6.7.0",
@@ -111,7 +111,7 @@
     "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-fake-props": "^0.3.2",
     "react-helmet": "^5.2.1",
-    "react-live": "^2.1.2",
+    "react-live": "^2.2.0",
     "react-markdown": "^4.1.0",
     "stylelint": "^10.1.0",
     "stylelint-config-styled-components": "^0.1.1",

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

@@ -9,9 +9,9 @@ draft: false
 DNB's master design templates and guides are created and maintained in Figma.
 Designers are **encouraged** to work in in Figma in order to maintain compatibility and shareability.
 
-Figma: https://www.figma.com/
+Link: [Figma.com](https://www.figma.com)
 
-#### Why not Sketch?
+## Why not Sketch?
 
 We are working on the 'single-source -of-truth' principle. For that reason only one design application will be used to generate Eufemia's master documents.
 

packages/dnb-design-system-portal/src/docs/quickguide-designer/ui-guides.md

@@ -8,7 +8,7 @@ draft: false
 
 The following is a set of interface design resources to get you up and running with all the basic tools and libraries. The Quickstart files are to ensure that you are using the official and most up-to-date versions more than as a time saving action.
 
-#### Figma UI files
+## Figma UI files
 
 Quickstart file contains:
 
@@ -19,5 +19,4 @@ Quickstart file contains:
 5.  DNB Fonts
 6.  DNB symbol library
 
-Also make sure you have the correct DNB fonts. You can download them from here:
-Download the DNB fonts package
+Also make sure you have the correct DNB fonts.

packages/dnb-design-system-portal/src/docs/uilib/components.md

@@ -30,10 +30,6 @@ The `Dropdown` component is a fully custom-made component. This allows us to cha
 
 The form-label element represents a caption for an item in a user interface.
 
-## [FormStatus](/uilib/components/form-status)
-
-The form-status is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. ) The form-status component should be positioned relative to the form or form input to which it referring to.
-
 ## [FormRow](/uilib/components/form-row)
 
 The `FormRow` component is a helper to archive more easily often used DNB form layout setups. By default a `FormRow` is using the `<formset>` and `<legend>` HTML elements - if a label property is provided.
@@ -42,6 +38,14 @@ The `FormRow` component is a helper to archive more easily often used DNB form l
 
 The `FormSet` component gives You both a HTML form element `<form>` by default and also a React provider for [FormRow](/uilib/components/form-row). This way You can define more globally e.g. if all the rows should be displayed **vertically**.
 
+## [FormStatus](/uilib/components/form-status)
+
+The `FormStatus` is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. ) The form-status component should be positioned relative to the form or form input to which it referring to.
+
+## [GlobalStatus](/uilib/components/global-status)
+
+The `GlobalStatus` is a complex component meant for displaying a global Application notifications or a summary of a form ( displaying form errors, messages etc. ).
+
 ## [Icon](/uilib/components/icon)
 
 The main `Icon` component is basically a wrapper for whatever icon you place within it. This means a span wrapping an inline svg.

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

@@ -79,6 +79,12 @@ class Example extends PureComponent {
   icon_position="left"
   icon="chevron_left"
   data-dnb-test="button-tertiary"
+/>
+<Button
+  variant="tertiary"
+  text="With medium icon"
+  icon="chevron_right"
+  icon_size="medium"
 />
           `}
         </ComponentBox>
@@ -115,7 +121,7 @@ class Example extends PureComponent {
         </ComponentBox>
         <ComponentBox
           scope={{ Bell }}
-          caption="Medium is equalent to 24, but responsive"
+          caption="Medium is equalent to 24, but responsive. To import custom icons, use: `import { bell_medium as Bell } from 'dnb-ui-lib/icons'`"
         >
           {/* @jsx */ `
 <Button
@@ -126,7 +132,10 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <ComponentBox scope={{ Bell }}>
+        <ComponentBox
+          scope={{ Bell }}
+          caption="Large Signal button with medium sized icon. To import custom icons, use: `import { bell_medium as Bell } from 'dnb-ui-lib/icons'`"
+        >
           {/* @jsx */ `
 <Button
   variant="signal"

packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/checkbox-properties.md

@@ -11,4 +11,5 @@ draft: true
 | `label_position`                                | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.                 |
 | `status`                                        | _(optional)_ text with a status message. The style defaults to an error message.                                     |
 | `status_state`                                  | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
+| `global_status_id`                              | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                    |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                |

packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/date-picker-properties.md

@@ -35,4 +35,5 @@ draft: true
 | `input_element`                                 | _(optional)_ gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to `react-text-mask`. |
 | `status`                                        | _(optional)_ text with a status message. The style defaults to an error message.                                                                                                                                                                                                          |
 | `status_state`                                  | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                                                                                                                                      |
+| `global_status_id`                              | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                                                                                                                                                                                         |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                     |

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

@@ -10,7 +10,11 @@ import styled from '@emotion/styled'
 
 class Example extends PureComponent {
   render() {
-    const no_animation = typeof window !== 'undefined' && window.IS_TEST
+    const props =
+      typeof window !== 'undefined' && window.IS_TEST
+        ? { no_animation: true, no_scroll_animation: true }
+        : {}
+    console.log('props', props)
     return (
       <Fragment>
         <ComponentBox
@@ -63,7 +67,7 @@ render(
           data-dnb-test="dropdown-closed"
           useRender
           hideSyntaxButton
-          scope={{ no_animation, no_scroll_animation: no_animation }}
+          scope={{ props }}
         >
           {/* @jsx */ `
 const data = [
@@ -101,17 +105,18 @@ render(
     data={data}
     label="Label:"
     title="Please select a value"
-    no_animation={no_animation}
     on_change={({ data: { selected_key } }) => {
       console.log('on_change', selected_key)
     }}
+    {...props}
   />
 )
           `}
         </ComponentBox>
         <ComponentBox
           caption="Default dropdown, icon on left side"
-          scope={{ data }}
+          scope={{ data, props }}
+          data-dnb-test="dropdown-left-icon"
         >
           {/* @jsx */ `
 <FormLabel for_id="text-dropdown-1" text="Label:" />
@@ -126,12 +131,14 @@ render(
     console.log('on_show')
   }}
   id="text-dropdown-1"
+  {...props}
 />
           `}
         </ComponentBox>
         <ComponentBox
           caption="As **Popup Menu** - no lasting selection will be made"
           data-dnb-test="dropdown-more_menu"
+          scope={{ props }}
         >
           {/* @jsx */ `
 <Dropdown
@@ -140,6 +147,7 @@ render(
   title="Choose an item"
   data={['Go this this Link', 'Or press on me', <>Custom component</>]}
   right="small"
+  {...props}
 />
 <Dropdown
   more_menu="true"
@@ -168,21 +176,23 @@ render(
         </ComponentBox>
         <ComponentBox
           caption="Dropdown with status and vertical label layout"
-          scope={{ data }}
+          data-dnb-test="dropdown-status-error"
+          scope={{ data, props }}
         >
           {/* @jsx */ `
 <Dropdown
   data={data}
   label="Label:"
   label_direction="vertical"
   status="Message to the user"
+  {...props}
 />
           `}
         </ComponentBox>
         <ComponentBox
           caption="Dropdown list - only to vissualize"
-          scope={{ data }}
           data-dnb-test="dropdown-list"
+          scope={{ data }}
           hideCode
         >
           {/* @jsx */ `
@@ -232,9 +242,13 @@ const Wrapper = styled.div`
   [data-dnb-test-wrapper='dropdown-more_menu'] {
     width: 20rem;
     height: 15rem !important;
+    ${'' /* .dnb-dropdown:nth-of-type(1n + 2) {
+      display: none;
+    } */}
   }
   [data-dnb-test='dropdown-list'] .dnb-dropdown__list {
     display: block;
+    visibility: visible;
     position: relative;
     top: 0;
     width: var(--dropdown-width);

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-properties.md

@@ -22,6 +22,7 @@ import { Data } from 'Pages/uilib/components/dropdown/Examples'
 | `max_height`                                    | _(optional)_ defines if the height (in `rem`) of the options list. Defaults to null, as this is set automatically by default.                                                                                                 |
 | `status`                                        | _(optional)_ text with a status message. The style defaults to an error message.                                                                                                                                              |
 | `status_state`                                  | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                                                                          |
+| `global_status_id`                              | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                                                                                                                             |
 | `label`                                         | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created.                                                                                                                                 |
 | `label_direction`                               | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`                                                                                                                  |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                         |

packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js

@@ -48,11 +48,7 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 const CustomStatus = () => (
-  <>
-    My info
-    <Link href="/">with a link</Link>
-    and more text
-  </>
+  <>My info <Link href="/">with a link</Link> and more text</>
 )
 render(
   <Input

packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md

@@ -2,10 +2,12 @@
 draft: true
 ---
 
-| Properties      | Description                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `text|children` | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well.                     |
-| `title`         | _(optional)_ the `title` attribute in the status.                                                                                        |
-| `state`         | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. |
-| `icon`          | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`.                                                          |
-| `icon_size`     | _(optional)_ the icon size of the icon shows. Defaults to `medium`.                                                                      |
+| Properties                                      | Description                                                                                                                              |
+| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `text, children`                                | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well.                     |
+| `title`                                         | _(optional)_ the `title` attribute in the status.                                                                                        |
+| `state`                                         | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. |
+| `icon`                                          | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`.                                                          |
+| `icon_size`                                     | _(optional)_ the icon size of the icon shows. Defaults to `medium`.                                                                      |
+| `global_status_id`                              | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                                        |
+| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                    |

packages/dnb-design-system-portal/src/docs/uilib/components/global-status.md

@@ -0,0 +1,26 @@
+---
+title: 'GlobalStatus'
+draft: false
+status: 'new'
+order: 4
+---
+
+import Tabs from 'Tags/Tabs'
+
+import GlobalStatusInfo from 'Pages/uilib/components/global-status/global-status-info'
+import GlobalStatusProperties from 'Pages/uilib/components/global-status/global-status-properties'
+import GlobalStatusEvents from 'Pages/uilib/components/global-status/global-status-events'
+
+# GlobalStatus
+
+<Tabs>
+  <Tabs.Content>
+    <GlobalStatusInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <GlobalStatusProperties />
+  </Tabs.Content>
+  <Tabs.Content>
+    <GlobalStatusEvents />
+  </Tabs.Content>
+</Tabs>