@bonniernews/dn-design-system-web 2.1.0-alpha.9 → 3.0.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,134 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.22...@bonniernews/dn-design-system-web@3.0.0-alpha.0) (2023-03-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Layout spacing is changed to a mixin. Will need to be include on all places.
+
+### Bug Fixes
+
+* **web:** refactor spacing layout as padding ([#699](https://github.com/BonnierNews/dn-design-system/issues/699)) ([60e126f](https://github.com/BonnierNews/dn-design-system/commit/60e126fa57142effdd4e8eb8331be475074a40a3))
+
+
+
+## [2.1.0-alpha.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.21...@bonniernews/dn-design-system-web@2.1.0-alpha.22) (2023-03-02)
+
+
+### Bug Fixes
+
+* **web:** set box-sizing on disclaimer ([#715](https://github.com/BonnierNews/dn-design-system/issues/715)) ([4933e7f](https://github.com/BonnierNews/dn-design-system/commit/4933e7f8ab27f20ac745b2b0d1706fb535d2335d))
+
+
+
+## 2.1.0-alpha.21 (2023-03-02)
+
+
+### Bug Fixes
+
+* **web:** change breakpoint for large screen from desktop to tablet ([#708](https://github.com/BonnierNews/dn-design-system/issues/708)) ([fc3ae78](https://github.com/BonnierNews/dn-design-system/commit/fc3ae78eaae866bcab14b39a638df94349193dcd))
+
+
+
+## [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

package/README.md

@@ -10,4 +10,4 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
-For specific instructions see each component readme.
+For specific instructions see each component or helper readme.

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;
+  @include 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/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);
+```

package/components/byline/byline.njk

@@ -0,0 +1,97 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{% macro Byline(params) %}
+  {% set componentClassName = "ds-byline" %}
+  <li class="{{ componentClassName + '__outer'}}">
+    {% call BylineInner(params, componentClassName) %}
+      <div class="{{ componentClassName + '__inner'}}">
+        {% set componentClassName = componentClassName %}
+        {% call BylineContent(params, visualVariant, componentClassName ) %}
+          {% if params.bylineImage %}
+            <span class="{{ componentClassName + '__image'}}">{{- params.bylineImage | safe -}}</span>
+          {% endif %}
+          <div class="{{ componentClassName + '__titles'}}">
+            {% if params.authorName %}
+              <span class="{{ componentClassName + '__title'}}">{{ params.authorName }}</span>
+            {% endif %}
+            {%- if subtitle %}
+              <span class="{{ componentClassName + '__subtitle'}}">{{ subtitle }}</span>
+            {% endif %}
+          </div>
+        {% endcall %}
+        {% if visualVariant == 'icon' %}
+          <span class="{{ componentClassName + '__icon-right'}}">{{- Icon({ icon: 'arrow_forward' }) | safe -}}</span>
+        {% endif %}
+        {% if visualVariant == 'button' and params.followable %}
+          {{ ButtonToggle({
+            text: "Följ",
+            selectedText: "Följer",
+            variant: "secondaryFilled",
+            size: "xsmall",
+            attributes: params.elementAttributes,
+            classNames: elementClassNames | join(" "),
+            forcePx: params.forcePx,
+            condensed: true
+          })}}
+        {% endif %}
+      </div>
+    {% endcall %}
+  </li>
+{% endmacro %}
+
+{# Internal helper macro - not intended for use outside of this file #}
+{% macro BylineContent(params, visualVariant, componentClassName) %}
+  {% set subtitle = params.role if params.variant == 'link' else params.email %}
+  {% if visualVariant == 'button' and params.authorPageUrl %}
+    <a href="{{params.authorPageUrl}}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ componentClassName + '__content-wrapper'}}">
+      {{ caller() if caller }}
+    </a>
+  {% else %}
+    <div class="{{ componentClassName + '__content-wrapper'}}">
+      {{ caller() if caller }}
+    </div>
+  {% endif %}
+{% endmacro %}
+
+{# Internal helper macro - not intended for use outside of this file #}
+{% macro BylineInner(params, componentClassName) %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set visualVariant = "icon" if (params.variant == 'link' or params.followable != true) and params.authorPageUrl else "button" %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif %}
+
+  {% if not params.authorPageUrl %}
+    {% set variant = (variant.push(componentClassName + '--noninteractive'), variant) %}
+  {% endif %}
+
+  {% if params.bylineImage %}
+    {% set bylineImage =  params.bylineImage %}
+  {% endif %}
+  {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  {% set elementClassNames = [ componentClassName + "__btn-toggle" ]%}
+  {% if params.elementClassNames %}
+    {% set elementClassNames = (elementClassNames.push(params.elementClassNames), elementClassNames) %}
+  {% endif %}
+
+  {% if visualVariant == 'icon' %}
+    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }}>
+      {{ caller() if caller }}
+    </a>
+  {% else %}
+    <div class="{{ classes }}" {{- attributes | safe }}>
+      {{ caller() if caller }}
+    </div>
+  {% endif %}
+{% endmacro %}

package/components/byline/byline.scss

@@ -0,0 +1,160 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
+@use "../../components/button-toggle/button-toggle.scss" as *;
+
+$ds-byline__icon-size: 24px;
+$ds-byline__image-size: 44px;
+
+.ds-byline__outer {
+  list-style: none;
+  line-height: 0;
+}
+
+.ds-byline {
+  background-color: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 100%;
+  position: relative;
+
+  &::after {
+    content: "";
+    height: ds-metrics-border-width(x1);
+    width: calc(100% - (ds-spacing-component(outer) * 2));
+    background-color: $ds-color-border-primary;
+    position: absolute;
+    left: ds-spacing-component(x4);
+    bottom: 0;
+  }
+
+  .ds-byline__inner {
+    box-sizing: border-box;
+    border-radius: 0;
+    transition: background-color 50ms ease-out;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    padding: ds-spacing-component(x4 outer);
+    width: 100%;
+
+    &::before {
+      content: "";
+      border-radius: inherit;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      transition: background-color 500ms ease;
+    }
+
+    .ds-icon {
+      position: relative;
+      display: flex;
+      height: ds-px-to-rem($ds-byline__icon-size);
+      width: ds-px-to-rem($ds-byline__icon-size);
+      margin: 0;
+      @at-root .ds-force-px#{&} {
+        height: $ds-byline__icon-size;
+        width: $ds-byline__icon-size;
+      }
+      svg {
+        fill: currentColor;
+      }
+    }
+  }
+
+  .ds-byline__content-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 1;
+    text-decoration: none;
+
+    &:focus-visible {
+      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline-offset: 2px;
+    }
+  }
+
+  .ds-byline__image {
+    height: $ds-byline__image-size;
+    width: $ds-byline__image-size;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: ds-spacing-component(x4);
+    background-color: $ds-color-component-primary-overlay;
+    flex-shrink: 0;
+  }
+
+  .ds-byline__titles {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    word-break: break-all;
+
+    .ds-byline__title {
+      @include ds-typography($ds-typography-functional-heading01medium);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-heading01medium, true);
+      }
+      color: $ds-color-text-primary;
+      text-align: left;
+    }
+
+    .ds-byline__subtitle {
+      @include ds-typography($ds-typography-functional-body02regular);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body02regular, true);
+      }
+      color: $ds-color-text-primary-02;
+      text-align: left;
+    }
+  }
+
+  .ds-byline__icon-right {
+    color: $ds-color-icon-primary;
+    display: inline-flex;
+    margin-left: ds-spacing-component(x4);
+  }
+
+  .ds-byline__btn-toggle {
+    min-height: 44px;
+    min-width: 48px;
+    margin-left: ds-spacing-component(x4);
+  }
+
+  @include ds-hover() {
+    &:hover:not(.ds-byline--noninteractive) {
+      cursor: pointer;
+
+      .ds-byline__inner::before {
+        background-color: $ds-color-component-primary-overlay;
+      }
+    }
+  }
+
+  &:active:not(.ds-byline--noninteractive) .ds-byline__inner::before {
+    background-color: $ds-color-component-primary-overlay-02;
+  }
+  &:focus-visible {
+    outline: none;
+    .ds-byline__inner {
+      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline-offset: -2px;
+    }
+  }
+
+  @at-root a#{&} {
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+  }
+}