feat: larger enhancement of how styles behave and are structured. Hav…

…e a look at the CSS structure diagram.

packages/dnb-design-system-portal/gatsby-browser.js

@@ -7,6 +7,7 @@
 if (process.env.NODE_ENV === 'development') {
   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
   require('dnb-ui-lib/src/style/themes/ui') // import the default theme
 } else {
   // As the gatsby-plugin-postcss plugin dont processes the scss file in the package "dnb-ui-lib" - we have to use the preprocessed version

packages/dnb-design-system-portal/src/pages/uilib/typography.md

@@ -9,10 +9,10 @@ order: 4
 
 ## Font Face
 
-Our default font is `Fedra Sans Book`. This font, together with its siblings is loaded and imported with `@font-face` in `/css/core/typography.scss`. The font is included in the library package.
-To make sure we don't load all of the font faces at once, we apply the font weights and font styles by using its predefined font faces.
+The DNB default Font Family is `Fedra Sans Std`. This font, together with its weights is loaded and imported with `@font-face` in `/css/core/fonts.scss`. The font is included in the library package.
+To make sure You don't load all of the font faces at once, You apply a font `weights` to load the predefined font faces.
 
-Read more about [fonts at DNB](/quickguide-designer/fonts/)
+Read more how to use the [different weights](/uilib/typography/font-weights/).
 
 ### Headings
 
@@ -37,3 +37,5 @@ Read more about [fonts at DNB](/quickguide-designer/fonts/)
     written in 45 BC.
   </p>
 </div>
+
+Or read more [about fonts in the Designer Guides](/quickguide-designer/fonts/).

packages/dnb-design-system-portal/src/pages/uilib/typography/TypographyExamples.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
 
 const Wrapper = styled.div`
-  padding: 3rem 0 0;
+  margin-bottom: 3rem;
 `
 
 const FontUsageExample = ({ typo_class, font_family }) => (

packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights.md

@@ -10,9 +10,28 @@ import TypographyExamples from 'Pages/uilib/typography/TypographyExamples'
 
 ### For now we have 3 Font Weights:
 
-- <span class="dnb-typo-book">Book</span>
-- <span class="dnb-typo-demi">Demi</span>
-- <span class="dnb-typo-medium">Medium</span>
+- <span class="dnb-typo-book">Book</span> (normal)
+- <span class="dnb-typo-demi">Demi</span> (500)
+- <span class="dnb-typo-medium">Medium</span> (600)
+
+### How to use the Weights
+
+```css
+/* I am Book */
+p {
+  font-weight: normal;
+}
+
+/* I am Demi */
+p {
+  font-weight: var(--font-weight-demi); /* 500 */
+}
+
+/* I am Medium */
+p {
+  font-weight: var(--font-weight-medium); /* 600 */
+}
+```
 
 ## Examples
 

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/event-handling.md

@@ -4,6 +4,8 @@ draft: false
 order: 4
 ---
 
+import ComponentBox from 'Tags/ComponentBox'
+
 # Event Handling
 
 The [dnb-ui-lib](/uilib/) offers a couple of different ways to handling events:
@@ -13,21 +15,20 @@ The [dnb-ui-lib](/uilib/) offers a couple of different ways to handling events:
 
 Have a look at the following basic examples:
 
-The `dnb-ui-lib` uses _snake case_ (**snake_case**) to define the event name property (e.g. `on_click` or `on_change`).
+The `dnb-ui-lib` uses _snake case_ (**snake_case**) to define the event name property (e.g. `on_click` or `on_change`). Read more about the [naming conventions](uilib/development/naming).
 
 ## React
 
 Some of the most basic event handling in React.
 
 ### Stateless Component
 
-```jsx
-import { Button } from 'dnb-ui-lib'
-const myHandler = event => {}
-const MyComponent = () => (
-  <Button text="Declarative" on_click={myHandler} />
-)
-```
+<ComponentBox noInline={true}>
+{`
+const myHandler = () => alert('Hello')
+render(<Button text="Declarative" on_click={myHandler} />)
+`}
+</ComponentBox>
 
 ### Lifecycle Component
 

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/examples/properties-example.js

@@ -36,7 +36,7 @@ export default class MyClass extends PureComponent {
       <Fragment>
         {children}
         <dnb-form-label for_id="form-input">
-          Web Component Property updating
+          Web Component property updates
         </dnb-form-label>
         <dnb-input id="form-input" value={this.state.time} disabled />
       </Fragment>

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md

@@ -1,36 +1,51 @@
 ---
 title: 'Styling'
-status: 'imp'
 draft: false
 order: 1
 ---
 
 import Img from 'Tags/Img'
-import CSSDiagram from 'Pages/uilib/usage/customisation/assets/css_structure_diagram.svg'
+import { Icon } from 'dnb-ui-lib/src'
+import CSSDiagram from 'Pages/uilib/usage/customisation/assets/css_structure_diagram.js'
 
 # Styling
 
 The CSS is a compiled and minified version. You will find it here: `dnb-ui-lib/style/dnb-ui-lib.min.css`
 
-<Img caption="CSS Structure Diagram">{CSSDiagram}</Img>
+The following Diagram gives an overall overview how the styles are structured.
+
+<CSSDiagram />
 
 ## 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.
 
-<!-- prettier-ignore-start -->
 ```html
 <div class="dnb-style">
-  <!-- The styled Content -->
+  <!-- DNB spacings and sizing -->
+  <h1>e.g. I have now a margin and a size</h1>
+  <p>☝🏻 Me as well</p>
 </div>
 ```
-<!-- prettier-ignore-end -->
+
+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)
 
 ### The Reason
 
-The benefits of explicitly defining the style class `dnb-style`, is that we then can use the components on their own, without effecting all the existing styled browser 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 style to a certain area of our web application.
+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.
 
 ## For Node based environments
 
@@ -67,4 +82,4 @@ You also can import a single style of a single component:
 import 'dnb-ui-lib/components/button/style'
 ```
 
-You may have a look at the guides about [colors](/quickguide-designer/colors/) and [fonts](/quickguide-designer/fonts/#fonts-to-show-code).
+You may have a look at the guides about [Typography](/uilib/typography).

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/theming.md

@@ -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 '../core/dnb-style.scss';
+@import '../themes/dnb-style.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.

packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/react.md

@@ -6,7 +6,7 @@ order: 5
 
 import ComponentBox from 'Tags/ComponentBox'
 import { Button, IconPrimary } from 'dnb-ui-lib/src'
-import { ButtonEventExample } from 'Pages/uilib/usage/first-steps/examples/react-examples'
+import { hamburger as hamburgerIcon } from 'dnb-ui-lib/src/icons/secondary_icons'
 
 # React JS for the web
 
@@ -40,41 +40,39 @@ The most basic way to use the `dnb-ui-lib` is like this:
 `}
 </ComponentBox>
 
-<div className="example-box">
-  <Button variant="secondary" text="Secondary Button" icon="chevron_right_medium" size="large"  />
-  <Button icon="chevron_right" icon_size="medium" size="large" />
-</div>
-
 ## Extended example
 
-```js
-import { Button } from 'dnb-ui-lib'
-
-const MyComponent = props => (
-  <Button text="Custom Element" variant="tertiary" {...props} />
-)
-```
-
-## Event example
-
-```js
-import React from 'react'
-import { Button, Icon } from 'dnb-ui-lib'
-import { hamburger_medium as hamburgerIcon } from 'dnb-ui-lib/icons/secondary_icons_medium'
-
-const onClickHandler = event => {
-  console.log('onClickHandler', event)
-}
-
-export const MyComponent = () => {
-  return (
-    <Button on_click={onClickHandler}>
+<ComponentBox scope={{hamburgerIcon}} noInline={true}>
+{`
+// import { Button, Icon } from 'dnb-ui-lib'
+// import { hamburger as hamburgerIcon } from 'dnb-ui-lib/icons/secondary_icons'
+const Wrapper = styled.div\`
+  .dnb-button {
+    --button-width: 4rem;
+    --button-height: 4rem;
+    --button-border-radius: 2rem;
+    svg {
+      color: fuchsia;
+    }
+  }
+\`
+const myHandler = () => alert('Hello')
+render(
+  <Wrapper>
+    <Button
+      variant="secondary"
+      icon={hamburgerIcon}
+      size="default"
+      on_click={myHandler}
+    />
+    <Button
+      variant="secondary"
+      size="default"
+      on_click={myHandler}
+    >
       <Icon icon={hamburgerIcon} />
     </Button>
-  )
-}
-```
-
-<div className="example-box">
-  <ButtonEventExample />
-</div>
+  </Wrapper>
+)
+`}
+</ComponentBox>

packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md

@@ -4,7 +4,7 @@ draft: false
 order: 2
 ---
 
-import { Button } from 'dnb-ui-lib/src'
+import ComponentBox from 'Tags/ComponentBox'
 
 <!-- They don't rely on any global style-sheets such as **normalize.css** beside the main DNB Stylesheet. -->
 
@@ -42,19 +42,19 @@ Once You import the `dnb-ui-lib` style, You will not only get the HTML Element s
 
 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):
 
-```jsx
+<ComponentBox>
+{`
 <Button text="Primary Button" />
-```
-
-and get this: <Button text="Primary Button" />
+`}
+</ComponentBox>
 
-You also may [import the styles](/uilib/usage/styling) on a higher lever in Your application:
+You also may [import the styles](/uilib/usage/customisation/styling) on a higher lever in Your application:
 
 ```js
 import 'dnb-ui-lib/style'
 ```
 
-And finally bind an [event listener](/uilib/usage/event-handling):
+And finally bind an [event listener](/uilib/usage/customisation/event-handling):
 
 ```jsx
 <Button text="Button" on_click={myClickHandler} />

packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js

@@ -26,6 +26,10 @@ import dnbTheme from './themes/dnb-prism-theme'
 
 const prismStyle = css(dnbTheme)
 
+const Wrapper = styled.div`
+  margin-bottom: 3rem;
+`
+
 const CodeBlock = ({
   language,
   children: exampleCode,
@@ -39,7 +43,11 @@ const CodeBlock = ({
   }
 
   if (((props && props.scope) || isReactLive) && language === 'jsx') {
-    return <LiveCode code={exampleCode} {...props} />
+    return (
+      <Wrapper>
+        <LiveCode code={exampleCode} {...props} />
+      </Wrapper>
+    )
   } else {
     return (
       <Highlight
@@ -51,7 +59,7 @@ const CodeBlock = ({
         }} // reset styles, instead of using "prismTheme"
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div css={prismStyle}>
+          <Wrapper css={prismStyle}>
             <Pre className={className} css={style}>
               {cleanTokens(tokens).map((line, i) => (
                 /* eslint-disable react/jsx-key */
@@ -62,7 +70,7 @@ const CodeBlock = ({
                 </div>
               ))}
             </Pre>
-          </div>
+          </Wrapper>
         )}
       </Highlight>
     )
@@ -99,16 +107,24 @@ class LiveCode extends PureComponent {
   }
 
   render() {
-    const { code, caption, scope } = this.props
+    const { code, caption, scope, ...rest } = this.props
     const { hideCode, hidePreview } = this.state
 
+    const props = Object.entries(rest).reduce((acc, [key, value]) => {
+      if (!['hideCode', 'hidePreview'].includes(key)) {
+        acc[key] = value
+      }
+      return acc
+    }, {})
+
     return (
       <LiveCodeEditor>
         <LiveProvider
           mountStylesheet={false}
           css={prismStyle}
           code={typeof code === 'string' ? String(code).trim() : null}
           scope={scope}
+          {...props}
         >
           {!hidePreview && (
             <>