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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 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)
+
+
+### Features
+
+* **web:** floating button ([#967](https://github.com/BonnierNews/dn-design-system/issues/967)) ([34aff80](https://github.com/BonnierNews/dn-design-system/commit/34aff802da810baab13c6e872fd66de13a0dd2a6))
+
+
+
 ## 4.1.0-alpha.2 (2023-08-25)
 
 

package/components/floating-button/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/floating-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/floating-button)
+- Storybook: [Button > Web](https://designsystem.dn.se/?path=/story/components-app-web-floatingbutton-web)
+
+----
+
+# FloatingButton
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|text | String | yes | | | |
+|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 |
+|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" } |
+|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/floating-button/floating-button.njk' import FloatingButton %}
+
+{{ FloatingButton({
+  text: 'With icon',
+  iconName: 'arrow_forward'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/floating-button/floating-button";
+```

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

@@ -0,0 +1,54 @@
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro FloatingButton(params) %}
+  {%- set componentClassName = "ds-floating-btn" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set text = params.text %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+
+  {%- set loadingHtml %}
+    {{ Spinner({ size: 'small', forcePx: params.forcePx }) }}
+  {% endset %}
+
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.forcePx %}
+    {% 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.iconName %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon"), additionalClasses) %}
+    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
+  {% endif %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- if params.href %}
+    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+        <span>{{ text }}</span>
+        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      </span>
+    </a>
+  {% else %}
+    <button {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+        <span>{{ text }}</span>
+        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
+      </span>
+    </button>
+  {% endif %}
+{% endmacro %}

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

@@ -0,0 +1,133 @@
+@use "sass:math";
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
+@use "../spinner/spinner.scss" as *;
+
+$ds-floating-btn__icon-size: 24px;
+
+.ds-floating-btn {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  span {
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    .ds-floating-btn__inner {
+      outline: ds-metrics-border-width(x2) solid;
+      outline-offset: 2px;
+      outline-color: $ds-color-border-focus-02;
+    }
+  }
+
+  @at-root a#{&} {
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .ds-floating-btn__inner {
+    @include ds-typography($ds-typography-detailstandard-button);
+    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);
+    position: relative;
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
+
+    &::before {
+      content: "";
+      border-radius: inherit;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-floating-btn__inner::before {
+      background-color: $ds-color-component-secondary-overlay;
+    }
+  }
+
+  &:active:not(:disabled):not(.ds-loading) .ds-floating-btn__inner::before {
+    background-color: $ds-color-component-secondary-overlay-02;
+  }
+
+  &:not(.ds-loading):disabled {
+    opacity: $ds-opacity-component-disabled;
+    cursor: not-allowed;
+  }
+
+  // we have to override spinner styling since spinner variant is based on "off" button variant
+  &.ds-loading {
+    .ds-spinner__inner {
+      border-top-color: $ds-color-icon-secondary;
+
+      &::before {
+        border-color: $ds-color-icon-secondary;
+      }
+    }
+  }
+
+  @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);
+
+    svg {
+      fill: currentColor;
+    }
+  }
+}
+
+.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--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);
+    }
+  }
+}

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.2",
+  "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",