@bonniernews/dn-design-system-web 4.7.2 → 4.7.4

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.7.4 (2023-09-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 4.7.3 (2023-09-15)
+
+
+### Bug Fixes
+
+* **web:** add iconPosition to floating button ([#988](https://github.com/BonnierNews/dn-design-system/issues/988)) ([b4de9b8](https://github.com/BonnierNews/dn-design-system/commit/b4de9b82a5d5f0a9f7f388b05956b6889e726f82))
+
+
+
 ## 4.7.2 (2023-09-14)
 
 

package/components/floating-button/README.md

@@ -13,6 +13,7 @@
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |size| String | no | default, small | default | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|iconPosition | String | no | none, left, right | none | |
 |loading | bool | no | true, false | false | |
 |href | String | no | | | If href is set the button will be rendered as an a-tag |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/floating-button/floating-button.njk

@@ -26,8 +26,8 @@
     {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {%- if params.iconName %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon"), additionalClasses) %}
+  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon", classNamePrefix + "icon" + "-" + params.iconPosition), additionalClasses) %}
     {% set iconSvg =  IconUse({ icon: params.iconName }) %}
   {% endif %}
 

package/components/floating-button/floating-button.scss

@@ -3,7 +3,57 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-floating-btn__icon-size: 24px;
+.ds-floating-btn {
+  --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5, rem)};
+  --ds-floating-btn__icon-size: #{ds-px-to-rem(24px)};
+
+  &.ds-force-px {
+    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5)};
+    --ds-floating-btn__icon-size: 24px;
+  }
+
+  &.ds-floating-btn--icon-left {
+    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4, rem)};
+    --ds-floating-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
+
+    &.ds-force-px {
+      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4)};
+    }
+  }
+
+  &.ds-floating-btn--icon-right {
+    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5, rem)};
+    --ds-floating-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+
+    &.ds-force-px {
+      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5)};
+    }
+  }
+
+  &.ds-floating-btn--small {
+    --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5, rem)};
+
+    &.ds-force-px {
+      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5)};
+
+      &.ds-floating-btn--icon-left {
+        --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4)};
+      }
+
+      &.ds-floating-btn--icon-right {
+        --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5)};
+      }
+    }
+
+    &.ds-floating-btn--icon-left {
+      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4, rem)};
+    }
+
+    &.ds-floating-btn--icon-right {
+      --ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5, rem)};
+    }
+  }
+}
 
 .ds-floating-btn {
   cursor: pointer;
@@ -39,7 +89,7 @@ $ds-floating-btn__icon-size: 24px;
     color: $ds-color-text-secondary;
     background-color: $ds-color-component-primary;
     border-radius: 100px;
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x5, rem);
+    padding: var(--ds-floating-btn__inner-padding);
     position: relative;
     box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
 
@@ -84,23 +134,16 @@ $ds-floating-btn__icon-size: 24px;
   @include ds-loading();
 }
 
-.ds-floating-btn--small .ds-floating-btn__inner {
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x2)) ds-px-to-rem(ds-spacing-component($ds-sc-x5));
-}
-
 .ds-floating-btn--icon .ds-floating-btn__inner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-right: ds-px-to-rem(
-      ds-spacing-component($ds-sc-x5)
-    );
 
   .ds-icon {
     display: flex;
-    height: ds-px-to-rem($ds-floating-btn__icon-size);
-    width: ds-px-to-rem($ds-floating-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
+    margin: var(--ds-floating-btn__icon-margin);
+    height: var(--ds-floating-btn__icon-size);
+    width: var(--ds-floating-btn__icon-size);
 
     svg {
       fill: currentColor;
@@ -108,26 +151,10 @@ $ds-floating-btn__icon-size: 24px;
   }
 }
 
-.ds-floating-btn.ds-force-px {
-  .ds-floating-btn__inner {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x5);
-    @include ds-typography($ds-typography-detailstandard-button, true);
-  }
-
-  &.ds-floating-btn--icon .ds-floating-btn__inner {
-    .ds-icon {
-      margin: ds-spacing-component(0 0 0 $ds-sc-x2);
-      height: $ds-floating-btn__icon-size;
-      width: $ds-floating-btn__icon-size;
-    }
-  }
+.ds-floating-btn--icon-left .ds-floating-btn__inner {
+  flex-direction: row-reverse;
+}
 
-  &.ds-floating-btn--small {
-    .ds-floating-btn__inner {
-      padding: ds-spacing-component($ds-sc-x2 $ds-sc-x5);
-    }
-    &.ds-floating-btn--icon .ds-floating-btn__inner {
-      padding-right: ds-spacing-component($ds-sc-x4);
-    }
-  }
+.ds-floating-btn.ds-force-px .ds-floating-btn__inner {
+  @include ds-typography($ds-typography-detailstandard-button, true);
 }

package/package.json

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