@bonniernews/dn-design-system-web 21.2.1-beta.0 → 22.0.0

package/CHANGELOG.md

@@ -4,52 +4,103 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
-## [21.1.0-beta.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.4...@bonniernews/dn-design-system-web@21.1.0-beta.5) (2024-11-08)
+## [22.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.14...@bonniernews/dn-design-system-web@22.0.0) (2024-12-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update figma variables (#1544)
+
+### Maintenance
+
+* **app:** simpler Button (remove emphasis and rounded) ([#1531](https://github.com/BonnierNews/dn-design-system/issues/1531)) ([cbfe0c3](https://github.com/BonnierNews/dn-design-system/commit/cbfe0c31ffa0298071d40a0e556d7c123be7fc89))
+* **deps-dev:** bump axios from 1.7.8 to 1.7.9 ([#1536](https://github.com/BonnierNews/dn-design-system/issues/1536)) ([7b1a581](https://github.com/BonnierNews/dn-design-system/commit/7b1a581d0dbe2cd2d614eb7dd8a7b18e11c2d5c6))
+* **deps:** bump dotenv from 16.4.5 to 16.4.7 ([#1537](https://github.com/BonnierNews/dn-design-system/issues/1537)) ([b551c0e](https://github.com/BonnierNews/dn-design-system/commit/b551c0e489571b4791ed48d135681c652942ca46))
+* **foundations:** update figma variables ([#1544](https://github.com/BonnierNews/dn-design-system/issues/1544)) ([98b5b4d](https://github.com/BonnierNews/dn-design-system/commit/98b5b4d56968c420348dd99e9d75ba3df2ec0c00))
+* prerelease packages ([c1b73ef](https://github.com/BonnierNews/dn-design-system/commit/c1b73efc01a42347f8aae368cca946ba53f150c5))
+* prerelease packages ([e0942fa](https://github.com/BonnierNews/dn-design-system/commit/e0942fa913cfeaa535c998875581b57fb05cfbd5))
+
+## [21.1.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.13...@bonniernews/dn-design-system-web@21.1.14) (2024-12-12)
+
+## [21.1.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.12...@bonniernews/dn-design-system-web@21.1.13) (2024-12-12)
+
+
+### Maintenance
+
+* **deps-dev:** bump @testing-library/react-native from 12.8.1 to 12.9.0 ([#1522](https://github.com/BonnierNews/dn-design-system/issues/1522)) ([3a5f288](https://github.com/BonnierNews/dn-design-system/commit/3a5f288a75fe66326477b3dc397a9c9f0546a92f))
+* **deps:** bump @emotion/react from 11.13.3 to 11.14.0 ([#1528](https://github.com/BonnierNews/dn-design-system/issues/1528)) ([1f93394](https://github.com/BonnierNews/dn-design-system/commit/1f93394eeb22e4a2a1bc70abf1089a149e093f4a))
+* **deps:** bump zustand from 4.4.7 to 4.5.5 ([#1520](https://github.com/BonnierNews/dn-design-system/issues/1520)) ([5ca4877](https://github.com/BonnierNews/dn-design-system/commit/5ca487756d8216f5595e5b08eedf6be02e376fb1))
+* **web:** game header tsx ([#1527](https://github.com/BonnierNews/dn-design-system/issues/1527)) ([695dd0b](https://github.com/BonnierNews/dn-design-system/commit/695dd0b899d413ac4d38c3892cabfd52e57d0c29))
+* **web:** spacing with tsx ([#1526](https://github.com/BonnierNews/dn-design-system/issues/1526)) ([189d9e8](https://github.com/BonnierNews/dn-design-system/commit/189d9e879c7400f62e6ed12938770fed98bacf52))
+
+## [21.1.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.11...@bonniernews/dn-design-system-web@21.1.12) (2024-12-06)
+
+
+### Maintenance
+
+* **web:** types for icons and colors ([#1525](https://github.com/BonnierNews/dn-design-system/issues/1525)) ([e1af15f](https://github.com/BonnierNews/dn-design-system/commit/e1af15f2dcf5f420ea67a748d061e39145c0dbbd))
+
+## [21.1.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.10...@bonniernews/dn-design-system-web@21.1.11) (2024-12-05)
+
+
+### Maintenance
+
+* **web:** unbundle exports ([#1524](https://github.com/BonnierNews/dn-design-system/issues/1524)) ([d6ed9d1](https://github.com/BonnierNews/dn-design-system/commit/d6ed9d14bca82af7e69a6de4e0ed53b0bde937a6))
+
+## [21.1.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.9...@bonniernews/dn-design-system-web@21.1.10) (2024-12-04)
 
 
 ### Bug Fixes
 
-* **web:** support breaking no image ([#1492](https://github.com/BonnierNews/dn-design-system/issues/1492)) ([dbf30ca](https://github.com/BonnierNews/dn-design-system/commit/dbf30ca9420bd8bc173de127499c0260abc3990a))
+* **web:** icons, including sprite and pictogram, as .tsx ([#1523](https://github.com/BonnierNews/dn-design-system/issues/1523)) ([17dc7f9](https://github.com/BonnierNews/dn-design-system/commit/17dc7f9faf88d4c86815e158267a59aad34be689))
 
-## [21.1.0-beta.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.3...@bonniernews/dn-design-system-web@21.1.0-beta.4) (2024-11-06)
+## [21.1.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.8...@bonniernews/dn-design-system-web@21.1.9) (2024-11-29)
 
-## [21.1.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.3) (2024-11-06)
+
+### Bug Fixes
+
+* **web:** remove unused grade code for teasers ([#1507](https://github.com/BonnierNews/dn-design-system/issues/1507)) ([ec97bde](https://github.com/BonnierNews/dn-design-system/commit/ec97bde80759afc5a7779a753263f7b38b4058ee))
+
+## [21.1.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.7...@bonniernews/dn-design-system-web@21.1.8) (2024-11-28)
 
 
 ### Features
 
-* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([5adacb9](https://github.com/BonnierNews/dn-design-system/commit/5adacb9d8b1fadecd615278e63139627f3b88cb7))
-* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([7743c3b](https://github.com/BonnierNews/dn-design-system/commit/7743c3bfad040b46921e934570808b33083401ce))
-* **web:** one level of bauta with background color ([9184544](https://github.com/BonnierNews/dn-design-system/commit/91845447403cb2ec5a787fd64c341d620861b148))
-* **web:** one level of bauta with background color ([644acd6](https://github.com/BonnierNews/dn-design-system/commit/644acd6166d7385ac08c930fe725215a9e35fc80))
+* **app:** support bold text accessibility setting ([#1430](https://github.com/BonnierNews/dn-design-system/issues/1430)) ([0e2ebb4](https://github.com/BonnierNews/dn-design-system/commit/0e2ebb4e3d0573e6eb57f13a93eea97d998a05d2))
 
 
 ### Bug Fixes
 
-* **web:** correct spacing teasers ([#1491](https://github.com/BonnierNews/dn-design-system/issues/1491)) ([b2624b8](https://github.com/BonnierNews/dn-design-system/commit/b2624b8311384d38971f82eb84e73560244a4b18))
-* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([48aeeca](https://github.com/BonnierNews/dn-design-system/commit/48aeecac1be293bbcb8ece678d562c26c0ec59d6))
+* **web:** spinner component as .tsx ([#1510](https://github.com/BonnierNews/dn-design-system/issues/1510)) ([783531d](https://github.com/BonnierNews/dn-design-system/commit/783531d0c2feaec293396a67ea467df503bf678f))
 
 
 ### Maintenance
 
-* **deps-dev:** bump @babel/preset-env from 7.25.8 to 7.25.9 ([#1469](https://github.com/BonnierNews/dn-design-system/issues/1469)) ([b9a9884](https://github.com/BonnierNews/dn-design-system/commit/b9a988470f8862d4c010f27a097d9a65af115d2b))
-* **deps-dev:** bump @testing-library/react-native from 12.7.2 to 12.8.0 ([#1477](https://github.com/BonnierNews/dn-design-system/issues/1477)) ([59e489f](https://github.com/BonnierNews/dn-design-system/commit/59e489f4227e83e1d6df43eb9acf6c1ea42db3e3))
-* **deps:** bump @react-native-community/slider from 4.5.4 to 4.5.5 ([#1475](https://github.com/BonnierNews/dn-design-system/issues/1475)) ([c321542](https://github.com/BonnierNews/dn-design-system/commit/c321542bdf60e16f86fc02cae937b301e649bb48))
-* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
-* prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
-* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
-* **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
-* **web:** released version v21.1.0-beta.1 ([9d45c5a](https://github.com/BonnierNews/dn-design-system/commit/9d45c5a4bbcfe53698ca9dffe3e1771422fbcdac))
-* **web:** released version v21.1.0-beta.2 ([49b9324](https://github.com/BonnierNews/dn-design-system/commit/49b9324c7074d6835aab2de9bb7d9e18649f58b6))
-* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([943705a](https://github.com/BonnierNews/dn-design-system/commit/943705afb2922c4d32bb4e042cd746857cbd26cf))
+* **deps-dev:** bump axios from 1.7.7 to 1.7.8 ([#1521](https://github.com/BonnierNews/dn-design-system/issues/1521)) ([2699715](https://github.com/BonnierNews/dn-design-system/commit/2699715ebc2b94662b7a2b96dfa81db553810b6b))
+* prerelease packages ([4b262a2](https://github.com/BonnierNews/dn-design-system/commit/4b262a2f8b155239dd88af41449b77decef29c64))
+
+## [21.1.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.6...@bonniernews/dn-design-system-web@21.1.7) (2024-11-21)
 
-## [21.1.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.1...@bonniernews/dn-design-system-web@21.1.0-beta.2) (2024-10-25)
 
 ### Bug Fixes
 
-* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([e132abf](https://github.com/BonnierNews/dn-design-system/commit/e132abf44fc8d525fed7ff565ebdcc3702941669))
+* **web:** footer component tsx ([#1511](https://github.com/BonnierNews/dn-design-system/issues/1511)) ([cea4d87](https://github.com/BonnierNews/dn-design-system/commit/cea4d8777fa6eee63d2a43db2b070c837f583d33))
+* **web:** make generate document action fail of wrong path ([#1513](https://github.com/BonnierNews/dn-design-system/issues/1513)) ([4bf20be](https://github.com/BonnierNews/dn-design-system/commit/4bf20be5df01055b33a38df5e409ec084d69af65))
+
 
-## [21.1.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.1) (2024-10-25)
+### Maintenance
+
+* **deps:** bump cross-spawn from 6.0.5 to 6.0.6 in /web ([#1508](https://github.com/BonnierNews/dn-design-system/issues/1508)) ([dad260a](https://github.com/BonnierNews/dn-design-system/commit/dad260a48967b58a08a6c6ba3b581aeffccf3b54))
+* **deps:** bump sass from 1.80.3 to 1.81.0 ([#1505](https://github.com/BonnierNews/dn-design-system/issues/1505)) ([9455509](https://github.com/BonnierNews/dn-design-system/commit/94555094aac9ffbff6e5f25aedb68dc3485dc85d))
+* **web:** only build docs stories for readme script ([#1512](https://github.com/BonnierNews/dn-design-system/issues/1512)) ([bffc019](https://github.com/BonnierNews/dn-design-system/commit/bffc0195375b4cb2025a479ac0462628092e153f))
+* **web:** update readme about generating docs ([#1509](https://github.com/BonnierNews/dn-design-system/issues/1509)) ([036e7c1](https://github.com/BonnierNews/dn-design-system/commit/036e7c1eb22b69ba8860efe53463e20b8a88ccbf))
+
+## [21.1.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.5...@bonniernews/dn-design-system-web@21.1.6) (2024-11-19)
+
+
+### Maintenance
+
+* **web:** fix jsx error with tsx components ([#1506](https://github.com/BonnierNews/dn-design-system/issues/1506)) ([ad3bf54](https://github.com/BonnierNews/dn-design-system/commit/ad3bf54aabb0f7239c1406e55946adfcf6245aa5))
 
 ## [21.1.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.4...@bonniernews/dn-design-system-web@21.1.5) (2024-11-15)
 
@@ -88,6 +139,7 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 ## [21.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.4...@bonniernews/dn-design-system-web@21.1.0) (2024-11-11)
 
+
 ### Features
 
 * **web:** one level of bauta with background color ([#1428](https://github.com/BonnierNews/dn-design-system/issues/1428)) ([c78c0a5](https://github.com/BonnierNews/dn-design-system/commit/c78c0a5e8a05a4ee4d31d7a58e5d23b1c39a7807))
@@ -102,9 +154,7 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([92a0383](https://github.com/BonnierNews/dn-design-system/commit/92a038392e8bc9b4bfa8b3f2dc508b16ef1ff4cf))
 
 ## [21.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.0.3) (2024-11-04)
-* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([602040c](https://github.com/BonnierNews/dn-design-system/commit/602040c5a0e8ef7a7bd996bc6508e97956229c1b))
-* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([d8dcacf](https://github.com/BonnierNews/dn-design-system/commit/d8dcacf7c76b80aac7e48fbf602bc5079d3a1cd3))
-* **web:** one level of bauta with background color ([8734216](https://github.com/BonnierNews/dn-design-system/commit/87342169eacf9d59f202f45424022c1bd733a74e))
+
 
 ### Maintenance
 
@@ -119,9 +169,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
 * prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
 * **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
-* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
-* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
-* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([87277b4](https://github.com/BonnierNews/dn-design-system/commit/87277b487b6f663d4ca106a74cb878012e579a42))
 
 ## [21.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.1...@bonniernews/dn-design-system-web@21.0.2) (2024-10-24)
 
@@ -136,6 +183,7 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * **web:** one level of bauta with background color ([075ed25](https://github.com/BonnierNews/dn-design-system/commit/075ed259c6f3c50ed6018bd566fdc7b9b5c05c73))
 
+
 ### Maintenance
 
 * **deps-dev:** bump @babel/runtime from 7.25.7 to 7.25.9 ([#1458](https://github.com/BonnierNews/dn-design-system/issues/1458)) ([2a160a8](https://github.com/BonnierNews/dn-design-system/commit/2a160a8cfe74b593002ddc460fa4734dc008250d))

package/assets/teaser/teaser.scss

@@ -10,8 +10,6 @@ $ds-teaser-standard-image-width-mobile: 104px;
 $ds-teaser-standard-image-width-tablet: 156px;
 $ds-teaser-standard-image-width-desktop: 196px;
 
-$grade-size: ds-px-to-rem(34px);
-
 @mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
   @include ds-focus($offset, $includeSelector);
 }
@@ -65,29 +63,6 @@ $grade-size: ds-px-to-rem(34px);
     @include ds-mq-smallest-breakpoint(tablet) {
       margin-top: ds-spacing($ds-s-075);
     }
-
-    &.ds-teaser__text--with-grade {
-      min-height: calc($grade-size + ds-spacing($ds-s-025, "rem"));
-    }
-  }
-
-  .ds-icon.ds-icon--grade {
-    color: $ds-color-icon-primary;
-    border-radius: 50%;
-    float: left;
-    font-size: 0;
-    line-height: 0;
-    margin: ds-spacing($ds-s-025 $ds-s-050 0 0, "rem");
-    height: $grade-size;
-    width: $grade-size;
-
-    svg {
-      width: 100%;
-      height: 100%;
-      circle {
-        stroke: currentColor;
-      }
-    }
   }
 
   .ds-teaser__sticker {
@@ -99,12 +74,6 @@ $grade-size: ds-px-to-rem(34px);
   .ds-teaser__media {
     width: 100%;
     position: relative;
-    box-sizing: border-box;
-
-    &--rounded {
-      border-radius: ds-border-radius(x1);
-      overflow: hidden;
-    }
   }
 
   .ds-vip-badge {
@@ -134,6 +103,6 @@ $grade-size: ds-px-to-rem(34px);
   }
 
   &--bauta {
-    background-color: $ds-color-surface-breaking;
+    background-color: $bauta-surface-color;
   }
 }

package/components/footer/README-NJK.md

@@ -0,0 +1,75 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/footer)
+- Storybook: [Footer](https://designsystem.dn.se/?path=/docs/page-footer--docs)
+- Storybook (Latest): [Footer](https://designsystem-latest.dn.se/?path=/docs/page-footer--docs)
+
+----
+
+# Footer
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|linkGroups | Array > Object | yes | | | Ex. [{ title: "Om Dn", attributes: {"data-test": "test"}, links: [{ href: "/kontakt/", text: "Kontakta oss" }] }, { title: "Följ oss", links: [{ href: "#", text: "Twitter", classNames: "twitter-link", attributes: { target: "_blank" } }] }] |
+|editorsHtml | HTML String | yes | | | |
+|copyright | String | yes | | | |
+|rudolf | Object | yes | | | Ex. { imgUrl: "images/rudolf.png", text: "Punkten efter Dagens Nyheter har funnits med.." } |
+|channels | Array > Object | no | | | Ex. [{ href: "?channel=mobile", text: "Mobil", classNames: "hidden-mobile", attributes: {rel: "nofollow"} }] |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|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/footer/footer.njk' import Footer %}
+
+{{ Footer({
+  linkGroups: [
+    {
+      title: "Om Dn",
+      links: [
+        {
+          href: "/kontakt/",
+          text: "Kontakta oss"
+        }
+      ]
+    },
+    {
+      title: "Följ oss",
+      links: [
+        {
+          href: "#",
+          text: "Twitter",
+          classNames: "twitter-link",
+          attributes: { target: "_blank" }
+        }
+      ]
+    }
+  ],
+  editorsHtml: "<p>Chefredaktör och ansvarig utgivare:&nbsp;Peter Wolodarski...</p>",
+  copyright: "&copy; Dagens Nyheter AB 2023",
+  rudolf: {
+    imgUrl: "images/rudolf.png",
+    text: "Punkten efter Dagens Nyheter har funnits med.."
+  },
+  channels: [
+    {
+      href: "?channel=mobile",
+      text: "Mobil",
+      classNames: "hidden-mobile",
+      attributes: {rel: "nofollow"}
+    }
+  ],
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/footer/footer" as *;
+```