From 8c141a1a62e106b2f3735f844f3ffec3ff4b921b Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 24 Jan 2019 21:38:26 +0100 Subject: [PATCH] feat: larger enhancement of how styles behave and are structured. Have a look at the CSS structure diagram. --- .../gatsby-browser.js | 1 + .../src/pages/uilib/typography.md | 8 +- .../uilib/typography/TypographyExamples.js | 2 +- .../pages/uilib/typography/font-weights.md | 25 +- ...e_diagram.svg => css_structure_diagram.js} | 227 +++++++++++--- .../usage/customisation/event-handling.md | 17 +- .../examples/properties-example.js | 2 +- .../uilib/usage/customisation/styling.md | 33 +- .../uilib/usage/customisation/theming.md | 2 +- .../first-steps/examples/react-examples.js | 18 -- .../pages/uilib/usage/first-steps/react.md | 68 ++--- .../uilib/usage/first-steps/the-basics.md | 14 +- .../src/shared/inlineTags/CodeBlock.js | 24 +- .../src/shared/inlineTags/ComponentBox.js | 6 +- .../src/shared/menu/SidebarMenu.js | 7 +- .../src/shared/menu/StickyMenuBar.js | 2 +- .../src/shared/parts/PortalStyle.js | 6 +- .../__snapshots__/Button.test.js.snap | 3 +- .../__snapshots__/Dropdown.test.js.snap | 3 +- .../__tests__/__snapshots__/Icon.test.js.snap | 3 +- .../src/components/icon/style/_icon.scss | 1 + .../__snapshots__/InputMasked.test.js.snap | 3 +- .../__snapshots__/Input.test.js.snap | 3 +- .../__snapshots__/Modal.test.js.snap | 3 +- .../src/style/components/imports.scss | 2 +- .../dnb-ui-lib/src/style/core/dnb-core.scss | 4 +- .../dnb-ui-lib/src/style/core/dnb-style.scss | 285 ------------------ .../core/{typography.scss => fonts.scss} | 0 .../src/style/{core => themes}/anchor.scss | 4 +- .../src/style/themes/dnb-style.scss | 190 ++++++++++++ .../style/themes/dnb-theme-open-banking.scss | 7 +- .../src/style/themes/dnb-theme-ui.scss | 105 ++++++- .../dnb-ui-lib/src/style/themes/imports.scss | 5 +- .../dnb-ui-lib/stories/componentExamples.js | 14 +- 34 files changed, 645 insertions(+), 452 deletions(-) rename packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/{css_structure_diagram.svg => css_structure_diagram.js} (65%) delete mode 100644 packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/examples/react-examples.js delete mode 100644 packages/dnb-ui-lib/src/style/core/dnb-style.scss rename packages/dnb-ui-lib/src/style/core/{typography.scss => fonts.scss} (100%) rename packages/dnb-ui-lib/src/style/{core => themes}/anchor.scss (98%) create mode 100644 packages/dnb-ui-lib/src/style/themes/dnb-style.scss diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js index eab2fc1b56b..7db7663910f 100644 --- a/packages/dnb-design-system-portal/gatsby-browser.js +++ b/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 diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography.md b/packages/dnb-design-system-portal/src/pages/uilib/typography.md index 8db321afde8..e046b872c20 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/typography.md +++ b/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.

+ +Or read more [about fonts in the Designer Guides](/quickguide-designer/fonts/). diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography/TypographyExamples.js b/packages/dnb-design-system-portal/src/pages/uilib/typography/TypographyExamples.js index f6f2ee3d6ad..a3dfbd5b06f 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/typography/TypographyExamples.js +++ b/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 }) => ( diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights.md b/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights.md index 9f1173d1941..e2991311e24 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights.md +++ b/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: -- Book -- Demi -- Medium +- Book (normal) +- Demi (500) +- Medium (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 diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.js similarity index 65% rename from packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg rename to packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.js index e26678f4f92..f4bcd852483 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.js @@ -1,45 +1,182 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +import React from 'react' + +export default props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) 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 3ca7586035c..d2177f21628 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 @@ -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,7 +15,7 @@ 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 @@ -21,13 +23,12 @@ Some of the most basic event handling in React. ### Stateless Component -```jsx -import { Button } from 'dnb-ui-lib' -const myHandler = event => {} -const MyComponent = () => ( - - ) -} 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 89d9e671623..6042c7281c9 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 @@ -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: `} -
-
- ## Extended example -```js -import { Button } from 'dnb-ui-lib' - -const MyComponent = props => ( - - ) -} -``` - -
- -
+ +) +`} + 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 aa25b7713a4..e4f8a9cfee4 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 @@ -4,7 +4,7 @@ draft: false order: 2 --- -import { Button } from 'dnb-ui-lib/src' +import ComponentBox from 'Tags/ComponentBox' @@ -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 + +{`