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

package/CHANGELOG.md

@@ -51,6 +51,104 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 ## [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)
 
+## [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:** 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.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)
+
+
+### 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
+
+* **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:** 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 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)
+
+
+### Bug Fixes
+
+* **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))
+
+
+### 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)
 
 

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 {

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 *;
+```

package/components/footer/README.md

@@ -1,75 +1,188 @@
-- 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
+======
 
-----
+*   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)
 
-# Footer
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/footer/footer.scss'`
 
-## Parameters
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">editorsHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">copyright</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">linkGroups</span></td><td><div class="css-1f9domv"><span class="css-o1d7ko">FooterLinkList[]</span></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">rudolf</span><span title="Required" class="css-1ywjlcj">*</span></td><td><div class="css-1f9domv"><span class="css-o1d7ko">{ imgUrl: string; text: string; }</span></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">channels</span></td><td><div class="css-1f9domv"><span class="css-o1d7ko">FooterLink[]</span></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-|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 *;
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token operator">&lt;</span><span class="token maybe-class-name">Footer</span><span class="">
+</span><span class="">  channels</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token literal-property property">rel</span><span class="token operator">:</span><span class=""> </span><span class="token string">'nofollow'</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'?channel='</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Byt version'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token literal-property property">rel</span><span class="token operator">:</span><span class=""> </span><span class="token string">'nofollow'</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">classNames</span><span class="token operator">:</span><span class=""> </span><span class="token string">'hidden-mobile'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'?channel=mobile'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Mobil'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token literal-property property">rel</span><span class="token operator">:</span><span class=""> </span><span class="token string">'nofollow'</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">classNames</span><span class="token operator">:</span><span class=""> </span><span class="token string">'hidden-tablet'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'?channel=tablet'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Tablet'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token literal-property property">rel</span><span class="token operator">:</span><span class=""> </span><span class="token string">'nofollow'</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">classNames</span><span class="token operator">:</span><span class=""> </span><span class="token string">'hidden-desktop'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'?channel=desktop'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Webb'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token literal-property property">id</span><span class="token operator">:</span><span class=""> </span><span class="token string">'site-footer__cookie-settings'</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">classNames</span><span class="token operator">:</span><span class=""> </span><span class="token string">'hidden-tablet'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'#'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Cookie-inställningar'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="">
+</span><span class="">  </span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="">
+</span><span class="">  copyright</span><span class="token operator">=</span><span class="token string">"&amp;copy; Dagens Nyheter AB 2023"</span><span class="">
+</span><span class="">  editorsHtml</span><span class="token operator">=</span><span class="token string">"&lt;p&gt;Chefredaktör och ansvarig utgivare:&amp;nbsp;Peter Wolodarski | Redaktionschef:&amp;nbsp;Anna Åberg | Vd:&amp;nbsp;Anders Eriksson | Administrativ redaktionschef:&amp;nbsp;Fredrik Björnsson | Biträdande redaktionschef:&amp;nbsp;Matilda E Hanson | Utrikeschef:&amp;nbsp;Pia Skagermark | Kulturchef:&amp;nbsp;Björn Wiman | Politisk redaktör:&amp;nbsp;Amanda Sokolnicki | Chef DN.se:&amp;nbsp;Anna Kallenberg &lt;br /&gt; Dagens Nyheter – en del av Bonnier News &lt;br /&gt;Bonnier News org.nr 559080-0917&lt;/p&gt;"</span><span class="">
+</span><span class="">  linkGroups</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">links</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">[</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/app/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'DN:s appar'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://etidning.dn.se/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'e-DN'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/korsord/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Korsord'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://arkivet.dn.se/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Arkivet'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/insandare/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Insändare'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/nyhetsbrev/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Nyhetsbrev'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/foljer/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Följ ämnen och skribenter'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="">
+</span><span class="">      </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">title</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Ta del av DN'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">        </span><span class="token string-property property">'data-hide-promo'</span><span class="token operator">:</span><span class=""> </span><span class="token string">''</span><span class="">
+</span><span class="">      </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">links</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">[</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://prenumerera.dn.se/bli-prenumerant/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Bli prenumerant'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://id.dn.se/konto/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Kundservice'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://id.dn.se/konto/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Min prenumeration'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Vanliga frågor'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://id.dn.se/konto/?nextUrl=/kontakt/dn/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Kontakta kundservice'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://erbjudanden.dn.se/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Kunderbjudanden'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="">
+</span><span class="">      </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">title</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Kundservice'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">links</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">[</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'/kontakt/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Kontakta oss'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://dngranskar.dn.se/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Tipsa DN'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://gdpr.bonniernews.se/cookiepolicy'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Om cookies'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://gdpr.bonniernews.se/personuppgiftspolicy/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Personuppgiftspolicy'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://dn.ocast.com/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Annonsera'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">attributes</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">{</span><span class="">
+</span><span class="">            </span><span class="token literal-property property">rel</span><span class="token operator">:</span><span class=""> </span><span class="token string">'nofollow noopener'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">            </span><span class="token literal-property property">target</span><span class="token operator">:</span><span class=""> </span><span class="token string">'_blank'</span><span class="">
+</span><span class="">          </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://iabsverige.se/goldstandard/'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'IAB Sweden Gold Standard'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'javascript:window.location.href=\'mailto:adops@bonniernews.se\''</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Anmäl störande/felaktig annons'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="">
+</span><span class="">      </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">title</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Om DN'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token punctuation">{</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">links</span><span class="token operator">:</span><span class=""> </span><span class="token punctuation">[</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://instagram.com/dagens_nyheter'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Instagram'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://www.youtube.com/@DagensNyheterDN'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Youtube'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://facebook.com/dn.se'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Facebook'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://twitter.com/dagensnyheter'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Twitter'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="">
+</span><span class="">        </span><span class="token punctuation">{</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">href</span><span class="token operator">:</span><span class=""> </span><span class="token string">'https://www.tiktok.com/@dagensnyheterdn'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">          </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'TikTok'</span><span class="">
+</span><span class="">        </span><span class="token punctuation">}</span><span class="">
+</span><span class="">      </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="">
+</span><span class="">      </span><span class="token literal-property property">title</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Följ oss'</span><span class="">
+</span><span class="">    </span><span class="token punctuation">}</span><span class="">
+</span><span class="">  </span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="">
+</span><span class="">  rudolf</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="">
+</span><span class="">    </span><span class="token literal-property property">imgUrl</span><span class="token operator">:</span><span class=""> </span><span class="token string">'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20height%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%23holder%20text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20%2300000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2028px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cg%20id%3D%22holder%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23cccccc%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3ERudolf%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E'</span><span class="token punctuation">,</span><span class="">
+</span><span class="">    </span><span class="token literal-property property">text</span><span class="token operator">:</span><span class=""> </span><span class="token string">'Punkten efter Dagens Nyheter har funnits med allt sedan det första numret 23 december 1864. Grundaren Rudolf Wall lär ha satt dit den med tanken att Dagens Nyheter inte bara är ett namn. Det är också en avslutad mening, ett konstaterande av vad som hänt. Därför sätter vi punkt även i vår tid.'</span><span class="">
+</span><span class="">  </span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="">
+</span><span class=""></span><span class="token operator">/</span><span class="token operator">&gt;</span></div></pre>