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

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.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)
+
+
+### Features
+
+* **web:** implement the groupheader component ([#961](https://github.com/BonnierNews/dn-design-system/issues/961)) ([7767031](https://github.com/BonnierNews/dn-design-system/commit/77670310626cbbe1516e5fd0937c300c6938dbcb))
+
+
+
 ## 4.1.0-alpha.1 (2023-08-24)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/button-toggle/README.md

@@ -15,7 +15,7 @@
 |selectedText | String | yes | | | |
 |disabled | bool | no | true, false | false | |
 |variant | String | no | brand, SecondaryFilled | brand | Design variant |
-|size| String | no | default, small | default | |
+|size| String | no | default, small, xsmall | default | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |

package/components/floating-button/README.md

@@ -0,0 +1,41 @@
+- 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',
+  iconPosition: 'left',
+  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/group-header/README.md

@@ -0,0 +1,44 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
+- Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
+- Storybook (Latest): [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
+
+----
+
+# GroupHeader
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | string | yes | | | The title text |
+|variant | string | no | icon, link, toggle | icon | The variant to render |
+|href | string | no | | | If given, the title is rendered as a link. Only available for variants `icon` and `link` |
+|linkText | string | no | | | The link text to render (only for variant `link`) |
+|toggle | object | no | | | Arguments to the ToggleButton (only for variant `toggle`) |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+Depending on variant, only one of `toggle`, `linkText` is allowed. In `icon` and `link` mode, the `href` is required to show the ornament.
+
+## 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/group-header/group-header.njk' import GroupHeader %}
+
+{{ call GroupHeader({
+  title: "Dagens Nyheter",
+  href: "https://www.dn.se/"
+}) }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/group-header/group-header";
+```
+
+### JS
+If you provide the `toggle` parameter, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).

package/components/group-header/group-header.njk

@@ -0,0 +1,42 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{% macro GroupHeader(params) %}
+  {% set componentClassName = "ds-group-header" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  {% set groupHeaderInner %}
+    <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
+
+    {% if params.variant == 'toggle' and params.toggle %}
+      {# Could we add defaults here? #}
+      {{ ButtonToggle(params.toggle) }}
+    {% elif params.variant == 'link' and params.linkText and params.href %}
+      <span class="{{ componentClassName + '__right-link' }}">
+        {{ params.linkText }}
+      </span>
+    {% elif (params.variant == 'icon' or not params.variant) and params.href %}
+      {{ IconUse({ icon: "arrow_forward" }) }}
+    {% endif %}
+  {% endset %}
+
+  {% if (params.variant == 'link' or params.variant == 'icon' or not params.variant) and params.href %}
+    <a class="{{ classes }} {{ componentClassName + '--link'}}" href="{{ params.titleHref }}" {{ attributes | safe }}>
+      {{ groupHeaderInner | safe }}
+    </a>
+  {% else %}
+    <div class="{{ classes }}" {{ attributes | safe }}>
+      {{ groupHeaderInner | safe }}
+    </div>
+  {% endif %}
+
+{% endmacro %}

package/components/group-header/group-header.scss

@@ -0,0 +1,49 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button-toggle/button-toggle.scss";
+
+.ds-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $ds-color-background-primary;
+  color: $ds-color-text-primary;
+  padding: ds-spacing-component(0 $ds-sc-x4);
+  @include ds-typography($ds-typography-functional-body02regular);
+
+  .ds-group-header__right-link,
+  .ds-btn-toggle,
+  .ds-icon {
+    flex-shrink: 0;
+  }
+
+  .ds-group-header__right-link {
+    @include ds-link($ds-link-paragraph);
+  }
+
+  .ds-icon {
+    height: 24px;
+    width: 24px;
+  }
+
+  &.ds-group-header--link {
+    @include ds-link($ds-link-list);
+
+    @include ds-hover(true) {
+      text-decoration: none;
+
+      .ds-group-header__title {
+        @include ds-underline(1px, 2px);
+      }
+
+      .ds-group-header__right-link {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .ds-group-header__title {
+    padding: ds-spacing-component($ds-sc-x3 0);
+    @include ds-typography($ds-typography-functional-body02bold);
+    margin: 0;
+  }
+}

package/package.json

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