@bonniernews/dn-design-system-web 2.1.0-alpha.3 → 2.1.0-alpha.5

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.
 
+## [2.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.4...@bonniernews/dn-design-system-web@2.1.0-alpha.5) (2023-02-20)
+
+
+### Features
+
+* **web:** thematic break ([#673](https://github.com/BonnierNews/dn-design-system/issues/673)) ([6a48aac](https://github.com/BonnierNews/dn-design-system/commit/6a48aac61f29243afcc5980f6e4ba70e3ee7b1c1))
+
+
+
+## [2.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.3...@bonniernews/dn-design-system-web@2.1.0-alpha.4) (2023-02-20)
+
+
+### Bug Fixes
+
+* **web:** add element attributes to list items ([#676](https://github.com/BonnierNews/dn-design-system/issues/676)) ([5858f74](https://github.com/BonnierNews/dn-design-system/commit/5858f74d99d24bec38b4d404b4b4dcbfacfab9d1))
+
+
+
 ## [2.1.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.2...@bonniernews/dn-design-system-web@2.1.0-alpha.3) (2023-02-17)
 
 

package/components/button/button.scss

@@ -280,7 +280,7 @@ $ds-btn__icon-size: 24px;
 .ds-btn--primary,
 .ds-btn--staticWhiteFilled {
   &:not(.ds-loading):disabled {
-    opacity: 0.6; // @todo replace with opacity token if/when available
+    opacity: $ds-opacity-component-disabled;
     .ds-btn__inner {
       cursor: not-allowed;
     }

package/components/button-toggle/button-toggle.njk

@@ -1,15 +1,12 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% 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 ButtonToggle(params) %}
   {% set componentClassName = "ds-btn-toggle" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.selected %}
     {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}

package/components/button-toggle/button-toggle.scss

@@ -1,11 +1,5 @@
 @use "sass:math";
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -71,8 +65,10 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     }
   }
 
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -127,7 +123,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   }
   &:not(.ds-btn-toggle--selected) {
     &:not(.ds-loading):disabled {
-      opacity: 0.6; // @todo replace with opacity token if/when available
+      opacity: $ds-opacity-component-disabled;
       .ds-btn-toggle__inner {
         cursor: not-allowed;
       }

package/components/footer/footer.njk

@@ -1,10 +1,6 @@
-{% macro Footer(params) %}
-  {% macro _getAttributes(attributes) %}
-    {% for attribute, value in attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endmacro %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
+{% macro Footer(params) %}
   {% set componentClassName = "ds-footer" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
@@ -23,11 +19,11 @@
     <div class="{{ componentClassName + '__inner'}}">
       <div class="{{ componentClassName + '__link-grid'}}">
         {% for group in params.linkGroups %}
-          <div class="{{ componentClassName + '__link-group'}}" {{- _getAttributes(group.attributes) | safe }}>
+          <div class="{{ componentClassName + '__link-group'}}" {{- getAttributes(group.attributes) | safe }}>
             <h2>{{ group.title }}</h2>
             <ul>
               {% for link in group.links %}
-                <li><a href="{{ link.href }}" class="ds-footer__link {{ link.classNames }}" {{- _getAttributes(link.attributes) | safe }}>{{ link.text }}</a></li>
+                <li><a href="{{ link.href }}" class="ds-footer__link {{ link.classNames }}" {{- getAttributes(link.attributes) | safe }}>{{ link.text }}</a></li>
               {% endfor %}
             </ul>
           </div>
@@ -51,11 +47,10 @@
       {% if params.channels %}
         <div class="{{ componentClassName + '__channels'}}">
           {% for link in params.channels %}
-            <a href="{{ link.href }}" class="ds-footer__channel-link {{ link.classNames }}" {{- _getAttributes(link.attributes) | safe }}>{{ link.text }}</a>
+            <a href="{{ link.href }}" class="ds-footer__channel-link {{ link.classNames }}" {{- getAttributes(link.attributes) | safe }}>{{ link.text }}</a>
           {% endfor %}
         </div>
       {% endif %}
     </div>
   </footer>
 {% endmacro %}
-

package/components/list-item/README-checkbox.md

@@ -18,6 +18,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual checkbox element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-radio.md

@@ -19,6 +19,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual radio element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-switch.md

@@ -18,6 +18,7 @@
 |border | bool | no | true, false | false | |
 |leadingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual switch element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-toggle.md

@@ -19,6 +19,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not list item. Same structure as attributes above |
 |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
 
@@ -34,7 +35,7 @@ These are copy paste friendly examples to quickliy get started using a component
 {{ ListItem({
   listItemType: 'toggle',
   title: 'My toggle list item',
-  titleHref: '#',
+  titleHref: 'dn.se',
   toggleText: 'Följ',
   toggleSelectedText: 'Följer'
 })}}

package/components/list-item/list-item.njk

@@ -3,6 +3,7 @@
 {% from '@bonniernews/dn-design-system-web/components/checkbox/checkbox.njk' import Checkbox %}
 {% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro ListItem(params) %}
   {% set componentClassName = "ds-list-item" %}
@@ -16,7 +17,7 @@
         {% if params.title %}
           <div class="{{ componentClassName + '__titles'}}">
             {% if params.titleHref and not params.disabled %}
-              <a class="{{ componentClassName + '__title'}}" href="{{ params.href }}">{{ params.title }}</a>
+              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}">{{ params.title }}</a>
             {% else %}
               <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
             {% endif %}
@@ -43,11 +44,7 @@
 {% macro ListItemInner(params, componentClassName) %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.forcePx %}
     {% set variant = (variant.push("ds-force-px"), variant) %}
@@ -101,7 +98,8 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          stripLabel: true
+          stripLabel: true,
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -115,7 +113,7 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected }]
+          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes }]
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -131,7 +129,8 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          stripLabel: true
+          stripLabel: true,
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -158,7 +157,8 @@
           condensed: false,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "xsmall"
+          size: "xsmall",
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}

package/components/list-item/list-item.scss

@@ -210,8 +210,7 @@ $ds-list-item__padding: ds-spacing-component(x4);
 
 .ds-list-item--accordion .ds-checkbox__accordion,
 .ds-list-item--radio .ds-radio-btn__inner,
-.ds-list-item--checkbox .ds-checkbox__inner,
-.ds-list-item--switch .ds-switch__inner {
+.ds-list-item--checkbox .ds-checkbox__inner {
   &::before {
     display: none;
   }

package/components/switch/switch.scss

@@ -1,9 +1,4 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 
 $ds-switch__knob-size: 16px;
 $ds-switch__knob-padding: 4px;
@@ -108,18 +103,30 @@ $ds-switch__container-width: 44px;
       outline-color: $ds-color-border-focus;
     }
   }
+}
 
-  &:hover {
-    input:not(:disabled) + .ds-switch__box::before {
-      background-color: $ds-color-component-primary-overlay;
-    }
-  }
-  &:active {
-    input:not(:disabled) + .ds-switch__box::before {
-      background-color: $ds-color-component-primary-overlay-02;
-    }
+@include ds-hover() {
+  .ds-switch
+    input:not(:disabled)
+    + .ds-switch__inner:hover
+    .ds-switch__box::before,
+  .ds-list-item--switch:hover
+    input:not(:disabled)
+    + .ds-switch__inner
+    .ds-switch__box::before {
+    background-color: $ds-color-component-primary-overlay;
   }
 }
+.ds-switch
+  input:not(:disabled)
+  + .ds-switch__inner:active
+  .ds-switch__box::before,
+.ds-list-item--switch:active
+  input:not(:disabled)
+  + .ds-switch__inner
+  .ds-switch__box::before {
+  background-color: $ds-color-component-primary-overlay-02;
+}
 
 .ds-switch--condensed .ds-switch__inner {
   padding: 0;

package/components/thematic-break/README.md

@@ -0,0 +1,30 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
+- Storybook: [ThematicBreak > Web](https://designsystem.dn.se/?path=/story/components-app-web-thematicbreak-web)
+
+----
+
+# ThematicBreak
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+
+## 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/thematic-break/thematic-break.njk' import ThematicBreak %}
+
+{{ ThematicBreak() }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
+```

package/components/thematic-break/thematic-break.njk

@@ -0,0 +1,16 @@
+{% macro ThematicBreak(params) %}
+  {% set componentClassName = "ds-thematic-break" %}
+  {% set additionalClasses = [] %}
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <hr class="{{ classes }}" {{- attributes | safe }}></hr>
+{% endmacro %}

package/components/thematic-break/thematic-break.scss

@@ -0,0 +1,10 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-thematic-break {
+  width: 128px;
+  height: 4px;
+  margin: ds-spacing-layout(gap-vertical-static-medium) auto
+    ds-spacing-layout(gap-vertical-static-large);
+  background-color: $ds-color-border-primary;
+  border: none;
+}

package/njk-helpers/attributes.njk

@@ -0,0 +1,5 @@
+{% macro getAttributes(attributes) %}
+  {% for attribute, value in attributes %}
+    {{attribute}}="{{value}}"
+  {% endfor %}
+{% endmacro %}

package/package.json

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