@bonniernews/dn-design-system-web 29.0.1 → 29.1.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [29.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@29.0.1...@bonniernews/dn-design-system-web@29.1.0) (2025-02-20)
+
+
+### Features
+
+* **app:** pill design updates ([#1625](https://github.com/BonnierNews/dn-design-system/issues/1625)) ([b8b9bbf](https://github.com/BonnierNews/dn-design-system/commit/b8b9bbfd4c88502b6b8a09a1e8f2c56b5af91cc4))
+* **web:** remove vip badge ([#1624](https://github.com/BonnierNews/dn-design-system/issues/1624)) ([aac7e6d](https://github.com/BonnierNews/dn-design-system/commit/aac7e6d5dbffb764bb04a013de68f96114e43457))
+
+
+### Maintenance
+
+* **deps:** bump @storybook/addon-react-native-web from 0.0.26 to 0.0.27 ([#1610](https://github.com/BonnierNews/dn-design-system/issues/1610)) ([48d5745](https://github.com/BonnierNews/dn-design-system/commit/48d5745614d69e8033e5700ac14981eed3eaf358))
+* prerelease packages ([9944780](https://github.com/BonnierNews/dn-design-system/commit/9944780246dedc02db91c00fd4ed8f8d98f7e9c8))
+* prerelease packages ([81cddbc](https://github.com/BonnierNews/dn-design-system/commit/81cddbca67a0298c7b912499852d50b51ae284f7))
+
 ## [29.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@29.0.0...@bonniernews/dn-design-system-web@29.0.1) (2025-02-17)
 
 

package/assets/teaser/teaser.scss

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../components/icon-sprite/icon-sprite.scss";
-@use "../../components/vip-badge/vip-badge.scss";
 @use "../../components/teaser-image/teaser-image.scss";
 @use "../../components/teaser-dot/teaser-dot.scss";
 @use "../../components/teaser-footer/teaser-footer.scss";
@@ -82,19 +81,6 @@ $ds-teaser-standard-image-width-desktop: 196px;
     }
   }
 
-  .ds-vip-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 5;
-  }
-
-  &.ds-teaser--quote-badge {
-    .ds-teaser__title {
-      padding-right: ds-spacing($ds-s-075);
-    }
-  }
-
   &--podcast {
     .ds-teaser__vignette {
       display: flex;

package/components/teaser-centered/README.md

@@ -6,8 +6,6 @@
 
 # teaser-centered
 
-This teaser never has a lock-symbol/vip-badge
-
 ## Parameters
 
 |parameter | type | required | options | default | description |

package/components/teaser-large/README.md

@@ -24,7 +24,6 @@
 |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. |
 |publicationTime | string | no | | null | Publication time text. |
 |duration | string | no | | null | Duration of podcast. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

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

@@ -1,5 +1,4 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
 {% 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 %}
@@ -8,7 +7,6 @@
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
 
-  {% set isQuoteBadge = params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
   {% if params.isItalicHeadline %}
     {% set italicsClass = "ds-teaser--large-big-italic" if params.isLargeHeadline and params.areaType !== "right" else "ds-teaser--large-italic" %}
   {% endif %}
@@ -16,7 +14,6 @@
   {% set extraClasses = [
     "ds-teaser--large",
     classNamePrefix + params.variant if params.variant,
-    classNamePrefix + "quote-badge" if isQuoteBadge,
     classNamePrefix + 'hide-top-border' if params.mediaHtml,
     italicsClass if italicsClass,
     params.classNames if params.classNames
@@ -35,16 +32,7 @@
       ] | join(" ") %}
       <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
-        {% if params.isLocked %}
-          {{ VipBadge({
-            showText: true
-          }) }}
-        {% endif %}
       </div>
-    {% elif params.isItalicHeadline and params.isLocked %}
-      {{ VipBadge({
-        showText: false
-      }) }}
     {% endif %}
 
     <div class="{{ componentClassName + '__content'}}">

package/components/teaser-longlife/README.md

@@ -14,7 +14,6 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |vignette | String | no | | | Top text in the teaser |
 |mediaHtml | HTML String | no | | | Main image or other media |
-|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 |

package/components/teaser-longlife/teaser-longlife.njk

@@ -1,5 +1,4 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
 
 {% macro TeaserLonglife(params) %}
   {%- set extraClasses = [
@@ -16,11 +15,6 @@
 
     {% if params.mediaHtml %}
       {{ params.mediaHtml }}
-      {% if params.isLocked %}
-        {{ VipBadge({
-          showText: false
-        }) }}
-      {% endif %}
     {% endif %}
 
     <div class="ds-teaser__content">

package/components/teaser-split/README.md

@@ -21,7 +21,6 @@
 |sticker | String | no | | | Red text before the text |
 |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. |
 |publicationTime | string | no | | null | Publication time text. |
 |duration | string | no | | null | Duration of podcast. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

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

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
 {% 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 %}
@@ -29,11 +28,6 @@
       ] | join(" ") %}
       <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
-        {% if params.isLocked %}
-          {{ VipBadge({
-            showText: false
-          }) }}
-        {% endif %}
       </div>
     {% endif %}
 

package/components/teaser-standard/README.md

@@ -23,7 +23,6 @@
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isCompact | bool | no | true, false | false | If the headline should be compact |
 |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. |
 |publicationTime | string | no | | null | Publication time text. |
 |duration | string | no | | null | Duration of podcast. |
 |isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |

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

@@ -1,5 +1,4 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
 {% 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 %}
@@ -8,12 +7,10 @@
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
 
-  {% set hasQuoteBadge = params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
   {% set extraClasses = [
     "ds-teaser--standard",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "compact" if params.isCompact,
-    classNamePrefix + "quote-badge" if hasQuoteBadge,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -24,13 +21,6 @@
     attributes: params.attributes,
     classNames: extraClasses
   }) %}
-
-    {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
-      {{ VipBadge({
-        showText: false
-      }) }}
-    {% endif %}
-
     <div class="{{ componentClassName + '__content'}}">
       {% if params.mediaHtml %}
         {% set mediaClass = [
@@ -40,11 +30,6 @@
         ] | join(" ") %}
         <div class="{{ mediaClass }}">
           {{ params.mediaHtml }}
-          {% if params.isLocked %}
-            {{ VipBadge({
-              showText: false
-            }) }}
-          {% endif %}
         </div>
       {% endif %}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "29.0.1",
+  "version": "29.1.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/components/vip-badge/README.md

@@ -1,35 +0,0 @@
-- 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: [Subcomponents > Vip Badge](https://designsystem.dn.se/?path=/docs/section-subcomponents-vipbadge--docs)
-- Storybook (Latest): [Subcomponents > Vip Badge](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-vipbadge--docs)
-
-----
-
-# VipBadge
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|showText | bool | no | | false | By default only icon is shown |
-|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/vip-badge/vip-badge.njk' import VipBadge %}
-
-{{ VipBadge({
-  showText: true
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/vip-badge/vip-badge" as *;
-```

package/components/vip-badge/vip-badge.njk

@@ -1,18 +0,0 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-
-{% macro VipBadge(params) %}
-  {%- set componentClassName = "ds-vip-badge" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set classes = [
-    componentClassName,
-    classNamePrefix + "text" if params.showText,
-    "ds-force-px" if params.forcePx,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  <div class="{{ classes }}" {{- attributes | safe }} aria-hidden="true">
-    {{ IconUse({ icon: 'vip' | safe }) }}
-    {{ "För dig som prenumererar" if params.showText else "" }}
-  </div>
-{% endmacro %}

package/components/vip-badge/vip-badge.scss

@@ -1,60 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-
-$ds-vip-badge__icon-size: 16px;
-
-.ds-vip-badge {
-  display: none;
-  align-items: center;
-  box-sizing: content-box;
-  border-radius: ds-px-to-rem(ds-border-radius(012)) 0 ds-px-to-rem(ds-border-radius(012))
-    ds-px-to-rem(ds-border-radius(012));
-  background-color: $ds-color-business;
-  color: $ds-color-neutral-white;
-  fill: $ds-color-neutral-white;
-  padding: ds-spacing($ds-s-025, rem);
-  @include ds-typography(
-    $ds-typography-functional-meta-sm,
-    $lineHeight: $ds-lineheight-lg,
-    $letterSpacing: $ds-letterspacing-none
-  );
-
-  @at-root .ds-force-px#{&} {
-    border-radius: ds-border-radius(012) 0 ds-border-radius(012) ds-border-radius(012);
-    padding: ds-spacing($ds-s-025);
-    @include ds-typography(
-      $ds-typography-functional-meta-sm,
-      $forcePx: true,
-      $lineHeight: $ds-lineheight-lg,
-      $letterSpacing: $ds-letterspacing-none
-    );
-  }
-
-  // bang class indicating that the user has premium access
-  .dn-premium & {
-    display: inline-flex;
-  }
-
-  .ds-icon {
-    height: ds-px-to-rem($ds-vip-badge__icon-size);
-    width: ds-px-to-rem($ds-vip-badge__icon-size);
-    @at-root .ds-force-px#{&} {
-      height: $ds-vip-badge__icon-size;
-      width: $ds-vip-badge__icon-size;
-    }
-  }
-}
-
-.ds-vip-badge--text {
-  padding: ds-spacing($ds-s-025 $ds-s-050, rem);
-  @at-root .ds-force-px#{&} {
-    padding: ds-spacing($ds-s-025 $ds-s-050);
-  }
-
-  .ds-icon {
-    margin-right: ds-spacing($ds-s-025, rem);
-    @at-root .ds-force-px#{&} {
-      margin-right: ds-spacing($ds-s-025);
-    }
-  }
-}