diff --git a/CHANGELOG.md b/CHANGELOG.md index 87bd5e9309e..1c9bbf21435 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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` diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 8d1dbd3a558..151af09b32e 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -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", @@ -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", @@ -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", @@ -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" }, diff --git a/packages/dnb-design-system-portal/src/docs/design-system/about.md b/packages/dnb-design-system-portal/src/docs/design-system/about.md index e5c8f85176d..f4288f19a82 100644 --- a/packages/dnb-design-system-portal/src/docs/design-system/about.md +++ b/packages/dnb-design-system-portal/src/docs/design-system/about.md @@ -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. - +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. + + + ## Special Thanks Thank You for all who as contributed to build Eufemia. People who has contributed heavily to Eufemia are: diff --git a/packages/dnb-design-system-portal/src/docs/icons.md b/packages/dnb-design-system-portal/src/docs/icons.md index 448724f8e6b..9c738c94d38 100644 --- a/packages/dnb-design-system-portal/src/docs/icons.md +++ b/packages/dnb-design-system-portal/src/docs/icons.md @@ -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; @@ -42,8 +41,8 @@ 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. @@ -51,13 +50,15 @@ The reason why there are two sizes, is mainly do to the SVG artifact, that the I 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; } ``` 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 33a084199fe..08823db0052 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,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 @@ -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 [ **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [dnb-ui-lib](/uilib/). diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v7-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v7-info.md index 8af99b124c7..f370cc63f00 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v7-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v7-info.md @@ -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 `

` before, use rather `

` and the same applies to `

`, so use the `modifier` prop here `

` 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; }` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion.md b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion.md index 3189b6fc6ac..2ec0ea879cd 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion.md @@ -7,4 +7,4 @@ order: 20 # Accordion -**Coming soon** +**Under development** diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.md index 866cbdd2788..d06f742602b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.md @@ -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. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md index d1488b88e65..ad957b0dff9 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md @@ -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. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md index 404282e0f74..9d6af3a8441 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md @@ -43,10 +43,11 @@ showTabs: true | `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`. | | `disable_autofocus` | _(optional)_ once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. | -| `enable_keyboard_nav` | _(optional)_ Enables easy keyboard navigation inside the calendar dates. **NB!** this feature suppresses Screen Reader navigation on NVDA since we then uses the arrow keys to navigate in the table of dates. Defaults to `false`. | | `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. | + + ## Shortcuts You may use [date-fns](https://date-fns.org) to make date calculations. 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 4977aa89df7..54193035c2a 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 @@ -36,6 +36,7 @@ const scrollableData = [ content: 'E' }, { + selected_key: 'key_1', selected_value: 'Find me by keypress', content: ['F', 'F', 'F', 'F'] }, @@ -49,8 +50,8 @@ const scrollableData = [ render( ) @@ -151,7 +152,8 @@ render( prevent_selection="true" align_dropdown="right" size="small" - title="Choose an item" + title={null} + aria-label="Choose an item" data={() => ['Go this this Link', 'Or press on me', <>Custom component]} right="small" /> @@ -164,7 +166,8 @@ render( Custom component]} on_change={({ value }) => { console.log('on_change', value) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md index 2903c1ace96..0cd5ffcfecf 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md @@ -22,7 +22,7 @@ When you need to provide a considerable amount of options to the user and do not ## Menu Button -The Dropdown component can easily be used as a so called **menu button** by setting the prop `prevent_selection="true"` (or `more_menu="true"` which shows then the [more](/icons/primary#icon-more) icon, appears as dots). +The Dropdown component can easily be used as a so called **menu button** by setting the prop `more_menu="true"` which shows then the [more](/icons/primary#icon-more) icon, appears as dots. You also could use `prevent_selection="true"` together with an empty title `title=""` and `aria-label="Choose an item"`. ## Custom size diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md index 4927c5d0261..e3ddb62b130 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md @@ -16,7 +16,8 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below | `icon_position` | _(optional)_ position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. | | `triangle_position` | _(optional)_ position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`. | | `size` | _(optional)_ define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. | -| `more_menu` | _(optional)_ same as `prevent_selection`, but the icon used is `more` (three dots). Defaults to `false`. | +| `prevent_selection` | _(optional)_ if set to `true`, no permanent selection will be made. Defaults to `false`. | +| `more_menu` | _(optional)_ same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. | | `align_dropdown` | _(optional)_ use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`. | | `skip_portal` | _(optional)_ set to `true` to disable the React Portal behavior. Defaults to `false`. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.md index 828b7c72962..32a50388986 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.md @@ -11,5 +11,6 @@ showTabs: true | `vertical` | _(optional)_ will force both `direction` and `label_diretion` to be **vertical** if set to `true`. | | `title` | _(optional)_ the `title` attribute of the label. | | `text` | _(optional)_ the `text` of the label. | +| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | | `element` | _(optional)_ defines the HTML element used. Defaults to `label`. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js index aa344a03618..85d6f143a34 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js @@ -85,9 +85,9 @@ class Example extends React.PureComponent { render( + Custom vertical legend: -

+ } vertical > @@ -166,7 +166,7 @@ const CustomRow = styled(FormRow)\` \` render( Legend } + label={ Legend } label_direction="vertical" > diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/provider.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/provider.md index eee5e1d6891..c1f3ab8afbe 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/provider.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/provider.md @@ -7,14 +7,14 @@ showTabs: true If You are using React, You can make use of a [Provider](/uilib/usage/customisation/provider) to support properties for all nested `FormRow`s, like: ```jsx -import Provider from `dnb-ui-lib/shared/Provider` +import Provider from 'dnb-ui-lib/shared/Provider' render( ... - Everything is vertical now - Everything is vertical now + Everything is vertical now + Everything is vertical now ... diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js index 86f4101034a..4f9d85ce68d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js @@ -14,10 +14,11 @@ class Example extends React.PureComponent { title="Use the `FormSet` as a Provider for `FormRow`" data-dnb-test="form-set-default" > - {/* @jsx */ ` + { + /* @jsx */ ` -

A h2 in a FormRow without a label

+

A semantic h2 in a FormRow without a label

 - `} + ` + } - {/* @jsx */ ` + { + /* @jsx */ ` - Custom Legend:}> + Custom Legend:}> - `} + ` + } - {/* @jsx */ ` + { + /* @jsx */ ` console.log('on_submit', event)} @@ -59,7 +64,8 @@ class Example extends React.PureComponent { + ))} + + + { + // update our choices + setChoiceData( + choiceData.filter( + (item) => item.selected_value !== data.selected_value + ) + ) + + // we could have used updateData + // updateData(newData) + + // only update selected data if they do not exists in the list + if ( + selectedData.findIndex( + ({ selected_value }) => + selected_value === data.selected_value + ) === -1 + ) { + setSelectedData([...selectedData, data]) + } + + // only to reset keyboard input values + setInputValue(null) + }} + /> + + ) +} diff --git a/packages/dnb-ui-lib/stories/components/Dropdown.js b/packages/dnb-ui-lib/stories/components/Dropdown.js index e8b0c97bd2d..faaddb53219 100644 --- a/packages/dnb-ui-lib/stories/components/Dropdown.js +++ b/packages/dnb-ui-lib/stories/components/Dropdown.js @@ -9,6 +9,7 @@ import { Wrapper, Box } from '../helpers' import styled from '@emotion/styled' import { + // Autocomplete, Dropdown, Button, FormLabel, @@ -44,6 +45,10 @@ const CustomWidth = styled.div` width: 8rem; } ` +const RightAligned = styled.div` + display: flex; + justify-content: space-between; +` const direction = 'auto' const label = 'Label' @@ -55,11 +60,34 @@ const DropdownStory = () => { const [value, setSelectedItem] = React.useState(0) return ( + + + + + + + + + @@ -81,8 +109,8 @@ const DropdownStory = () => { { /> { /> {JSON.stringify(state)} + 
+        Selected data:{' '}
+        {selectedData.map((item) => (
+          
+        ))}
+
+ + { + setChoiceData( + choiceData.filter( + (item) => item.selected_value !== data.selected_value + ) + ) + if ( + selectedData.findIndex( + ({ selected_value }) => + selected_value === data.selected_value + ) === -1 + ) { + setSelectedData([...selectedData, data]) + } + }} + /> + + ) +} diff --git a/packages/dnb-ui-lib/stories/components/FormStatus.js b/packages/dnb-ui-lib/stories/components/FormStatus.js index 4d39bcba69c..399e4cd7874 100644 --- a/packages/dnb-ui-lib/stories/components/FormStatus.js +++ b/packages/dnb-ui-lib/stories/components/FormStatus.js @@ -68,7 +68,10 @@ export default [ console.log('onSubmit', event) }} > - Legend:}> + Legend:} + > */} -

Heading #1

+

Heading #1

Heading #2 @@ -202,7 +202,7 @@ export default [ Heading #1 Heading #2 -

Heading #3

+

Heading #3

Heading #4 --- @@ -263,7 +263,7 @@ export default [ */} {/* -

Heading #1

+

Heading #1

Heading #2 diff --git a/packages/dnb-ui-lib/stories/components/Pagination.js b/packages/dnb-ui-lib/stories/components/Pagination.js index 933f5f31eff..9c37e3e1b79 100644 --- a/packages/dnb-ui-lib/stories/components/Pagination.js +++ b/packages/dnb-ui-lib/stories/components/Pagination.js @@ -43,10 +43,16 @@ export default [ {({ page, setContent }) => { - setContent(page, <>Hello {page}) + // simulate server communication delay + const timeout = setTimeout(() => { + setContent(page, {page}) + }, Math.ceil(Math.random() * 500)) + + return () => clearTimeout(timeout) }} + { + return ( + + + +
+ +
+
+ 12345678 + +
+ + + + ) + } +] + +const ChangeLocale = () => { + const { locale, setLocale, update } = React.useContext(Context) + console.log(locale) + + return ( + <> + { + setLocale(locale) + update({ locale }) + }} + > + + + + + { + setLocale(locale) + }} + /> + + ) +} diff --git a/packages/dnb-ui-lib/stories/components/Radio.js b/packages/dnb-ui-lib/stories/components/Radio.js index c0121f60506..005c3f4efac 100644 --- a/packages/dnb-ui-lib/stories/components/Radio.js +++ b/packages/dnb-ui-lib/stories/components/Radio.js @@ -36,7 +36,7 @@ export default [ // suffix="Suffix message" suffix={Modal content} /> - + @@ -174,7 +174,7 @@ export default [ - + diff --git a/packages/dnb-ui-lib/stories/components/Skeleton.js b/packages/dnb-ui-lib/stories/components/Skeleton.js new file mode 100644 index 00000000000..9b4556f43ee --- /dev/null +++ b/packages/dnb-ui-lib/stories/components/Skeleton.js @@ -0,0 +1,96 @@ +/** + * dnb-ui-lib Component Story + * + */ + +import React from 'react' +import { Wrapper, Box } from '../helpers' +import styled from '@emotion/styled' + +import { + Input, + // InputMasked, + // Modal, + // Button, + // FormSet, + FormRow, + Skeleton + // FormLabel +} from '../../src/components' +import { H1, P } from '../../src/elements' +import Provider from '../../src/shared/Provider' + +const CustomStyle = styled.div` + p { + background-color: rgba(213, 30, 149, 0.25); + } +` + +const WidthLimit = styled(FormRow)` + ${'' /* width: 10rem; */} +` + +export default [ + 'Skeleton', + () => { + // React.useEffect(() => { + // console.log('myRef', myRef.current) + // // console.log('myRef', Input, myRef.current) + // // myRef.current.focus() + // }) + + return ( + + + + + + + {/*
y
*/} +

H1

+

+ Paragraph Non habitasse ut nisi dictum laoreet + ridiculus dui varius per nullam vel consectetur + malesuada platea molestie semper consequat commodo urna +

+ + {/* x */} + + + + {/* +

Paragraph

+ */} + + + + + + + + + + ) + } +] diff --git a/packages/dnb-ui-lib/stories/components/Tabs.js b/packages/dnb-ui-lib/stories/components/Tabs.js index 4875d3cc41c..593e7169ecb 100644 --- a/packages/dnb-ui-lib/stories/components/Tabs.js +++ b/packages/dnb-ui-lib/stories/components/Tabs.js @@ -15,61 +15,127 @@ import TabsNavigation from './TabsNavigation' export default [ 'Tabs', - () => ( - - - - - - - - - {exampleTabsContent} - - - - - -

First

}, - second: { title: 'Second', content: () =>

Second

} - }} - /> - - - - -

First

- - Second as component} selected> -

Second

- - - - - { - return ( - - - I'm on the left side - - - - - ) - }} - > - {exampleTabsContent} - - - - ) + () => { + const [value, setValue] = React.useState('test') + + return ( + + + setValue(value)} + /> + + 
I am changing!: {value}
+ + + + <> + Change me 1: {value}{' '} + setValue(value)} + /> + + + + <> + Change me 2: {value}{' '} + setValue(value)} + /> + + + + + + + + + + + + + {{ + first: ( + <> + Change me 1: {value}{' '} + setValue(value)} + /> + + ), + second: () => ( + <> + Change me 2: {value}{' '} + setValue(value)} + /> + + ), + third: () => ( +

+ Eros semper blandit tellus mollis primis quisque platea + sollicitudin ipsum +

+ ), + fourth: () =>

Fourth

+ }} + + + + + + +

First

}, + second: { title: 'Second', content: () =>

Second

} + }} + /> + + + + +

First

+ + Second as component} selected> +

Second

+ + + + + { + return ( + + + I'm on the left side + + + + + ) + }} + > + {exampleTabsContent} + + + + ) + } ] const tablistDataWithContent = [ @@ -79,7 +145,7 @@ const tablistDataWithContent = [ const exampleTabsContent = { first: () =>

First

, - second: () => Focus me with next Tab key, + second: () => Value, third: () => (

Eros semper blandit tellus mollis primis quisque platea sollicitudin diff --git a/packages/dnb-ui-lib/stories/components/WebComponent.js b/packages/dnb-ui-lib/stories/components/WebComponent.js new file mode 100644 index 00000000000..f11a83aae13 --- /dev/null +++ b/packages/dnb-ui-lib/stories/components/WebComponent.js @@ -0,0 +1,130 @@ +/** + * dnb-ui-lib Component Story + * + */ + +import React from 'react' +import { Wrapper, Box } from '../helpers' +import '../../src/components/date-picker/web-component' +import '../../src/components/section/web-component' +import Button from '../../src/components/button/web-component' + +export default [ + 'WebComponent', + () => ( + + + + + + + ) +] + +const DatePicker = () => { + const [show, setShow] = React.useState(true) + const ref = React.useRef() + + React.useEffect(() => { + ref.current.addEvent('on_change', function (e) { + console.log('.date-picker.on_change', e) + // myDate.innerHTML = e.date; // uses the return_format + }) + ref.current.addEvent('on_hide', function (e) { + console.log('.date-picker.on_hide', e) + }) + + ref.current.setProps('start_date', '2019-05-17') + + ref.current.setProps('on_change', function (e) { + console.log('on_change', e) + }) + const what = ref.current.getRef() + console.log('what', what.props) + + myDatePicker = ref.current + }, []) + + return ( + <> + + + {show && ( + + + + )} + + ) +} + +const Buttons = () => { + // const myButton = React.useRef() + // React.useEffect(() => {}) + + return ( +

+ Set date + + + Update date + + + + Reset DatePicker + + + {/* dd.mm.yyyy */} +
+ ) +} + +let myDatePicker +function DataManager() {} +DataManager.prototype.setDate = function () { + // console.log('setDate', e) + // myDatePicker.setAttribute('start_date', '2019-05-17') + myDatePicker.setProps('start_date', '2019-05-17') +} +DataManager.prototype.updateDatePicker = function () { + // console.log('updateDatePicker', e) + // myDatePicker.setAttribute('start_date', '2019-05-18') + myDatePicker.setProps('start_date', '2019-05-18') +} +DataManager.prototype.resetDatePicker = function () { + // console.log('resetDatePicker', e) + // myDatePicker.setAttribute('start_date', '') + myDatePicker.setProps('start_date', null) + // myDate.innerHTML = "dd.mm.yyyy"; + + // const elem = document.querySelector('.dnb-form-label') + // return elem + // const elem = + // return elem +} +window.MyDataManager = new DataManager() diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js index a90d04b21d1..58ef3554044 100644 --- a/packages/dnb-ui-lib/stories/componentsStories.js +++ b/packages/dnb-ui-lib/stories/componentsStories.js @@ -33,12 +33,16 @@ import FormStatus from './components/FormStatus' import GlobalStatus from './components/GlobalStatus' import GlobalError from './components/GlobalError' import Number from './components/Number' +import Provider from './components/Provider' import Headings from './components/Headings' import Icons from './components/Icons' import Experiments from './components/Experiments' import Pagination from './components/Pagination' import PaginationTable from './components/PaginationTable' import PaginationTableMarker from './components/PaginationTableMarker' +import Skeleton from './components/Skeleton' +import WebComponent from './components/WebComponent' +import Accordion from './components/Accordion' import { Logo } from '../src/components' const stories = [] @@ -70,12 +74,16 @@ stories.push(FormStatus) stories.push(GlobalStatus) stories.push(GlobalError) stories.push(Number) +stories.push(Provider) stories.push(Headings) stories.push(Icons) stories.push(Experiments) stories.push(Pagination) stories.push(PaginationTable) stories.push(PaginationTableMarker) +stories.push(Skeleton) +stories.push(WebComponent) +stories.push(Accordion) stories.push([ 'Logo', diff --git a/packages/dnb-ui-lib/stories/elements/Table.js b/packages/dnb-ui-lib/stories/elements/Table.js index 28967c13fbe..cfaabd234b5 100644 --- a/packages/dnb-ui-lib/stories/elements/Table.js +++ b/packages/dnb-ui-lib/stories/elements/Table.js @@ -29,7 +29,16 @@ const CustomWrapper = styled(Wrapper)` export default [ 'Table', () => ( - + + +