diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/logos.md b/packages/dnb-design-system-portal/src/docs/quickguide-designer/logos.md index 405c695edfd..ba1af8fb8fc 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/logos.md +++ b/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).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md index c4827c6bae9..e098dbd8000 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md +++ b/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 [ **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_ + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.10-info.md index 7a7f6618f9f..77881383f3f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.10-info.md +++ b/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 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.18-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v4.18-info.md new file mode 100644 index 00000000000..f5e6b5c2539 --- /dev/null +++ b/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() +``` + +## Install + +To upgrade to v4.18 with NPM, use: + +```bash +$ npm i dnb-ui-lib@4.18 + +# 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_ diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/button-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/button/button-info.md index 0b18e71099b..fb4bada37fb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/button-info.md +++ b/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 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.js index 36d7572cfbe..d51cf8643ed 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.js @@ -56,14 +56,14 @@ const scrollableData = [ render( ) `} { 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) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-events.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-events.md index bf27c47aac6..c117a6fe1f8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-events.md +++ b/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. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-info.md index 5a2cce7c997..fcad9457333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-info.md @@ -26,7 +26,7 @@ _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 { @@ -34,14 +34,14 @@ Changing the **width** of the Dropdown component by CSS is easiest done by doing } ``` -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 */ } ``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-properties.md index 2dfe72e8e6e..f96f96bc095 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/dropdown-properties.md +++ b/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.
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.
**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. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/development/changes.md b/packages/dnb-design-system-portal/src/docs/uilib/development/changes.md index 71ca962a944..ab0430b725b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/development/changes.md +++ b/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. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/development/naming.md b/packages/dnb-design-system-portal/src/docs/uilib/development/naming.md index 520543466f4..65ef5111aab 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/development/naming.md +++ b/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 +