@bonniernews/dn-design-system-web 4.1.0-alpha.3 → 4.1.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.1.0-alpha.4 (2023-09-04)
+
+
+### Features
+
+* **web:** small version of text button ([#969](https://github.com/BonnierNews/dn-design-system/issues/969)) ([7774e0a](https://github.com/BonnierNews/dn-design-system/commit/7774e0aeaf9cc836a5775665259fcc7003dc0f7a))
+* **web:** update typography for native puff ([#972](https://github.com/BonnierNews/dn-design-system/issues/972)) ([2ac880f](https://github.com/BonnierNews/dn-design-system/commit/2ac880f3394a8fba4bec6d97a5033181807e6a9a))
+
+
+### Bug Fixes
+
+* **web:** remove unused props from floating-button readme example ([#971](https://github.com/BonnierNews/dn-design-system/issues/971)) ([9f53f46](https://github.com/BonnierNews/dn-design-system/commit/9f53f460e041d385d6869e1acaa4126f8952a69d))
+
+
+
 ## 4.1.0-alpha.3 (2023-08-31)
 
 

package/components/floating-button/README.md

@@ -30,8 +30,7 @@ These are copy paste friendly examples to quickliy get started using a component
 
 {{ FloatingButton({
   text: 'With icon',
-  iconPosition: 'left',
-  iconName: 'arrow_forward',
+  iconName: 'arrow_forward'
 })}}
 ```
 

package/components/teaser-native/teaser-native.scss

@@ -18,16 +18,8 @@
   }
 
   .ds-teaser__title {
-    font-family: $ds-font--arial;
-    font-weight: 700;
-    @include ds-mq-only-breakpoint(mobile) {
-      font-size: ds-px-to-rem(20px);
-      line-height: ds-px-to-rem(24px);
-    }
-    @include ds-mq-smallest-breakpoint(tablet) {
-      font-size: ds-px-to-rem(32px);
-      line-height: ds-px-to-rem(36px);
-    }
+    @include ds-typography($ds-typography-expressive-heading02bold);
+    font-family: $ds-font--arial !important;
   }
 
   &::after {
@@ -47,6 +39,12 @@
     }
   }
 
+  &.ds-teaser--native-large {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading04bold);
+    }
+  }
+
   &.ds-teaser--native-right {
     @include ds-mq-smallest-breakpoint(tablet) {
       .ds-teaser__title {
@@ -57,6 +55,10 @@
   }
 
   &.ds-teaser--native-standard {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading03bold);
+    }
+
     .ds-teaser__media {
       margin-left: ds-spacing-component($ds-sc-x4);
       float: right;

package/components/text-button/README.md

@@ -11,6 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |text | String | yes | | | |
+|size| String | no | default, small | default | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |

package/components/text-button/text-button.njk

@@ -14,6 +14,10 @@
     {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
+  {% endif %}
+
   {%- if params.fullWidth %}
     {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
@@ -32,7 +36,11 @@
   {% endif %}
 
   {%- set loadingHtml %}
-    {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+    {% if (params.size == 'small') %}
+      {{ Spinner({ size: "xsmall", variant: "primary", forcePx: params.forcePx }) }}
+    {% else %}
+      {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+    {% endif %}
   {% endset %}
 
   {%- if params.loading %}

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

@@ -5,6 +5,7 @@
 $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;
@@ -142,6 +143,54 @@ $ds-text-btn__icon-size: 24px;
   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);
 }

package/package.json

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