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

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;
+  }
+}

package/components/checkbox/checkbox.njk

@@ -1,5 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro CheckboxIcons(componentClassName) %}
@@ -14,11 +15,7 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set wrapperClasses = [] %}
   {% set name = params.name | default("ds-checkbox") %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
 

package/components/disclaimer/README.md

@@ -1,5 +1,6 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/disclaimer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/disclaimer)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-disclaimer-web)
+- Storybook (PROD): [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
+- Storybook (LATEST): [Disclaimer > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
 
 ----
 
@@ -11,6 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |bodyHtml | String | yes | | | Intended use is text, links and inlined icons |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|variant | String | no | default, native | default | |
 |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

package/components/disclaimer/disclaimer.njk

@@ -1,14 +1,15 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Disclaimer(params) %}
   {% set componentClassName = "ds-disclaimer" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set additionalClasses = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant and params.variant !== "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
 
   {% if params.forcePx %}
     {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
@@ -16,7 +17,7 @@
 
   {% if params.iconName %}
     {% set iconSvg =  Icon({ icon: params.iconName }) %}
-    {% set additionalClasses = (additionalClasses.push(componentClassName + "--with-icon"), additionalClasses) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "with-icon"), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}

package/components/disclaimer/disclaimer.scss

@@ -55,4 +55,14 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
       fill: currentColor;
     }
   }
+
+  &--native {
+    background-color: $ds-color-static-ad-yellow;
+
+    .ds-icon,
+    .ds-disclaimer__body-html,
+    .ds-disclaimer__body-html strong {
+      color: $ds-color-static-black;
+    }
+  }
 }

package/components/factbox/README.md

@@ -0,0 +1,53 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/factbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/factbox)
+- Storybook (PROD): [Factbox > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-factbox-web--standard)
+- Storybook (LATEST): [Factbox > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-factbox-web--standard)
+
+----
+
+# Factbox
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|vignetteHtml | HTML String | no | | | |
+|titleHtml | HTML String | yes | | | |
+|bodyHtml | HTML String | yes | | | |
+|variant | String | yes | standard, culture, sport, economy | standard | Design variant |
+|grade | String | no | | | zero, one, two, three, four, five, none |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forceExpanded | bool | no | true, false | false | Full factbox is shown regardless of height and no control buttons are shown|
+|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/factbox/factbox.njk' import Factbox %}
+
+{{ Factbox({
+  vignetteHtml: "",
+  titleHtml: "Drama",
+  bodyHtml: "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>",
+  variant: "culture",
+  grade: "two",
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/factbox/factbox" as *;
+```
+
+### Javascript
+
+```javascript
+import dsFactbox from '@bonniernews/dn-design-system-web/components/factbox/factbox.js'
+const factboxElements = Array.from(document.getElementsByClassName("ds-factbox"));
+dsFactbox(factboxElements);
+```

package/components/factbox/factbox.js

@@ -0,0 +1,42 @@
+export {
+  dsFactbox,
+  dsFactboxAll
+};
+
+const selector = "ds-factbox";
+const expandedClass = `${selector}--expanded`;
+const maxHeight = 468; // this has to match max-height in factbox.scss
+
+function dsFactbox(factboxElements) {
+  if (!factboxElements.length) return;
+  factboxElements.forEach((factboxEl) => {
+    if (factboxEl.classList.contains(expandedClass)) return;
+
+    const contentEl = factboxEl.getElementsByClassName(`${selector}__content`)[0];
+    if (contentEl.getBoundingClientRect().height <= maxHeight) {
+      factboxEl.classList.add(expandedClass);
+      return;
+    }
+
+    const showMoreEl = factboxEl.getElementsByClassName(`${selector}__show-more`)[0];
+    showMoreEl.classList.add(`${selector}__show-more--collapsable`);
+
+    const expandMoreBtn = factboxEl.getElementsByClassName(`${selector}__expand-more`)[0];
+    const expandLessBtn = factboxEl.getElementsByClassName(`${selector}__expand-less`)[0];
+
+    expandMoreBtn.addEventListener("click", () => {
+      factboxEl.classList.add(expandedClass);
+      showMoreEl.setAttribute("data-factbox-expanded", "");
+    });
+
+    expandLessBtn.addEventListener("click", () => {
+      factboxEl.classList.remove(expandedClass);
+      showMoreEl.removeAttribute("data-factbox-expanded");
+    });
+  });
+}
+
+function dsFactboxAll() {
+  const factboxElements = Array.from(document.getElementsByClassName(`${selector}`));
+  dsFactbox(factboxElements);
+}

package/components/factbox/factbox.njk

@@ -0,0 +1,78 @@
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GradeIcon %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro Factbox(params) %}
+  {% set componentClassName = "ds-factbox" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set grades = ["zero", "one", "two", "three", "four", "five"] %}
+  {% set gradesNumeric = ["0", "1", "2", "3", "4", "5"] %}
+  {% set activeGrade = params.grade | default("") | string %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% else %}
+    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.forceExpand %}
+    {% set variant = (variant.push(classNamePrefix + "expanded"), 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'}}">
+          {%- if params.vignetteHtml %}<span class="{{ componentClassName + '__vignette'}}">{{ params.vignetteHtml | safe }}</span>{%- endif %}
+          {{- params.titleHtml | safe -}}
+        </h2>
+        {% if activeGrade and activeGrade in grades %}
+          {% for grade in grades %}
+            {% if grade == activeGrade %}
+              {% set gradeTitle = "Betyg: " + gradesNumeric[loop.index0] + "." %}
+              {% set gradeDesc = "Betygsskala: " + gradesNumeric | first + " till " + gradesNumeric | last + "." %}
+              <div class="{{ componentClassName + '__grade'}}">{{- GradeIcon({ icon: activeGrade, title: gradeTitle, desc: gradeDesc }) | safe }}</div>
+            {% endif %}
+          {% endfor %}
+        {% endif%}
+        <div class="{{ componentClassName + '__body'}}">{{ params.bodyHtml | safe }}</div>
+      </div>
+      <div class="{{ componentClassName + '__show-more'}}">
+        {{ Button({
+          text: 'Visa mer',
+          variant: 'secondaryFilled',
+          size: 'small',
+          iconPosition: 'right',
+          iconName: 'expand_more',
+          classNames: 'ds-factbox__expand-more',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true
+        })}}
+        {{ Button({
+          text: 'Visa mindre',
+          variant: 'secondaryFilled',
+          size: 'small',
+          iconPosition: 'right',
+          iconName: 'expand_less',
+          classNames: 'ds-factbox__expand-less',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true
+        })}}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

package/components/factbox/factbox.scss

@@ -0,0 +1,155 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+$ds-factbox__grade-size: 40px + (ds-metrics-border-width(x2) * 2);
+$ds-factbox__show-more-fade-height: 48px;
+$ds-factbox__padding: ds-spacing-component(x4);
+$ds-factbox__max-height: 500px - ($ds-factbox__padding * 2);
+
+.ds-factbox {
+  background-color: $ds-color-surface-background;
+  box-sizing: border-box;
+  padding: $ds-factbox__padding;
+  padding-left: $ds-factbox__padding - ds-metrics-border-width(x2);
+  padding-top: $ds-factbox__padding - ds-metrics-border-width(x1);
+  border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+  border-left: ds-metrics-border-width(x2) solid $ds-color-component-brand;
+  margin: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+
+  .ds-factbox__inner {
+    max-height: ds-px-to-rem($ds-factbox__max-height);
+    overflow: hidden;
+    position: relative;
+
+    @at-root .ds-force-px#{&} {
+      max-height: $ds-factbox__max-height;
+    }
+  }
+
+  &--expanded .ds-factbox__inner,
+  &--expanded.ds-force-px .ds-factbox__inner {
+    max-height: none;
+  }
+
+  .ds-factbox__body {
+    overflow: hidden;
+    @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);
+    }
+    p {
+      margin: 0 0 ds-spacing-component(x4);
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+    a {
+      @include ds-link($ds-link-article-body);
+    }
+    strong {
+      @include ds-typography($ds-typography-functional-body02medium);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body02medium, true);
+      }
+    }
+    img {
+      max-width: 100%;
+    }
+  }
+  .ds-factbox__title {
+    @include ds-typography($ds-typography-functional-heading01bold);
+    color: $ds-color-text-primary;
+    margin: 0 0 ds-spacing-component(x4);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-heading01bold, true);
+    }
+  }
+  .ds-factbox__vignette {
+    color: $ds-color-component-brand;
+    margin-right: ds-spacing-component(x1);
+  }
+  .ds-factbox__grade {
+    color: $ds-color-icon-primary;
+    margin: 0 0 ds-spacing-component(x4);
+
+    .ds-icon {
+      display: block;
+      height: ds-px-to-rem($ds-factbox__grade-size);
+      svg {
+        height: 100%;
+        width: auto;
+        circle {
+          stroke: currentColor;
+        }
+      }
+      @at-root .ds-force-px#{&} {
+        height: $ds-factbox__grade-size;
+      }
+    }
+  }
+  .ds-factbox__show-more--collapsable::before {
+    content: "";
+    background: $ds-color-gradient-content-fade-up;
+    height: ds-px-to-rem($ds-factbox__show-more-fade-height);
+    width: 100%;
+    position: absolute;
+    top: -#{ds-px-to-rem($ds-factbox__show-more-fade-height)};
+
+    @at-root .ds-force-px#{&} {
+      height: $ds-factbox__show-more-fade-height;
+      top: -#{$ds-factbox__show-more-fade-height};
+    }
+  }
+  .ds-factbox__show-more {
+    display: none;
+  }
+  .ds-factbox__show-more--collapsable {
+    background-color: $ds-color-surface-background;
+    width: 100%;
+    button {
+      margin: ds-spacing-component(x4 0 0);
+    }
+    &,
+    &:not([data-factbox-expanded]) .ds-factbox__expand-more,
+    &[data-factbox-expanded] .ds-factbox__expand-less {
+      display: block;
+    }
+    &:not([data-factbox-expanded]) .ds-factbox__expand-less,
+    &[data-factbox-expanded] .ds-factbox__expand-more,
+    &[data-factbox-expanded]::before {
+      display: none;
+    }
+    &:not([data-factbox-expanded]) {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  &--culture {
+    border-left-color: $ds-color-static-kultur;
+    .ds-factbox__vignette {
+      color: $ds-color-static-kultur;
+    }
+  }
+  &--sport {
+    border-left-color: $ds-color-static-sport;
+    .ds-factbox__vignette {
+      color: $ds-color-static-sport;
+    }
+  }
+  &--economy {
+    border-left-color: $ds-color-static-economy;
+    .ds-factbox__vignette {
+      color: $ds-color-static-economy;
+    }
+  }
+  &--sthlm {
+    border-left-color: $ds-color-static-sthlm;
+    .ds-factbox__vignette {
+      color: $ds-color-static-sthlm;
+    }
+  }
+}