Skip to content

Commit

Permalink
Merge pull request #569 from dnbexperience/rc/v7.2-beta
Browse files Browse the repository at this point in the history 
release of v7.2-beta.1
  • Loading branch information
@tujoworker
tujoworker authored Jul 1, 2020
2 parents 538144a + fa75d94 commit c29159f
Show file tree
Hide file tree
Showing 221 changed files with 7,345 additions and 2,901 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
## June, 18. 2020

New [Icons](/icons/secondary):

- secondary `bankid`
- secondary `bankid_on_mobile`
- secondary `bankid_with_qr`
- secondary `without_bankid`
- secondary `person`

## June, 4. 2020

- The [color](/quickguide-designer/colors) `Sea green alt` is removed and got replaced by `Sea green`
Expand Down
76 changes: 38 additions & 38 deletions packages/dnb-design-system-portal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,28 +49,28 @@
"prettier:package": "prettier-package-json --write ./package.json"
},
"dependencies": {
"algoliasearch": "^4.2.0",
"css-vars-ponyfill": "^2.3.1",
"algoliasearch": "^4.3.0",
"css-vars-ponyfill": "^2.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0",
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"@babel/core": "^7.10.0",
"@babel/node": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-export-default-from": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.10.0",
"@babel/core": "^7.10.4",
"@babel/node": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-export-default-from": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@emotion/styled-base": "^10.0.31",
"@mdx-js/mdx": "^1.6.4",
"@mdx-js/react": "^1.6.4",
"@mdx-js/mdx": "^1.6.6",
"@mdx-js/react": "^1.6.6",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
"babel-plugin-emotion": "^10.0.33",
Expand All @@ -80,7 +80,7 @@
"clean-html": "^1.5.0",
"cross-env": "^7.0.2",
"current-git-branch": "^1.1.0",
"cypress": "^4.7.0",
"cypress": "^4.9.0",
"date-fns": "^2.14.0",
"del": "^5.1.0",
"dotenv": "^8.2.0",
Expand All @@ -89,31 +89,31 @@
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
"eslint": "^5.16.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"front-matter": "^4.0.1",
"fs-extra": "^9.0.0",
"gatsby": "^2.22.11",
"gatsby-link": "^2.4.3",
"gatsby-plugin-algolia": "^0.11.0",
"gatsby-plugin-catch-links": "^2.3.3",
"gatsby-plugin-emotion": "^4.3.2",
"gatsby-plugin-manifest": "^2.4.9",
"gatsby-plugin-mdx": "^1.2.12",
"eslint-plugin-cypress": "^2.11.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.5",
"front-matter": "^4.0.2",
"fs-extra": "^9.0.1",
"gatsby": "^2.23.12",
"gatsby-link": "^2.4.8",
"gatsby-plugin-algolia": "^0.11.1",
"gatsby-plugin-catch-links": "^2.3.7",
"gatsby-plugin-emotion": "^4.3.6",
"gatsby-plugin-manifest": "^2.4.14",
"gatsby-plugin-mdx": "^1.2.19",
"gatsby-plugin-meta-redirect": "^1.1.1",
"gatsby-plugin-offline": "^3.2.7",
"gatsby-plugin-page-creator": "^2.3.7",
"gatsby-plugin-postcss": "^2.3.2",
"gatsby-plugin-react-helmet": "^3.3.2",
"gatsby-plugin-sass": "^2.3.2",
"gatsby-plugin-sharp": "^2.6.9",
"gatsby-react-router-scroll": "^3.0.1",
"gatsby-remark-images": "^3.3.8",
"gatsby-source-filesystem": "^2.3.8",
"gh-pages": "^2.2.0",
"gatsby-plugin-offline": "^3.2.13",
"gatsby-plugin-page-creator": "^2.3.12",
"gatsby-plugin-postcss": "^2.3.6",
"gatsby-plugin-react-helmet": "^3.3.6",
"gatsby-plugin-sass": "^2.3.7",
"gatsby-plugin-sharp": "^2.6.14",
"gatsby-react-router-scroll": "^3.0.7",
"gatsby-remark-images": "^3.3.14",
"gatsby-source-filesystem": "^2.3.14",
"gh-pages": "^3.1.0",
"github-slugger": "^1.3.0",
"jest": "^24.9.0",
"jest-emotion": "^10.0.32",
Expand All @@ -134,7 +134,7 @@
"react-live": "^2.2.2",
"react-markdown": "^4.3.1",
"start-server-and-test": "^1.11.0",
"stylelint": "^13.5.0",
"stylelint": "^13.6.1",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0"
},
Expand Down
15 changes: 12 additions & 3 deletions packages/dnb-design-system-portal/src/docs/design-system/about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,29 @@ import WelcomeAdvice from 'Pages/welcome-advice'

## The Goal

Eufemia is DNB Design System which consist of resources for designers and developers in order to maintain consistency and efficiency when building web applications.
Eufemia is [DNB's](https://www.dnb.no/) design system, which consist of resources for designers and developers in order to maintain consistency and efficiency when building accessible web applications.

The goal is to have a single source of truth for design through color, typography and layout guidelines as well as fully coded components to use in applications.

<WelcomeAdvice />
With Eufemia, DNB can continually increase the product quality for both visual users and users relying on assistive technologies.

### More aspects

- Accessibility
- Collaboration
- Master files
- Versioning
- Versioning / system thinking
- Patterns
- Overall documentation

### Standards

Eufemia follows the industry and regulatory standards [UU](uu.difi.no) (by Digitaliseringsdirektoratet) alongside with [WCAG 2.1](www.w3.org/TR/WCAG21/).

You can read more about what we at DNB UX expect and define as the minimal [accessibility requirements](/uilib/usage/accessibility) for our web applications.

<WelcomeAdvice />

## Special Thanks

Thank You for all who as contributed to build Eufemia. People who has contributed heavily to Eufemia are:
Expand Down
19 changes: 10 additions & 9 deletions packages/dnb-design-system-portal/src/docs/icons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,14 @@ The sources are located in the [assets folder](https://unpkg.com/dnb-ui-lib@late

They also exists as [React Components](/uilib/components/icon) to be easily integrated, without need of an additional SVG file loader.

## Color
## Icon color

The icons SVG format have to satisfy the requirement to colorize the CSS fill- and stoke colors by simply using the inherited color.
Eufemia SVG icons do simply inherit the used color. In case you don't can use the [Icon component](/uilib/components/icon), you have to handle colors by yourself.

This is taken care of by using the [DNB Icon Component](/uilib/components/icon)

**Example usage of CSS**
**Example color usage of CSS**

```css
color: var(--custom-color);
svg {
color: inherit;
fill: currentColor;
Expand All @@ -42,22 +41,24 @@ svg {

Eufemia icons come in **two** sizes:

- **Default Size** 16px with 1.5px stroke weight
- **Medium Size** 24px with 1.5px stroke weight
- **Default Size** 1.0rem with 1.5px stroke weight
- **Medium Size** 1.5rem with 1.5px stroke weight

The reason why there are two sizes, is mainly do to the SVG artifact, that the Icons, alongside with the strokes, will scale up, once we use them with a larger width and height.

### Scalability in web

To ensure that the relative size of the SVG icons are scalable by the inherited CSS font size, do not explicitly specify the SVG, unless for older browsers like Internet Explorer.

**Example usage of CSS**
**Example size definition by CSS**

```css
font-size: 1.5rem;
svg {
font-size: inherit;
width: 1em;
height: 1em;

font-size: inherit;
}
```

Expand Down
6 changes: 3 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 'Releases / Upgrade'
title: 'Releases and versions'
developers: 'Overview of all major releases and changes, including migration guides.'
redirect_from:
- /uilib/releases
Expand All @@ -9,9 +9,9 @@ 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
# Releases and versions

Here you find an Overview of all major releases and changes, including migration guides.
Here you find an overview of all major releases (versions) and changes, including migration guides.

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/).

Expand Down
1 change: 1 addition & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v7-info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ v7 contains a couple of _braking changes_. As a migration process, you can simpl
1. Find `dnb-h4` and replace it with `dnb-h--basis`
1. Find `dnb-h5` and replace it with `dnb-h--small`
1. Find `dnb-h6` and replace it with `dnb-h--x-small`
1. Find `prevent_selection` and replace it with `more_menu` (you may have to define a different icon as well)
1. If you used `style_type`, like `<H1 style_type="small">` before, use rather `<H1 size="x-large">` and the same applies to `<P style_type="small">`, so use the `modifier` prop here `<P modifier="small">`
1. **For UMD usage only** find `dnb-ui-lib.min.js` replace it with `dnb-ui-web-components.min.js`
1. The [Anchor (Text link)](/uilib/elements/anchor) has now also the defualt font-size of 18px (basis) - this means, you may have places where you would rather inherit the font-size by: `.dnb-anchor { font-size: inherit; }`
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/accordion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ order: 20

# Accordion

**Coming soon**
**Under development**
1 change: 1 addition & 0 deletions ...ages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ You can manipulate the used data dynamically, either by changing the `data` prop

- `updateData` replace all data entries.
- `emptyData` remove all data entries.
- `setInputValue` update the input value.
- `showIndicator` shows a progress indicator instead of the icon (inside the input).
- `hideIndicator` hides the progress indicator inside the input.
- `showIndicatorItem` shows an item with a [ProgressIndicator](/uilib/components/progress-indicator) status as an data option item.
Expand Down
35 changes: 18 additions & 17 deletions packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ showTabs: true

## Properties

| Properties | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) . |
| `text` or `children` | _(optional)_ the content of the button. `children` are treated as `text` as long as the typeof is a string. |
| `title` | _(optional)_ title of the button. Optional, but should always be included because of accessibility. |
| `variant` | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. |
| `size` | _(optional)_ the size of the button. For now there is **medium**, **default** and **large**. |
| `icon` | _(optional)_ to be included in the button. |
| `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Defaults to `right` if not set. |
| `icon_size` | _(optional)_ define icon width and height. Defaults to 16px |
| `class` | _(optional)_ any extra modifying class. |
| `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
| `wrap` | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. |
| `status` | _(optional)_ set it to either `status="error"` or a 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/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) . |
| `text` or `children` | _(optional)_ the content of the button. `children` are treated as `text` as long as the typeof is a string. |
| `title` | _(optional)_ title of the button. Optional, but should always be included because of accessibility. |
| `variant` | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. |
| `size` | _(optional)_ the size of the button. For now there is **medium**, **default** and **large**. |
| `icon` | _(optional)_ to be included in the button. |
| `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Defaults to `right` if not set. |
| `icon_size` | _(optional)_ define icon width and height. Defaults to 16px |
| `class` | _(optional)_ any extra modifying class. |
| `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
| `wrap` | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. |
| `bounding` | _(optional)_ set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case. |
| `status` | _(optional)_ set it to either `status="error"` or a 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/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
Loading

0 comments on commit c29159f

Please sign in to comment.