@bonniernews/dn-design-system-web 4.1.0-alpha.5 → 4.1.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.1.1 (2023-09-06)
+
+
+### Bug Fixes
+
+* **web:** package release from web folder ([#982](https://github.com/BonnierNews/dn-design-system/issues/982)) ([7e73340](https://github.com/BonnierNews/dn-design-system/commit/7e73340e7f9fd1403ff7634d0f132b8581312d1f))
+
+
+
+## 4.1.0 (2023-09-05)
+
+
+### Bug Fixes
+
+* **web:** fix missing spacing and refactor text-button ([#976](https://github.com/BonnierNews/dn-design-system/issues/976)) ([f634b42](https://github.com/BonnierNews/dn-design-system/commit/f634b4235d2c6a939cf8ae9e47fcac242fe9f221))
+
+
+
 ## [4.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@4.1.0-alpha.4...@bonniernews/dn-design-system-web@4.1.0-alpha.5) (2023-09-04)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

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

@@ -40,17 +40,17 @@
         {% endif %}
 
         {% if params.vignette %}
-          <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+          <div class="ds-teaser__vignette">{{- params.vignette -}}</div>
         {% endif %}
 
         <h2 class="{{ componentClassName + '__title'}}">
-          {{ params.title }}
+          {{- params.title -}}
         </h2>
 
         {% if params.text and nativeVariant !== "right" %}
           <p class="{{ componentClassName + '__text' }}">
-            {{ TeaserDot() }}
-            {{ params.text }}
+            {{- TeaserDot() -}}
+            {{- params.text -}}
           </p>
         {% endif %}
       </div>

package/components/text-button/text-button.scss

@@ -4,19 +4,52 @@
 
 $ds-text-btn__min-clickable-area: 0;
 $ds-text-btn__underline-offset: 2px;
-$ds-text-btn__icon-size: 24px;
-$ds-text-btn__icon-size-small: 20px;
 
-@mixin ds-text-btn-disabled() {
-  cursor: not-allowed;
-  &::before {
-    background-color: unset;
+.ds-text-btn {
+  --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)};
+  --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
+
+  &.ds-force-px {
+    --ds-text-btn__icon-size: 24px;
   }
-  .ds-icon {
-    color: $ds-color-icon-disabled;
+
+  &.ds-text-btn--icon-left {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2)};
+    --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
   }
-  .ds-text-btn__text {
-    color: $ds-color-text-disabled;
+
+  &.ds-text-btn--icon-right {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3)};
+    --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+  }
+
+  &.ds-text-btn--small {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)};
+    --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};
+
+    &.ds-force-px {
+      --ds-text-btn__icon-size: 20px;
+    }
+
+    &.ds-text-btn--icon-left {
+      --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x1 0 0)};
+      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1)};
+      &.ds-text-btn--condensed {
+        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0)};
+      }
+    }
+
+    &.ds-text-btn--icon-right {
+      --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x1)};
+      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2)};
+      &.ds-text-btn--condensed {
+        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1)};
+      }
+    }
+  }
+
+  &.ds-text-btn--condensed {
+    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1)};
   }
 }
 
@@ -53,7 +86,7 @@ $ds-text-btn__icon-size-small: 20px;
   .ds-text-btn__inner {
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x3);
+    padding: var(--ds-text-btn__inner-padding);
     position: relative;
     &::before {
       content: "";
@@ -65,16 +98,17 @@ $ds-text-btn__icon-size-small: 20px;
       bottom: 0;
       right: 0;
     }
+  }
 
-    .ds-text-btn__text {
-      @include ds-typography($ds-typography-functional-body02regular);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
-      }
-      text-decoration: underline;
-      text-underline-offset: $ds-text-btn__underline-offset;
-      color: $ds-color-text-primary;
-    }
+  .ds-text-btn__text {
+    @include ds-typography-with-force-px($ds-typography-functional-body02regular);
+    text-decoration: underline;
+    text-underline-offset: $ds-text-btn__underline-offset;
+    color: $ds-color-text-primary;
+  }
+
+  &.ds-text-btn--small .ds-text-btn__text {
+    @include ds-typography-with-force-px($ds-typography-functional-body01regular);
   }
 
   @include ds-hover() {
@@ -87,7 +121,16 @@ $ds-text-btn__icon-size-small: 20px;
     background-color: $ds-color-component-primary-overlay-02;
   }
   &:disabled:not(.ds-loading) .ds-text-btn__inner {
-    @include ds-text-btn-disabled;
+    cursor: not-allowed;
+    &::before {
+      background-color: unset;
+    }
+    .ds-icon {
+      color: $ds-color-icon-disabled;
+    }
+    .ds-text-btn__text {
+      color: $ds-color-text-disabled;
+    }
   }
 
   @include ds-loading();
@@ -109,9 +152,9 @@ $ds-text-btn__icon-size-small: 20px;
 
   .ds-icon {
     display: flex;
-    height: ds-px-to-rem($ds-text-btn__icon-size);
-    width: ds-px-to-rem($ds-text-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 $ds-sc-x2);
+    height: var(--ds-text-btn__icon-size);
+    width: var(--ds-text-btn__icon-size);
+    margin: var(--ds-text-btn__icon-margin);
     color: $ds-color-icon-primary;
     svg {
       fill: currentColor;
@@ -123,76 +166,8 @@ $ds-text-btn__icon-size-small: 20px;
   }
 }
 
-.ds-force-px {
-  &.ds-text-btn--icon-left .ds-text-btn__inner .ds-icon,
-  &.ds-text-btn--icon-right .ds-text-btn__inner .ds-icon {
-    height: $ds-text-btn__icon-size;
-    width: $ds-text-btn__icon-size;
-  }
-}
-
 .ds-text-btn--icon-left .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
   flex-direction: row-reverse;
-  .ds-icon {
-    margin: ds-spacing-component(0 $ds-sc-x2 0 0);
-  }
-}
-
-.ds-text-btn--icon-right .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3);
-}
-
-.ds-text-btn--small {
-  .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2);
-
-    .ds-text-btn__text {
-      @include ds-typography($ds-typography-functional-body01regular);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01regular, true);
-      }
-    }
-  }
-
-  &.ds-text-btn--icon-left .ds-text-btn__inner,
-  &.ds-text-btn--icon-right .ds-text-btn__inner {
-    .ds-icon {
-      height: ds-px-to-rem($ds-text-btn__icon-size-small);
-      width: ds-px-to-rem($ds-text-btn__icon-size-small);
-      margin: ds-spacing-component(0 0 0 $ds-sc-x1);
-    }
-  }
-
-  &.ds-text-btn--icon-left .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1);
-  }
-
-
-  &.ds-text-btn--icon-right .ds-text-btn__inner {
-    padding: ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2);
-  }
-  &.ds-text-btn--condensed {
-    &.ds-text-btn--icon-left .ds-text-btn__inner {
-      padding: ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0);
-    }
-
-    &.ds-text-btn--icon-right .ds-text-btn__inner {
-      padding: ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1);
-    }
-  }
-
-  &.ds-force-px {
-    &.ds-text-btn--icon-left .ds-text-btn__inner .ds-icon,
-    &.ds-text-btn--icon-right .ds-text-btn__inner .ds-icon {
-      height: $ds-text-btn__icon-size-small;
-      width: $ds-text-btn__icon-size-small;
-    }
-  }
-}
-
-.ds-text-btn--condensed .ds-text-btn__inner {
-  padding: ds-spacing-component($ds-sc-x1);
 }
 
 @include ds-mq-only-breakpoint(mobile) {

package/foundations/helpers/README-spacing.md

@@ -1,5 +1,6 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/foundations/helpers/spacing.scss](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/foundations/helpers/spacing.scss)
-- Storybook: - not visible in storybook
+- Storybook: [Spacing > Component](https://designsystem.dn.se/?path=/story/foundations-spacing--component)
+- Storybook: [Spacing > Layout](https://designsystem.dn.se/?path=/story/foundations-spacing--layout)
 
 ----
 
@@ -10,7 +11,7 @@ To avoid silent breaking changes use sass variable instead of raw token name.
 
 Ex: `margin: ds-spacing-component($ds-sc-x1 0 $ds-sc-x4)`
 
-Ex: `@include ds-spacing-layout($ds-sl-page-horizontal auto, padding-top)` 
+Ex: `@include ds-spacing-layout($ds-sl-page-horizontal auto, padding-top)`
 
 By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!
 

package/foundations/helpers/typography.scss

@@ -191,3 +191,11 @@ $dsSerifWeights: (
     letter-spacing: normal;
   }
 }
+
+@mixin ds-typography-with-force-px($token) {
+  @include ds-typography($token);
+  // If called from element without a wrapper class, ex. a it will generate incorrect selector .ds-force-pxa
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($token, true);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "4.1.0-alpha.5",
+  "version": "4.1.1",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",