@bonniernews/dn-design-system-web 4.7.6 → 4.8.0

package/components/teaser-package/teaser-package.njk

@@ -4,22 +4,13 @@
 {% macro TeaserPackage(params) %}
   {%- set componentClassName = "ds-teaser-package" %}
   {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + params.areaType if params.areaType,
+    'ds-theme--' + params.theme if params.theme,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
-
-  {%- if params.areaType %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   <div class="{{ classes }}">
     {%- if params.vignetteTargetUrl and params.vignetteText %}
       <a href="{{ params.vignetteTargetUrl }}"

package/components/teaser-right-now/teaser-right-now.njk

@@ -2,22 +2,20 @@
 
 {% macro TeaserRightNow(params) %}
   {%- set componentClassName = "ds-teaser" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = ["ds-teaser--right-now"] %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {%- set extraClasses = [
+    "ds-teaser--right-now",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
-    <span class="ds-teaser__right-now-sticker">Just nu</span>
     <div class="{{ componentClassName + '__content'}}">
       <h2 class="ds-teaser__title">
+        <span class="ds-teaser__highlight">Just nu:</span>
         {{ params.title }}
       </h2>
     </div>

package/components/teaser-right-now/teaser-right-now.scss

@@ -7,53 +7,16 @@
   flex-direction: row;
   align-items: center;
   @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
   );
 
-  .ds-teaser__content {
-    padding-left: ds-spacing-component($ds-sc-x3);
-    flex: 1;
-  }
-
   .ds-teaser__title {
-    @include ds-typography($ds-typography-functional-heading01bold);
+    @include ds-typography($ds-typography-expressive-heading01bold);
   }
 
   @include ds-hover(true) {
-    .ds-teaser__title {
+    > .ds-teaser__content > .ds-teaser__title {
       @include ds-underline(2px, 1px);
     }
   }
-
-  .ds-teaser__right-now-sticker {
-    $flag-height: ds-spacing-component($ds-sc-x8);
-    $flag-height-half: math.div($flag-height, 2);
-    $flag-color: $ds-color-static-yellow;
-
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include ds-typography($ds-typography-detailarticle-label);
-
-    height: $flag-height;
-    padding: ds-spacing-component(0 $ds-sc-x1 0 $ds-sc-x2);
-    margin-right: $flag-height-half;
-
-    background-color: $flag-color;
-    color: $ds-color-static-black;
-
-    &::after {
-      display: block;
-      content: "";
-      position: absolute;
-      right: -#{$flag-height-half};
-      top: 0;
-
-      border-left: $flag-height-half solid $flag-color;
-      border-top: $flag-height-half solid transparent;
-      border-bottom: $flag-height-half solid transparent;
-    }
-  }
 }

package/components/teaser-slideshow/teaser-slideshow.njk

@@ -3,17 +3,17 @@
 {% macro TeaserSlideshow(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--slideshow", "ds-dark"] %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {% set extraClasses = [
+    "ds-teaser--slideshow",
+    "ds-dark",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__content'}}">
       <h2 class="ds-teaser__title">

package/components/teaser-split/teaser-split.njk

@@ -7,22 +7,19 @@
 {% macro TeaserSplit(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--split"] %}
 
-  {% if params.variant %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {% set extraClasses = [
+    "ds-teaser--split",
+    classNamePrefix + params.variant if params.variant,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
       <div class="{{ componentClassName + '__media'}}">
@@ -67,21 +64,11 @@
 {% macro TeaserSplitContainer(params) %}
   {%- set componentClassName = "ds-split-container" %}
   {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
-  {%- set attributes = getAttributes(params.attributes) %}
-
-  {% if params.areaType == "bauta" or params.areaType == "bautaxl" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
-  {% endif %}
-
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
-  <div class="{{ classes }}" {{- attributes | safe }}>{{ params.teasersHtml | safe }}</div>
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + params.areaType if params.areaType == "bauta" or params.areaType == "bautaxl",
+    "ds-theme--" + params.theme if params.theme,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  <div class="{{ classes }}" {{- getAttributes(params.attributes) | safe }}>{{ params.teasersHtml | safe }}</div>
 {% endmacro %}

package/components/teaser-standard/teaser-standard.njk

@@ -6,26 +6,21 @@
 {% macro TeaserStandard(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--standard"] %}
 
-  {% if params.variant %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% endif %}
-
-  {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {% set hasQuoteBadge = params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
+  {% set extraClasses = [
+    "ds-teaser--standard",
+    classNamePrefix + params.variant if params.variant,
+    classNamePrefix + "quote-badge" if hasQuoteBadge,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
 
     {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}

package/components/teaser-swipe-card/teaser-swipe-card.njk

@@ -3,27 +3,14 @@
 {% macro TeaserSwipeCard(params) %}
   {% set componentClassName = "ds-teaser-swipe-card" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser"] %}
+  {% set classes = [
+    "ds-teaser",
+    componentClassName,
+    classNamePrefix + params.variant if params.variant and params.variant !== "default",
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.variant and params.variant !== "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% endif %}
-
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push("ds-theme--" + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
-
   <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }}>
     {% if params.variant != 'direkt' and params.mediaHtml %}
       {{ params.mediaHtml | safe }}

package/components/teaser-tipsa/teaser-tipsa.njk

@@ -2,17 +2,16 @@
 
 {% macro TeaserTipsa(params) %}
   {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--tipsa"] %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {% set extraClasses = [
+    "ds-teaser--tipsa",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__content'}}">
       <h2 class="ds-teaser__title">

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

@@ -5,36 +5,26 @@
 {% macro TextButton(params) %}
   {%- set componentClassName = "ds-text-btn" %}
   {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
+
+  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+    {% set iconSvg = IconUse({ icon: params.iconName }) %}
+  {% endif %}
+
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    "ds-loading" if params.loading,
+    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + "full-width" if params.fullWidth,
+    classNamePrefix + "condensed" if params.condensed and not params.fullWidth,
+    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullwWidth,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {%- set text = params.text %}
   {%- set attributes = getAttributes(params.attributes) %}
   {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
 
-  {%- if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.condensed and not params.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.mobile and params.mobile.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon" + "-" + params.iconPosition ), additionalClasses) %}
-    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
-  {% endif %}
-
   {%- set loadingHtml %}
     {% if (params.size == 'small') %}
       {{ Spinner({ size: "xsmall", variant: "primary", forcePx: params.forcePx }) }}
@@ -43,15 +33,6 @@
     {% endif %}
   {% endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   {%- if params.href %}
     <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
       <span class="{{ componentClassName + '__inner'}}" aria-hidden="true">

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

@@ -5,35 +5,22 @@
 {% macro TextButtonToggle(params) %}
   {% set componentClassName = "ds-text-btn-toggle" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    "ds-loading" if params.loading,
+    classNamePrefix + "selected" if params.selected,
+    classNamePrefix + "condensed" if params.condensed,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
   {%- 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 additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.condensed %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
-  {% endif %}
-
   {%- set loadingHtml %}
     {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
   {%- endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- 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' }}">

package/components/text-input/text-input.njk

@@ -2,18 +2,13 @@
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
 
 {% macro TextInput(params) %}
-  {% set wrapperClasses = [] %}
   {% set componentClassName = "ds-text-input" %}
 
-  {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
-
-  {% if params.forcePx %}
-    {% set wrapperClasses = (wrapperClasses.push("ds-force-px"), wrapperClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set wrapperClasses = (wrapperClasses.push(params.classNames), wrapperClasses) %}
-  {% endif %}
+  {%- set wrapperClasses = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] %}
 
   {% set password = true if params.type == 'password' else false %}
 

package/components/thematic-break/thematic-break.njk

@@ -2,13 +2,11 @@
 
 {% macro ThematicBreak(params) %}
   {% set componentClassName = "ds-thematic-break" %}
-  {% set additionalClasses = [] %}
-  {% set attributes = getAttributes(params.attributes) %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set attributes = getAttributes(params.attributes) -%}
   <div class="{{ classes }}" {{- attributes | safe }}><hr></div>
 {% endmacro %}

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

@@ -3,15 +3,12 @@
 
 {% macro VideoCaption(params) %}
   {%- set componentClassName = "ds-video-caption" %}
-  {%- set additionalClasses = [] %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
-  {%- if params.forcePx %}
-    {%- set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   <figcaption class="{{ classes }}" {{- attributes | safe }}>
     {%- if params.duration -%}
       <span class="{{ componentClassName + '__duration'}}" aria-hidden="true">

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

@@ -4,18 +4,13 @@
 {% macro VipBadge(params) %}
   {%- set componentClassName = "ds-vip-badge" %}
   {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + "text" if params.showText,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {%- 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 "" }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "4.7.6",
+  "version": "4.8.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",