@bonniernews/dn-design-system-web 31.0.1-beta.3 → 31.0.1

package/variables/gradients-light-mode.json

@@ -1,35 +1,35 @@
 {
-  "content-fade-left": {
+  "content-fade-up": {
     "type": "linear",
-    "angle": 270,
+    "angle": "180",
     "stops": [
       {
-        "color": "#ffffff",
+        "color": "rgba(255, 255, 255, 0)",
         "position": 0
       },
       {
-        "color": "rgba(255, 255, 255, 0)",
+        "color": "#ffffff",
         "position": 1
       }
     ]
   },
-  "content-fade-right": {
+  "content-fade-left": {
     "type": "linear",
-    "angle": 270,
+    "angle": "270",
     "stops": [
       {
-        "color": "rgba(255, 255, 255, 0)",
+        "color": "#ffffff",
         "position": 0
       },
       {
-        "color": "#ffffff",
+        "color": "rgba(255, 255, 255, 0)",
         "position": 1
       }
     ]
   },
-  "content-fade-up": {
+  "content-fade-right": {
     "type": "linear",
-    "angle": 180,
+    "angle": "270",
     "stops": [
       {
         "color": "rgba(255, 255, 255, 0)",
@@ -43,7 +43,7 @@
   },
   "content-fade-down": {
     "type": "linear",
-    "angle": 180,
+    "angle": "180",
     "stops": [
       {
         "color": "#ffffff",

package/variables/gradients-list.json

@@ -1,6 +1,6 @@
 {
+  "content-fade-up": "var(--ds-gradient-content-fade-up)",
   "content-fade-left": "var(--ds-gradient-content-fade-left)",
   "content-fade-right": "var(--ds-gradient-content-fade-right)",
-  "content-fade-up": "var(--ds-gradient-content-fade-up)",
   "content-fade-down": "var(--ds-gradient-content-fade-down)"
 }

package/variables/shadows-list.json

@@ -1,6 +1,6 @@
 {
   "elevation-xs": "--ds-shadow-elevation-xs",
+  "elevation-lg": "--ds-shadow-elevation-lg",
   "elevation-sm": "--ds-shadow-elevation-sm",
-  "elevation-md": "--ds-shadow-elevation-md",
-  "elevation-lg": "--ds-shadow-elevation-lg"
+  "elevation-md": "--ds-shadow-elevation-md"
 }

package/variables/typography-list.json

@@ -1,56 +1,56 @@
 {
-  "expressive-heading-xxs": "'expressive-heading-xxs'",
-  "expressive-heading-xs": "'expressive-heading-xs'",
-  "expressive-heading-sm": "'expressive-heading-sm'",
-  "expressive-heading-md": "'expressive-heading-md'",
-  "expressive-heading-lg": "'expressive-heading-lg'",
-  "expressive-heading-xl": "'expressive-heading-xl'",
+  "expressive-ingress-md": "'expressive-ingress-md'",
   "expressive-body-sm": "'expressive-body-sm'",
-  "expressive-body-md": "'expressive-body-md'",
   "expressive-body-lg": "'expressive-body-lg'",
+  "expressive-heading-xl": "'expressive-heading-xl'",
+  "expressive-heading-xs": "'expressive-heading-xs'",
+  "expressive-heading-lg": "'expressive-heading-lg'",
+  "expressive-heading-md": "'expressive-heading-md'",
   "expressive-ingress-sm": "'expressive-ingress-sm'",
-  "expressive-ingress-md": "'expressive-ingress-md'",
+  "expressive-heading-xxs": "'expressive-heading-xxs'",
+  "expressive-heading-sm": "'expressive-heading-sm'",
+  "expressive-body-md": "'expressive-body-md'",
   "functional-heading-xxs": "'functional-heading-xxs'",
-  "functional-heading-xs": "'functional-heading-xs'",
-  "functional-heading-sm": "'functional-heading-sm'",
-  "functional-heading-md": "'functional-heading-md'",
   "functional-heading-lg": "'functional-heading-lg'",
-  "functional-heading-xl": "'functional-heading-xl'",
+  "functional-heading-xs": "'functional-heading-xs'",
+  "functional-meta-sm": "'functional-meta-sm'",
   "functional-label-sm": "'functional-label-sm'",
-  "functional-label-md": "'functional-label-md'",
+  "functional-meta-md": "'functional-meta-md'",
+  "functional-heading-sm": "'functional-heading-sm'",
   "functional-body-sm": "'functional-body-sm'",
+  "functional-ingress-md": "'functional-ingress-md'",
   "functional-body-md": "'functional-body-md'",
+  "functional-heading-md": "'functional-heading-md'",
+  "functional-label-md": "'functional-label-md'",
+  "functional-heading-xl": "'functional-heading-xl'",
   "functional-body-lg": "'functional-body-lg'",
-  "functional-meta-sm": "'functional-meta-sm'",
-  "functional-meta-md": "'functional-meta-md'",
   "functional-ingress-sm": "'functional-ingress-sm'",
-  "functional-ingress-md": "'functional-ingress-md'",
-  "detail-dropcap": "'detail-dropcap'",
-  "detail-gameheader": "'detail-gameheader'",
-  "detail-medryckare": "'detail-medryckare'",
-  "detail-mellanrubrik": "'detail-mellanrubrik'",
-  "detail-direkt-header": "'detail-direkt-header'",
-  "detail-teaser-standard": "'detail-teaser-standard'",
-  "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
-  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
-  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
   "detail-teaser-large": "'detail-teaser-large'",
-  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
-  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
-  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
-  "detail-teaser-twin": "'detail-teaser-twin'",
-  "detail-teaser-tipsa": "'detail-teaser-tipsa'",
-  "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
   "detail-teaser-longlife": "'detail-teaser-longlife'",
   "detail-teaser-centrerad": "'detail-teaser-centrerad'",
-  "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
+  "detail-teaser-standard": "'detail-teaser-standard'",
+  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
+  "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
   "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
+  "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
   "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
+  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
+  "detail-teaser-twin": "'detail-teaser-twin'",
+  "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
+  "detail-teaser-tipsa": "'detail-teaser-tipsa'",
+  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
+  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
+  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
+  "detail-medryckare": "'detail-medryckare'",
+  "detail-article-quote": "'detail-article-quote'",
   "detail-article-standard": "'detail-article-standard'",
-  "detail-article-opinion": "'detail-article-opinion'",
+  "detail-article-direkt": "'detail-article-direkt'",
   "detail-article-longread": "'detail-article-longread'",
   "detail-article-longread-premium": "'detail-article-longread-premium'",
-  "detail-article-direkt": "'detail-article-direkt'",
   "detail-article-direct-opinion": "'detail-article-direct-opinion'",
-  "detail-article-quote": "'detail-article-quote'"
+  "detail-article-opinion": "'detail-article-opinion'",
+  "detail-mellanrubrik": "'detail-mellanrubrik'",
+  "detail-direkt-header": "'detail-direkt-header'",
+  "detail-gameheader": "'detail-gameheader'",
+  "detail-dropcap": "'detail-dropcap'"
 }

package/components/teaser-text-on-image/README.md

@@ -1,41 +0,0 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
-- Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
-- Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)
-
-----
-
-# teaser-text-on-image
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
-|text | String | no | | | Teaser subtext |
-|vignette | String | no | | | Top text in the teaser |
-|mediaHtml | HTML String | yes | | | Main image or other media |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-These are copy paste friendly examples to quickliy get started using a component.
-
-### Nunjucks
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}
-
-{{ TeaserTextOnImage({
-  title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
-  targetLink: "https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/",
-  text: "Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent.",
-  mediaHtml: "text-on-image",
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
-```

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

@@ -1,47 +0,0 @@
-{% 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 %}
-{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-
-{% macro TeaserTextOnImage(params) %}
-  {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-
-  {% set extraClasses = [
-    "ds-teaser--text-on-image",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% call TeaserCard({
-    targetLink: params.targetLink,
-    theme: params.theme,
-    attributes: params.attributes,
-    classNames: extraClasses
-  }) %}
-    <div class="{{ componentClassName + '__content'}}">
-      {% if params.mediaHtml %}
-        <div class="{{ componentClassName + '__media' }}">
-          {{ params.mediaHtml }}
-        </div>
-      {% endif %}
-
-      <div class="{{ componentClassName + '__text-content'}}">
-        {% if params.vignette %}
-          <p class="{{ componentClassName + '__vignette' }}">
-            {{ params.vignette }}
-          </p>
-        {% endif %}
-        
-        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
-          {{ params.title }}
-        </h2>
-
-        {% if params.text%}
-          <p class="{{ componentClassName + '__text' }}">
-            {{ params.text }}
-          </p>
-        {% endif %}
-      </div>
-    </div>
-  {% endcall %}
-{% endmacro %}

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

@@ -1,73 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../assets/teaser/teaser.scss" as *;
-
-.ds-teaser.ds-teaser--text-on-image {
-  overflow: hidden;
-
-  .ds-teaser__vignette {
-    color: $ds-color-neutral-white;
-  }
-
-  .ds-teaser__content {
-    position: relative;
-    color: $ds-color-neutral-white;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
-      z-index: 2;
-    }
-  }
-
-  .ds-teaser__title,
-  .ds-teaser__text {
-    position: relative;
-    color: $ds-color-neutral-white;
-  }
-
-  .ds-teaser__text {
-    margin-top: ds-spacing($ds-s-100);
-  }
-
-  .ds-teaser__title {
-    margin-top: ds-spacing($ds-s-050);
-
-    @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
-
-    &--italic {
-      @include ds-typography($ds-typography-detail-medryckare);
-    }
-  }
-
-  .ds-teaser-image__byline,
-  .ds-teaser__text-content {
-    z-index: 3;
-  }
-
-  .ds-teaser__text-content {
-    position: absolute;
-    bottom: ds-spacing($ds-s-100);
-    left: ds-spacing($ds-s-100);
-    max-width: 90%;
-
-    @include ds-mq-only-breakpoint(desktop) {
-      max-width: 75%;
-    }
-  }
-
-  .ds-teaser__media {
-    .picture {
-      width: 100%;
-      height: 100%;
-    }
-
-    .ds-teaser-image__byline {
-      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
-    }
-  }
-}