@bonniernews/dn-design-system-web 2.1.0-alpha.2 → 2.1.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,164 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.19...@bonniernews/dn-design-system-web@2.1.0-alpha.20) (2023-03-01)
+
+
+### Bug Fixes
+
+* **web:** update readme and js param for blocked content ([#707](https://github.com/BonnierNews/dn-design-system/issues/707)) ([e043945](https://github.com/BonnierNews/dn-design-system/commit/e043945592be4ea031fd029b9b9eb04fd4f799aa))
+
+
+
+## 2.1.0-alpha.19 (2023-03-01)
+
+
+### Bug Fixes
+
+* **web:** byline and listitem outer spacing ([#705](https://github.com/BonnierNews/dn-design-system/issues/705)) ([35b1b1b](https://github.com/BonnierNews/dn-design-system/commit/35b1b1bd2e77e0ae8955ce11e4ab86420126a1ab))
+
+
+
+## [2.1.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.17...@bonniernews/dn-design-system-web@2.1.0-alpha.18) (2023-02-27)
+
+
+### Bug Fixes
+
+* **web:** removed top border and update tests threshold ([#701](https://github.com/BonnierNews/dn-design-system/issues/701)) ([058b8d6](https://github.com/BonnierNews/dn-design-system/commit/058b8d68e5521ecc82f5ee879e317384042ec81b))
+
+
+
+## 2.1.0-alpha.17 (2023-02-27)
+
+
+### Features
+
+* **web:** blocked content component ([#691](https://github.com/BonnierNews/dn-design-system/issues/691)) ([15ac04e](https://github.com/BonnierNews/dn-design-system/commit/15ac04e5af5785ad99a34a11281e39dfd330dbae))
+
+
+
+## [2.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.15...@bonniernews/dn-design-system-web@2.1.0-alpha.16) (2023-02-24)
+
+
+### Features
+
+* **web:** web byline component ([#693](https://github.com/BonnierNews/dn-design-system/issues/693)) ([7ba1b30](https://github.com/BonnierNews/dn-design-system/commit/7ba1b30fda13c54ada24631e47bb8b3be580f274))
+
+
+
+## [2.1.0-alpha.15](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.14...@bonniernews/dn-design-system-web@2.1.0-alpha.15) (2023-02-23)
+
+
+### Features
+
+* **web:** native variant of disclaimer ([#696](https://github.com/BonnierNews/dn-design-system/issues/696)) ([1294432](https://github.com/BonnierNews/dn-design-system/commit/1294432532d92ec7cb1c1db21e489da0a36ec43c))
+
+
+
+## [2.1.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.13...@bonniernews/dn-design-system-web@2.1.0-alpha.14) (2023-02-23)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [2.1.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.12...@bonniernews/dn-design-system-web@2.1.0-alpha.13) (2023-02-23)
+
+
+### Bug Fixes
+
+* **web:** sthlm variants for quote/factbox and refactor thematic break ([#694](https://github.com/BonnierNews/dn-design-system/issues/694)) ([3122e04](https://github.com/BonnierNews/dn-design-system/commit/3122e0474e5c40176234e6efbf17447d4c85aa6f))
+
+
+
+## [2.1.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.11...@bonniernews/dn-design-system-web@2.1.0-alpha.12) (2023-02-22)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 2.1.0-alpha.11 (2023-02-22)
+
+
+### Bug Fixes
+
+* **web:** grade accessibility ([#689](https://github.com/BonnierNews/dn-design-system/issues/689)) ([16cb2ea](https://github.com/BonnierNews/dn-design-system/commit/16cb2eaf3b32d62c6968e6846b1a7b13c05c82eb))
+
+
+
+## [2.1.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.9...@bonniernews/dn-design-system-web@2.1.0-alpha.10) (2023-02-21)
+
+
+### Bug Fixes
+
+* **web:** redo review grades to match new design ([#685](https://github.com/BonnierNews/dn-design-system/issues/685)) ([f617440](https://github.com/BonnierNews/dn-design-system/commit/f617440501709d4a6114f41c4a08d3761f5951e6))
+
+
+
+## [2.1.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.8...@bonniernews/dn-design-system-web@2.1.0-alpha.9) (2023-02-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [2.1.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.7...@bonniernews/dn-design-system-web@2.1.0-alpha.8) (2023-02-20)
+
+
+### Bug Fixes
+
+* **web:** remove borders from review icons ([#683](https://github.com/BonnierNews/dn-design-system/issues/683)) ([f47ef42](https://github.com/BonnierNews/dn-design-system/commit/f47ef424be3d537af47c841c225d35f3a3d56535))
+
+
+
+## [2.1.0-alpha.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.6...@bonniernews/dn-design-system-web@2.1.0-alpha.7) (2023-02-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [2.1.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.5...@bonniernews/dn-design-system-web@2.1.0-alpha.6) (2023-02-20)
+
+
+### Features
+
+* **web:** quote component for web ([#675](https://github.com/BonnierNews/dn-design-system/issues/675)) ([599c7d9](https://github.com/BonnierNews/dn-design-system/commit/599c7d9012b7a9677c31b42196189c6b8bba04e3))
+
+
+
+## [2.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.4...@bonniernews/dn-design-system-web@2.1.0-alpha.5) (2023-02-20)
+
+
+### Features
+
+* **web:** thematic break ([#673](https://github.com/BonnierNews/dn-design-system/issues/673)) ([6a48aac](https://github.com/BonnierNews/dn-design-system/commit/6a48aac61f29243afcc5980f6e4ba70e3ee7b1c1))
+
+
+
+## [2.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.3...@bonniernews/dn-design-system-web@2.1.0-alpha.4) (2023-02-20)
+
+
+### Bug Fixes
+
+* **web:** add element attributes to list items ([#676](https://github.com/BonnierNews/dn-design-system/issues/676)) ([5858f74](https://github.com/BonnierNews/dn-design-system/commit/5858f74d99d24bec38b4d404b4b4dcbfacfab9d1))
+
+
+
+## [2.1.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.2...@bonniernews/dn-design-system-web@2.1.0-alpha.3) (2023-02-17)
+
+
+### Features
+
+* **web:** factbox component ([#672](https://github.com/BonnierNews/dn-design-system/issues/672)) ([310447e](https://github.com/BonnierNews/dn-design-system/commit/310447e35638aa7a289db613ee9e754098ed9718))
+
+
+
 ## 2.1.0-alpha.2 (2023-02-17)
 
 

package/components/blocked-content/README.md

@@ -0,0 +1,60 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/blocked-content](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/blocked-content)
+- Storybook (PROD): [BlockedContent > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-blocked-content-web--standard)
+- Storybook (LATEST): [BlockedContent > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-blocked-content-web--standard)
+
+----
+
+# Blocked Content
+
+This component is available as either a Nunjuck component or a JavaScript component. In Bang we only use the JavaScript variant. The Nunjuck implementation is mostly used to generate the html markup used in the JavaScript component.
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | |
+|body | HTML String | yes | | | |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on button element. Same structure as attributes above |
+|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 |
+|vendor | String | yes (only in JavaScript) | | | JavaScript attribute, not available as njk-parameter |
+
+## 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/blocked-content/blocked-content.njk' import BlockedContent %}
+
+{{ BlockedContent({
+  title: 'Hoppsan, här saknas något',
+  body: 'Innehållet från Twitter kunde inte visas på grund av dina val i cookie-inställningarna.'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/blocked-content/blocked-content" as *;
+```
+
+### Javascript
+
+```javascript
+import { dsBlockedContent } from '@bonniernews/dn-design-system-web/components/blocked-content/blocked-content.js'
+
+// avalaible javascript parameters, matches njk paramaters + vendor:
+const parameters = { 
+  vendor: "YouTube",
+  title: "Videon kunde ej visas",
+  body: "För att spela videon behöver du gå till “Inställningar per partner” och godkänna Screen9 AB", // overrides vendor
+  classNames: "test-class",
+  forcePx: false,
+  attributes: { "data-test" : "test-value" },
+  elementAttributes: { "onclick": "javascript:Didomi.notice.show()" }
+}
+
+const blockedContentHtml = dsBlockedContent(parameters);
+```

package/components/blocked-content/blocked-content.js

@@ -0,0 +1,83 @@
+export {
+  dsBlockedContent,
+  dsBlockedContentStory
+};
+
+function dsBlockedContent(params) {
+  params = params || {};
+
+  const blockedContentTmpl = document.createElement("div");
+  // NOTE: this should match output of blocked-content.njk
+  blockedContentTmpl.innerHTML = `
+    <div class="ds-blocked-content">
+      <div class="ds-blocked-content__inner">
+        <div class="ds-blocked-content__content">
+          <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
+          <div class="ds-blocked-content__body">Innehållet från <span class='ds-blocked-content__vendor'></span> kunde inte visas på grund av dina val i cookie-inställningarna.</div>
+        </div>
+        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--condensed ds-btn--small ds-btn--full-width">
+          <div class="ds-btn__inner">
+            <span>Integritetsinställningar</span>
+            <div class="ds-spinner ds-spinner--small ds-spinner--primary">
+              <div class="ds-spinner__inner"></div>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  `;
+
+  const newBlockedContent = blockedContentTmpl.getElementsByClassName("ds-blocked-content")[0];
+  const btnEl = newBlockedContent.getElementsByClassName("ds-btn")[0];
+
+  if (params.vendor) {
+    const vendorEl = newBlockedContent.getElementsByClassName("ds-blocked-content__vendor")[0];
+    vendorEl.textContent = params.vendor;
+  }
+  
+  if (params.title) {
+    const titleEl = newBlockedContent.getElementsByClassName("ds-blocked-content__title")[0];
+    titleEl.textContent = params.title;
+  }
+
+  if (params.body) {
+    const titleEl = newBlockedContent.getElementsByClassName("ds-blocked-content__body")[0];
+    titleEl.textContent = params.body;
+  }
+
+  if (params.classNames) {
+    newBlockedContent.classList.add(params.classNames);
+  }
+
+  if (params.forcePx) {
+    newBlockedContent.classList.add("ds-force-px");
+    btnEl.classList.add("ds-force-px");
+  }
+
+  if (params.attributes) {
+    for (const [key, value] of Object.entries(params.attributes)) {
+      newBlockedContent.setAttribute(key, value);
+    }
+  }
+
+  if (params.elementAttributes) {
+    for (const [key, value] of Object.entries(params.elementAttributes)) {
+      btnEl.setAttribute(key, value);
+    }
+  }
+
+  return newBlockedContent;
+}
+
+/** only use in storybook */
+function dsBlockedContentStory() {
+  const blockedContentElements = Array.from(document.getElementsByClassName("js-ds-blocked-content-story"));
+  if (!blockedContentElements.length) return;
+
+  blockedContentElements.forEach((blockedContentEl) => {
+    const params = JSON.parse(blockedContentEl.getAttribute("data-params"));
+
+    const newBlockedContent = dsBlockedContent(params);
+    blockedContentEl.replaceWith(newBlockedContent);
+  });
+}

package/components/blocked-content/blocked-content.njk

@@ -0,0 +1,38 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro BlockedContent(params) %}
+  {% set componentClassName = "ds-blocked-content" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="{{ componentClassName + '__content'}}">
+        <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
+        <div class="{{ componentClassName + '__body'}}">{{ params.body }}</div>
+      </div>
+      {{ Button({
+          text: 'Integritetsinställningar',
+          variant: 'secondaryFilled',
+          size: 'small',
+          classNames: '',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true,
+          attributes: params.elementAttributes
+        })}}
+    </div>
+  </div>
+{% endmacro %}

package/components/blocked-content/blocked-content.scss

@@ -0,0 +1,34 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+.ds-blocked-content {
+  background-color: $ds-color-surface-background;
+  margin: 0;
+  padding: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+
+  .ds-blocked-content__inner {
+    text-align: center;
+    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-metrics-border-radius(x1);
+    padding: ds-spacing-component(x8 x4 x4);
+  }
+
+  .ds-blocked-content__body {
+    margin: ds-spacing-component(0 0 x8);
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: $ds-color-text-primary;
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+  }
+  .ds-blocked-content__title {
+    @include ds-typography($ds-typography-functional-heading01medium);
+    color: $ds-color-text-primary;
+    margin: 0 0 ds-spacing-component(x2);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-heading01medium, true);
+    }
+  }
+}

package/components/button/README.md

@@ -15,6 +15,7 @@
 |size| String | no | default, small | default | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |iconPosition | String | no | none, left, right | none | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
 |loading | bool | no | true, false | false | |

package/components/button/button.njk

@@ -30,6 +30,10 @@
     {% set variant = (variant.push("ds-force-px"), variant) %}
   {% endif %}
 
+  {% if params.condensed %}
+    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {% endif %}
+
   {% if params.size and params.size != "default" %}
     {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
   {% endif %}

package/components/button/button.scss

@@ -1,11 +1,5 @@
 @use "sass:math";
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -17,14 +11,17 @@ $ds-btn__icon-size: 24px;
   cursor: pointer;
   background-color: transparent;
   border: none;
-  min-width: $ds-btn__min-clickable-area;
-  min-height: $ds-btn__min-clickable-area;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   position: relative;
 
+  &:not(.ds-btn--condensed) {
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+  }
+
   &:focus-visible {
     outline: none;
     .ds-btn__inner {
@@ -62,8 +59,10 @@ $ds-btn__icon-size: 24px;
     }
   }
 
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -172,8 +171,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-border-focus-02;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-secondary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: $ds-color-component-secondary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: $ds-color-component-secondary-overlay-02;
@@ -225,8 +226,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-border-focus-02;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: #0808081a; // static version of lightmode component-secondary-overlay
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: #0808081a; // static version of lightmode component-secondary-overlay
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: #08080833; // static version of lightmode component-secondary-overlay-2
@@ -245,9 +248,11 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-static-white;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: rgba(255, 255, 255, 0.101960784);
-    // static version of darkmode component-secondary-overlay
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: rgba(255, 255, 255, 0.101960784);
+      // static version of darkmode component-secondary-overlay
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: rgba(255, 255, 255, 0.2);
@@ -275,7 +280,7 @@ $ds-btn__icon-size: 24px;
 .ds-btn--primary,
 .ds-btn--staticWhiteFilled {
   &:not(.ds-loading):disabled {
-    opacity: 0.6; // @todo replace with opacity token if/when available
+    opacity: $ds-opacity-component-disabled;
     .ds-btn__inner {
       cursor: not-allowed;
     }

package/components/button-toggle/button-toggle.njk

@@ -1,15 +1,12 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro ButtonToggle(params) %}
   {% set componentClassName = "ds-btn-toggle" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.selected %}
     {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}

package/components/button-toggle/button-toggle.scss

@@ -1,11 +1,5 @@
 @use "sass:math";
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -71,8 +65,10 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     }
   }
 
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -127,7 +123,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   }
   &:not(.ds-btn-toggle--selected) {
     &:not(.ds-loading):disabled {
-      opacity: 0.6; // @todo replace with opacity token if/when available
+      opacity: $ds-opacity-component-disabled;
       .ds-btn-toggle__inner {
         cursor: not-allowed;
       }

package/components/byline/README.md

@@ -0,0 +1,64 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
+- Storybook: [Byline > Web > Link](https://designsystem.dn.se/?path=/story/components-app-web-article-components-byline-web--link)
+- Storybook: [Byline > Web > Follow ](https://designsystem.dn.se/?path=/story/components-app-web-article-components-byline-web--follow)
+
+----
+
+# Byline
+
+The byline is a list item and should be wrapped in a list.
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | yes | follow, link | | |
+|authorName | String | yes | | | |
+|bylineImage | HTML | no | | | Html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
+|role | String | no | | | Only used in variant link |
+|email | String | no | | | email will be displayed instead of role for variant follow |
+|authorPageUrl | String | no | | | The whole item (varant link), or the title and subtitle (variant follow) will link to this url |
+|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant follow. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |
+|classNames | String | no | | | Ex. "my-special-class" |
+|elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
+|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/byline/byline.njk' import Byline %}
+
+{{ Byline({
+  variant: variant,
+  bylineImage: imageHtml(),
+  authorName: authorName,
+  role: role,
+  email: email,
+  authorPageUrl: authorPageUrl,
+  followable: followable,
+  attributes: attributes,
+  elementAttributes: elementAttributes,
+  elementClassNames: elementClassNames,
+  classNames: "",
+  forcePx: false
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/byline/byline";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+dsButtonToggle(toggleElements);
+```