@bonniernews/dn-design-system-web 3.0.0-alpha.34 → 3.0.0-alpha.36

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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.36](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.35...@bonniernews/dn-design-system-web@3.0.0-alpha.36) (2023-04-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.35 (2023-04-27)
+
+
+### Features
+
+* **web:** large and standard teasers ([#763](https://github.com/BonnierNews/dn-design-system/issues/763)) ([0713caa](https://github.com/BonnierNews/dn-design-system/commit/0713caa3c451419e21b185496d8d77726c972bfd))
+
+
+
 ## [3.0.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.33...@bonniernews/dn-design-system-web@3.0.0-alpha.34) (2023-04-26)
 
 

package/assets/teaser/sticker.scss

@@ -0,0 +1,31 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-sticker {
+  display: inline;
+  color: $ds-theme-color;
+  @include ds-typography($ds-typography-detailarticle-label);
+}
+
+.ds-sticker__flashing-dot {
+  border-radius: 50%;
+  background-color: $ds-theme-color;
+  display: inline-block;
+  width: ds-px-to-rem(10px);
+  height: ds-px-to-rem(10px);
+  margin-right: ds-px-to-rem(1px);
+  animation: pulse 1.25s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/assets/teaser/teaser.scss

@@ -0,0 +1,60 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss";
+@use "../../components/vip-badge/vip-badge.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+@use "./sticker.scss";
+
+.ds-teaser {
+  display: block;
+  background-color: $ds-color-background-primary;
+  text-decoration: none;
+
+  .ds-teaser__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .ds-teaser__vignette {
+    display: block;
+    @include ds-typography($ds-typography-detailarticle-label);
+    color: $ds-theme-color;
+    margin-bottom: ds-spacing-component($ds-sc-x1);
+  }
+
+  .ds-teaser__title {
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+
+    .ds-teaser__highlight {
+      color: $ds-theme-color;
+    }
+  }
+
+  .ds-teaser__text {
+    @include ds-typography($ds-typography-detailmedryckare);
+    color: $ds-color-text-primary;
+    margin: ds-spacing-component($ds-sc-x2 0 0);
+  }
+
+  .ds-teaser__media {
+    width: 100%;
+    position: relative;
+
+    .ds-vip-badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 100;
+    }
+  }
+
+  @include ds-hover {
+    &:hover {
+      .ds-teaser__title {
+        text-decoration: $ds-text-decoration-link-underline;
+      }
+    }
+  }
+}

package/components/teaser-image/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
+- Storybook (PROD): [TeaserImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserimage-web--teaser-image)
+- Storybook (LATEST): [TeaserImage > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserimage-web--teaser-image)
+
+----
+
+# teaser-image
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | HTML String | yes | | | The img element or equivalent |
+|byline | String | no | | | Media credit text |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Always applied |
+
+## 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/teaser-image/teaser-image.njk' import TeaserImage %}
+
+{{ TeaserImage({
+  imageHtml: "<img src='??'>",
+  byline: "Foto: Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
+```
+
+This scss is already included in `teaser.scss`.
+

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

@@ -0,0 +1,21 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserImage(params) %}
+  {% set macroClassName = "ds-teaser-image" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figure class="{{ classes }}" {{- attributes | safe }}>
+    {{ params.imageHtml | safe }}
+
+    {% if params.byline %}
+      <figcaption class={{ macroClassName + "__byline" }}>{{ params.byline }}</figcaption>
+    {% endif %}
+  </figure>
+{% endmacro %}

package/components/teaser-image/teaser-image.scss

@@ -0,0 +1,22 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-teaser-image {
+  position: relative;
+  width: 100%;
+  margin: 0;
+
+  .ds-teaser-image__byline {
+    position: absolute;
+    bottom: ds-spacing-component($ds-sc-x2);
+    right: ds-spacing-component($ds-sc-x2);
+    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
+    margin-left: ds-spacing-component($ds-sc-x2);
+
+    @include ds-typography($ds-typography-functional-meta01regular, true);
+    color: $ds-color-static-white;
+
+    background-color: $ds-color-static-transparent-black;
+    border-radius: ds-metrics-border-radius(x2);
+    z-index: 150;
+  }
+}

package/components/teaser-large/README.md

@@ -0,0 +1,51 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
+- Storybook (PROD): [TeaserLarge > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+- Storybook (LATEST): [TeaserLarge > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+
+----
+
+# teaser-large
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|targetId | String | no | | | Target article ID |
+|variant | String | no | "default" or "podd" | "default" | |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## 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/teaser-large/teaser-large.njk' import TeaserLarge %}
+
+{{ TeaserLarge({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
+```

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

@@ -0,0 +1,78 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+
+{% macro TeaserLarge(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--large"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), 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%}
+
+  {% if params.isItalicHeadline and params.isLargeHeadline %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-big-italic"), additionalClasses) %}
+  {% elif params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {% if targetId %} data-id="{{ params.targetId }}" {% endif %}
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: true,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+      <h2 class="ds-teaser__title">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {% if params.isFlashingDot %}
+            <span class="ds-sticker__flashing-dot"></span>
+          {% endif %}
+          {% if params.sticker %}
+            <span class="ds-sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+      {% if params.bylineHtml %}
+        <div class="{{ componentClassName + '__byline'}}">
+          {{ params.bylineHtml | safe }}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

package/components/teaser-large/teaser-large.scss

@@ -0,0 +1,122 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--large {
+  display: block;
+  position: relative;
+
+  .ds-teaser__media {
+    video {
+      max-width: 100%;
+    }
+  }
+
+  .ds-teaser__content {
+    flex: 1;
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr auto;
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      padding: ds-spacing-component($ds-sc-x4);
+    }
+  }
+
+  .ds-teaser__vignette {
+    grid-column: 1;
+  }
+
+  .ds-teaser__title {
+    grid-row: 1;
+    grid-column: 1 / span 1;
+    @include ds-typography($ds-typography-expressive-heading04bold);
+  }
+
+  .ds-teaser__vignette + .ds-teaser__title {
+    grid-row: 2;
+  }
+
+  .ds-teaser__text {
+    grid-row: 3;
+  }
+
+  &.ds-teaser--large-big-italic {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading04italicregular);
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      .ds-teaser__title {
+        grid-column-end: span 2;
+      }
+
+      .ds-teaser__byline {
+        grid-row: 3;
+        margin-top: ds-spacing-component($ds-sc-x2);
+      }
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      .ds-teaser__title {
+        grid-column-end: span 1;
+      }
+    }
+  }
+
+  &.ds-teaser--large-italic {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading03italicregular);
+    }
+  }
+
+  .ds-teaser__byline {
+    grid-column: 2;
+    grid-row: 1 / span 3;
+
+    position: relative;
+    margin-left: ds-spacing-component($ds-sc-x4);
+    overflow: hidden;
+
+    .picture {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      @include ds-mq-only-breakpoint(mobile) {
+        bottom: -#{ds-spacing-component($ds-sc-x3)};
+      }
+
+      @include ds-mq-smallest-breakpoint(tablet) {
+        bottom: -#{ds-spacing-component($ds-sc-x4)};
+      }
+
+      width: 100%;
+      min-width: 104px;
+      margin: 0;
+
+      > .picture__img {
+        margin: 0;
+        top: unset;
+        max-height: unset;
+      }
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 104px;
+      min-height: 85px;
+      margin-left: ds-spacing-component($ds-sc-x2);
+      margin-bottom: -#{ds-spacing-component($ds-sc-x3)};
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      width: 168px;
+      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
+      min-height: 110px;
+      margin-bottom: -#{ds-spacing-component($ds-sc-x4)};
+    }
+  }
+}

package/components/teaser-standard/README.md

@@ -0,0 +1,49 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
+- Storybook (PROD): [TeaserStandard > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserstandard-web)
+- Storybook (LATEST): [TeaserStandard > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserstandard-web)
+
+----
+
+# teaser-standard
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|targetId | String | no | | | Target article ID |
+|variant | String | no | "default" or "podd" | "default" | |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## 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/teaser-standard/teaser-standard.njk' import TeaserStandard %}
+
+{{ TeaserStandard({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard" as *;
+```

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

@@ -0,0 +1,70 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+
+{% macro TeaserStandard(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--standard"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% else %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "standard"), 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(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
+    {{- attributes | safe }}>
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+
+      <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {% if params.isFlashingDot %}
+            <span class="ds-sticker__flashing-dot"></span>
+          {% endif %}
+          {% if params.sticker %}
+            <span class="ds-sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text }}
+        </p>
+      {% endif %}
+    </div>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: false,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% endif %}
+  </a>
+{% endmacro %}

package/components/teaser-standard/teaser-standard.scss

@@ -0,0 +1,44 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser--standard {
+  display: flex;
+
+  @include ds-mq-largest-breakpoint(mobile) {
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+  }
+
+  @include ds-mq-smallest-breakpoint(tablet) {
+    padding: ds-spacing-component($ds-sc-x4);
+  }
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-expressive-heading03bold);
+
+    &--italic {
+      @include ds-typography($ds-typography-expressive-heading03italicregular);
+    }
+  }
+
+  .ds-teaser__media {
+    margin-left: ds-spacing-component($ds-sc-x4);
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      min-width: 104px;
+      max-width: 104px;
+
+      .ds-teaser-image__byline {
+        display: none;
+      }
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      min-width: 224px;
+      max-width: 224px;
+    }
+
+    .teaser__video {
+      max-width: 100%;
+    }
+  }
+}

package/components/vip-badge/README.md

@@ -1,6 +1,6 @@
 - 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: [VipBadge > Web > Vip Badge](https://designsystem.dn.se/?path=/story/components-app-web-vipbadge-web--vip-badge)
-- Storybook: [VipBadge > Web > Vip Badge With Text](https://designsystem.dn.se/?path=/story/components-app-web-vipbadge-web--vip-badge-with-text)
+- 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)
 
 ----
 

package/foundations/variables/colorsDnLightTokens.scss

@@ -11,7 +11,7 @@ $ds-hex-text-brand: #DA000D;
 $ds-hex-text-body-link: #4373CE;
 $ds-hex-text-body-link-visited: #4373CE;
 $ds-hex-icon-primary: #050505;
-$ds-hex-icon-primary-02: #474747;
+$ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
 $ds-hex-icon-critical: #DA000D;
 $ds-hex-icon-disabled: #666666;

package/foundations/variables/spacingLayout.scss

@@ -7,5 +7,6 @@ $spacingLayout: (
   gap-vertical-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,
-  gap-vertical-static-small: 8
+  gap-vertical-static-small: 8,
+  page-top-xsmall: 4
 );

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -4,6 +4,7 @@ $spacingLayoutLargeScreen: (
   page-bottom: 32,
   page-horizontal: 32,
   gap-vertical-medium: 32,
+  page-top-xsmall: 8,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,

package/foundations/variables/spacingLayoutList.scss

@@ -7,3 +7,4 @@ $ds-sl-gap-vertical-medium: gap-vertical-medium;
 $ds-sl-gap-vertical-static-large: gap-vertical-static-large;
 $ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
 $ds-sl-gap-vertical-static-small: gap-vertical-static-small;
+$ds-sl-page-top-xsmall: page-top-xsmall;

package/package.json

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

package/tokens/spacing-layout-list.json

@@ -7,5 +7,6 @@
   "gap-vertical-medium": "gap-vertical-medium",
   "gap-vertical-static-large": "gap-vertical-static-large",
   "gap-horizontal-static-small": "gap-horizontal-static-small",
-  "gap-vertical-static-small": "gap-vertical-static-small"
+  "gap-vertical-static-small": "gap-vertical-static-small",
+  "page-top-xsmall": "page-top-xsmall"
 }