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/uilib/components/button.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md index 72c9ec94c5e..6b6fe3280b4 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 @@ -5,11 +5,36 @@ status: null order: 1 --- - +import Tabs from 'Tags/Tabs' +import ComponentBox from 'Tags/ComponentBox' +import Description from 'Pages/uilib/components/button/description' +import Details from 'Pages/uilib/components/button/details' +import Demos from 'Pages/uilib/components/button/Examples' -import ButtonPage from 'Src/uilib/components/demos/Button' +# Button - + + + +

Demos

+ + + +
+ + {` + + +) +`} + + +## 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 0a55e0fa105..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,16 +8,17 @@ 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 To ensure flexibility and the possibility of [theming](/uilib/usage/customisation/theming), the DNB CSS Styles area build in a bottom up manner. The styles are decoupled from the functional [components](/uilib/components). -There are several Packages You can use and consume. +There are several Packages You can use. -- **dnb-ui-core** - Includes the `core styles`. -- **dnb-ui-components** - Includes all the styles for the `components`. -- **dnb-theme-ui** - Includes both the `core theme` (_inkl. HTML elements_) and themes for every `component`. +- **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`. 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` @@ -27,9 +28,11 @@ The following Diagram gives an overall overview how the packages are structured. +You may have a look at the guides about [Typography](/uilib/typography). + ## Spacing -To ensure more flexibility, all the margins / spacings are reset to zero. But more often we have to have a by default defined `margin-bottom` for HTML Elements like a heading or a paragraph. +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. 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. @@ -43,51 +46,3 @@ Everything inside this container will then have a default spacing. This will be ``` The styles for the `.dnb-spacing` are included in the package: **dnb-theme-ui** - -## 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 -import 'dnb-ui-lib/components/button/style' -``` - -You may have a look at the guides about [Typography](/uilib/typography). 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 7144f4c8f75..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 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 297d3a857a3..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,9 +34,9 @@ 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 @@ -52,7 +52,7 @@ With [Node.js](https://nodejs.org/) as our JavaScript runtime in place, we may u // Define the imports import { Button } from 'dnb-ui-lib' -// In Your JSX +// And consume the Component in Your markup render method render(