@bonniernews/dn-design-system-web - npm Package Compare versions

Comparing version 21.2.1-beta.0 to 22.0.0

components/footer/README.md

@@ -1,75 +0,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:[e-mail]\''</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>

components/game-header/README.md

@@ -1,40 +0,16 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/game-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/game-header)
-- Storybook: [GameHeader](https://designsystem.dn.se/?path=/docs/section-Gameheader--docs)
-- Storybook (Latest): [GameHeader](https://designsystem-latest.dn.se/?path=/docs/section-Gameheader--docs)
+GameHeader
+==========
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/game-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/game-header)
+*   Storybook: [GameHeader](https://designsystem.dn.se/?path=/docs/section-Gameheader--docs)
 
-# Game header
+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/game-header/game-header.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">title</span><span title="Required" class="css-1ywjlcj">*</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">media</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">descriptionHtml</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">textColor</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">backgroundColor</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">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-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Text displayed on the header |
-|media | String | no | | | URL to icon displayed on the header |
-|descriptionHtml | String | no | | | Intended use is text, links and inlined icons |
-|backgroundColor | String | no | | | Hex code or supported color name |
-|textColor | String | no | | | Hex code or supported color name. If not given, it defaults to static-black. |
-|classNames | String | no | | | Ex. "my-special-class" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-
-## 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/game-header/game-header.njk' import GameHeader %}
-
-{{ GameHeader(
-  {
-    title: "Quiz"
-  }
-)}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/game-header/game-header" as *;
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">GameHeader</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">backgroundColor</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#FAD4D4</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">descriptionHtml</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">&lt;p&gt;&lt;strong&gt;Vässa din allmänbildning.&lt;/strong&gt; Smarta quiz av DN:s medarbetare. Välj mellan olika kategorier och svårighetsgrad.&lt;/p&gt;&lt;p&gt;Headern &lt;em&gt;kan&lt;/em&gt; även innehålla &lt;a href=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://dn.se/quiz</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">&gt;länkar&lt;/a&gt;&lt;/p&gt;</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">media</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">&lt;img src=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">data:image/svg+xml, %3Csvg width=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">105</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> height=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">125</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> viewBox=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">0 0 105 125</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">none</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> xmlns=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">http://www.w3.org/2000/svg</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%3E%3Cg clip-path=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">url(%23clip0_3175_23204)</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.2897 30.3998C48.2897 27.9398 50.2197 25.8398 52.8497 25.8398C55.3097 25.8398 57.4097 27.7698 57.4097 30.3998V31.0998C58.8097 29.1698 62.1497 28.4698 64.5997 28.9998C68.1097 29.6998 70.2097 33.0298 69.5097 36.5398C69.1597 37.9398 68.6297 39.3498 67.4097 40.2198C68.2897 39.6898 69.5097 39.8698 70.5697 40.0398C73.0297 40.5698 74.5997 43.0198 74.0797 45.4798C73.7297 47.2298 72.6797 49.3398 71.2697 49.8598C71.9697 49.8598 72.4997 49.8598 73.1997 50.0398C76.7097 50.7398 78.8097 54.0698 78.1097 57.5798C77.4097 60.9098 74.2497 63.0198 70.9197 62.6698C72.6697 63.5498 73.3797 65.9998 72.8497 68.1098C72.3197 70.5698 69.8697 72.1398 67.4097 71.6198C66.7097 71.4398 66.0097 71.0898 65.4797 70.5698C65.6597 71.0998 65.6597 73.0299 65.2997 74.0798C64.7697 76.5398 62.3197 77.7598 59.8597 77.9398C58.2797 77.9398 55.2997 76.7098 54.9497 75.1298V75.3098C54.9497 77.0598 53.1997 78.6398 51.4397 78.6398C49.6797 78.6398 48.1097 77.2398 48.1097 75.3098C48.1097 77.0598 46.7097 78.6398 44.7797 78.6398C42.8497 78.6398 41.2697 77.2398 41.2697 75.3098V75.1298C40.7397 76.7098 37.7597 78.1098 36.3597 77.9398C33.8997 77.7598 31.4497 76.5398 30.9197 74.0798C30.7397 73.0299 30.7397 71.0998 30.7397 70.5698C30.2097 71.0998 29.5097 71.4498 28.8097 71.6198C26.3497 72.1498 23.8997 70.5698 23.3697 68.1098C23.0197 66.1798 23.7197 63.7298 25.2997 62.6698C21.9697 63.1998 18.8097 60.9198 18.1097 57.5798C17.4097 54.0698 19.5097 50.7398 23.0197 50.0398C23.7197 49.8598 24.2497 49.8598 24.9497 49.8598C23.3697 49.3298 22.4897 47.2298 22.1397 45.4798C21.6097 43.0198 23.1897 40.5698 25.6497 40.0398C26.6997 39.8598 27.9297 39.6898 28.8097 40.2198C27.7597 39.3398 27.0597 37.9398 26.7097 36.5398C26.0097 33.0298 28.1097 29.6998 31.6197 28.9998C34.0797 28.4698 37.4097 29.1798 38.8097 31.0998V30.3998C38.8097 27.9398 40.7397 25.8398 43.3697 25.8398C46.3497 25.8398 48.2797 27.7698 48.2797 30.3998H48.2897Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E891A1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M54.7401 60.68C54.7101 60.02 54.1601 59.51 53.4901 59.55C51.7901 59.63 50.4701 60.69 49.4801 61.97V54.43C49.6501 53.9 50.4601 51.88 53.0701 51.76C53.7301 51.73 54.2401 51.17 54.2101 50.51C54.1801 49.85 53.6401 49.34 52.9601 49.37C51.5001 49.44 50.3601 49.92 49.4801 50.56V34.95C49.4801 34.29 48.9401 33.75 48.2801 33.75C47.6201 33.75 47.0801 34.29 47.0801 34.95V44.13C46.3901 43.45 45.5101 42.89 44.4001 42.57C43.7701 42.39 43.1001 42.76 42.9201 43.39C42.7401 44.03 43.1101 44.69 43.7401 44.87C46.5801 45.68 47.0501 49.11 47.0801 49.38V55.34C46.3901 54.68 45.5101 54.12 44.4001 53.8C43.7701 53.62 43.1001 53.99 42.9201 54.62C42.7401 55.26 43.1101 55.92 43.7401 56.1C46.6901 56.94 47.0701 60.42 47.0801 60.58V70.03C47.0801 70.69 47.6201 71.23 48.2801 71.23C48.9401 71.23 49.4801 70.69 49.4801 70.03V67.23C49.9401 65.74 51.5101 62.04 53.6001 61.93C54.2601 61.9 54.7701 61.34 54.7401 60.68Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M38.6899 60.9698C38.1899 60.2898 37.2799 58.6698 38.2999 56.7398C38.6099 56.1598 38.3799 55.4298 37.7999 55.1198C37.2099 54.8098 36.4899 55.0398 36.1799 55.6198C35.4299 57.0498 35.3299 58.4198 35.5499 59.6098C34.6399 59.4098 33.6099 59.3198 32.4499 59.3598C31.7899 59.3898 31.2799 59.9498 31.2999 60.5998C31.3299 61.2598 31.8899 61.7698 32.5399 61.7498C34.5099 61.6698 35.9699 62.1098 37.0599 62.7698C37.1299 62.8398 37.1899 62.9098 37.2499 62.9798C37.3999 63.1298 37.5699 63.2098 37.7499 63.2598C39.8899 65.0198 40.1999 67.7298 40.2299 68.1798C40.2699 68.8098 40.7999 69.2898 41.4199 69.2898C41.4499 69.2898 41.4699 69.2898 41.4999 69.2898C42.1599 69.2498 42.6599 68.6798 42.6099 68.0198C42.6099 67.9598 42.2399 63.4498 38.6599 60.9598L38.6899 60.9698Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M66.32 56.3896C64.97 55.0396 64.3 53.7296 64.02 52.5196C64.02 52.4796 64.03 52.4196 64.04 52.3796C64.05 52.1696 63.99 51.9796 63.9 51.7996C63.61 48.9396 65.5 46.8196 65.81 46.4896C66.27 46.0196 66.25 45.2596 65.78 44.7996C65.31 44.3396 64.55 44.3496 64.09 44.8296C64.05 44.8796 60.86 48.2496 61.59 52.6496C61.44 53.4496 60.86 55.2796 58.65 55.9196C58.01 56.0996 57.65 56.7596 57.83 57.3996C57.98 57.9296 58.46 58.2696 58.98 58.2696C59.09 58.2696 59.2 58.2496 59.31 58.2196C60.95 57.7496 62.05 56.8096 62.78 55.7696C63.24 56.5296 63.84 57.3096 64.62 58.0896C64.85 58.3196 65.16 58.4396 65.47 58.4396C65.78 58.4396 66.08 58.3196 66.32 58.0896C66.79 57.6196 66.79 56.8696 66.32 56.3996V56.3896Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M61.13 65.5801C57.67 64.3701 55.03 66.6201 54.13 67.9701C53.76 68.5201 53.91 69.2601 54.46 69.6301C54.66 69.7701 54.89 69.8301 55.12 69.8301C55.51 69.8301 55.89 69.64 56.12 69.3C56.18 69.2 57.74 66.93 60.34 67.84C60.96 68.06 61.64 67.7301 61.86 67.1101C62.08 66.4901 61.75 65.8 61.13 65.59V65.5801Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M32.3298 52.0901L32.3498 52.0701C32.7898 51.8401 33.1698 51.5801 33.5098 51.2901C34.3198 50.9201 35.5098 50.6801 36.9198 51.3101C37.5198 51.5801 38.2298 51.3101 38.4998 50.7101C38.7698 50.1101 38.4998 49.4001 37.8998 49.1301C36.9698 48.7101 36.1098 48.5501 35.3298 48.5201C35.6798 47.4201 35.7198 46.3601 35.6198 45.6601C35.5298 45.0101 34.9298 44.5601 34.2698 44.6501C33.6198 44.7401 33.1598 45.3401 33.2498 45.9901C33.2598 46.0901 33.4798 47.9801 32.1498 49.2901C31.4598 49.6601 30.9798 50.0701 30.7398 50.2901C30.6498 50.3801 30.5998 50.4401 30.5798 50.4501C30.1298 50.9301 30.1598 51.6901 30.6398 52.1401C30.8698 52.3601 31.1598 52.4601 31.4598 52.4601C31.7798 52.4601 32.0998 52.3301 32.3298 52.0801V52.0901Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M53.7298 38.2401C54.2898 38.8401 54.8998 39.2801 55.5098 39.6001C55.9598 40.2601 56.2898 41.2001 56.0498 42.4701C55.9298 43.1201 56.3598 43.7401 57.0098 43.8601C57.0798 43.8701 57.1498 43.8801 57.2298 43.8801C57.7998 43.8801 58.2998 43.4801 58.4098 42.9001C58.5898 41.9301 58.5498 41.0601 58.3698 40.2901C58.3798 40.2901 58.3998 40.2901 58.4098 40.2901C59.5098 40.2901 60.4698 40.0201 61.0798 39.7401C61.6798 39.4601 61.9298 38.7401 61.6498 38.1501C61.3698 37.5501 60.6498 37.3001 60.0598 37.5801C60.0398 37.5801 58.5898 38.2502 57.0198 37.6602C56.3898 36.9302 55.6798 36.4402 55.1198 36.1802C54.5298 35.9002 53.8198 36.1501 53.5398 36.7401C53.4498 36.9201 53.4298 37.1101 53.4398 37.3001C53.3998 37.6401 53.4898 37.9802 53.7398 38.2502L53.7298 38.2401Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M40.5199 42.6498C40.5199 42.6498 40.5599 42.6498 40.5799 42.6498C41.2199 42.6498 41.7399 42.1498 41.7699 41.5098C41.7999 40.8498 41.2899 40.2898 40.6299 40.2598C37.7899 40.1298 37.0699 37.7498 36.9999 37.4698C36.8399 36.8298 36.1899 36.4498 35.5499 36.6098C34.9099 36.7698 34.5199 37.4198 34.6799 38.0598C35.0599 39.5698 36.7699 42.4798 40.5199 42.6498Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23DB6A79</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M1.76973 93.3199C1.50973 93.0199 1.32973 92.6599 1.22973 92.2599C-0.27027 85.6899 0.41973 71.6399 13.7597 65.4799C14.9997 64.9099 16.4697 65.4499 17.0297 66.6899C17.5997 67.9299 17.0597 69.3899 15.8197 69.9599C2.81973 75.9599 5.89973 90.5499 6.03973 91.1599C6.33973 92.4899 5.49973 93.8099 4.16973 94.1099C3.24973 94.3199 2.32973 93.9799 1.75973 93.3199H1.76973Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M99.46 56.0497C100.16 54.1997 99.99 52.0497 98.81 50.2997C97.93 49.1197 96.88 47.7797 95.51 47.4597C97.56 47.7597 99.42 46.8697 101.11 45.8097C105.15 42.9997 106.24 37.6897 103.43 33.6497C101.5 30.7897 97.52 28.3097 94.29 28.8797L94.96 28.1797C97.47 25.5697 97.22 21.6497 94.78 19.3097C92.17 16.7997 88.25 17.0497 85.91 19.4897C88.42 16.8797 88.34 13.1297 85.39 10.2897C82.78 7.77968 78.86 8.02968 76.52 10.4697L75.85 11.1697C76.3 7.91968 73.66 4.04968 70.73 2.22968C66.58 -0.420318 61.32 0.879682 58.67 5.02968C57.68 6.75968 57.04 8.81968 57.25 10.6897C56.88 9.32968 55.5 8.33968 54.29 7.50968C52.5 6.39968 50.34 6.31968 48.52 7.08968L99.46 56.0597V56.0497Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F6B5B7</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M89.8902 39.7398C89.8902 39.7398 85.0802 38.1298 85.1502 32.8398L89.8902 39.7398Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M86.1899 39.2999C84.7199 37.8899 83.46 35.7599 83.5 32.8099C83.51 31.8999 84.2599 31.1699 85.1699 31.1899C86.0799 31.1999 86.81 31.9499 86.79 32.8599C86.74 36.8999 90.3699 38.1699 90.4099 38.1799C91.2699 38.4699 91.7399 39.3999 91.4499 40.2599C91.1599 41.1199 90.2299 41.5899 89.3699 41.2999C88.4899 41.0099 87.2899 40.3499 86.1899 39.3099V39.2999Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M66.2002 15.2998C66.2002 15.2998 63.7302 19.6098 67.3802 23.4698L66.2002 15.2998Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M83.7699 33.2396C83.8999 33.6096 84.9499 36.8396 81.8799 39.1496L84.2699 41.4496C87.9299 38.3796 87.5899 34.0396 86.8499 32.0796C86.5299 31.2296 85.5899 30.8096 84.7399 31.1296C83.8899 31.4396 83.4599 32.3896 83.7699 33.2396Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M64.8501 22.7701L67.2701 25.0901C67.7201 25.1201 68.1801 24.9801 68.5301 24.6501C69.1901 24.0201 69.2201 22.9801 68.5901 22.3201C65.9001 19.4901 67.4501 16.4401 67.6401 16.1001C68.0801 15.3101 67.8101 14.3101 67.0301 13.8601C66.2401 13.4101 65.2401 13.6801 64.7801 14.4701C63.8801 16.0401 62.9901 19.4801 64.8501 22.7701Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M75.3502 32.8696L82.4102 25.5196C83.0402 24.8596 83.0202 23.8196 82.3602 23.1896C81.7002 22.5596 80.6602 22.5796 80.0302 23.2396L72.9702 30.5896L75.3402 32.8696H75.3502Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M81.33 75.8395C81.71 75.9195 82.12 75.9195 82.52 75.7995C89.01 73.9695 101.01 66.6195 100.01 51.9695C99.92 50.6095 98.74 49.5795 97.38 49.6695C96.02 49.7595 94.99 50.9395 95.08 52.2995C96.05 66.5895 81.77 70.8695 81.16 71.0495C79.85 71.4295 79.09 72.7895 79.47 74.0995C79.73 75.0095 80.46 75.6495 81.32 75.8395H81.33Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M66.8499 124.36H58.8899C58.2199 124.36 57.5699 124.08 57.0999 123.6C56.6399 123.11 56.3899 122.46 56.4199 121.78C56.8399 112.53 56.9899 103.51 56.8599 94.97C56.8399 93.61 57.9299 92.48 59.2899 92.46C60.6799 92.46 61.7799 93.53 61.7999 94.89C61.9199 102.73 61.8099 110.97 61.4699 119.42H66.8499C68.2099 119.42 69.3199 120.52 69.3199 121.89C69.3199 123.26 68.2199 124.36 66.8499 124.36Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M37.1097 124.359H29.1497C27.7897 124.359 26.6797 123.259 26.6797 121.889C26.6797 120.519 27.7797 119.419 29.1497 119.419H34.5297C34.1497 109.929 34.0497 100.729 34.2597 92.0392C34.2897 90.6792 35.4297 89.6092 36.7797 89.6292C38.1397 89.6592 39.2197 90.7892 39.1897 92.1592C38.9697 101.529 39.0997 111.489 39.5697 121.779C39.5997 122.449 39.3597 123.109 38.8897 123.599C38.4197 124.089 37.7797 124.359 37.1097 124.359Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M82.61 59.1901C81.64 58.9501 80.92 58.9501 79.96 58.9501C81.89 58.2301 83.34 55.3301 83.82 52.9201C83.9 52.5501 83.94 52.1901 83.95 51.8301H12.28C12.29 52.1901 12.33 52.5601 12.41 52.9201C12.89 55.3301 14.1 58.2301 16.27 58.9501C15.31 58.9501 14.58 58.9501 13.62 59.1901C8.79997 60.1501 5.89997 64.7401 6.86997 69.5601C7.82997 74.1401 12.18 77.2801 16.76 76.5601C14.59 78.0101 13.62 81.3801 14.11 84.0401C14.83 87.4201 18.21 89.5901 21.59 88.8601C22.56 88.6201 23.52 88.1401 24.24 87.4101C24.24 88.1301 24.24 90.7901 24.48 92.2301C25.2 95.6101 28.58 97.3001 31.96 97.5401C33.89 97.7801 37.99 95.8501 38.71 93.6801V93.9201C38.71 96.5701 40.88 98.5001 43.53 98.5001C46.18 98.5001 48.11 96.3301 48.11 93.9201C48.11 96.5701 50.28 98.5001 52.69 98.5001C55.1 98.5001 57.51 96.3301 57.51 93.9201V93.6801C57.99 95.8501 62.09 97.5401 64.26 97.5401C67.64 97.3001 71.01 95.6101 71.74 92.2301C72.22 90.7801 72.22 88.1301 71.98 87.4101C72.7 88.1301 73.67 88.6201 74.63 88.8601C78.01 89.5801 81.38 87.4101 82.11 84.0401C82.83 81.1501 81.87 77.7701 79.46 76.5601C84.04 77.0401 88.39 74.1501 89.35 69.5601C90.31 64.7401 87.42 60.1501 82.6 59.1901H82.61Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F6B5B7</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3501 83.0902C48.3501 83.0902 50.7601 74.6502 55.5901 74.4102L48.3501 83.0902Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3501 84.7401C48.2001 84.7401 48.0501 84.7201 47.9001 84.6801C47.0301 84.4301 46.5201 83.5201 46.7701 82.6501C47.0501 81.6701 49.6701 73.0701 55.5101 72.7701C56.4401 72.7201 57.1901 73.4201 57.2401 74.3301C57.2801 75.2401 56.5901 76.0101 55.6801 76.0601C52.7001 76.2101 50.4901 81.6601 49.9401 83.5501C49.7301 84.2701 49.0701 84.7401 48.3601 84.7401H48.3501Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3501 74.1692C48.3501 73.6892 47.6301 67.8992 42.5601 66.4492L48.3501 74.1692Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3498 75.8092C47.4498 75.8092 46.7198 75.0892 46.6998 74.1992C46.6798 73.9992 46.1698 69.1893 42.0998 68.0293C41.2298 67.7793 40.7198 66.8693 40.9698 65.9993C41.2198 65.1293 42.1298 64.6192 42.9998 64.8692C48.7398 66.5092 49.9798 72.7193 49.9798 74.1693C49.9798 75.0793 49.2398 75.8193 48.3298 75.8193L48.3498 75.8092Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M38.9401 86.1792C38.0801 86.1792 37.3601 85.5192 37.3001 84.6492C37.2301 83.6992 36.3201 75.4392 26.7101 75.8092C25.8101 75.8492 25.0401 75.1392 25.0001 74.2292C24.9601 73.3192 25.6701 72.5592 26.5801 72.5192C39.6301 71.9792 40.5901 84.2992 40.5901 84.4292C40.6501 85.3392 39.9601 86.1192 39.0601 86.1792C39.0201 86.1792 38.9901 86.1792 38.9501 86.1792H38.9401Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M34.3599 76.3396C34.3599 76.3396 30.7399 72.7196 33.1499 68.1396L34.3599 76.3396Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M34.3602 77.9796C33.9402 77.9796 33.5202 77.8196 33.2002 77.4996C31.6502 75.9496 29.3502 71.8396 31.7002 67.3696C32.1202 66.5696 33.1202 66.2596 33.9202 66.6796C34.7202 67.0996 35.0302 68.0996 34.6102 68.8996C32.8102 72.3196 35.4202 75.0596 35.5302 75.1796C36.1602 75.8296 36.1502 76.8696 35.5102 77.4996C35.1902 77.8196 34.7702 77.9796 34.3502 77.9796H34.3602Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M71.99 71.2298C71.57 71.2298 71.15 71.0698 70.83 70.7498C61.59 61.5098 70 52.6098 70.09 52.5198C70.72 51.8698 71.76 51.8498 72.42 52.4798C73.07 53.1098 73.09 54.1498 72.46 54.7998C71.81 55.4798 66.35 61.6098 73.16 68.4198C73.8 69.0598 73.8 70.0998 73.16 70.7498C72.84 71.0698 72.42 71.2298 72 71.2298H71.99Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M68.3798 62.8301C68.3798 62.8301 68.1398 67.9001 63.0698 69.3401L68.3798 62.8301Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M63.0699 70.9898C62.3499 70.9898 61.6899 70.5198 61.4899 69.7998C61.2399 68.9298 61.7499 68.0198 62.6199 67.7698C66.4499 66.6798 66.7299 62.9098 66.7399 62.7498C66.7999 61.8498 67.5799 61.1398 68.4699 61.1998C69.3699 61.2498 70.0699 62.0098 70.0199 62.9098C69.9199 65.0698 68.4299 69.5298 63.5199 70.9298C63.3699 70.9698 63.2199 70.9898 63.0699 70.9898Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M57.7598 85.2594C57.7598 85.2594 60.6498 80.9194 65.4798 82.6094L57.7598 85.2594Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M57.7598 86.9097C57.4498 86.9097 57.1298 86.8197 56.8498 86.6297C56.0898 86.1297 55.8898 85.0997 56.3898 84.3497C57.6398 82.4797 61.2598 79.3897 66.0198 81.0597C66.8798 81.3597 67.3298 82.2997 67.0298 83.1597C66.7298 84.0197 65.7898 84.4697 64.9298 84.1697C61.3498 82.9197 59.2098 86.0497 59.1198 86.1797C58.7998 86.6597 58.2798 86.9097 57.7498 86.9097H57.7598Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3501 65.4802C48.3501 65.4802 49.5601 60.6602 54.8601 60.4102L48.3501 65.4802Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M48.3499 67.1201C48.2099 67.1201 48.0799 67.1001 47.9399 67.0701C47.0599 66.8401 46.5299 65.9601 46.7499 65.0801C47.2699 63.0001 49.6199 59.0001 54.7799 58.7701C55.7199 58.7201 56.4599 59.4301 56.4999 60.3401C56.5399 61.2501 55.8399 62.0201 54.9299 62.0601C51.0199 62.2401 50.0299 65.5201 49.9299 65.8901C49.7299 66.6301 49.0699 67.1201 48.3399 67.1201H48.3499Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M29.2999 53.8994C29.2999 53.8994 30.0199 58.9694 25.4399 61.1394L29.2999 53.8994Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M25.44 62.7797C24.82 62.7797 24.23 62.4297 23.95 61.8397C23.56 61.0197 23.91 60.0397 24.73 59.6497C28.13 58.0397 27.68 54.2797 27.66 54.1197C27.54 53.2197 28.17 52.3897 29.07 52.2697C29.97 52.1497 30.79 52.7697 30.92 53.6597C31.23 55.8297 30.63 60.4897 26.14 62.6197C25.91 62.7297 25.67 62.7797 25.44 62.7797Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M25.1997 61.3792C25.1997 61.3792 28.5797 57.7593 33.3997 59.9293L25.1997 61.3792Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23E3C1C1</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M25.1899 63.0292C24.7899 63.0292 24.3799 62.8792 24.0699 62.5892C23.4099 61.9692 23.3699 60.9292 23.9899 60.2592C24.1599 60.0792 28.2399 55.8092 34.0699 58.4292C34.8999 58.7992 35.2699 59.7792 34.8999 60.6092C34.5299 61.4392 33.5499 61.8092 32.7199 61.4392C29.0099 59.7692 26.4199 62.4792 26.3999 62.5092C26.0799 62.8592 25.6399 63.0292 25.1999 63.0292H25.1899Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M41.1401 51.8196C41.3501 52.1796 41.6801 52.4596 42.1101 52.5796C46.0601 53.7096 46.6801 58.5296 46.7101 58.7996C46.7501 59.6696 47.4701 60.3596 48.3501 60.3596C49.2301 60.3596 50.0001 59.6196 50.0001 58.7096C50.0001 57.8596 49.3801 54.3596 46.9501 51.8096H41.1401V51.8196Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M46.71 51.8193V87.1893C46.71 88.0993 47.45 88.8393 48.36 88.8393C49.27 88.8393 50.01 88.0993 50.01 87.1893V51.8193H46.72H46.71Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23F39C9D</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M60.8998 76.8894C62.8991 76.8894 64.5198 75.2687 64.5198 73.2694C64.5198 71.2701 62.8991 69.6494 60.8998 69.6494C58.9005 69.6494 57.2798 71.2701 57.2798 73.2694C57.2798 75.2687 58.9005 76.8894 60.8998 76.8894Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M35.33 76.8894C37.3292 76.8894 38.95 75.2687 38.95 73.2694C38.95 71.2701 37.3292 69.6494 35.33 69.6494C33.3307 69.6494 31.71 71.2701 31.71 73.2694C31.71 75.2687 33.3307 76.8894 35.33 76.8894Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M43.3896 79.7197C43.3896 79.7197 47.8396 83.1797 51.7996 79.7197H43.3896Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M47.8697 83.7197C45.3497 83.7197 43.0997 82.6197 41.8697 81.6697C40.7897 80.8297 40.5997 79.2797 41.4397 78.1997C42.2697 77.1297 43.8197 76.9297 44.8997 77.7597C45.2097 77.9897 47.8797 79.8697 50.1697 77.8597C51.1997 76.9597 52.7597 77.0697 53.6597 78.0897C54.5597 79.1197 54.4497 80.6797 53.4297 81.5797C51.6197 83.1597 49.6797 83.7297 47.8797 83.7297L47.8697 83.7197Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M33 21.0398C32.58 21.0398 32.23 20.6998 32.23 20.2698V15.8198C32.23 15.3998 32.57 15.0498 33 15.0498C33.43 15.0498 33.77 15.3898 33.77 15.8198V20.2698C33.77 20.6898 33.43 21.0398 33 21.0398Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M20.5699 28.6298C20.4599 28.6298 20.3499 28.6098 20.2499 28.5598L16.2599 26.7199C15.8799 26.5399 15.7099 26.0898 15.8799 25.6998C16.0599 25.3198 16.5099 25.1498 16.8999 25.3198L20.8899 27.1598C21.2699 27.3398 21.4399 27.7898 21.2699 28.1798C21.1399 28.4598 20.8599 28.6298 20.5699 28.6298Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M18.9598 35.1494H14.5898C14.1698 35.1494 13.8198 34.8094 13.8198 34.3794C13.8198 33.9494 14.1598 33.6094 14.5898 33.6094H18.9598C19.3798 33.6094 19.7298 33.9494 19.7298 34.3794C19.7298 34.8094 19.3898 35.1494 18.9598 35.1494Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3Cpath d=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">M25.4 23.5698C25.14 23.5698 24.88 23.4398 24.74 23.1998L22.36 19.2098C22.14 18.8498 22.26 18.3798 22.63 18.1598C22.99 17.9398 23.47 18.0598 23.68 18.4298L26.06 22.4198C26.28 22.7798 26.16 23.2498 25.79 23.4698C25.67 23.5398 25.53 23.5798 25.4 23.5798V23.5698Z</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%23D94C5E</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">clip0_3175_23204</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">%3E%3Crect width=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">105</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> height=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">125</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value"> fill=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">white</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value"> width=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">105</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value"> height=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">125</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">&gt;</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Quiz</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

components/spinner/README.md

@@ -1,37 +0,14 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
-- Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--docs)
-- Storybook (Latest): [Spinner](https://designsystem-latest.dn.se/?path=/docs/basic-spinner--docs)
-----
+Spinner
+=======
 
-# Spinner
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
+*   Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--docs)
 
-## Parameters
+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/spinner/spinner.scss'`
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | no | brand, onBrand, onBusiness, primary, secondary, staticBlack, staticWhite | primary | Design variant |
-|size| String | no | large, small, xsmall | large | |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|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 |
+<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">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"brand"</span><span class="css-o1d7ko">"secondary"</span><span class="css-o1d7ko">"primary"</span><span class="css-o1d7ko">"onBrand"</span><span class="css-o1d7ko">"onBusiness"</span><span class="css-o1d7ko">"staticBlack"</span><span class="css-o1d7ko">"staticWhite"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"primary"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">size</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span><span class="css-o1d7ko">"small"</span><span class="css-o1d7ko">"xsmall"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span></div></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><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></tbody></table>
 
-## 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/spinner/spinner.njk' import Spinner %}
-
-{{ Spinner({
-  variant: "primary",
-  size: "small",
-  classNames: "my-spinner-class"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/spinner/spinner";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Spinner</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">size</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">large</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">primary</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

components/teaser-large/README.md

@@ -22,3 +22,2 @@ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
@@ -25,0 +24,0 @@ |bylineHtml | HTML String | no | | | Side image of the author |

components/teaser-onsite/README.md

@@ -13,2 +13,9 @@ TeaserOnsite
 
-<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">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</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">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></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-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><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">mediaHtml</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">title</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">text</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></tbody></table>
+<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">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</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">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></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-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><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">mediaHtml</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">title</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">text</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></tbody></table>
+
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">mediaHtml="&lt;figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&amp;quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&amp;quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

components/teaser-split/README.md

@@ -22,3 +22,2 @@ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-split](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-split)
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
@@ -25,0 +24,0 @@ |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |

components/teaser-standard/README.md

@@ -22,3 +22,2 @@ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
@@ -25,0 +24,0 @@ |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |

package.json

 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.2.1-beta.0",
+  "version": "22.0.0",
   "description": "DN design system for web.",
-  "main": "index.tsx",
   "type": "module",
-  "source": "index.tsx",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -20,10 +18,3 @@ "repository": {
   "exports": {
-    "./preact": {
-      "import": "./preact/components.esm.js",
-      "require": "./preact/components.cjs"
-    },
-    "./react": {
-      "import": "./react/components.esm.js",
-      "require": "./react/components.cjs"
-    },
+    "./preact/*": "./preact/*",
     "./assets/*.tsx": "./assets/*.tsx",
@@ -38,8 +29,7 @@ "./assets/*.njk": "./assets/*.njk",
     "./tokens/*.json": "./tokens/*.json",
+    "./types-lib/*.ts": "./types-lib/*.ts",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "preact": "^10.24.0"
   },
@@ -49,8 +39,2 @@ "peerDependenciesMeta": {
       "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
     }
@@ -66,4 +50,2 @@ },
     "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
@@ -70,0 +52,0 @@ "stylelint": "^15.11.0",

tokens/colors-css-variables.json

@@ -15,3 +15,2 @@ {
   "text-positive": "var(--ds-color-text-positive)",
-  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
@@ -27,3 +26,2 @@ "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
-  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
@@ -53,3 +51,2 @@ "component-business": "var(--ds-color-component-business)",
   "surface-inverted": "var(--ds-color-surface-inverted)",
-  "surface-breaking": "var(--ds-color-surface-breaking)",
   "border-primary": "var(--ds-color-border-primary)",
@@ -66,3 +63,2 @@ "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-brand": "var(--ds-color-border-brand)",
-  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
@@ -93,2 +89,2 @@ "static-red-100": "var(--ds-color-static-red-100)",
   "gradient-content-fade-down": "var(--ds-color-gradient-content-fade-down)"
-}
+}

tokens/colors-dark-mode.json

 {
   "text": {
-    "primary": "#ededed",
-    "primary-02": "#b8b8b8",
+    "primary": "#EDEDED",
+    "primary-02": "#B8B8B8",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#ffffff",
@@ -12,14 +12,13 @@ "on-business": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#fd2330",
-    "body-link": "#65a0fc",
-    "body-link-visited": "#65a0fc",
-    "positive": "#3a8352",
-    "culture": "#4293d7"
+    "brand": "#FD2330",
+    "body-link": "#65A0FC",
+    "body-link-visited": "#65A0FC",
+    "positive": "#3A8352"
   },
   "icon": {
-    "primary": "#ededed",
-    "primary-02": "#cfcfcf",
+    "primary": "#EDEDED",
+    "primary-02": "#CFCFCF",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#141414",
@@ -29,47 +28,44 @@ "on-critical": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "brand": "#FD2330"
   },
   "component": {
-    "brand": "#fd2330",
-    "business": "#3a8352",
-    "primary": "#ededed",
-    "primary-overlay": "rgba(255, 255, 255, 0.13)",
-    "primary-overlay-02": "#9e9e9e",
+    "brand": "#FD2330",
+    "business": "#3A8352",
+    "primary": "#EDEDED",
+    "primary-overlay": "#ffffff21",
+    "primary-overlay-02": "#9E9E9E",
     "secondary": "#050505",
-    "secondary-overlay": "rgba(8, 8, 8, 0.13)",
-    "secondary-overlay-02": "rgba(8, 8, 8, 0.2)",
-    "critical": "#ef7171",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#08080821",
+    "secondary-overlay-02": "#08080833",
+    "critical": "#EF7171",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#171717",
+    "below": "#262626",
     "background": "#050505",
-    "raised": "#2b2b2b",
-    "native-article": "#2b2b2b",
-    "elevated": "#2b2b2b",
+    "raised": "#2B2B2B",
+    "native-article": "#2B2B2B",
+    "elevated": "#2B2B2B",
     "inverted": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D"
   },
   "border": {
-    "primary": "rgba(255, 255, 255, 0.19)",
-    "primary-02": "rgba(255, 255, 255, 0.4)",
-    "primary-03": "#ededed",
+    "primary": "#3B3B3B",
+    "primary-02": "#ffffff66",
+    "primary-03": "#EDEDED",
     "secondary": "#141414",
-    "business": "#3a8352",
-    "critical": "#fd2330",
-    "focus": "#fd2330",
+    "business": "#3A8352",
+    "critical": "#FD2330",
+    "focus": "#FD2330",
     "focus-02": "#ffffff",
-    "focus-03": "#fd2330",
-    "focus-04": "#3a8352",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "focus-03": "#FD2330",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
@@ -87,23 +83,23 @@ "background": {
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "kultur": "#568cbb",
-    "economy": "#60bca1",
-    "sport": "#f58d2d",
-    "neutral-200": "#e0e0e0",
-    "sthlm": "#ff589b",
-    "ad-yellow": "#ffeac2",
-    "neutral-100": "#ededed",
-    "neutral-500": "#9e9e9e",
-    "red-500": "#da000d",
-    "yellow": "#ffe600",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   }
 }

tokens/colors-light-mode.json

@@ -6,3 +6,3 @@ {
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "critical": "#DA000D",
     "disabled": "#666666",
@@ -13,7 +13,6 @@ "on-brand": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#da000d",
-    "body-link": "#4373ce",
-    "body-link-visited": "#4373ce",
-    "positive": "#3a8352",
-    "culture": "#227ac3"
+    "brand": "#DA000D",
+    "body-link": "#4373CE",
+    "body-link-visited": "#4373CE",
+    "positive": "#3A8352"
   },
@@ -24,53 +23,50 @@ "icon": {
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "critical": "#DA000D",
     "disabled": "#666666",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#da000d",
+    "brand": "#DA000D",
     "on-critical": "#ffffff",
-    "on-success": "#ffffff",
-    "culture": "#227ac3"
+    "on-success": "#ffffff"
   },
   "component": {
-    "brand": "#da000d",
-    "business": "#3a8352",
+    "brand": "#DA000D",
+    "business": "#3A8352",
     "primary": "#141414",
-    "primary-overlay": "rgba(8, 8, 8, 0.13)",
-    "primary-overlay-02": "rgba(8, 8, 8, 0.2)",
+    "primary-overlay": "#08080821",
+    "primary-overlay-02": "#08080833",
     "secondary": "#ffffff",
-    "secondary-overlay": "rgba(255, 255, 255, 0.13)",
-    "secondary-overlay-02": "rgba(255, 255, 255, 0.2)",
-    "critical": "#ea3e3f",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#ffffff21",
+    "secondary-overlay-02": "#ffffff33",
+    "critical": "#EA3E3F",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#f2f2f2",
-    "native-article": "#ededed",
+    "below": "#EDEDED",
+    "native-article": "#EDEDED",
     "background": "#ffffff",
-    "raised": "#ededed",
+    "raised": "#EDEDED",
     "elevated": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "inverted": "#141414",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D",
+    "inverted": "#141414"
   },
   "border": {
-    "primary": "rgba(5, 5, 5, 0.13)",
-    "primary-02": "rgba(8, 8, 8, 0.4)",
+    "primary": "#08080821",
+    "primary-02": "#08080866",
     "primary-03": "#050505",
     "secondary": "#ffffff",
-    "business": "#3a8352",
-    "critical": "#da000d",
-    "focus": "#da000d",
+    "business": "#3A8352",
+    "critical": "#DA000D",
+    "focus": "#DA000D",
     "focus-02": "#141414",
-    "focus-03": "#da000d",
-    "focus-04": "#3a8352",
-    "brand": "#da000d",
-    "culture": "#227ac3"
+    "focus-03": "#DA000D",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
@@ -81,22 +77,22 @@ "background": {
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "kultur": "#568cbb",
-    "economy": "#60bca1",
-    "sport": "#f58d2d",
-    "neutral-200": "#e0e0e0",
-    "sthlm": "#ff589b",
-    "ad-yellow": "#ffeac2",
-    "neutral-100": "#ededed",
-    "neutral-500": "#9e9e9e",
-    "red-500": "#da000d",
-    "yellow": "#ffe600",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   },
@@ -103,0 +99,0 @@ "gradient": {

tokens/typography-list.json

@@ -19,3 +19,2 @@ {
   "detailteaser-large": "'detailteaser-large'",
-  "detailteaser-breaking": "'detailteaser-breaking'",
   "detailteaser-large-opinion": "'detailteaser-large-opinion'",
@@ -22,0 +21,0 @@ "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",

tsconfig.json

 {
   "extends": "@bonniernews/tsconfig",
-  "include": ["index.tsx", "components/**/*.tsx"] ,
+  "include": ["components/**/*.tsx", "types-lib/**/*.ts", "index.d.ts"],
   "compilerOptions": {
@@ -12,3 +12,4 @@ "moduleResolution": "Bundler",
     "typeRoots": [
-      "node_modules/@types"
+      "node_modules/@types",
+      "types-lib/*.ts"
     ],
@@ -15,0 +16,0 @@ "jsx": "react-jsx",

variables/colors-css-variables.json

@@ -10,5 +10,5 @@ {
   "surface-brand": "var(--ds-color-surface-brand)",
+  "surface-culture": "var(--ds-color-surface-culture)",
   "surface-breaking": "var(--ds-color-surface-breaking)",
   "surface-overlay": "var(--ds-color-surface-overlay)",
-  "border-brand": "var(--ds-color-border-brand)",
   "border-primary": "var(--ds-color-border-primary)",
@@ -20,2 +20,4 @@ "border-primary-strong": "var(--ds-color-border-primary-strong)",
   "border-primaryinvert-strongest": "var(--ds-color-border-primaryinvert-strongest)",
+  "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "text-primary": "var(--ds-color-text-primary)",
@@ -28,2 +30,3 @@ "text-primary-subtle": "var(--ds-color-text-primary-subtle)",
   "text-brand": "var(--ds-color-text-brand)",
+  "text-culture": "var(--ds-color-text-culture)",
   "text-critical": "var(--ds-color-text-critical)",
@@ -57,21 +60,16 @@ "text-on-brand": "var(--ds-color-text-on-brand)",
   "culture-1100": "var(--ds-color-culture-1100)",
-  "sport-0": "var(--ds-color-sport-0)",
-  "sport-100": "var(--ds-color-sport-100)",
-  "sport-200": "var(--ds-color-sport-200)",
-  "sport-300": "var(--ds-color-sport-300)",
-  "sport-400": "var(--ds-color-sport-400)",
-  "sport-500": "var(--ds-color-sport-500)",
-  "sport-600": "var(--ds-color-sport-600)",
-  "sport-700": "var(--ds-color-sport-700)",
-  "sport-800": "var(--ds-color-sport-800)",
-  "sport-900": "var(--ds-color-sport-900)",
-  "sport-1000": "var(--ds-color-sport-1000)",
-  "sport-1100": "var(--ds-color-sport-1100)",
-  "bright-neutral-0": "var(--ds-color-bright-neutral-0)",
-  "bright-neutral-100": "var(--ds-color-bright-neutral-100)",
-  "bright-neutral-200": "var(--ds-color-bright-neutral-200)",
-  "bright-neutral-300": "var(--ds-color-bright-neutral-300)",
-  "bright-neutral-400": "var(--ds-color-bright-neutral-400)",
-  "bright-neutral-500": "var(--ds-color-bright-neutral-500)",
-  "bright-neutral-050": "var(--ds-color-bright-neutral-050)",
+  "neutral-100": "var(--ds-color-neutral-100)",
+  "neutral-200": "var(--ds-color-neutral-200)",
+  "neutral-300": "var(--ds-color-neutral-300)",
+  "neutral-400": "var(--ds-color-neutral-400)",
+  "neutral-500": "var(--ds-color-neutral-500)",
+  "neutral-600": "var(--ds-color-neutral-600)",
+  "neutral-700": "var(--ds-color-neutral-700)",
+  "neutral-800": "var(--ds-color-neutral-800)",
+  "neutral-900": "var(--ds-color-neutral-900)",
+  "neutral-1000": "var(--ds-color-neutral-1000)",
+  "neutral-1100": "var(--ds-color-neutral-1100)",
+  "neutral-white": "var(--ds-color-neutral-white)",
+  "neutral-050": "var(--ds-color-neutral-050)",
+  "neutral-black": "var(--ds-color-neutral-black)",
   "bright-neutral-alpha-100": "var(--ds-color-bright-neutral-alpha-100)",
@@ -83,9 +81,2 @@ "bright-neutral-alpha-200": "var(--ds-color-bright-neutral-alpha-200)",
   "bright-neutral-alpha-050": "var(--ds-color-bright-neutral-alpha-050)",
-  "dark-neutral-0": "var(--ds-color-dark-neutral-0)",
-  "dark-neutral-100": "var(--ds-color-dark-neutral-100)",
-  "dark-neutral-200": "var(--ds-color-dark-neutral-200)",
-  "dark-neutral-300": "var(--ds-color-dark-neutral-300)",
-  "dark-neutral-400": "var(--ds-color-dark-neutral-400)",
-  "dark-neutral-500": "var(--ds-color-dark-neutral-500)",
-  "dark-neutral-050": "var(--ds-color-dark-neutral-050)",
   "dark-neutral-alpha-100": "var(--ds-color-dark-neutral-alpha-100)",
@@ -92,0 +83,0 @@ "dark-neutral-alpha-200": "var(--ds-color-dark-neutral-alpha-200)",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1497942

increased by36.28%

Dependency count

1

decreased by-66.67%

Dev dependency count

14

decreased by-12.5%

Number of package files

475

increased by0.64%

Lines of code

2219

increased by23.83%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of low supply chain risk alerts

14

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes