diff --git a/.circleci/config.yml b/.circleci/config.yml index 4824d0d0368..4bedb37226a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -35,7 +35,7 @@ jobs: deploy-preview: docker: - - image: circleci/node:10.6 + - image: circleci/node:latest-browsers working_directory: ~/repo steps: - checkout @@ -59,6 +59,10 @@ jobs: paths: - ~/.cache/yarn + - run: yarn audit-ci + - run: yarn lint-ci + - run: yarn test-ci + - run: name: Prepublish the ui-lib and commit changes command: yarn prepublish-ci @@ -67,9 +71,13 @@ jobs: name: Build the portal, just to test if the build is successful command: yarn build-ci + - run: + name: Run screenshot tests + command: test-ci-screenshots + deploy-release: docker: - - image: circleci/node:10.6 + - image: circleci/node:latest-browsers working_directory: ~/repo steps: - checkout @@ -93,6 +101,10 @@ jobs: paths: - ~/.cache/yarn + - run: yarn audit-ci + - run: yarn lint-ci + - run: yarn test-ci + - run: name: Prepublish the ui-lib to use it in "build-ci" command: yarn prepublish-ci @@ -101,6 +113,10 @@ jobs: name: Build the portal command: yarn build-ci + - run: + name: Run screenshot tests + command: test-ci-screenshots + - run: name: Deploy the portal command: yarn deploy-ci diff --git a/.drone.yml b/.drone.yml index be8d43ad2ee..b0cc6a360a4 100644 --- a/.drone.yml +++ b/.drone.yml @@ -26,7 +26,7 @@ steps: - rc/* - name: deploy-preview - image: node:10.6 + image: buildkite/puppeteer environment: FIGMA_MAIN_FILE: from_secret: FIGMA_MAIN_FILE @@ -42,10 +42,12 @@ steps: - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.13.0 - export PATH="$HOME/.yarn/bin:$PATH" - yarn install + - yarn audit-ci - yarn lint-ci - yarn test-ci - yarn prepublish-ci - yarn build-ci + - yarn test-ci-screenshots when: event: - push @@ -74,6 +76,7 @@ steps: - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.13.0 - export PATH="$HOME/.yarn/bin:$PATH" - yarn install + - yarn audit-ci - yarn lint-ci - yarn test-ci - yarn prepublish-ci diff --git a/.travis.yml b/.travis.yml index 590e4d876a3..a25c2239c90 100644 --- a/.travis.yml +++ b/.travis.yml @@ -31,11 +31,11 @@ jobs: - stage: deploy-preview name: Build a portal preview - script: yarn prepublish-ci && yarn build-ci + script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci && test-ci-screenshots - stage: deploy-release name: Deploy portal and make eventually NPM release - script: yarn prepublish-ci && yarn build-ci && yarn deploy-ci && yarn publish-ci + script: yarn audit-ci && yarn lint-ci && yarn test-ci && yarn prepublish-ci && yarn build-ci && test-ci-screenshots && yarn deploy-ci && yarn publish-ci stages: - name: test diff --git a/README.md b/README.md index 0117c605de1..61542e2fe55 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Find more information on how to use the Design System on the [Eufemia Portal](ht ## Requirements -Install [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com). +Install [Node.js](https://nodejs.org) and [yarn](https://yarnpkg.com). ## Setup Instructions diff --git a/package.json b/package.json index a8c6f87b6ec..f655d48373a 100644 --- a/package.json +++ b/package.json @@ -15,19 +15,20 @@ ], "main": "./packages/dnb-ui-lib/index.js", "scripts": { - "prepublish-ci": "cd ./packages/dnb-ui-lib && yarn prepublish-ci && cd -", - "precommit": "cd ./packages/dnb-ui-lib && yarn precommit && cd - && cd ./packages/dnb-design-system-portal && yarn precommit && cd -", - "build-ci": "cd ./packages/dnb-design-system-portal && yarn build-ci && cd -", - "deploy-ci": "cd ./packages/dnb-design-system-portal && yarn deploy-ci && cd -", - "start": "cd ./packages/dnb-design-system-portal && yarn start && cd -", - "lint-ci": "cd ./packages/dnb-ui-lib && yarn lint-ci && cd - && cd ./packages/dnb-design-system-portal && yarn lint-ci && cd -", - "publish-ci": "cd ./packages/dnb-ui-lib && yarn publish-ci && cd -", - "reset": "rm -rf ./node_modules && rm yarn.lock && rm -rf ./packages/dnb-ui-lib/node_modules && rm -rf ./packages/dnb-design-system-portal/node_modules && yarn install", - "build": "cd ./packages/dnb-ui-lib && yarn build && cd - && cd ./packages/dnb-design-system-portal && yarn build && cd -", - "test": "cd ./packages/dnb-ui-lib && yarn test && cd -", - "test:update": "cd ./packages/dnb-ui-lib && yarn test:update && cd -", - "test-ci": "cd ./packages/dnb-ui-lib && yarn test-ci && cd - && cd ./packages/dnb-design-system-portal && yarn test-ci && cd -", - "test-ci:update": "yarn test-ci --updateSnapshot" + "audit-ci": "yarn workspace dnb-ui-lib audit-ci", + "prepublish-ci": "yarn workspace dnb-ui-lib prepublish-ci", + "precommit": "yarn workspace dnb-ui-lib precommit && yarn workspace dnb-design-system-portal precommit", + "build-ci": "yarn workspace dnb-design-system-portal build-ci", + "deploy-ci": "yarn workspace dnb-design-system-portal deploy-ci", + "start": "yarn workspace dnb-design-system-portal start", + "lint-ci": "yarn workspace dnb-ui-lib lint-ci && yarn workspace dnb-design-system-portal lint-ci", + "publish-ci": "yarn workspace dnb-ui-lib publish-ci", + "reset": "rm -rf ./node_modules && rm -rf ./packages/dnb-ui-lib/node_modules && rm -rf ./packages/dnb-design-system-portal/node_modules && yarn install", + "build": "yarn workspace dnb-ui-lib build && yarn workspace dnb-design-system-portal build", + "test": "yarn workspace dnb-ui-lib test", + "test:update": "yarn workspace dnb-ui-lib test:update", + "test-ci": "yarn workspace dnb-ui-lib test-ci && yarn workspace dnb-design-system-portal test-ci", + "test-ci-screenshots": "yarn workspace dnb-ui-lib test-ci-screenshots" }, "devDependencies": { "husky": "^1.3.1" diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js index 3fb8dea9090..9861ed437e7 100644 --- a/packages/dnb-design-system-portal/gatsby-browser.js +++ b/packages/dnb-design-system-portal/gatsby-browser.js @@ -5,6 +5,7 @@ // Load dev styles (to use hot reloading, we do have to import the styles in here) if (process.env.NODE_ENV === 'development') { + require('dnb-ui-lib/src/style/core') // import the core styles require('dnb-ui-lib/src/style/patterns') // import ony patterns require('dnb-ui-lib/src/style/components') // import ony components // // require('dnb-ui-lib/src/style/themes/open-banking') // import the "open-banking" theme @@ -22,19 +23,10 @@ const { applyPageFocus } = require('dnb-ui-lib/src/shared/tools') exports.disableCorePrefetching = () => false exports.onRouteUpdate = ({ prevLocation }) => { - // if (typeof window !== 'undefined') { - // // -1 makes Safari scroll to the top on route changes - // window.scrollTo(0, -1) - // } // if previous location is not null // witch means that this was an page change/switch // then we apply the page content focus for accissibility if (prevLocation) { applyPageFocus('content') - } else { - applyPageFocus('sidebar') } } -// exports.shouldUpdateScroll = () => { -// return false -// } diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 9c5c539f770..92895077761 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -24,7 +24,7 @@ "lint-ci": "yarn lint:js && yarn lint:styles", "lint-staged": "lint-staged", "lint:js": "yarn lint --fix", - "lint:js:staged": "yarn lint:js", + "lint:js:staged": "eslint --quiet --fix", "lint:styles": "stylelint './src/**/*.{js,css}'", "lint:styles:staged": "stylelint", "make-ui-lib-pages": "babel-node ./scripts/uilib/makeDemosFactory.js && yarn prettier:components", @@ -34,7 +34,7 @@ "start": "rm -rf .cache | cross-env DEBUG=gatsby:query-watcher gatsby develop", "test": "jest --watch", "test-ci": "jest --ci", - "test:staged": "jest --bail --findRelatedTests :#keep this whitespace", + "test:staged": "jest --bail --findRelatedTests ", "test:update": "jest --updateSnapshot", "prettier:components": "prettier --loglevel warn --write './src/uilib/{components,patterns}/**/*.{js,md}' './src/pages/uilib/{components,elements,patterns}/*.{js,md}'", "prettier:diff": "prettier --list-different '{scripts,stories,src}/**/*.{js,md}'", @@ -55,13 +55,13 @@ "@babel/node": "^7.2.2", "@babel/plugin-proposal-class-properties": "^7.3.0", "@babel/plugin-proposal-export-default-from": "^7.2.0", - "@babel/plugin-proposal-object-rest-spread": "^7.3.1", + "@babel/plugin-proposal-object-rest-spread": "^7.3.2", "@babel/plugin-syntax-jsx": "^7.2.0", "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "0.16.8", "@mdx-js/tag": "0.16.8", - "babel-plugin-emotion": "^10.0.6", + "babel-plugin-emotion": "^10.0.7", "camelcase": "^5.0.0", "ci-info": "^2.0.0", "classnames": "^2.2.6", @@ -69,42 +69,42 @@ "color": "^3.1.0", "cross-env": "^5.2.0", "del": "^3.0.0", - "emotion": "^10.0.6", + "emotion": "^10.0.7", "enzyme": "^3.8.0", - "enzyme-adapter-react-16": "^1.8.0", + "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.3.5", - "eslint": "^5.12.1", - "eslint-plugin-import": "^2.15.0", - "eslint-plugin-jsx-a11y": "^6.2.0", + "eslint": "^5.13.0", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.12.4", "front-matter": "^3.0.1", "fs-extra": "^7.0.1", - "gatsby": "^2.0.103", - "gatsby-link": "^2.0.9", + "gatsby": "^2.0.115", + "gatsby-link": "^2.0.10", "gatsby-mdx": "^0.3.5", - "gatsby-plugin-catch-links": "^2.0.9", - "gatsby-plugin-emotion": "^4.0.1", - "gatsby-plugin-manifest": "^2.0.14", + "gatsby-plugin-catch-links": "^2.0.10", + "gatsby-plugin-emotion": "^4.0.3", + "gatsby-plugin-manifest": "^2.0.17", "gatsby-plugin-offline": "^2.0.22", - "gatsby-plugin-postcss": "^2.0.3", - "gatsby-plugin-react-helmet": "^3.0.5", - "gatsby-plugin-sass": "^2.0.8", - "gatsby-plugin-sharp": "^2.0.18", - "gatsby-remark-images": "^3.0.1", - "gatsby-source-filesystem": "^2.0.18", + "gatsby-plugin-postcss": "^2.0.5", + "gatsby-plugin-react-helmet": "^3.0.6", + "gatsby-plugin-sass": "^2.0.10", + "gatsby-plugin-sharp": "^2.0.20", + "gatsby-remark-images": "^3.0.3", + "gatsby-source-filesystem": "^2.0.20", "gh-pages": "^2.0.1", - "jest": "^23.6.0", + "jest": "^24.1.0", "jest-css-modules": "^1.1.0", - "jest-emotion": "^10.0.6", + "jest-emotion": "^10.0.7", "jest-raw-loader": "^1.0.1", "keycode": "^2.2.0", - "lint-staged": "^8.1.1", + "lint-staged": "^8.1.3", "live-server": "^1.2.1", "mime": "^2.4.0", "nodemon": "^1.18.9", "ora": "^3.0.0", "postcss-preset-env": "^6.5.0", - "prettier": "^1.16.1", + "prettier": "^1.16.4", "prettier-package-json": "^2.0.1", "pretty": "^2.0.0", "prism-react-renderer": "^0.1.5", @@ -112,7 +112,7 @@ "react-fake-props": "^0.3.1", "react-helmet": "^5.2.0", "react-live": "^1.12.0", - "react-live-replacement": "https://github.com/tujoworker/react-live/", + "react-live-replacement": "https://github.com/tujoworker/react-live/tarball/d9a44a8b8093a3cb57734d901200f7b66cd30515", "stylelint": "^9.10.1", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.5.2" diff --git a/packages/dnb-design-system-portal/scripts/commitPages.js b/packages/dnb-design-system-portal/scripts/commitPages.js index 8fd5ffa1e98..d40188a3925 100644 --- a/packages/dnb-design-system-portal/scripts/commitPages.js +++ b/packages/dnb-design-system-portal/scripts/commitPages.js @@ -3,7 +3,7 @@ * */ -import { commitToBranch } from '../../dnb-ui-lib/scripts/tools/commitToBranch' +import { commitToBranch } from '../../dnb-ui-lib/scripts/prepub/commitToBranch' if (require.main === module) { commitToBranch({ diff --git a/packages/dnb-design-system-portal/src/core/jest/jestSetup.js b/packages/dnb-design-system-portal/src/core/jest/jestSetup.js index 6908dc010c6..8613e2322c9 100644 --- a/packages/dnb-design-system-portal/src/core/jest/jestSetup.js +++ b/packages/dnb-design-system-portal/src/core/jest/jestSetup.js @@ -3,7 +3,6 @@ * */ -import * as emotion from 'emotion' import { createSerializer } from 'jest-emotion' import fakeProps from 'react-fake-props' import { mount, render, shallow } from './enzyme' @@ -16,7 +15,7 @@ export { toJson } export { providerProps } expect.addSnapshotSerializer( - createSerializer(emotion, { + createSerializer({ classNameReplacer(className, index) { return `jest-class-name-${index}` } diff --git a/packages/dnb-design-system-portal/src/pages/404.js b/packages/dnb-design-system-portal/src/pages/404.js index dc96fcb938c..074dd746ef2 100644 --- a/packages/dnb-design-system-portal/src/pages/404.js +++ b/packages/dnb-design-system-portal/src/pages/404.js @@ -15,7 +15,7 @@ export default class PageNotFound extends PureComponent { const { pathname } = this.props.location return ( -
+

404

We couldn't find that page:

diff --git a/packages/dnb-design-system-portal/src/pages/design-system/about.md b/packages/dnb-design-system-portal/src/pages/design-system/about.md index b2bbc1054fd..cfa2223919a 100644 --- a/packages/dnb-design-system-portal/src/pages/design-system/about.md +++ b/packages/dnb-design-system-portal/src/pages/design-system/about.md @@ -29,12 +29,16 @@ The goal is to have a single source of truth for design through color, typograph Thank You for all who as contributed to build Eufemia. People who has contributed heavily to Eufemia are: -- Jens Thuland -- Sindre Marken -- Casper Brekke -- Tobias Høegh -- Kevin Murphy +- [Jens Thuland](https://dnb.enterprise.slack.com/user/@WE4QCR6PQ) +- [Sindre Marken](https://dnb.enterprise.slack.com/user/@WDUUEJNVC) +- [Casper Brekke](https://dnb.enterprise.slack.com/user/@WDU4VCEP5) +- [Tobias Høegh](https://dnb.enterprise.slack.com/user/@WE2M4E65N) +- [Kevin Murphy](https://dnb.enterprise.slack.com/user/@WE38HLQQ4) - Hans Kristian Smedsrød -- Nicolai Rygh -The DNB ASA Design System is build together with [EGGS Design](https://eggsdesign.com/). +The DNB ASA Design System (Eufemia) is build together with [EGGS Design](https://eggsdesign.com/). + +## More People to thank + +- [Nicolai Rygh](https://dnb.enterprise.slack.com/user/@WDY36GXKM) +- diff --git a/packages/dnb-design-system-portal/src/pages/icons/secondary.md b/packages/dnb-design-system-portal/src/pages/icons/secondary.md index a6b02dafd11..72e15a6e40d 100644 --- a/packages/dnb-design-system-portal/src/pages/icons/secondary.md +++ b/packages/dnb-design-system-portal/src/pages/icons/secondary.md @@ -13,7 +13,7 @@ The Secondary Icons are an addition to the [Primary Icons](/icons/primary). They The Secondary Icons can be extended infinitely. -**Technically:** The consequence is that they have to be [imported](/uilib/components/icon#info) where ever they have to be used. +**Technically:** The consequence is that they have to be [imported](/uilib/components/icon) where ever they have to be used. #### A list of all Secondary Icons diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md b/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md index 6c61fad6695..958505e18cd 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md @@ -2,7 +2,7 @@ title: 'Accordion' draft: false status: 'wip' -# order: 1 +order: 1 --- import Tabs from 'Tags/Tabs' diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md index 72c9ec94c5e..a24298cf625 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md @@ -1,15 +1,25 @@ --- title: 'Button' draft: false -status: null -order: 1 +order: 2 --- - +import Tabs from 'Tags/Tabs' -import ButtonPage from 'Src/uilib/components/demos/Button' +import FirstTabContent from 'Pages/uilib/components/button/button-info' +import SecondTabContent from 'Pages/uilib/components/button/button-properties' +import ThirdTabContent from 'Pages/uilib/components/button/button-events' - +# Button + + + + + + + + + + + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js new file mode 100644 index 00000000000..54043590878 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js @@ -0,0 +1,155 @@ +/** + * UI lib Component Example + * + */ + +import React, { PureComponent, Fragment } from 'react' +import ComponentBox from '../../../../shared/inlineTags/ComponentBox' +import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons' + +class Example extends PureComponent { + clickHandler = () => { + alert('You clicked a button with a click function attached to it') + } + render() { + return ( + + + {/* @jsx */ ` + + +) +`} + + +## Web Components and properties + +> What if a property has to change at runtime? Changing a property (`props`) at runtime is a common thing in React. But also `dnb-ui-lib` Web Components support `prop` changes. Keep in mind that not all components are tested to the last detail. So, if you come over some special use cases, please contribute back and make a pull request. - + +{` +const Component = () => { + const time = new Date().toLocaleTimeString() + render( + <> + + Web Component property updates + + + + ) +} +Component() +clearInterval(window.intervalId) +window.intervalId = setInterval(Component, 1e3) +`} + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/consume-styles.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/consume-styles.md new file mode 100644 index 00000000000..55ab98d1b16 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/consume-styles.md @@ -0,0 +1,57 @@ +--- +title: 'Importing CSS' +draft: false +order: 2 +--- + +import Img from 'Tags/Img' +import { Icon } from 'dnb-ui-lib/src' +import CSSDiagram from 'Pages/uilib/usage/customisation/assets/css_structure_diagram.js' + +# Importing the CSS + +To include the packages `dnb-ui-core`, `dnb-ui-components` and `dnb-theme-ui` in a [Node.js](https://nodejs.org) based environment (given You have a CSS loader in place), do this: + +```js +// This includes the "dnb-ui-core", "dnb-ui-components" and "dnb-theme-ui" +import 'dnb-ui-lib/style' +``` + +### No Theme + +If You want to import the styles of all components only - without **dnb-theme-ui**: + +```js +// No Theme is included +import 'dnb-ui-lib/style/components' +``` + +### Custom Theme + +You may want to import a theme as well: + +```js +// No Theme is included +import 'dnb-ui-lib/style/components' + +// Default DNB UI Theme +import 'dnb-ui-lib/style/theme' +``` + +```js +// ... is equivalent to the default theme +import 'dnb-ui-lib/style/themes/ui' + +// ... or some other theme +import 'dnb-ui-lib/style/themes/[NAME].css' +``` + +### Single Component only + +You also can import a single style of a single component: + +```js +// Imports only the Button CSS and Main DNB Theme +import 'dnb-ui-lib/components/button/style' +import 'dnb-ui-lib/components/button/style/themes/ui' +``` diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/event-handling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/event-handling.md index d2177f21628..41b924e9401 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/event-handling.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/event-handling.md @@ -1,7 +1,7 @@ --- title: 'Event Handling' draft: false -order: 4 +order: 7 --- import ComponentBox from 'Tags/ComponentBox' diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/examples/properties-example.js b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/examples/properties-example.js deleted file mode 100644 index 34503526171..00000000000 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/examples/properties-example.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Example - * - */ - -import React, { PureComponent, Fragment } from 'react' -import PropTypes from 'prop-types' - -export default class MyClass extends PureComponent { - static propTypes = { - children: PropTypes.node - } - static defaultProps = { - children: null - } - constructor(props) { - super(props) - this.state = { time: this.getTime() } - } - getTime() { - return new Date().toLocaleTimeString() - } - setTime() { - this.setState({ time: this.getTime() }) - } - componentDidMount() { - this.setTime() - this.myInterval = setInterval(() => this.setTime(), 1e3) - } - componentWillUnmount() { - clearInterval(this.myInterval) - } - render() { - const { children } = this.props - return ( - - {children} - - Web Component property updates - - - - ) - } -} diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md index dc41dfa67db..5a4a5c1ea42 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md @@ -1,5 +1,5 @@ --- -title: 'Styling' +title: 'CSS Styles' draft: false order: 1 --- @@ -8,78 +8,41 @@ import Img from 'Tags/Img' import { Icon } from 'dnb-ui-lib/src' import CSSDiagram from 'Pages/uilib/usage/customisation/assets/css_structure_diagram.js' -# Styling +# CSS Styles -The CSS is a compiled and minified version. You will find it here: `dnb-ui-lib/style/dnb-ui-lib.min.css` +To ensure flexibility and the possibility of [theming](/uilib/usage/customisation/theming), the DNB CSS Styles area build in a bottom up manner. -The following Diagram gives an overall overview how the styles are structured. +The styles are decoupled from the functional [components](/uilib/components). +There are several Packages You can use. - - -## Apply the DNB Style - -To use the default DNB style, you have to define a CSS class called: `dnb-style` -You can set this class on the document body or on any content container. - -```html -
- -

e.g. I have now a margin and a size

-

☝🏻 Me as well

-
-``` - -The styles for the `dnb-style` are included in the default UI Theme. - -`dnb-ui-lib/style/themes/dnb-ui-theme.min.css` - -### What does `.dnb-style` apply? - -Once You have to style HTML Elements like: - -- Headings -- Paragraphs -- Basic Tables -- Lists (ordered and unordered) +- **dnb-ui-core** - Includes the `DNB Main Style`. +- **dnb-ui-components** - Includes all the styles for the [components](/uilib/components). +- **dnb-ui-patterns** - Includes all the styles for the [patterns](/uilib/patterns). +- **dnb-theme-ui** - Includes both the `DNB Main Theme` (_inkl. HTML elements_) and themes for every `component`. -### The Reason +All the CSS packages are ready to use, minified CSS files. You will find the main style here, like: `dnb-ui-lib/style/dnb-ui-core.min.css` -The benefits of explicitly defining the style class `.dnb-style`, is that we then can use our [components](/uilib/components) on their own, without effecting all the existing styled HTML Elements and tags. This gives use a kind of backwards compatibility. -But it makes it also more flexible, like if we only want to apply our DNB HTML Elements Styles to a certain area of our web application. +Additionally, it is also possible to import a style and theme for every single component separately. You find the styles here, like: `dnb-ui-lib/components/[button]/style/dnb-button.min.css` -## For Node based environments +The following Diagram gives an overall overview how the packages are structured. -To include the `dnb-ui-lib` styles (except patterns), do this: - -```js -// This also includes the default DNB UI Theme -import 'dnb-ui-lib/style' -``` - -If You want to import the styles of all components - **without** the default DNB UI Theme: - -```js -// No Theme is included -import 'dnb-ui-lib/style/components' -``` - -You may want to import a theme as well: + -```js -// Default DNB UI Theme -import 'dnb-ui-lib/style/theme' +You may have a look at the guides about [Typography](/uilib/typography). -// ... is equivalent to the default theme -import 'dnb-ui-lib/style/themes/ui' +## Spacing -// ... or some other theme -import 'dnb-ui-lib/style/themes/[NAME].css' -``` +To ensure more flexibility, all the margins / spacings are reset to zero. But more often we have to have a by default defined e.g. `margins` on HTML Elements like headings or paragraphs. -You also can import a single style of a single component: +To use the default DNB spacings, You can define a CSS class called: `.dnb-spacing` +Everything inside this container will then have a default spacing. This will be specially helpful for article alike pages. -```js -import 'dnb-ui-lib/components/button/style' +```html +
+ +

e.g. I have now a margin

+

☝🏻 Me as well

+
``` -You may have a look at the guides about [Typography](/uilib/typography). +The styles for the `.dnb-spacing` are included in the package: **dnb-theme-ui** diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/theming.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/theming.md index 3257ac57acc..325e5a0d20d 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/theming.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/theming.md @@ -1,12 +1,12 @@ --- title: 'Theming' draft: false -order: 2 +order: 5 --- # Theming -Read the [Styling examples](/uilib/usage/styling) on how to include styles and a theme. +Read the [Styling examples](/uilib/usage/customisation/styling) on how to include styles and a theme. This section is about how theming works and how to actually create a custom theme. ## How Themes are built @@ -22,7 +22,7 @@ We have the **Main Theming File**, which is located here: `dnb-ui-lib/src/style/ From here, we "can" reuse some default theming mechanism, just to have a fallback: ```scss -@import '../themes/dnb-style.scss'; +@import '../themes/dnb-spacing.scss'; ``` All the additional sub theming files (for every component) are automatically added to the **Main Theming File** by running `$ yarn build`. More on that further down. diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md index 6042c7281c9..0847fc3dea9 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md @@ -12,7 +12,7 @@ import { hamburger as hamburgerIcon } from 'dnb-ui-lib/src/icons/secondary_icons The most basic way to use the `dnb-ui-lib` is like this: -### Basic Buttons +## Basic Buttons {` @@ -20,59 +20,19 @@ The most basic way to use the `dnb-ui-lib` is like this: `} -### Large Buttons & Icons +### Importing the Components - -{` -<> - - -) -`} - +And here an example with several imports: + +```js +import { Button, Icon } from 'dnb-ui-lib' +import { hamburger as hamburgerIcon } from 'dnb-ui-lib/icons/secondary_icons' +``` + +You may have a look at a [Example for React on GitHub](https://github.com/dnbexperience/eufemia/tree/develop/packages/examples/example-react). diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md index e4f8a9cfee4..ee353ba55de 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md @@ -34,26 +34,43 @@ All the HTML elements have individual interaction states. The look and feel is d - focus - disabled -## Global Scope +## CSS Styles -Once You import the `dnb-ui-lib` style, You will not only get the HTML Element styles, but also for lower lever tags like [Headings and Paragraphs](/uilib/typography) and support for [Focus Management](/uilib/usage/accessibility/focus). +Have a read on [how the styles are setup](/uilib/usage/customisation/styling) and [how to import the CSS](/uilib/usage/customisation/consume-styles). ## Compiler With [Node.js](https://nodejs.org/) as our JavaScript runtime in place, we may use ES6 (ECMAScript 2015) to write our application. There are many frameworks and libraries to build user interfaces. If we take [React JSX](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) as an starting point, we basically [do this](/uilib/usage/first-steps/react): - + {` diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js index 5a01d598004..82c4179983c 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js @@ -3,41 +3,32 @@ * */ -import { setPageFocusElement } from 'dnb-ui-lib/src/shared/tools' import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' import { Link } from 'gatsby' +import classnames from 'classnames' +import styled from '@emotion/styled' +import { css, Global } from '@emotion/core' -import PropTypes from 'prop-types' import MainMenu from '../menu/MainMenu' import Sidebar from '../menu/SidebarMenu' import StickyMenuBar from '../menu/StickyMenuBar' import { markdownStyle } from './Markdown' -import styled from '@emotion/styled' -import classnames from 'classnames' import { buildVersion } from '../../../package.json' -import { - MainMenuProvider, - MainMenuConsumer -} from '../menu/MainMenuContext' +import { MainMenuProvider } from '../menu/MainMenuContext' import { SidebarMenuProvider } from '../menu/SidebarMenuContext' -// import ToggleGrid from '../menu/ToggleGrid' +import { setPageFocusElement } from 'dnb-ui-lib/src/shared/tools' +import { Logo } from 'dnb-ui-lib/src' class Layout extends PureComponent { static propTypes = { children: PropTypes.node.isRequired, location: PropTypes.object.isRequired } - - constructor(props) { - super(props) - this._ref = React.createRef() - } - componentDidMount() { // gets aplyed on "onRouteUpdate" - setPageFocusElement(this._ref.current, 'content') + setPageFocusElement('.dnb-app-content h1:nth-of-type(1)', 'content') } - render() { const { children, location } = this.props @@ -46,14 +37,8 @@ class Layout extends PureComponent {
{/* Load the StickyMenuBar to make use of the grid demo */} - - - {children} - + +
{children}
@@ -63,25 +48,21 @@ class Layout extends PureComponent { return ( + + + Skip to content + - - {({ isOpen, isClosing }) => - (!isOpen || isClosing) && ( - <> - - - - - - {children} -