diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js index 2c9a2d7a27d..465a23132e5 100644 --- a/packages/dnb-design-system-portal/gatsby-browser.js +++ b/packages/dnb-design-system-portal/gatsby-browser.js @@ -10,7 +10,9 @@ if (process.env.NODE_ENV === 'development') { } 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 // import both all components, patterns and the default theme - require('dnb-ui-lib/style/lib-IE11') + // require('dnb-ui-lib/style/lib-IE11') + require('dnb-ui-lib/style/patterns') // import ony patterns + require('dnb-ui-lib/style') // import both all components and the default theme } exports.disableCorePrefetching = () => false diff --git a/packages/dnb-design-system-portal/gatsby-config.js b/packages/dnb-design-system-portal/gatsby-config.js index 6c1b6cf742a..01013f98660 100644 --- a/packages/dnb-design-system-portal/gatsby-config.js +++ b/packages/dnb-design-system-portal/gatsby-config.js @@ -75,7 +75,6 @@ module.exports = { }, 'gatsby-plugin-sass', 'gatsby-plugin-emotion', - // 'gatsby-plugin-postcss', { resolve: 'gatsby-plugin-postcss', options: { diff --git a/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js b/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js index 4d4a59244d6..3261c551306 100644 --- a/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js +++ b/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js @@ -27,7 +27,7 @@ module.exports = ({ IE11 = false, ...options } = {}) => { border-radius: calc(2.5rem / 2); border-radius: var(--button-border-radius); */ - preserve: false, + preserve: true, warnWhenCannotResolve: false }) : null diff --git a/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js b/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js index 43de9e53b19..beead7a4821 100644 --- a/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js +++ b/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js @@ -24,9 +24,6 @@ export default async () => { await runFactory('./src/style/**/dnb-ui-components.scss') await runFactory('./src/style/**/dnb-ui-patterns.scss') await runFactory('./src/style/**/dnb-ui-lib.scss') - await runFactory('./src/style/**/dnb-ui-lib-IE11.scss', { - IE11: true - }) log.succeed( '> PrePublish: "makeMainStyle" transforming style modules done' ) @@ -67,7 +64,7 @@ const transformStyleModules = () => export const runFactory = ( src, - { IE11 = false, returnResult = false, importOnce = true } = {} + { returnResult = false, importOnce = true } = {} ) => new Promise((resolve, reject) => { log.start('> PrePublish: transforming main style') @@ -84,7 +81,7 @@ export const runFactory = ( }) .pipe(stream) .pipe(transform('utf8', transformMainStyleContent)) - .pipe(postcss(postcssConfig({ IE11 }))) + .pipe(postcss(postcssConfig({ IE11: true }))) .pipe(cloneSink) .pipe(cssnano()) .pipe(rename({ suffix: '.min' })) diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap index 38e223148f0..4818a043c6b 100644 --- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -331,15 +331,15 @@ exports[`Button scss have to match snapshot 1`] = ` --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } .dnb-button { @@ -370,16 +370,16 @@ exports[`Button scss have to match snapshot 1`] = ` color: inherit; background-color: inherit; transform: translateY(var(--button-border-width)); } - .dnb-button--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--has-text.dnb-button--size-medium { + .dnb-button--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } + .dnb-button--has-text.dnb-button--size-small { padding-left: 1em; padding-right: 1em; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { padding-left: 0.5em; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { padding-right: 0.5em; } .dnb-button--size-large { width: var(--button-width--large); diff --git a/packages/dnb-ui-lib/src/components/button/details.md b/packages/dnb-ui-lib/src/components/button/details.md index 4cd05ecc22c..0477c1cee36 100644 --- a/packages/dnb-ui-lib/src/components/button/details.md +++ b/packages/dnb-ui-lib/src/components/button/details.md @@ -4,7 +4,7 @@ | `text` | _(optional)_ the content of the button. | | `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** and **large** beside **default**. | +| `size` | _(optional)_ the size of the button. For now there is **small**, **default** and **large**. | | `icon` | _(optional)_ name of icon 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 | diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss index 26009750a3c..ecae742ac43 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss @@ -12,12 +12,6 @@ background-color: $background-color; border-color: $background-color; - // @if $border-color { - // border-color: $border-color; - // } @else { - // border-color: $background-color; - // } - @include fakeBorder( null, 0 0 0 var(--button-border-width--hover) $background-color diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss index 5433ed7b2aa..a726e89c431 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss @@ -10,15 +10,15 @@ --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } @@ -60,20 +60,20 @@ transform: translateY(var(--button-border-width)); } - // size medium - &--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); + // size small + &--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } - &--has-text#{&}--size-medium { + &--has-text#{&}--size-small { padding-left: 1em; padding-right: 1em; } - &--has-text#{&}--icon-position-left#{&}--size-medium { + &--has-text#{&}--icon-position-left#{&}--size-small { padding-left: 0.5em; } - &--has-text#{&}--icon-position-right#{&}--size-medium { + &--has-text#{&}--icon-position-right#{&}--size-small { padding-right: 0.5em; } diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 7d728b0b9b6..e2fcde04de2 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -361,15 +361,15 @@ exports[`Dropdown scss have to match snapshot 1`] = ` --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } .dnb-button { @@ -400,16 +400,16 @@ exports[`Dropdown scss have to match snapshot 1`] = ` color: inherit; background-color: inherit; transform: translateY(var(--button-border-width)); } - .dnb-button--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--has-text.dnb-button--size-medium { + .dnb-button--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } + .dnb-button--has-text.dnb-button--size-small { padding-left: 1em; padding-right: 1em; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { padding-left: 0.5em; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { padding-right: 0.5em; } .dnb-button--size-large { width: var(--button-width--large); diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 744ff871327..501fb244c92 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -218,15 +218,15 @@ exports[`InputMasked scss have to match snapshot 1`] = ` --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } .dnb-button { @@ -257,16 +257,16 @@ exports[`InputMasked scss have to match snapshot 1`] = ` color: inherit; background-color: inherit; transform: translateY(var(--button-border-width)); } - .dnb-button--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--has-text.dnb-button--size-medium { + .dnb-button--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } + .dnb-button--has-text.dnb-button--size-small { padding-left: 1em; padding-right: 1em; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { padding-left: 0.5em; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { padding-right: 0.5em; } .dnb-button--size-large { width: var(--button-width--large); diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 10f40f9c76f..dda07cf6026 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -290,15 +290,15 @@ exports[`Input scss have to match snapshot 1`] = ` --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } .dnb-button { @@ -329,16 +329,16 @@ exports[`Input scss have to match snapshot 1`] = ` color: inherit; background-color: inherit; transform: translateY(var(--button-border-width)); } - .dnb-button--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--has-text.dnb-button--size-medium { + .dnb-button--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } + .dnb-button--has-text.dnb-button--size-small { padding-left: 1em; padding-right: 1em; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { padding-left: 0.5em; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { padding-right: 0.5em; } .dnb-button--size-large { width: var(--button-width--large); diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap index 6edbb5ce014..56e19f9c78c 100644 --- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap +++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap @@ -587,15 +587,15 @@ exports[`Modal scss have to match snapshot 1`] = ` --button-font-style: normal; --button-width: 2.5rem; --button-height: 2.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; + --button-width--small: 2rem; + --button-height--small: 2rem; --button-width--large: 3rem; --button-height--large: 3rem; --button-icon-size: 1rem; --button-border-width: 1px; --button-border-width--hover: 3px; --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--large: calc(var(--button-height--large) / 2); } .dnb-button { @@ -626,16 +626,16 @@ exports[`Modal scss have to match snapshot 1`] = ` color: inherit; background-color: inherit; transform: translateY(var(--button-border-width)); } - .dnb-button--size-medium { - width: var(--button-width--medium); - height: var(--button-height--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--has-text.dnb-button--size-medium { + .dnb-button--size-small { + width: var(--button-width--small); + height: var(--button-height--small); + border-radius: var(--button-border-radius--small); } + .dnb-button--has-text.dnb-button--size-small { padding-left: 1em; padding-right: 1em; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { padding-left: 0.5em; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { padding-right: 0.5em; } .dnb-button--size-large { width: var(--button-width--large); diff --git a/packages/dnb-ui-lib/src/style/components.js b/packages/dnb-ui-lib/src/style/components.js index ed15bd1e609..d7468eab578 100644 --- a/packages/dnb-ui-lib/src/style/components.js +++ b/packages/dnb-ui-lib/src/style/components.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports only components, but no theme * */ diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-lib-IE11.scss b/packages/dnb-ui-lib/src/style/dnb-ui-lib-IE11.scss deleted file mode 100644 index 9c9f139f966..00000000000 --- a/packages/dnb-ui-lib/src/style/dnb-ui-lib-IE11.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* -* This is the DNB main stylesheet -* -*/ - -// libs -@import './dnb-ui-lib.scss'; -@import './themes/dnb-theme-ui.scss'; diff --git a/packages/dnb-ui-lib/src/style/index.js b/packages/dnb-ui-lib/src/style/index.js index 99128b07bd7..ef0e318de37 100644 --- a/packages/dnb-ui-lib/src/style/index.js +++ b/packages/dnb-ui-lib/src/style/index.js @@ -1,19 +1,7 @@ /** - * Web Style Import + * Imports both the components and the default theme * */ import './dnb-ui-components.scss' import './themes/dnb-theme-ui.scss' - -// TODO: Remove this as soon as there is no need for it -// just for testing porposes -// import './themes/dnb-theme-open-banking.scss' - -/** - * Only for testing porposes - * This style should make perfectly buttons - * - */ -// import '../components/button/style/dnb-button.scss' -// import './themes/dnb-theme-ui.scss' diff --git a/packages/dnb-ui-lib/src/style/lib-IE11.js b/packages/dnb-ui-lib/src/style/lib-IE11.js deleted file mode 100644 index 7ea1842ed52..00000000000 --- a/packages/dnb-ui-lib/src/style/lib-IE11.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Web Style Import - * - */ - -import './dnb-ui-lib-IE11.scss' diff --git a/packages/dnb-ui-lib/src/style/lib.js b/packages/dnb-ui-lib/src/style/lib.js index 6f1daa7655a..fd188206645 100644 --- a/packages/dnb-ui-lib/src/style/lib.js +++ b/packages/dnb-ui-lib/src/style/lib.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports both components and patterns, but no theme * */ diff --git a/packages/dnb-ui-lib/src/style/patterns.js b/packages/dnb-ui-lib/src/style/patterns.js index e87fddd0ffa..b170d504406 100644 --- a/packages/dnb-ui-lib/src/style/patterns.js +++ b/packages/dnb-ui-lib/src/style/patterns.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports only the patterns * */ diff --git a/packages/dnb-ui-lib/src/style/theme.js b/packages/dnb-ui-lib/src/style/theme.js index cd0291e70d7..3dbc900cb5d 100644 --- a/packages/dnb-ui-lib/src/style/theme.js +++ b/packages/dnb-ui-lib/src/style/theme.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports only the default theme * */ diff --git a/packages/dnb-ui-lib/src/style/themes/index.js b/packages/dnb-ui-lib/src/style/themes/index.js index e5b0b1595a5..7afc27b7274 100644 --- a/packages/dnb-ui-lib/src/style/themes/index.js +++ b/packages/dnb-ui-lib/src/style/themes/index.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports the default themes for all components and patterns * */ diff --git a/packages/dnb-ui-lib/src/style/themes/open-banking.js b/packages/dnb-ui-lib/src/style/themes/open-banking.js index 2af8801f947..efa291d092e 100644 --- a/packages/dnb-ui-lib/src/style/themes/open-banking.js +++ b/packages/dnb-ui-lib/src/style/themes/open-banking.js @@ -1,5 +1,7 @@ /** - * Web Style Import + * Custom Theme + * + * This is an example of how to make a custom theme * */ diff --git a/packages/dnb-ui-lib/src/style/themes/ui.js b/packages/dnb-ui-lib/src/style/themes/ui.js index e5b0b1595a5..7afc27b7274 100644 --- a/packages/dnb-ui-lib/src/style/themes/ui.js +++ b/packages/dnb-ui-lib/src/style/themes/ui.js @@ -1,5 +1,5 @@ /** - * Web Style Import + * Imports the default themes for all components and patterns * */ diff --git a/packages/dnb-ui-lib/stories/index.js b/packages/dnb-ui-lib/stories/index.js index f6a69fe558c..4bdc9725ba5 100644 --- a/packages/dnb-ui-lib/stories/index.js +++ b/packages/dnb-ui-lib/stories/index.js @@ -9,7 +9,7 @@ import playground from './componentExamples' import typography from './typographyExamples' // ATTENTION: for testing with IE11, we have to use the build version - make sure to run `yarn build` first -import '../style/lib-IE11' +// import '../style' // UI style + theme import '../src/style'