diff --git a/packages/dnb-design-system-portal/gatsby-config.js b/packages/dnb-design-system-portal/gatsby-config.js index b8abf4695ad..9bafc4fdb45 100644 --- a/packages/dnb-design-system-portal/gatsby-config.js +++ b/packages/dnb-design-system-portal/gatsby-config.js @@ -38,7 +38,7 @@ module.exports = { { resolve: 'gatsby-plugin-page-creator', options: { - ignore: ['**/*.md', '**/Examples.js'], + ignore: ['**/*.md', '**/Examples.js', '**/*_not_in_use*'], path: `${__dirname}/src/docs`, // for .js files name: 'docs' } @@ -51,7 +51,7 @@ module.exports = { } }, { - resolve: 'gatsby-mdx', + resolve: 'gatsby-plugin-mdx', options: { extensions: ['.md'], // More info of using plugins: https://github.com/mdx-js/mdx/blob/d4154b8c4a546d0b675826826f85014cc04098c2/docs/plugins.md diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 6bb06ee5451..b0682d388a3 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -58,10 +58,10 @@ "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", - "@mdx-js/mdx": "^1.1.0", - "@mdx-js/react": "^1.0.27", + "@mdx-js/mdx": "^1.1.5", + "@mdx-js/react": "^1.1.5", "babel-jest": "^24.8.0", - "babel-plugin-emotion": "^10.0.14", + "babel-plugin-emotion": "^10.0.15", "camelcase": "^5.3.1", "ci-info": "^2.0.0", "classnames": "^2.2.6", @@ -71,34 +71,34 @@ "emotion": "^10.0.14", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", - "enzyme-to-json": "^3.3.5", + "enzyme-to-json": "^3.4.0", "eslint": "^5.16.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-react": "^7.14.2", + "eslint-plugin-react": "^7.14.3", "front-matter": "^3.0.2", "fs-extra": "^8.1.0", "gatsby": "^2.13.18", - "gatsby-link": "^2.2.2", - "gatsby-mdx": "^0.6.3", + "gatsby-link": "^2.2.4", "gatsby-plugin-catch-links": "^2.1.2", "gatsby-plugin-emotion": "^4.1.2", - "gatsby-plugin-manifest": "^2.2.3", + "gatsby-plugin-manifest": "^2.2.4", + "gatsby-plugin-mdx": "^1.0.22", "gatsby-plugin-offline": "^2.2.4", "gatsby-plugin-page-creator": "^2.1.5", "gatsby-plugin-postcss": "^2.1.2", - "gatsby-plugin-react-helmet": "^3.1.2", - "gatsby-plugin-sass": "^2.1.3", - "gatsby-plugin-sharp": "^2.2.8", + "gatsby-plugin-react-helmet": "^3.1.3", + "gatsby-plugin-sass": "^2.1.4", + "gatsby-plugin-sharp": "^2.2.9", "gatsby-remark-images": "^3.1.7", - "gatsby-source-filesystem": "^2.1.5", - "gh-pages": "^2.0.1", + "gatsby-source-filesystem": "^2.1.8", + "gh-pages": "^2.1.0", "github-slugger": "^1.2.1", "jest": "^24.8.0", "jest-emotion": "^10.0.14", "jest-raw-loader": "^1.0.1", "keycode": "^2.2.0", - "lint-staged": "^9.2.0", + "lint-staged": "^9.2.1", "nodemon": "^1.19.1", "ora": "^3.4.0", "postcss-preset-env": "^6.7.0", diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js deleted file mode 100644 index 5381c4053fe..00000000000 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js +++ /dev/null @@ -1,196 +0,0 @@ -/** - * Font Family Syntax - */ - -import React from 'react' -import { H5 } from 'dnb-ui-lib/src/elements' - -const Syntax = () => ( - <> -
Fedra Sans Book
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
Fedra Sans Book Italic
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
Fedra Sans Medium
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
Fedra Sans Medium Italic
-
-
-

- - Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the - cites of the word in classical literature, discovered the - undoubtable source. Lorem Ipsum comes from sections 1.10.32 and - 1.10.33 of "de Finibus Bonorum et Malorum" (The - Extremes of Good and Evil) by Cicero, written in 45 BC. - -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
Fedra Sans Light
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
Fedra Sans Light Italic
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -
This is the Fedra Sans Bold
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
-
Fedra Sans Bold Italic
-
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites - of the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good - and Evil) by Cicero, written in 45 BC. -

-
Here are some numbers:
-
-

- Lining: 123456789 -

-

- Old style: 123456789 -

-
-
-
- -) -export default Syntax diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md index 49fdc6faca6..57bca4a5828 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md +++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md @@ -2,8 +2,192 @@ draft: true --- -import FontFamilies from 'Pages/quickguide-designer/font-families.js' +import { H2 } from 'dnb-ui-lib/src/elements' ## Font Families - +

Fedra Sans Book

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Book Italic

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Medium

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Medium Italic

+
+
+

+ + Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the + cites of the word in classical literature, discovered the + undoubtable source. Lorem Ipsum comes from sections 1.10.32 and + 1.10.33 of "de Finibus Bonorum et Malorum" (The + Extremes of Good and Evil) by Cicero, written in 45 BC. + +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Light

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Light Italic

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

This is the Fedra Sans Bold

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
+ +

Fedra Sans Bold Italic

+
+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites + of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good + and Evil) by Cicero, written in 45 BC. +

+

Here are some numbers:

+
+

+ Lining: 123456789 +

+

+ Old style: 123456789 +

+
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js deleted file mode 100644 index 1a4d266baa9..00000000000 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Font Family Syntax - */ - -import React from 'react' -import { H5 } from 'dnb-ui-lib/src/elements' - -const Syntax = () => ( - <> -
Body Book
-

- Achieved with classes:{' '} - .dnb-typo-book, .dnb-typo-demi, .dnb-typo-medium -

-

- NB! body text is automatically set to use 'book' weight so there is - no need to usw a class. -

-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites of - the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good and - Evil) by Cicero, written in 45 BC. -

-
- -
Body Demi
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites of - the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good and - Evil) by Cicero, written in 45 BC. -

-
- -
Body Medium
-
-

- Here is a paragraph with some nonsense lipsum text. Contrary to - popular belief, Lorem Ipsum passage, and going through the cites of - the word in classical literature, discovered the undoubtable - source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of - "de Finibus Bonorum et Malorum" (The Extremes of Good and - Evil) by Cicero, written in 45 BC. -

-
- -) -export default Syntax diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md index 4bccfde9df8..3996cc53c6c 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md +++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md @@ -2,8 +2,50 @@ draft: true --- -import FontWeights from 'Pages/quickguide-designer/font-weights.js' +import { H2 } from 'dnb-ui-lib/src/elements' ## Font Weights - +

Body Book

+

+ Achieved with classes:{' '} + .dnb-typo-book, .dnb-typo-demi, .dnb-typo-medium +

+

+ NB! body text is automatically set to use 'book' weight so there is + no need to usw a class. +

+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites of + the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. +

+
+ +

Body Demi

+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites of + the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. +

+
+ +

Body Medium

+
+

+ Here is a paragraph with some nonsense lipsum text. Contrary to + popular belief, Lorem Ipsum passage, and going through the cites of + the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of + "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. +

+
diff --git a/packages/dnb-design-system-portal/src/templates/mdx.js b/packages/dnb-design-system-portal/src/templates/mdx.js index 41ad40e5a81..2169555789c 100644 --- a/packages/dnb-design-system-portal/src/templates/mdx.js +++ b/packages/dnb-design-system-portal/src/templates/mdx.js @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Head from 'react-helmet' import { MDXProvider } from '@mdx-js/react' -import MDXRenderer from 'gatsby-mdx/mdx-renderer' +import { MDXRenderer } from 'gatsby-plugin-mdx' import { graphql, withPrefix } from 'gatsby' import Layout from '../shared/parts/Layout' @@ -19,7 +19,7 @@ export default class MdxTemplate extends PureComponent { location, data: { mdx: { - code: { body }, + body, frontmatter: { title, description, fullscreen } }, site: { @@ -49,15 +49,13 @@ MdxTemplate.propTypes = { location: PropTypes.object.isRequired, data: PropTypes.shape({ mdx: PropTypes.shape({ - code: PropTypes.shape({ - body: PropTypes.string.isRequired - }).isRequired + body: PropTypes.string.isRequired }).isRequired }).isRequired } export const pageQuery = graphql` - query($id: String!) { + query MDXQuery($id: String!) { site { siteMetadata { description @@ -69,9 +67,7 @@ export const pageQuery = graphql` description fullscreen } - code { - body - } + body } } ` diff --git a/packages/dnb-ui-lib/dist/dnb-ui-lib-4.3.1.tgz b/packages/dnb-ui-lib/dist/dnb-ui-lib-4.3.1.tgz deleted file mode 100644 index f0a69d49ca2..00000000000 Binary files a/packages/dnb-ui-lib/dist/dnb-ui-lib-4.3.1.tgz and /dev/null differ diff --git a/packages/dnb-ui-lib/dist/dnb-ui-lib-4.4.0.tgz b/packages/dnb-ui-lib/dist/dnb-ui-lib-4.4.0.tgz new file mode 100644 index 00000000000..9864878144a Binary files /dev/null and b/packages/dnb-ui-lib/dist/dnb-ui-lib-4.4.0.tgz differ diff --git a/packages/dnb-ui-lib/package.json b/packages/dnb-ui-lib/package.json index fd888e9c3d9..5c04434afc8 100644 --- a/packages/dnb-ui-lib/package.json +++ b/packages/dnb-ui-lib/package.json @@ -102,14 +102,14 @@ "@babel/preset-react": "^7.0.0", "@babel/register": "^7.5.5", "@emotion/babel-plugin-core": "^0.6.9", - "@emotion/core": "^10.0.14", - "@emotion/styled": "^10.0.14", - "@storybook/react": "^5.1.9", + "@emotion/core": "^10.0.15", + "@emotion/styled": "^10.0.15", + "@storybook/react": "^5.1.10", "@svgr/core": "^4.3.2", - "audit-ci": "^2.2.0", + "audit-ci": "^2.3.0", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", - "babel-plugin-emotion": "^10.0.14", + "babel-plugin-emotion": "^10.0.15", "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-dev-warning": "^0.1.1", "babel-plugin-transform-dynamic-import": "^2.1.0", @@ -124,11 +124,11 @@ "dotenv": "^8.0.0", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", - "enzyme-to-json": "^3.3.5", + "enzyme-to-json": "^3.4.0", "eslint": "^5.16.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-react": "^7.14.2", + "eslint-plugin-react": "^7.14.3", "eslint-plugin-security": "^1.4.0", "figma-js": "^1.7.0", "files-exist": "^1.1.0", @@ -140,7 +140,7 @@ "gulp-cssnano": "^2.1.3", "gulp-postcss": "^8.0.0", "gulp-rename": "^1.4.0", - "gulp-rollup-each": "^3.0.0", + "gulp-rollup-each": "^3.0.1", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-transform": "^3.0.5", @@ -151,7 +151,7 @@ "jest-raw-loader": "^1.0.1", "jest-screenshot": "^0.2.2", "jest-tobetype": "^1.2.3", - "lint-staged": "^9.2.0", + "lint-staged": "^9.2.1", "live-server": "^1.2.1", "lodash.isequal": "^4.5.0", "lodash.isequalwith": "^4.4.0", @@ -166,14 +166,14 @@ "prettier": "^1.18.2", "prettier-package-json": "^2.1.0", "prop-types": "^15.7.2", - "puppeteer": "^1.18.1", + "puppeteer": "^1.19.0", "raw-loader": "^3.1.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-fake-props": "^0.3.2", - "rollup": "^1.17.0", + "rollup": "^1.19.3", "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-commonjs": "^10.0.2", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-scss": "^1.0.1", @@ -182,13 +182,13 @@ "scss-to-json": "^2.0.0", "semantic-release": "^16.0.0-beta.19", "simple-commit-message": "^4.0.3", - "simple-git": "^1.122.0", + "simple-git": "^1.124.0", "stream-buffers": "^3.0.2", - "style-loader": "^0.23.1", + "style-loader": "^1.0.0", "stylelint": "^10.1.0", "stylelint-config-prettier": "^5.2.0", "stylelint-config-standard": "^18.3.0", - "stylelint-scss": "^3.9.2", + "stylelint-scss": "^3.9.3", "svgo": "^1.3.0", "tar": "^4.4.10", "text-mask-addons": "^3.8.0", diff --git a/packages/dnb-ui-lib/scripts/figma/version.lock b/packages/dnb-ui-lib/scripts/figma/version.lock index 433d50f2600..cc193767f6a 100644 --- a/packages/dnb-ui-lib/scripts/figma/version.lock +++ b/packages/dnb-ui-lib/scripts/figma/version.lock @@ -1 +1 @@ -{"1a3caba565dddc0a936aaddc29a82887":"148621709"} \ No newline at end of file +{"1a3caba565dddc0a936aaddc29a82887":"158088105"} \ No newline at end of file diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index a187abcf42e..0d79b008ad2 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -1753,7 +1753,8 @@ legend.dnb-form-label { justify-content: space-between; padding: 1rem; } .dnb-date-picker__labels__day { - padding: 1.5rem 0 0.5rem; } + padding-top: 1.5rem; + padding-bottom: 0.5rem; } .dnb-date-picker__labels, .dnb-date-picker__days { min-width: 18rem; max-width: 18rem; @@ -1854,6 +1855,8 @@ legend.dnb-form-label { @media screen and (-ms-high-contrast: none) { .dnb-date-picker { flex: none; } + .dnb-date-picker__day, .dnb-date-picker__labels__day { + flex-basis: 13.48571%; } .dnb-date-picker__day .dnb-button, .dnb-core-style .dnb-date-picker__day .dnb-button, .dnb-date-picker__day .dnb-button__bounding { top: 0; diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss index 4d465d9fe08..371c35a1227 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss +++ b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss @@ -236,13 +236,13 @@ &__labels { &__day { - padding: 1.5rem 0 0.5rem; + padding-top: 1.5rem; + padding-bottom: 0.5rem; } } &__labels, &__days { - // min-width: 12rem; min-width: 18rem; max-width: 18rem; @@ -391,6 +391,12 @@ // IE fix @media screen and (-ms-high-contrast: none) { flex: none; + + &__day, + &__labels__day { + flex-basis: percentage(1 / 7) - 0.8; + } + &__day { .dnb-button { &, diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js index 198ee8cb738..0a45aaaaf63 100644 --- a/packages/dnb-ui-lib/src/components/input/Input.js +++ b/packages/dnb-ui-lib/src/components/input/Input.js @@ -148,11 +148,7 @@ export default class Input extends PureComponent { static getDerivedStateFromProps(props, state) { const value = Input.getValue(props) - if ( - state._listenForPropChanges && - value !== null && - value !== state.value - ) { + if (state._listenForPropChanges && value !== state.value) { state.value = value } if (props.input_state) { @@ -222,8 +218,9 @@ export default class Input extends PureComponent { dispatchCustomElementEvent(this, 'on_change', { value, event }) } onKeyDownHandler = event => { + const value = event.target.value + dispatchCustomElementEvent(this, 'on_key_down', { value, event }) if (event.key === 'Enter') { - const { value } = event.target dispatchCustomElementEvent(this, 'on_submit', { value, event }) } } diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js index c559fee0fa8..791d2456e8d 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js +++ b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js @@ -66,23 +66,64 @@ describe('Input component', () => { 'false' ) - const value = 'new value' - Comp.find('input').simulate('change', { target: { value } }) + const newValue = 'new value' + Comp.find('input').simulate('change', { target: { value: newValue } }) expect(Comp.find('.dnb-input__shell').prop('data-has-content')).toBe( 'true' ) - expect(Comp.state().value).toBe(value) + expect(Comp.state().value).toBe(newValue) + }) + + it('events gets emmited correctly: "on_change" and "onKeyDown"', () => { + const initValue = 'init value' + const newValue = 'new value' + const emptyValue = null // gets emmited also on values as null + + const on_change = jest.fn() + const onKeyDown = jest.fn() // additional native event test + + const Comp = mount( + + ) + + expect(Comp.state().value).toBe(initValue) + + Comp.find('input').simulate('change', { + target: { value: newValue } + }) + expect(on_change.mock.calls.length).toBe(1) + expect(Comp.state().value).toBe(newValue) + + Comp.find('input').simulate('change', { + target: { value: emptyValue } + }) + expect(on_change.mock.calls.length).toBe(2) + expect(Comp.state().value).toBe(emptyValue) + + // additional native event test + Comp.find('input').simulate('keydown', { key: 'Space', keyCode: 84 }) // space + expect(onKeyDown.mock.calls.length).toBe(1) }) // make sure getDerivedStateFromProps works it('has correct state after changeing "value" prop (set by getDerivedStateFromProps)', () => { - const value = 'new prop value' + const initValue = 'new prop value' + const emptyValue = null + Comp.setProps({ - value + value: initValue }) - expect(Comp.state().value).toBe(value) + expect(Comp.state().value).toBe(initValue) + + Comp.setProps({ value: emptyValue }) + expect(Comp.state().value).toBe(emptyValue) // get dom node // console.log('domNode', Comp.find('input').getDOMNode().value) diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js index 08cf3b00ae2..bfaa6915f69 100644 --- a/packages/dnb-ui-lib/src/components/textarea/Textarea.js +++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js @@ -31,10 +31,10 @@ export const propTypes = { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), id: PropTypes.string, label: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - PropTypes.node -]), + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), label_direction: PropTypes.oneOf(['horizontal', 'vertical']), status: PropTypes.oneOfType([ PropTypes.string, @@ -119,11 +119,7 @@ export default class Textarea extends PureComponent { static getDerivedStateFromProps(props, state) { const value = Textarea.getValue(props) - if ( - state._listenForPropChanges && - value !== null && - value !== state.value - ) { + if (state._listenForPropChanges && value !== state.value) { state.value = value } if (isTrue(props.disabled)) { diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js index 1a1856861b3..c162e3491a0 100644 --- a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js +++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js @@ -69,11 +69,16 @@ describe('Textarea component', () => { // // make sure getDerivedStateFromProps works it('has correct state after changeing "value" prop (set by getDerivedStateFromProps)', () => { - const value = 'new prop value' + const initValue = 'new prop value' + const emptyValue = null + Comp.setProps({ - value + value: initValue }) - expect(Comp.state().value).toBe(value) + expect(Comp.state().value).toBe(initValue) + + Comp.setProps({ value: emptyValue }) + expect(Comp.state().value).toBe(emptyValue) }) it('has to to have a prop value like value', () => { diff --git a/packages/dnb-ui-lib/stories/components/Input.js b/packages/dnb-ui-lib/stories/components/Input.js index 53e952e1863..2cb78f38b47 100644 --- a/packages/dnb-ui-lib/stories/components/Input.js +++ b/packages/dnb-ui-lib/stories/components/Input.js @@ -3,7 +3,7 @@ * */ -import React /* , { useState, useEffect } */ from 'react' +import React, { useState, useEffect } from 'react' import { Wrapper, Box } from '../helpers' import styled from '@emotion/styled' @@ -181,27 +181,12 @@ export default [
{ - console.log('onSubmit', event) + // console.log('onSubmit', event) event.preventDefault() // event.persist() }} > - { - console.log('on_change', event) - }} - onChange={event => { - console.log('onChange', event) - }} - on_submit={event => { - console.log('on_submit', event) - }} - onSubmit={event => { - console.log('on_submit', event) - }} - value="Input ..." - /> +