@bonniernews/dn-design-system-web 29.0.1 → 29.1.1-beta.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/factbox/README.md

@@ -10,11 +10,11 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|vignetteHtml | HTML String | no | | | |
-|titleHtml | HTML String | yes | | | |
-|bodyHtml | HTML String | yes | | | |
+|titleHighlight | String | no | | | |
+|titleImageHtml | HTML String | no | | | Image |
+|title | String | no | | | |
+|bodyParts| Object | yes | | | Ex. [{ type: "gradeMeter", grade: "two" }, { type: "paragraph", bodyHtml: "<p>Html markup</p>" }, { type: "image", mediaHtml: "<div class='picture'>..</div>", author: "", caption: "", imageType: "bild"  }]|
 |theme | String | no | default, kultur, nyheter | | Design theme |
-|grade | String | no | | | zero, one, two, three, four, five, none |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |forceExpanded | bool | no | true, false | false | Full factbox is shown regardless of height and no control buttons are shown|
@@ -30,11 +30,19 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/factbox/factbox.njk' import Factbox %}
 
 {{ Factbox({
-  vignetteHtml: "",
-  titleHtml: "Drama",
-  bodyHtml: "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>",
+  titleHighlight: "",
+  title: "Drama",
+  bodyParts: [
+    {
+      "type": "gradeMeter",
+      "grade": "2",
+    },
+    {
+      "type": "paragraph",
+      "bodyHtml": "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>"
+    },
+  ],
   theme: "kultur",
-  grade: "two",
   forcePx: true
 })}}
 ```

package/components/factbox/factbox.njk

@@ -1,11 +1,11 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
+{% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Factbox(params) %}
   {% set componentClassName = "ds-factbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set grade = params.grade | default("") | string %}
   {% set attributes = getAttributes(params.attributes) %}
 
   {%- set classes = [
@@ -19,20 +19,43 @@
   <div class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">
       <div class="{{ componentClassName + '__content'}}">
-        <h2 class="{{ componentClassName + '__title'}}">
-          {%- if params.vignetteHtml %}<span class="{{ componentClassName + '__vignette'}}">{{ params.vignetteHtml | safe }}</span>{%- endif %}
-          {{- params.titleHtml | safe -}}
-        </h2>
-        {{ GetGrade({ grade: grade, type: "scale" }) if grade }}
-        <div class="{{ componentClassName + '__body'}}">{{ params.bodyHtml | safe }}</div>
+        {% if params.titleImageHtml %}
+          <div class="{{ componentClassName + '__title-image'}}">
+            {{ params.titleImageHtml | safe }}
+          </div>
+        {% endif %}
+        {% if params.title or params.titleHighlight %}
+          <h2 class="{{ componentClassName + '__title'}}">
+            {%- if params.titleHighlight %}<span class="{{ componentClassName + '__title-highlight'}}">{{ params.titleHighlight }}</span>{%- endif %}
+            {{- params.title -}}
+          </h2>
+        {% endif %}
+        {% if params.bodyParts.length %}
+          <div class="{{ componentClassName + '__body'}}">
+            {% for part in params.bodyParts %}
+              {% if part.type == "paragraph" %}
+                {{ part.bodyHtml | safe }}
+              {% elif part.type == "gradeMeter" %}
+                {{ GetGrade({ grade: part.grade, type: "scale" }) | safe }}
+              {% elif part.type == "image" %}
+                {{ ArticleBodyImage({
+                  imageHtml: part.mediaHtml | safe,
+                  fullWidth: false,
+                  imageType: part.imageType,
+                  caption: part.caption if part.caption else "",
+                  author: part.author if part.author else ""
+                }) }}
+              {% endif %}
+            {% endfor %}
+          </div>
+        {% endif %}
       </div>
       <div class="{{ componentClassName + '__show-more'}}">
         {{ Button({
           text: 'Visa mer',
-          variant: 'secondaryFilled',
-          size: 'md',
-          iconPosition: 'right',
-          iconName: 'expand_more',
+          variant: 'secondaryOutline',
+          size: 'sm',
+          fullWidth: true,
           classNames: 'ds-factbox__expand-more',
           attributes: { "aria-hidden": "true" },
           mobile: { fullWidth: true },
@@ -40,10 +63,9 @@
         })}}
         {{ Button({
           text: 'Visa mindre',
-          variant: 'secondaryFilled',
-          size: 'md',
-          iconPosition: 'right',
-          iconName: 'expand_less',
+          variant: 'secondaryOutline',
+          size: 'sm',
+          fullWidth: true,
           classNames: 'ds-factbox__expand-less',
           attributes: { "aria-hidden": "true" },
           mobile: { fullWidth: true },

package/components/factbox/factbox.scss

@@ -4,8 +4,6 @@
 $ds-factbox__grade-size: 40px;
 $ds-factbox__show-more-fade-height: 48px;
 $ds-factbox__padding: ds-spacing($ds-s-100);
-$ds-factbox-border-width: 4px;
-$ds-factbox__padding-left: $ds-factbox__padding - $ds-factbox-border-width;
 $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
 .ds-factbox {
@@ -15,14 +13,12 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
 
   .ds-factbox__inner {
-    border-top: ds-border-width(xxs) solid $ds-color-border-primary;
-    border-left: $ds-factbox-border-width solid $ds-theme-color;
+    border: ds-border-width(xxs) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(050);
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
     padding: $ds-factbox__padding;
-    padding-left: $ds-factbox__padding-left;
-    padding-top: $ds-factbox__padding - ds-border-width(xxs);
 
     @at-root .ds-force-px#{&} {
       max-height: $ds-factbox__max-height;
@@ -34,6 +30,17 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     max-height: none;
   }
 
+  .ds-factbox__title-image {
+    margin: ds-spacing(0 0 $ds-s-100);
+  }
+  .ds-factbox__title-image,
+  .ds-article-image {
+    border-radius: ds-border-radius(012);
+    overflow: hidden;
+  }
+  img {
+    max-width: 100%;
+  }
   .ds-factbox__body {
     overflow: hidden;
     @include ds-typography($ds-typography-functional-body-md) {
@@ -42,11 +49,14 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-body-md, true);
     }
-    p {
-      margin: ds-spacing(0 0 $ds-s-100);
-    }
-    p:last-child {
-      margin-bottom: 0;
+    p,
+    .ds-article-image,
+    .ds-icon--grade {
+      margin: ds-spacing(0 0 $ds-s-075);
+      padding: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
     a {
       @include ds-link($ds-link-article-body);
@@ -61,12 +71,9 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
         @include ds-typography($ds-typography-functional-body-md, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }
     }
-    img {
-      max-width: 100%;
-    }
   }
   .ds-factbox__title {
-    margin: ds-spacing(0 0 $ds-s-100);
+    margin: ds-spacing(0 0 $ds-s-075);
     @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md) {
       color: $ds-color-text-primary;
     }
@@ -74,13 +81,12 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       @include ds-typography($ds-typography-functional-heading-xxs, $forcePx: true, $lineHeight: $ds-lineheight-md);
     }
   }
-  .ds-factbox__vignette {
+  .ds-factbox__title-highlight {
     color: $ds-theme-color;
     margin-right: ds-spacing($ds-s-025);
   }
   .ds-icon--grade {
     color: $ds-color-text-primary;
-    margin: ds-spacing(0 0 $ds-s-100);
     display: block;
     height: ds-px-to-rem($ds-factbox__grade-size);
     svg {
@@ -128,7 +134,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     &:not([data-factbox-expanded]) {
       position: absolute;
       bottom: $ds-factbox__padding;
-      width: calc(100% - ($ds-factbox__padding-left + $ds-factbox__padding));
+      width: calc(100% - ($ds-factbox__padding * 2));
 
       &::after {
         content: "";

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.1-beta.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);
-    }
-  }
-}