@bonniernews/dn-design-system-web 21.1.0-beta.5 → 21.1.1

package/tokens-tmp/colors-css-variables.json

@@ -12,6 +12,7 @@
   "text-body-link": "var(--ds-color-text-body-link)",
   "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
   "text-positive": "var(--ds-color-text-positive)",
+  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
   "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -22,6 +23,7 @@
   "icon-brand": "var(--ds-color-icon-brand)",
   "icon-on-critical": "var(--ds-color-icon-on-critical)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
+  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
   "component-business": "var(--ds-color-component-business)",
   "component-primary": "var(--ds-color-component-primary)",
@@ -58,6 +60,7 @@
   "border-focus-03": "var(--ds-color-border-focus-03)",
   "border-focus-04": "var(--ds-color-border-focus-04)",
   "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
   "static-red-100": "var(--ds-color-static-red-100)",
   "static-black": "var(--ds-color-static-black)",

package/components/teaser-breaking/README.md

@@ -1,46 +0,0 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-breaking](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-breaking)
-- Storybook: [TeaserBreaking](https://designsystem.dn.se/?path=/docs/section-teaserbreaking--docs)
-- Storybook (Latest): [TeaserBreaking](https://designsystem-latest.dn.se/?path=/docs/section-teaserbreaking--docs)
-
-----
-
-# teaser-breaking
-
-This teaser never has a lock-symbol/vip-badge
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
-|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 |
-|mediaHtml | HTML String | no | | | 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
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking.njk' import TeaserBreaking %}
-
-{{ TeaserBreaking({
-  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-breaking/teaser-breaking" as *;
-```

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

@@ -1,46 +0,0 @@
-{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-
-{% macro TeaserBreaking(params) %}
-  {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-
-  {% set extraClasses = [
-    "ds-teaser--breaking",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% call TeaserCard({
-    targetLink: params.targetLink,
-    areaType: params.areaType,
-    theme: params.theme,
-    attributes: params.attributes,
-    classNames: extraClasses
-  }) %}
-    <div class="{{ componentClassName + '__content'}}">
-      <div class="ds-teaser__content-inner">
-        {% 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 }}
-        </h2>
-
-        {% if params.text %}
-          <p class="{{ componentClassName + '__text' }}">
-            {{ params.text }}
-          </p>
-        {% endif %}
-      </div>
-    </div>
-    {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
-        {{ params.mediaHtml }}
-      </div>
-    {% endif %}
-  {% endcall %}
-{% endmacro %}

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

@@ -1,52 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../assets/teaser/teaser.scss" as *;
-
-.ds-teaser.ds-teaser--breaking {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .ds-teaser__media {
-    padding: ds-spacing(0 0 $ds-s-100);
-
-    video {
-      max-width: 100%;
-    }
-  }
-
-  .ds-teaser__content {
-    display: flex;
-    flex-direction: row;
-    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
-    text-align: center;
-
-    .ds-teaser__content-inner {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-
-  &:focus-visible {
-    outline: none !important; /* stylelint-disable-line declaration-no-important */
-
-    .ds-teaser__content {
-      @include ds-teaser-focus(-8px, false);
-    }
-  }
-
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
-  .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-breaking);
-    text-align: center;
-  }
-
-  @include ds-hover(true) {
-    .ds-teaser__title {
-      @include ds-underline(3px);
-    }
-  }
-}