@bonniernews/dn-design-system-web 21.2.1-beta.0 → 22.0.0

package/components/spinner/README-NJK.md

@@ -0,0 +1,37 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
+- Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--docs)
+- Storybook (Latest): [Spinner](https://designsystem-latest.dn.se/?path=/docs/basic-spinner--docs)
+----
+
+# Spinner
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | no | brand, onBrand, onBusiness, primary, secondary, staticBlack, staticWhite | primary | Design variant |
+|size| String | no | large, small, xsmall | large | |
+|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/spinner/spinner.njk' import Spinner %}
+
+{{ Spinner({
+  variant: "primary",
+  size: "small",
+  classNames: "my-spinner-class"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/spinner/spinner";
+```

package/components/spinner/README.md

@@ -1,37 +1,14 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
-- Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--docs)
-- Storybook (Latest): [Spinner](https://designsystem-latest.dn.se/?path=/docs/basic-spinner--docs)
-----
+Spinner
+=======
 
-# Spinner
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
+*   Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--docs)
 
-## Parameters
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/spinner/spinner.scss'`
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | no | brand, onBrand, onBusiness, primary, secondary, staticBlack, staticWhite | primary | Design variant |
-|size| String | no | large, small, xsmall | large | |
-|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 |
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"brand"</span><span class="css-o1d7ko">"secondary"</span><span class="css-o1d7ko">"primary"</span><span class="css-o1d7ko">"onBrand"</span><span class="css-o1d7ko">"onBusiness"</span><span class="css-o1d7ko">"staticBlack"</span><span class="css-o1d7ko">"staticWhite"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"primary"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">size</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span><span class="css-o1d7ko">"small"</span><span class="css-o1d7ko">"xsmall"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-## 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/spinner/spinner.njk' import Spinner %}
-
-{{ Spinner({
-  variant: "primary",
-  size: "small",
-  classNames: "my-spinner-class"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/spinner/spinner";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Spinner</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">size</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">large</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">primary</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

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

@@ -31,7 +31,7 @@
     }
   }
 
-  .ds-teaser--large &--mask {
+  .ds-teaser--top-img &--mask {
     padding: ds-spacing($ds-s-100 $ds-s-100 0);
     box-sizing: border-box;
   }

package/components/teaser-large/README.md

@@ -19,7 +19,6 @@
 |vignette | String | no | | | Top text in the teaser |
 |highlight | String | no | | | Text before the heading |
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |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 |

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

@@ -13,17 +13,11 @@
     {% set italicsClass = "ds-teaser--large-big-italic" if params.isLargeHeadline and params.areaType !== "right" else "ds-teaser--large-italic" %}
   {% endif %}
 
-  {# Hide top border if there is media and it's not a compact version. Compact is overruled by italic, if italic we must hide border because we shouldn't change anything related to åsikt #}
-  {% set hideTopBorder = false %}
-  {% if params.mediaHtml and (params.isItalicHeadline or not params.isCompact) %}
-    {% set hideTopBorder = true %}
-  {% endif %}
-
   {% set extraClasses = [
     "ds-teaser--large",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "quote-badge" if isQuoteBadge,
-    classNamePrefix + 'hide-top-border' if hideTopBorder,
+    classNamePrefix + 'top-img' if params.mediaHtml,
     italicsClass if italicsClass,
     classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames
@@ -37,11 +31,7 @@
     classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
-      {% set mediaClass = [
-        componentClassName + '__media',
-        componentClassName + '__media--rounded' if params.isCompact and not params.isItalicHeadline
-      ] | join(" ") %}
-      <div class="{{ mediaClass }}">
+      <div class="{{ componentClassName + '__media'}}">
         {{ params.mediaHtml }}
         {% if params.isLocked %}
           {{ VipBadge({
@@ -73,9 +63,9 @@
         </h2>
 
         {% if params.text and params.areaType !== "right" %}
-          <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+          <p class="{{ componentClassName + '__text' }}">
+            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             {% if params.sticker %}
-              {{ TeaserDot({ flashing: params.isFlashingDot }) }}
               <span class="ds-teaser__sticker">
                 {{ params.sticker }}
               </span>

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

@@ -32,10 +32,6 @@
     }
   }
 
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-large);
   }
@@ -69,7 +65,6 @@
     position: relative;
     margin-left: ds-spacing($ds-s-100);
     margin-bottom: ds-spacing($ds-s-100, "px", true);
-    margin-top: ds-spacing($ds-s-025);
 
     .picture {
       position: absolute;
@@ -111,17 +106,6 @@
     &.ds-teaser--large-big-italic .ds-teaser__title {
       @include ds-typography($ds-typography-detailteaser-large-compact-opinion);
     }
-
-    &:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
-      .ds-teaser__media {
-        margin: ds-spacing($ds-s-100 $ds-s-100 0 $ds-s-100);
-        width: calc(100% - ds-spacing($ds-s-200));
-      }
-
-      .ds-teaser-dot {
-        display: none;
-      }
-    }
   }
 
   @include ds-mq-smallest-breakpoint(tablet) {

package/components/teaser-list-vertical/teaser-list-vertical.njk

@@ -1,6 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 

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

@@ -1,4 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 
 {% macro TeaserNative(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -28,11 +29,7 @@
 
   <div class="{{ componentClassName + '__content'}}">
     {% if params.mediaHtml and nativeVariant == "standard" %}
-      {% set mediaClass = [
-        componentClassName + '__media',
-        componentClassName + '__media--rounded'
-      ] | join(" ") %}
-      <div class="{{ mediaClass }}">
+      <div class="{{ componentClassName + '__media'}}">
         {{ params.mediaHtml }}
       </div>
     {% endif %}
@@ -47,6 +44,7 @@
 
     {% if params.text and nativeVariant !== "right" %}
       <p class="{{ componentClassName + '__text' }}">
+        {{- TeaserDot() -}}
         {{- params.text -}}
       </p>
     {% endif %}

package/components/teaser-native/teaser-native.scss

@@ -28,6 +28,12 @@
     }
   }
 
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
   &.ds-teaser--native-right,
   &.ds-teaser--native-large {
     .ds-teaser__media {

package/components/teaser-onsite/README.md

@@ -10,4 +10,11 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
+
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">mediaHtml="&lt;figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&amp;quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&amp;quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

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

@@ -14,11 +14,7 @@
     classNames: classes
   }) %}
     {% if params.mediaHtml %}
-      {% set mediaClass = [
-        componentClassName + '__media',
-        componentClassName + '__media--rounded'
-      ] | join(" ") %}
-      <div class="{{ mediaClass }}">
+      <div class="{{ componentClassName + '__media'}}">
         {{ params.mediaHtml }}
       </div>
     {% endif %}

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

@@ -17,7 +17,6 @@
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;
-    clear: both; // Clears floating media in standard-teaser
     top: 0;
     left: 0;
     right: 0;
@@ -27,22 +26,12 @@
   }
 
   // first-child only triggers if there is no vignette
-  .ds-teaser--hide-top-border::after,
+  .ds-teaser--top-img::after,
   > .ds-split-container:first-child::after,
   > .ds-teaser:first-child::after {
     display: none;
   }
 
-  .ds-teaser--breaking + .ds-teaser--hide-top-border {
-    &::after {
-      display: block; // Override `display:none to make border visible
-    }
-
-    .ds-teaser__media {
-      margin-top: ds-spacing($ds-s-100);
-    }
-  }
-
   &::after {
     content: "";
     position: absolute;
@@ -58,22 +47,22 @@
   }
 
   &.ds-teaser-package--bauta {
-    background-color: $ds-color-surface-breaking;
+    background-color: $bauta-surface-color;
 
     & .ds-teaser,
     & .ds-teaser--slideshow {
-      background-color: $ds-color-surface-breaking;
+      background-color: $bauta-surface-color;
     }
 
     .ds-split-container {
-      background-color: $ds-color-surface-breaking;
+      background-color: $bauta-surface-color;
       &::after {
-        background-color: $ds-color-border-primary;
+        background-color: $updated-color-border-primary;
       }
     }
 
     & > .ds-teaser::after {
-      background-color: $ds-color-border-primary;
+      background-color: $updated-color-border-primary;
     }
   }
 }

package/components/teaser-slideshow/teaser-slideshow.scss

@@ -36,6 +36,6 @@
   }
 
   &.ds-teaser--bauta {
-    background-color: $ds-color-surface-breaking;
+    background-color: $bauta-surface-color;
   }
 }

package/components/teaser-split/README.md

@@ -19,7 +19,6 @@
 |vignette | String | no | | | Top text in the teaser |
 |highlight | String | no | | | Text before the heading |
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
 |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. |

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

@@ -23,11 +23,7 @@
     classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
-      {% set mediaClass = [
-        componentClassName + '__media',
-        componentClassName + '__media--rounded'
-      ] | join(" ") %}
-      <div class="{{ mediaClass }}">
+      <div class="{{ componentClassName + '__media'}}">
         {{ params.mediaHtml }}
         {% if params.isLocked %}
           {{ VipBadge({
@@ -55,9 +51,9 @@
       </h2>
 
       {% if params.text %}
-        <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+        <p class="{{ componentClassName + '__text' }}">
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
           {% if params.sticker %}
-            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
             </span>

package/components/teaser-split/teaser-split.scss

@@ -23,7 +23,7 @@
   }
 
   &.ds-split-container--bauta {
-    background-color: $ds-color-surface-breaking;
+    background-color: $bauta-surface-color;
   }
 
   .ds-teaser--split {
@@ -74,8 +74,6 @@
     }
 
     .ds-teaser__media {
-      margin-top: ds-spacing($ds-s-025);
-
       .ds-teaser-image__byline {
         @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
       }

package/components/teaser-standard/README.md

@@ -19,7 +19,6 @@
 |vignette | String | no | | | Top text in the teaser |
 |highlight | String | no | | | Text before the heading |
 |sticker | String | no | | | Red text before the text |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isCompact | bool | no | true, false | false | If the headline should be compact |

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

@@ -33,12 +33,7 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% if params.mediaHtml %}
-        {% set mediaClass = [
-          componentClassName + '__media',
-          componentClassName + '__media--rounded' if not params.isItalicHeadline,
-          componentClassName + '__media--square-image' if params.isSquareImage
-        ] | join(" ") %}
-        <div class="{{ mediaClass }}">
+        <div class="{{ componentClassName + '__media'}} {{ componentClassName + '__media--square-image' if params.isSquareImage}}">
           {{ params.mediaHtml }}
           {% if params.isLocked %}
             {{ VipBadge({
@@ -65,9 +60,10 @@
       </h2>
 
       {% if params.text and params.areaType !== "right" %}
-        <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+        <p class="{{ componentClassName + '__text' }}">
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+
           {% if params.sticker %}
-            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
             </span>

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

@@ -5,10 +5,6 @@
   padding: ds-spacing($ds-s-075 $ds-s-100 0);
   overflow: hidden;
 
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-standard);
 
@@ -32,12 +28,17 @@
     margin-bottom: ds-spacing($ds-s-100);
   }
 
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
   .ds-teaser__content {
     display: block;
   }
 
   .ds-teaser__media {
-    margin-top: ds-spacing($ds-s-025);
     margin-bottom: ds-spacing($ds-s-100);
     margin-left: ds-spacing($ds-s-100);
     float: right;

package/foundations/helpers/colors.scss

@@ -6,6 +6,11 @@
 @use "../variables/colorsDnLightTokens";
 @use "../variables/colorsDnDarkTokens";
 
+// Temporary variables before we update tokens
+$bauta-surface-color: #360003;
+$updated-color-border-primary: #ffffff19;
+// end of temporary variables
+
 $ds-theme-color: var(--ds-theme-color);
 
 @mixin get-dark-color-scheme() {
@@ -17,7 +22,7 @@ $ds-theme-color: var(--ds-theme-color);
   --ds-theme-color: #{$ds-color-component-brand};
 
   .ds-theme--nyheter {
-    --ds-theme-color: #{$ds-color-border-brand};
+    --ds-theme-color: #{$ds-color-component-brand};
   }
 
   .ds-theme--ekonomi {

package/foundations/variables/colorsCssVariables.scss

@@ -11,7 +11,6 @@ $ds-color-text-brand: var(--ds-color-text-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
 $ds-color-text-positive: var(--ds-color-text-positive);
-$ds-color-text-culture: var(--ds-color-text-culture);
 $ds-color-icon-primary: var(--ds-color-icon-primary);
 $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
 $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -22,7 +21,6 @@ $ds-color-icon-on-business: var(--ds-color-icon-on-business);
 $ds-color-icon-brand: var(--ds-color-icon-brand);
 $ds-color-icon-on-critical: var(--ds-color-icon-on-critical);
 $ds-color-icon-on-success: var(--ds-color-icon-on-success);
-$ds-color-icon-culture: var(--ds-color-icon-culture);
 $ds-color-component-brand: var(--ds-color-component-brand);
 $ds-color-component-business: var(--ds-color-component-business);
 $ds-color-component-primary: var(--ds-color-component-primary);
@@ -47,7 +45,6 @@ $ds-color-surface-korsord: var(--ds-color-surface-korsord);
 $ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
 $ds-color-surface-brand: var(--ds-color-surface-brand);
 $ds-color-surface-inverted: var(--ds-color-surface-inverted);
-$ds-color-surface-breaking: var(--ds-color-surface-breaking);
 $ds-color-border-primary: var(--ds-color-border-primary);
 $ds-color-border-primary-02: var(--ds-color-border-primary-02);
 $ds-color-border-primary-03: var(--ds-color-border-primary-03);
@@ -59,7 +56,6 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
 $ds-color-border-focus-03: var(--ds-color-border-focus-03);
 $ds-color-border-focus-04: var(--ds-color-border-focus-04);
 $ds-color-border-brand: var(--ds-color-border-brand);
-$ds-color-border-culture: var(--ds-color-border-culture);
 $ds-color-background-primary: var(--ds-color-background-primary);
 $ds-color-static-red-100: var(--ds-color-static-red-100);
 $ds-color-static-black: var(--ds-color-static-black);