@bonniernews/dn-design-system-web 3.0.0-alpha.7 → 3.0.0-alpha.71

package/components/text-button/text-button.scss

@@ -1,11 +1,5 @@
-@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/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
 $ds-text-btn__min-clickable-area: 0;
@@ -37,6 +31,10 @@ $ds-text-btn__icon-size: 24px;
   padding: 0;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   &:focus-visible {
     outline: none;
     .ds-text-btn__inner {
@@ -78,9 +76,12 @@ $ds-text-btn__icon-size: 24px;
     }
   }
 
-  &:hover:not(.ds-loading) .ds-text-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(.ds-loading) .ds-text-btn__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
+
   &:active:not(.ds-loading) .ds-text-btn__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
   }
@@ -95,6 +96,7 @@ $ds-text-btn__icon-size: 24px;
   &,
   & .ds-text-btn__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 

package/components/text-button-toggle/text-button-toggle.js

@@ -9,6 +9,8 @@ function dsTextButtonToggle(toggleElements = []) {
     toggleEl.addEventListener("click", () => {
       if (toggleEl.classList.contains("ds-text-btn-toggle--disabled")) return;
       toggleEl.classList.toggle("ds-text-btn-toggle--selected");
+      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
+      toggleEl.setAttribute("aria-checked", ariaChecked);
     });
   });
 }

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

@@ -1,51 +1,48 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% 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 TextButtonToggle(params) %}
   {% set componentClassName = "ds-text-btn-toggle" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
-
-  {% if params.selected %}
-    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
+
+  {%- if params.selected %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% set loadingHtml %}
-    {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
-  {% endset %}
+  {%- set loadingHtml %}
+    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
+  {%- endset %}
 
-  {% if params.loading %}
-    {% set variant = (variant.push("ds-loading"), variant) %}
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-    <div class="{{ componentClassName + '__inner'}}">
-      <div class="{{ componentClassName + '__off'}}">
-          {{ Icon({ icon: params.iconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
-        </div>
-        <div class="{{ componentClassName + '__on'}}">
-          {{ Icon({ icon: params.selectedIconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.selectedText }}</span>
-        </div>
-        {{ loadingHtml | safe }}
-    </div>
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <button type="{{ params.type | default('button') }}" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+      <span class="{{ componentClassName + '__off' }}">
+        {{ IconUse({ icon: params.iconName }) }} <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
+      </span>
+      <span class="{{ componentClassName + '__on' }}">
+        {{ IconUse({ icon: params.selectedIconName }) }} <span class="{{ componentClassName + '__text' }}">{{ params.selectedText }}</span>
+      </span>
+      {{ loadingHtml | safe }}
+    </span>
   </button>
 {% endmacro %}

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

@@ -1,11 +1,5 @@
-@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/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
 $ds-text-btn-toggle__min-clickable-area: 0;
@@ -37,6 +31,10 @@ $ds-text-btn-toggle__icon-size: 24px;
   padding: 0;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   &:focus-visible {
     outline: none;
     .ds-text-btn-toggle__inner {
@@ -98,8 +96,10 @@ $ds-text-btn-toggle__icon-size: 24px;
     }
   }
 
-  &:hover:not(.ds-loading) .ds-text-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(.ds-loading) .ds-text-btn-toggle__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(.ds-loading) .ds-text-btn-toggle__inner::before {
     background-color: $ds-color-component-primary-overlay-02;

package/components/text-input/text-input.scss

@@ -1,11 +1,6 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../assets/form-field/form-field.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
-@use "../icon-button/icon-button.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/form-field/form-field.scss";
+@use "../icon-button/icon-button.scss";
 
 $ds-text-input-toggle-btn__width: 32px;
 $ds-text-input-toggle-btn__area: (

package/components/video-caption/README.md

@@ -27,7 +27,7 @@ These are copy paste friendly examples to quickliy get started using a component
 
 {{ VideoCaption({
   caption: "Tre år har gått sedan terrordåden i Paris.",
-  duration: "47 sek."
+  duration: "47 sek"
 }) }}
 ```
 

package/components/video-caption/video-caption.njk

@@ -1,4 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
 
 {% macro VideoCaption(params) %}
   {%- set componentClassName = "ds-video-caption" %}
@@ -12,13 +13,18 @@
   {% endif%}
   {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   <figcaption class="{{ classes }}" {{- attributes | safe }}>
-    {%- if params.duration %}
-      <span class="{{ componentClassName + '__duration'}}">
+    {%- if params.duration -%}
+      <span class="{{ componentClassName + '__duration'}}" aria-hidden="true">
         {{- params.duration -}}
       </span>
-    {% endif %}
-    {%- if params.caption %}
-      {{- params.caption -}}
-    {% endif %}
+      {{ VisuallyHidden({
+        text: "Videon är " + params.duration + " lång."
+        })}}
+    {%- endif %}
+    {% if params.caption -%}
+      <span class="{{ componentClassName + '__text'}}">
+        {{- params.caption -}}
+      </span>
+    {% endif -%}
   </figcaption>
 {% endmacro %}

package/components/vip-badge/README.md

@@ -0,0 +1,35 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/vip-badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/vip-badge)
+- Storybook (PROD): [VipBadge > Web > Vip Badge](https://designsystem.dn.se/?path=/story/components-app-web-section-components-vipbadge-web)
+- Storybook (LATEST): [VipBadge > Web > Vip Badge With Text](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-vipbadge-web)
+
+----
+
+# VipBadge
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|showText | bool | no | | false | By default only icon is shown |
+|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 |
+
+## 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/vip-badge/vip-badge.njk' import VipBadge %}
+
+{{ VipBadge({
+  showText: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/vip-badge/vip-badge" as *;
+```

package/components/vip-badge/vip-badge.njk

@@ -0,0 +1,23 @@
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro VipBadge(params) %}
+  {%- set componentClassName = "ds-vip-badge" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+  {%- if params.showText %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "text"), additionalClasses) %}
+  {% endif%}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <div class="{{ classes }}" {{- attributes | safe }} aria-hidden="true">
+    {{ IconUse({ icon: 'vip' | safe }) }}
+    {{ "För dig som prenumererar" if params.showText else "" }}
+  </div>
+{% endmacro %}

package/components/vip-badge/vip-badge.scss

@@ -0,0 +1,54 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
+
+$ds-vip-badge__icon-size: 16px;
+
+.ds-vip-badge {
+  display: none;
+  align-items: center;
+  box-sizing: content-box;
+  border-radius: ds-px-to-rem(ds-metrics-border-radius(x1)) 0
+    ds-px-to-rem(ds-metrics-border-radius(x1))
+    ds-px-to-rem(ds-metrics-border-radius(x1));
+  background-color: $ds-color-component-business;
+  color: $ds-color-static-white;
+  fill: $ds-color-static-white;
+  @include ds-typography($ds-typography-functional-meta01regular);
+  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($ds-typography-functional-meta01regular, true);
+    border-radius: ds-metrics-border-radius(x1) 0 ds-metrics-border-radius(x1)
+      ds-metrics-border-radius(x1);
+    padding: ds-spacing-component($ds-sc-x1);
+  }
+
+  // bang class indicating that the user has premium access
+  .dn-premium & {
+    display: inline-flex;
+  }
+
+  .ds-icon {
+    height: ds-px-to-rem($ds-vip-badge__icon-size);
+    width: ds-px-to-rem($ds-vip-badge__icon-size);
+    @at-root .ds-force-px#{&} {
+      height: $ds-vip-badge__icon-size;
+      width: $ds-vip-badge__icon-size;
+    }
+  }
+}
+
+.ds-vip-badge--text {
+  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1))
+    ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+  @at-root .ds-force-px#{&} {
+    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
+  }
+
+  .ds-icon {
+    margin-right: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+    @at-root .ds-force-px#{&} {
+      margin-right: ds-spacing-component($ds-sc-x1);
+    }
+  }
+}

package/foundations/colors.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 @use './variables/colorsDnLightTokens';
 @use './variables/colorsDnDarkTokens';
+@use './helpers/colors.scss' as *;
 
 html,
 .ds-light {
@@ -25,4 +26,34 @@ html,
   @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
     --ds-color-#{string.slice($name, 13)}: #{$value};
   }
+
+  // these are not static so needs to be defined here also
+  --ds-theme-color: #{$ds-color-component-brand};
+  .ds-theme--nyheter {
+    --ds-theme-color: #{$ds-color-component-brand};
+  }
+}
+
+html {
+  --ds-theme-color: #{$ds-color-component-brand};
+}
+
+.ds-theme--nyheter {
+  --ds-theme-color: #{$ds-color-component-brand};
+}
+
+.ds-theme--ekonomi {
+  --ds-theme-color: #{$ds-color-static-economy};
+}
+
+.ds-theme--kultur {
+  --ds-theme-color: #{$ds-color-static-kultur};
+}
+
+.ds-theme--sport {
+  --ds-theme-color: #{$ds-color-static-sport};
+}
+
+.ds-theme--sthlm {
+  --ds-theme-color: #{$ds-color-static-sthlm};
 }

package/foundations/helpers/README-links.md

@@ -15,7 +15,7 @@
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/foundations/helpers/links.scss" as *;
+@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
 a {
   @include ds-link($ds-link-paragraph);

package/foundations/helpers/colors.scss

@@ -1 +1,3 @@
 @forward '../variables/colorsCssVariables.scss';
+
+$ds-theme-color: var(--ds-theme-color);

package/foundations/helpers/links.scss

@@ -1,5 +1,6 @@
 @use "colors.scss" as *;
 @use "../variables/decorations.scss" as *;
+@use "utilities.scss" as *;
 
 $ds-link-list: "list";
 $ds-link-paragraph: "paragraph";
@@ -7,31 +8,38 @@ $ds-link-article-body: "article-body";
 
 @mixin ds-link($type: paragraph) {
   color: inherit;
+  @include ds-underline(2px, 1px);
   &:focus-visible {
     outline-color: $ds-color-border-primary-02;
   }
 
   @if ($type == $ds-link-list) {
-    text-decoration: none;
+    text-decoration-line: none;
     &:hover {
-      text-decoration: $ds-text-decoration-link-underline;
+      text-decoration-line: $ds-text-decoration-link-underline;
     }
   } @else if ($type == $ds-link-paragraph) {
-    text-decoration: $ds-text-decoration-link-underline;
+    text-decoration-line: $ds-text-decoration-link-underline;
     &:hover {
-      text-decoration: none;
+      text-decoration-line: none;
     }
     &:visited {
       color: $ds-color-text-primary-02;
     }
   } @else if ($type == $ds-link-article-body) {
-    text-decoration: $ds-text-decoration-link-underline;
+    text-decoration-line: $ds-text-decoration-link-underline;
     color: $ds-color-text-body-link;
     &:hover {
-      text-decoration: none;
+      text-decoration-line: none;
     }
     &:visited {
       color: $ds-color-text-body-link-visited;
     }
   }
 }
+
+@mixin ds-underline($offset: 2px, $thickness: 2px) {
+  text-decoration-line: $ds-text-decoration-link-underline;
+  text-decoration-thickness: ds-px-to-rem($thickness);
+  text-underline-offset: ds-px-to-rem($offset);
+}