@bonniernews/dn-design-system-web 0.1.0-alpha.9 → 0.1.0

package/.stylelintignore

@@ -0,0 +1 @@
+foundations/variables/

package/.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "stylelint-selector-bem-pattern",
+    "stylelint-sass-render-errors"
+  ],
+  "extends": [
+    "stylelint-config-recommended-scss",
+    "stylelint-prettier/recommended"
+  ],
+  "rules": {
+    "plugin/sass-render-errors": true,
+    "no-descending-specificity": null,
+    "plugin/selector-bem-pattern": {
+      "preset": "bem"
+    }
+  }
+}

package/CHANGELOG.md

@@ -3,6 +3,550 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.64...@bonniernews/dn-design-system-web@0.1.0) (2022-12-05)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.64 (2022-12-05)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.63 (2022-12-01)
+
+
+### Features
+
+* **web:** change icon to real component ([#466](https://github.com/BonnierNews/dn-design-system/issues/466)) ([9903768](https://github.com/BonnierNews/dn-design-system/commit/99037681e5793949fb7fd9c439616c91ab6ed3df))
+
+
+
+
+
+# 0.1.0-alpha.62 (2022-11-30)
+
+
+### Bug Fixes
+
+* **web:** fix label and make space for toggle btn in safari ([#464](https://github.com/BonnierNews/dn-design-system/issues/464)) ([f297c37](https://github.com/BonnierNews/dn-design-system/commit/f297c3744e05a99e8e08f2af0b6dfe31c6151a3d))
+
+
+
+
+
+# [0.1.0-alpha.61](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.60...@bonniernews/dn-design-system-web@0.1.0-alpha.61) (2022-11-29)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.60](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.59...@bonniernews/dn-design-system-web@0.1.0-alpha.60) (2022-11-28)
+
+
+### Bug Fixes
+
+* **web:** bugfix for icons in safari and firefox ([#459](https://github.com/BonnierNews/dn-design-system/issues/459)) ([80a4544](https://github.com/BonnierNews/dn-design-system/commit/80a4544615175169445ff1ccd97328c63b2f0036))
+
+
+
+
+
+# 0.1.0-alpha.59 (2022-11-25)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.58](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.57...@bonniernews/dn-design-system-web@0.1.0-alpha.58) (2022-11-21)
+
+
+### Bug Fixes
+
+* **web:** update readme ([#452](https://github.com/BonnierNews/dn-design-system/issues/452)) ([3ccc5de](https://github.com/BonnierNews/dn-design-system/commit/3ccc5de5ca9c416674630949bd547dc33b7d31f8))
+
+
+
+
+
+# [0.1.0-alpha.57](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.56...@bonniernews/dn-design-system-web@0.1.0-alpha.57) (2022-11-21)
+
+
+### Bug Fixes
+
+* **web:** update readme ([#450](https://github.com/BonnierNews/dn-design-system/issues/450)) ([6373846](https://github.com/BonnierNews/dn-design-system/commit/6373846d47ae8ab113f41e65cc805b7ff01499c1))
+
+
+
+
+
+# [0.1.0-alpha.56](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.55...@bonniernews/dn-design-system-web@0.1.0-alpha.56) (2022-11-21)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.55](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.54...@bonniernews/dn-design-system-web@0.1.0-alpha.55) (2022-11-21)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.54](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.53...@bonniernews/dn-design-system-web@0.1.0-alpha.54) (2022-11-21)
+
+
+### Bug Fixes
+
+* **web:** update readme ([#439](https://github.com/BonnierNews/dn-design-system/issues/439)) ([8f4ad72](https://github.com/BonnierNews/dn-design-system/commit/8f4ad720f0d7be0ac356440ff6bb1af1d558812f))
+
+
+
+
+
+# [0.1.0-alpha.53](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.52...@bonniernews/dn-design-system-web@0.1.0-alpha.53) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** mark attributes as safe ([#435](https://github.com/BonnierNews/dn-design-system/issues/435)) ([dd4338d](https://github.com/BonnierNews/dn-design-system/commit/dd4338dfb2daa3b717f1f598742b31555b1c895e))
+
+
+
+
+
+# [0.1.0-alpha.52](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.51...@bonniernews/dn-design-system-web@0.1.0-alpha.52) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** remove unnecessary disabled attributes from list item ([#430](https://github.com/BonnierNews/dn-design-system/issues/430)) ([90cc887](https://github.com/BonnierNews/dn-design-system/commit/90cc8875feb936a3a855e96a28ce9014a08a5f17))
+
+
+
+
+
+# [0.1.0-alpha.51](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.50...@bonniernews/dn-design-system-web@0.1.0-alpha.51) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** update scss examples in readme ([#424](https://github.com/BonnierNews/dn-design-system/issues/424)) ([4c892d5](https://github.com/BonnierNews/dn-design-system/commit/4c892d5456a386262ec655abb16cdd8029dbc764))
+
+
+
+
+
+# 0.1.0-alpha.50 (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** remove hover/active on disabled items ([#429](https://github.com/BonnierNews/dn-design-system/issues/429)) ([99703ce](https://github.com/BonnierNews/dn-design-system/commit/99703cecb536a0b6464051da6f2dafce733b26df))
+
+
+
+
+
+# [0.1.0-alpha.49](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.48...@bonniernews/dn-design-system-web@0.1.0-alpha.49) (2022-11-15)
+
+
+### Bug Fixes
+
+* **web:** add background to outlined icon button ([#423](https://github.com/BonnierNews/dn-design-system/issues/423)) ([8cda87e](https://github.com/BonnierNews/dn-design-system/commit/8cda87ef8c5309c31b68e9626a8d1f3d51b45dd7))
+
+
+
+
+
+# [0.1.0-alpha.48](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.47...@bonniernews/dn-design-system-web@0.1.0-alpha.48) (2022-11-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.47](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.46...@bonniernews/dn-design-system-web@0.1.0-alpha.47) (2022-11-14)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.46 (2022-11-14)
+
+
+### Bug Fixes
+
+* **web:** update readme for all components ([#418](https://github.com/BonnierNews/dn-design-system/issues/418)) ([7df88e8](https://github.com/BonnierNews/dn-design-system/commit/7df88e8553e07296e60ae587a13b43ddf565f13a))
+
+
+
+
+
+# [0.1.0-alpha.45](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.44...@bonniernews/dn-design-system-web@0.1.0-alpha.45) (2022-11-07)
+
+
+### Features
+
+* **web:** list item component ([#400](https://github.com/BonnierNews/dn-design-system/issues/400)) ([09d6b07](https://github.com/BonnierNews/dn-design-system/commit/09d6b07838fd89d7c1f2d42ebdd08fbaf468a31d))
+
+
+
+
+
+# 0.1.0-alpha.44 (2022-11-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.43](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.42...@bonniernews/dn-design-system-web@0.1.0-alpha.43) (2022-11-03)
+
+
+### Features
+
+* **web:** update so spacing function can take params rem and em  ([#410](https://github.com/BonnierNews/dn-design-system/issues/410)) ([b627dc8](https://github.com/BonnierNews/dn-design-system/commit/b627dc8e3e80c9745ee96dd8519f72a3f884dcca))
+
+
+
+
+
+# 0.1.0-alpha.42 (2022-11-03)
+
+
+### Features
+
+* **web:** text field web, and story update ([#403](https://github.com/BonnierNews/dn-design-system/issues/403)) ([332917c](https://github.com/BonnierNews/dn-design-system/commit/332917cdcc32c29d8559d173ccf25ee9833a5423))
+
+
+
+
+
+# 0.1.0-alpha.41 (2022-11-01)
+
+
+### Bug Fixes
+
+* **storybook:** add support for tables in markdown ([#408](https://github.com/BonnierNews/dn-design-system/issues/408)) ([6786563](https://github.com/BonnierNews/dn-design-system/commit/67865634b6186094521674c444e7b01b8cbcf458))
+
+
+
+
+
+# [0.1.0-alpha.40](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.39...@bonniernews/dn-design-system-web@0.1.0-alpha.40) (2022-10-27)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.39](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.38...@bonniernews/dn-design-system-web@0.1.0-alpha.39) (2022-10-27)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.38](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.37...@bonniernews/dn-design-system-web@0.1.0-alpha.38) (2022-10-26)
+
+
+### Features
+
+* **web:** switch component ([#379](https://github.com/BonnierNews/dn-design-system/issues/379)) ([b9dd6c3](https://github.com/BonnierNews/dn-design-system/commit/b9dd6c3e78ddc92ac874fb09408405673a47a70e))
+
+
+
+
+
+# 0.1.0-alpha.37 (2022-10-26)
+
+
+### Bug Fixes
+
+* **web:** update condensed text button and focus borders ([#383](https://github.com/BonnierNews/dn-design-system/issues/383)) ([8a8b179](https://github.com/BonnierNews/dn-design-system/commit/8a8b17922438695c9efe3db22f6213c1f3f6959f))
+
+
+
+
+
+# 0.1.0-alpha.36 (2022-10-26)
+
+
+### Features
+
+* **web:** add size to icon component ([#389](https://github.com/BonnierNews/dn-design-system/issues/389)) ([da25e31](https://github.com/BonnierNews/dn-design-system/commit/da25e3109da5da44ac6a5398e4664739ade43904))
+
+
+
+
+
+# 0.1.0-alpha.35 (2022-10-26)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.33...@bonniernews/dn-design-system-web@0.1.0-alpha.34) (2022-10-25)
+
+
+### Features
+
+* **web:** radio button component ([#369](https://github.com/BonnierNews/dn-design-system/issues/369)) ([3be818f](https://github.com/BonnierNews/dn-design-system/commit/3be818fb4f0c05565d6566eb62a84b4e26fd970a))
+
+
+
+
+
+# 0.1.0-alpha.33 (2022-10-25)
+
+
+### Features
+
+* **web:** checkbox component ([#363](https://github.com/BonnierNews/dn-design-system/issues/363)) ([86b58f6](https://github.com/BonnierNews/dn-design-system/commit/86b58f6b2b9e90787966b5496cd7677466c0e7f0))
+
+
+
+
+
+# 0.1.0-alpha.32 (2022-10-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.31](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.30...@bonniernews/dn-design-system-web@0.1.0-alpha.31) (2022-10-21)
+
+
+### Bug Fixes
+
+* **web:** update focus colors and add color variable list ([#353](https://github.com/BonnierNews/dn-design-system/issues/353)) ([2e12e66](https://github.com/BonnierNews/dn-design-system/commit/2e12e66067784030a8e613eea4d8927f167c04a2))
+
+
+
+
+
+# 0.1.0-alpha.30 (2022-10-20)
+
+
+### Features
+
+* **web:** badge component ([#347](https://github.com/BonnierNews/dn-design-system/issues/347)) ([b8e3ca1](https://github.com/BonnierNews/dn-design-system/commit/b8e3ca1aa9451f03932d614a6632d8d09ba695e9))
+
+
+
+
+
+# [0.1.0-alpha.29](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.28...@bonniernews/dn-design-system-web@0.1.0-alpha.29) (2022-10-20)
+
+
+### Bug Fixes
+
+* **web:** add forcePx parameter to buttons to prevent scaling ([#346](https://github.com/BonnierNews/dn-design-system/issues/346)) ([d0d81bc](https://github.com/BonnierNews/dn-design-system/commit/d0d81bcc91f72c3ec308b5f5226ce37b54f5edf0))
+
+
+
+
+
+# [0.1.0-alpha.28](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.27...@bonniernews/dn-design-system-web@0.1.0-alpha.28) (2022-10-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.27 (2022-10-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.26 (2022-10-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.25 (2022-10-17)
+
+
+### Bug Fixes
+
+* **web:** update buttons ([#306](https://github.com/BonnierNews/dn-design-system/issues/306)) ([37c8fb6](https://github.com/BonnierNews/dn-design-system/commit/37c8fb68149b047ff0f53e8ab611f3d6fecc9f9a))
+
+
+
+
+
+# [0.1.0-alpha.24](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.23...@bonniernews/dn-design-system-web@0.1.0-alpha.24) (2022-10-14)
+
+
+### Bug Fixes
+
+* **web:** change prefix for color variables to ds-color ([#290](https://github.com/BonnierNews/dn-design-system/issues/290)) ([93c443a](https://github.com/BonnierNews/dn-design-system/commit/93c443a8242b850c5714b3a3d834435024085d86))
+
+
+
+
+
+# 0.1.0-alpha.23 (2022-10-14)
+
+
+### Bug Fixes
+
+* **web:** add typography variables and normalize letter-spacing ([#289](https://github.com/BonnierNews/dn-design-system/issues/289)) ([995eb48](https://github.com/BonnierNews/dn-design-system/commit/995eb486e055e17d98594b9dce1b122fc09dcbdd))
+
+
+
+
+
+# [0.1.0-alpha.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.21...@bonniernews/dn-design-system-web@0.1.0-alpha.22) (2022-10-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.21 (2022-10-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.19...@bonniernews/dn-design-system-web@0.1.0-alpha.20) (2022-10-07)
+
+
+### Bug Fixes
+
+* **web:** sync sass variables with tokens ([#269](https://github.com/BonnierNews/dn-design-system/issues/269)) ([b760051](https://github.com/BonnierNews/dn-design-system/commit/b760051a2a09ad299c20d193ac47cec95bbf5dab))
+
+
+
+
+
+# 0.1.0-alpha.19 (2022-10-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.17...@bonniernews/dn-design-system-web@0.1.0-alpha.18) (2022-10-03)
+
+
+### Features
+
+* **web:** divider component for web ([#252](https://github.com/BonnierNews/dn-design-system/issues/252)) ([93f5dfb](https://github.com/BonnierNews/dn-design-system/commit/93f5dfb365da8a554b4ea21d519c614cc06081df))
+
+
+
+
+
+# 0.1.0-alpha.17 (2022-10-03)
+
+
+### Features
+
+* **web:** text button component for web ([#254](https://github.com/BonnierNews/dn-design-system/issues/254)) ([6711a5b](https://github.com/BonnierNews/dn-design-system/commit/6711a5b6d46da68eb25db1f9af4f25fbb219011d))
+
+
+
+
+
+# [0.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.15...@bonniernews/dn-design-system-web@0.1.0-alpha.16) (2022-09-30)
+
+
+### Bug Fixes
+
+* **web:** use metrics and new spacing tokens ([#249](https://github.com/BonnierNews/dn-design-system/issues/249)) ([67fe9a7](https://github.com/BonnierNews/dn-design-system/commit/67fe9a715fdadeb1cf08f7fb291d35cd4818307a))
+
+
+
+
+
+# 0.1.0-alpha.15 (2022-09-29)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.14 (2022-09-27)
+
+
+### Features
+
+* **web:** update web typography ([#235](https://github.com/BonnierNews/dn-design-system/issues/235)) ([83a5039](https://github.com/BonnierNews/dn-design-system/commit/83a5039955f6df69f983b52531c46be29738e39d))
+
+
+
+
+
+# 0.1.0-alpha.13 (2022-09-09)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.12 (2022-09-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.10...@bonniernews/dn-design-system-web@0.1.0-alpha.11) (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.10 (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 # 0.1.0-alpha.9 (2022-08-24)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/README.md

@@ -1,3 +1,11 @@
 # @bonniernews/dn-design-system-web
 
-contains components and foundations of DN design system for web
+Components and foundations of DN design system for web
+
+Storybook: [https://designsystem.dn.se/](https://designsystem.dn.se/)
+
+Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-latest.dn.se/)
+
+Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
+
+For specific instructions see each component readme.

package/assets/form-field/form-field.njk

@@ -0,0 +1,19 @@
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% set classes = [] %}
+
+{% macro FormField(params, wrapperClasses) %}
+  {% if (params.error) %}
+    {% set classes = (classes.push("ds-form-field__error"), classes) %}
+  {% endif %}
+
+  <div class="ds-form-field {{ wrapperClasses | join(" ") }} {{ classes | join(" ") }} {{"hidden" if params.type == "hidden" }}">
+    {{ caller() if caller }}
+    <div class="ds-form-field__error-message js-field-error">
+      {{ Icon({ icon: "info-filled" }) }}
+      <span>{{ params.errorMessage | safe }}</span>
+    </div>
+    {% if params.helpText or params.helpHtml %}
+      <p class="ds-form-field__help-text">{{ params.helpHtml | safe if params.helpHtml else params.helpText }}</p>
+    {% endif %}
+  </div>
+{% endmacro %}

package/assets/form-field/form-field.scss

@@ -0,0 +1,62 @@
+@use "../../foundations/helpers/spacing.scss" as *;
+@use "../../foundations/helpers/metrics.scss" as *;
+@use "../../foundations/helpers/utilities.scss" as *;
+@use "../../foundations/helpers/typography.scss" as *;
+@use "../../foundations/helpers/colors.scss" as *;
+
+$ds-form-field__error-icon-size: 20px;
+
+.ds-form-field__help-text {
+  margin-top: ds-spacing-component(x2);
+  margin-bottom: 0;
+  color: var($ds-color-text-primary-02);
+  @include ds-typography($ds-typography-functional-body01regular);
+}
+
+.ds-form-field__error-message {
+  display: none;
+}
+
+.ds-form-field__error,
+.invalid {
+  .ds-form-field__error-message {
+    display: flex;
+    margin-top: ds-spacing-component(x2);
+    .ds-icon {
+      margin: 0 ds-px-to-rem(ds-spacing-component(x2)) 0 0;
+      height: ds-px-to-rem($ds-form-field__error-icon-size);
+      width: ds-px-to-rem($ds-form-field__error-icon-size);
+      line-height: 0;
+      svg {
+        fill: var($ds-color-icon-critical);
+      }
+    }
+    span {
+      @include ds-typography($ds-typography-functional-body01regular);
+    }
+  }
+
+  .ds-form-field__help-text {
+    display: none;
+  }
+}
+
+.ds-force-px {
+  &.ds-form-field__error,
+  .invalid {
+    .ds-form-field__error-message {
+      .ds-icon {
+        margin: 0 ds-spacing-component(x2) 0 0;
+        height: $ds-form-field__error-icon-size;
+        width: $ds-form-field__error-icon-size;
+      }
+      span {
+        @include ds-typography($ds-typography-functional-body01regular, true);
+      }
+    }
+  }
+
+  .ds-form-field__help-text {
+    @include ds-typography($ds-typography-functional-body01regular, true);
+  }
+}

package/components/badge/README.md

@@ -0,0 +1,34 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)
+- Storybook: [Badge > Badge > Web](https://designsystem.dn.se/?path=/story/components-app-web-badge-badge-web)
+- Storybook: [Badge > BadgeWithFigure > Web ](https://designsystem.dn.se/?path=/story/components-app-web-badge-badgewithfigure-web)
+
+----
+
+# Badge
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|figure | int | no | | | Numbers above 9 will show as "9+"|
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/badge/badge.njk' import Badge %}
+
+{{ Badge({
+  figure: 2
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/badge/badge";
+```