Merge pull request #285 from dnbexperience/develop

release of v4.18.0

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

@@ -8,13 +8,17 @@ import { Logo } from 'dnb-ui-lib/src'
 
 # Logos
 
-NB! Brand guidelines for logos can be found **here**.
-From the Brandbook, digital media should use the 3rd level logos (page 9).
+## Brand Center
 
-| Description      | Format       | Location | Owner/Contact     |
-| ---------------- | ------------ | -------- | ----------------- |
-| DNB logo - green | Vector - eps | Location | Anotherguy Inoslo |
-| DNB logo - white | Vector - eps | Location | Anotherguy Inoslo |
+**NB!** If you have access to the DNB's Brand Center, [you find the logos under "Visuell identitet"](https://bc.dnb.no/brandcenter/no/dnbvisualguidelines/component/default/761).
+
+## Brandbook
+
+From the Brandbook PDF file, digital media should use the 3rd level logos (page 9).
+
+## Developers
+
+The DNB Logo can easily be used and [integrated in digital web products as a component](/uilib/components/logo).
 
 <div class="example-box center">
   <Logo size="200" />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md

@@ -1,14 +1,21 @@
 ---
 title: 'Releases'
+developers: 'Articles giving a periodically overview of the changes lately released.'
 draft: false
 ---
 
+import WelcomeAdvice from 'Pages/welcome-advice.md'
 import GithubLogo from 'Pages/uilib/development/assets/github-logo.js'
 import { Icon } from 'dnb-ui-lib/src'
 
 # Releases
 
+Here you find small articles and notes giving you a periodically overview of the changes lately released.
+
 You may also have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [dnb-ui-lib](/uilib/).
 
+- [**v4.18**](/uilib/about-the-lib/releases/v4.18-info) _September, 28. 2019_
 - [**v4.10**](/uilib/about-the-lib/releases/v4.10-info) _August, 24. 2019_
 - [**v4.0**](/uilib/about-the-lib/releases/v4-info) _July, 21. 2019_
+
+<WelcomeAdvice />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.10-info.md

@@ -18,7 +18,7 @@ redirect_from:
 
 ## GlobalStatus
 
-This component is made to be used for mainly three UI cases:
+This component is made to be used for mainly three UX situations:
 
 - Global application error messages
 - User generated error messages

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.18-info.md

@@ -0,0 +1,44 @@
+# v4.18
+
+## Since last release info
+
+- In the Customization section you find now ready to use and optimized [favicons](/uilib/usage/customisation#favicon-and-manifest).
+- New icons: `upload`
+- Added layout [CSS properties](https://eufemia.dnb.no/uilib/usage/layout#sizing) (`--layout-*`), like: `--layout-large: 60em;`
+
+### [Modal](/uilib/components/modal)
+
+- `fullscreen` and `max_width` and a default max width of `60rem`
+
+### [Dropdown](/uilib/components/dropdown)
+
+- `data` can now be given by a function
+- Now you can use `value` and `default_value` instead of `selected_item`
+- A custom `width` is now easier to customize
+
+## New: [GlobalError](/uilib/components/global-error)
+
+The GlobalError is a simple component to integrate where a `404` or `500` has to be shown
+
+You have a couple of options / properties to change the texts if needed.
+
+```jsx
+import { GlobalError } from 'dnb-ui-lib/components'
+
+render(<GlobalError status="404" />)
+```
+
+## Install
+
+To upgrade to v4.18 with NPM, use:
+
+```bash
+$ npm i [email protected]
+
+# In case the NPM mirroring is not up to date
+$ npm i https://github.com/dnbexperience/eufemia/releases/download/v4.18.0/dnb-ui-lib-4.18.0.tgz
+```
+
+More details you find in the [Releases section on GitHub](https://github.com/dnbexperience/eufemia/releases)
+
+_September, 28. 2019_

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

@@ -6,7 +6,7 @@ import Examples from 'Pages/uilib/components/button/Examples'
 
 ## Description
 
-The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would suffice. Exceptions are made at times when it is used as a navigation element in the `action-nav` element.
+The Button component should be used as the **primary call-to-action** in a form, or as a user interaction mechanism. There should never be more than one primary button in a given context (e.g. a [action-nav](/uilib/patterns/action-nav)); `secondary` and `tertiary` button variants does not have this constraint. Generally speaking, a button should not be used when a link would suffice.
 
 ## Demos
 

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

@@ -56,14 +56,14 @@ const scrollableData = [
 render(
   <Dropdown
     data={scrollableData}
-    selected_item={5}
+    value={5}
     label="Label:"
   />
 )
           `}
         </ComponentBox>
         <ComponentBox
-          caption="Default dropdown - no `selected_item` is defined, but a `title` is given."
+          caption="Default dropdown - no `value` is defined, but a `title` is given."
           data-dnb-test="dropdown-closed"
           useRender
           hideSyntaxButton
@@ -123,7 +123,7 @@ render(
   label="Label:"
   icon_position="left"
   data={data}
-  selected_item={3}
+  value={3}
   on_change={({ data: selectedDataItem }) => {
     console.log('on_change', selectedDataItem)
   }}
@@ -159,8 +159,8 @@ render(
   align_dropdown="right"
   title="Choose an item"
   data={['Go this this Link', 'Or press on me', <>Custom component</>]}
-  on_change={({ selected_item }) => {
-    console.log('on_change', selected_item)
+  on_change={({ value }) => {
+    console.log('on_change', value)
   }}
   on_select={({ active_item }) => {
     console.log('on_select', active_item)

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

@@ -11,10 +11,10 @@ The difference between `on_change` and `on_select` is:
 
 ## Dropdown Events
 
-| Events            | Description                                                                                                                                                                                                                                                                                                    |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on_change`       | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_item }`. The **selected_item** property is the selected item by number, starting by 0.                                                                 |
-| `on_select`       | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_item, active_item }`. The **active_item** property is the currently selected one by keyboard navigation, starting by 0. |
-| `on_show`         | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                                                  |
-| `on_hide`         | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                                                  |
-| `on_state_update` | _(optional)_ will be called once the parameter `selected_value` changes its value.                                                                                                                                                                                                                             |
+| Events            | Description                                                                                                                                                                                                                                                                             |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_change`       | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.                                                                                                                                |
+| `on_select`       | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
+| `on_show`         | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                           |
+| `on_hide`         | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                           |
+| `on_state_update` | _(optional)_ will be called once the parameter `value` changes its state.                                                                                                                                                                                                               |

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

@@ -26,22 +26,22 @@ _This pattern can be constructed in a number of ways to achieve a similar effect
 
 ## Custom size
 
-Changing the **width** of the Dropdown component by CSS is easiest done by doing:
+Changing the **width** of the Dropdown component by CSS is easy done by doing:
 
 ```css
 .dnb-dropdown {
   --dropdown-width: 20rem; /* custom width */
 }
 ```
 
-You may else end up having to calculation the correct width to get the arrows aligned:
+You can also set the width directly, but then it has to be defined like so (including `min-width`):
 
 ```css
-.dnb-dropdown__list {
-  width: 8rem;
+.dnb-dropdown__shell {
+  width: 20rem; /* custom width */
 }
-.dnb-dropdown__text__inner {
-  width: 4.5rem; /* has to be calculated */
+.dnb-dropdown__list {
+  min-width: 20rem; /* custom width */
 }
 ```
 

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

@@ -7,7 +7,8 @@ import { Data } from 'Pages/uilib/components/dropdown/Examples'
 | Properties                                      | Description                                                                                                                                                                                                                                                         |
 | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `data`                                          | _(mandatory)_ the data we want to fill the list with. Provide the data as a `JSON string` or data `array` structure. <br /> If You don't have to define a `selected_item`, You can also send in a `function` witch will be called once the user opens the Dropdown. |
-| `selected_item`                                 | _(optional)_ a number as a string or integer, defines the active item in the data array. Defaults to `null` and the `title` is shown.                                                                                                                               |
+| `value, selected_item`                          | _(optional)_ a number as a string or integer, defines the selected item. Defaults to `null` and the `title` will be shown. <br /> **NB:** In case the Dropdown will be re-rendered, this value will be used again. Use `default_value` instead.                     |
+| `default_value`                                 | _(optional)_ if you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.                                      |
 | `title`                                         | _(optional)_ give a title to let the user know what they has to do. Defaults to `Option Menu` .                                                                                                                                                                     |
 | `icon`                                          | _(optional)_ name of icon to be included in the dropdown.                                                                                                                                                                                                           |
 | `icon_position`                                 | _(optional)_ position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right` if not set.                                                                                                                                                        |

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

@@ -26,15 +26,24 @@ $ git checkout -b ftr/my-feature
 $ git checkout -b wip/working-on-it
 ```
 
-### What happens on calling `yarn build`?
+### Create a local build
 
-There are a lot of different things going on, like:
+In case You have to create a local build of the package (for various reasons) you can do so:
+
+```bash
+# In the `dnb-ui-lib` directory, run:
+$ yarn build
+```
+
+#### What happens then
+
+During the package build are a lot of different things going on, like:
 
 - Assets are getting generated
-- All the lib code gets compiled down to ECMAScript 5.1
+- All the lib code gets compiled (ECMAScript 6 and ECMAScript 5.1)
 - UMD bundle gets created
-- All SASS styles are validated and compiled
-- Code gets minified
+- All SASS styles are validated and compiled (to support IE)
+- All bundles gets minified
 - Icons are getting converted
 
-A couple of folders and files are generated in the `dnb-ui-lib` root. They are ignored in the .gitignore file, so they not get a part of the git repo.
+A couple of folders and files will be generated in the `dnb-ui-lib` directory. They are ignored in the `.gitignore` file, so they not get a part of the git repo.

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

@@ -38,7 +38,7 @@ The DNB Design System Eufemia uses the following naming conventions.
 - `Classes` use **pascal case**.
 - Other Javascript files use **lisp case**.
 
-## Events
+## Events and Properties
 
 - Event names use **snake case**.
 - They have to describe what they are aiming to do. Like: `on_click`
@@ -55,4 +55,16 @@ The DNB Design System Eufemia uses the following naming conventions.
 
 ---
 
-More info about the cases can be found at [Wikipedia Special case styles](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles)
+## Why `snake_case`
+
+The decision to use `snake_case` was made to not just adopt React terms (`PascalCase`), because we wanted to be open for future changes in the front end world.
+
+But also the technical limitation that **Web Components** do not support `PascalCase` made us more confident to use another case style.
+
+HTML attributes uses `lisp-case`, so we needed something between.
+
+The aspect to distinguish between case styles will also make code easier to read and support future code changes and refactoring we assume.
+
+```jsx
+<Component aria-hidden="true" myReactProp={...} on_click={} />
+```

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

@@ -18,22 +18,22 @@ You can either do changes directly on GitHub with a fork of the Repository, or Y
 $ yarn start
 ```
 
-This will start the Portal. You can view the website by visiting [localhost:8000](http://localhost:8000/).
+This will start the Portal. You can view the portal website by visiting [localhost:8000](http://localhost:8000/).
 
 Content changes to both Markdown files and styles (SCSS) and code changes will be reflected immediately.
 
-### Build Pages
+### Local build
 
-In case You make changes witch effects the content of the [/uilib](/uilib) pages, You have to **regenerate** the Portal pages by running:
+In case You have to create a local static build of the portal website (for various reasons), you can do so by:
 
 ```bash
 # In the `dnb-design-system-portal` directory, run:
 $ yarn build
-
-# You can also start a "watch" mode with:
-$ yarn build:dev
 ```
 
-This will update/create all the needed [pages](/uilib).
+The build will be exported to the `/public` directory. You can now also run a local static server to view it at the given port [localhost:8000](http://localhost:8000/):
 
-Fore sure, this applies to change to Markdown files in the `dnb-ui-lib` - but also changes to the Component Code Examples.
+```bash
+# In the `dnb-design-system-portal` directory, run:
+$ yarn serve
+```

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

@@ -1,5 +1,6 @@
 ---
 title: 'Getting Started'
+description: 'The quick intro is meant to give developers a first guide through all the elementary parts of Eufemia.'
 icon: 'getting_started'
 draft: false
 order: 2
@@ -16,13 +17,13 @@ Do you want to...
 
 - simply use the HTML Elements right away?
 - customize the core DNB brand style and behavior?
-- create a new global theme?
+- use the basis and create theme on top?
 - make changes to the overall `ui-lib`?
-- change texts and content of the Eufemia Design System Portal (website)?
+- change contents of the Eufemia Design System Portal (website)?
 
 ## So, how do I get started?
 
-You can follow a [Quick Intro](/uilib/intro), guiding You through all the elementary elements of Eufemia.
+You can [follow an intro](/uilib/intro), guiding You through all the elementary parts of Eufemia.
 
 And for sure, check out the code in the [**Demo Apps**](/uilib/getting-started/demos)
 

packages/dnb-design-system-portal/src/docs/uilib/getting-started/demos.md

@@ -2,7 +2,7 @@
 title: 'Demos'
 description: 'The purpose of having Eufemia Demos is that You as a developer can see the code and understand Eufemia and be inspired and give You a good start.'
 draft: false
-order: 2
+order: 3
 ---
 
 import { Button } from 'dnb-ui-lib/src'

packages/dnb-design-system-portal/src/docs/uilib/getting-started/maintainability.md

@@ -0,0 +1,13 @@
+---
+title: 'Maintainability'
+description: 'The hard part of a living design system, like Eufemia, is not to create black holes and choosing ways to make maintainability hard and complex.'
+draft: false
+status: 'wip'
+order: 2
+---
+
+# Maintainability
+
+The hard part of a living design system, like Eufemia, is not to create black holes and choosing ways to make maintainability hard and complex.
+
+To make this more understandable, we want to create a detailed explanation about the hard part of DNB UX vision of maintaining future changes to accessibility, includness in design, diversity of thinking, future component updates and fixes, alongside with brand changes.