@bonniernews/dn-design-system-web 0.1.0-alpha.49 → 0.1.0-alpha.53

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.53](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.52...@bonniernews/dn-design-system-web@0.1.0-alpha.53) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** mark attributes as safe ([#435](https://github.com/BonnierNews/dn-design-system/issues/435)) ([dd4338d](https://github.com/BonnierNews/dn-design-system/commit/dd4338dfb2daa3b717f1f598742b31555b1c895e))
+
+
+
+
+
+# [0.1.0-alpha.52](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.51...@bonniernews/dn-design-system-web@0.1.0-alpha.52) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** remove unnecessary disabled attributes from list item ([#430](https://github.com/BonnierNews/dn-design-system/issues/430)) ([90cc887](https://github.com/BonnierNews/dn-design-system/commit/90cc8875feb936a3a855e96a28ce9014a08a5f17))
+
+
+
+
+
+# [0.1.0-alpha.51](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.50...@bonniernews/dn-design-system-web@0.1.0-alpha.51) (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** update scss examples in readme ([#424](https://github.com/BonnierNews/dn-design-system/issues/424)) ([4c892d5](https://github.com/BonnierNews/dn-design-system/commit/4c892d5456a386262ec655abb16cdd8029dbc764))
+
+
+
+
+
+# 0.1.0-alpha.50 (2022-11-17)
+
+
+### Bug Fixes
+
+* **web:** remove hover/active on disabled items ([#429](https://github.com/BonnierNews/dn-design-system/issues/429)) ([99703ce](https://github.com/BonnierNews/dn-design-system/commit/99703cecb536a0b6464051da6f2dafce733b26df))
+
+
+
+
+
 # [0.1.0-alpha.49](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.48...@bonniernews/dn-design-system-web@0.1.0-alpha.49) (2022-11-15)
 
 

package/components/badge/README.md

@@ -30,5 +30,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/badge/badge.scss";
+@use "@bonniernews/dn-design-system-web/components/badge/badge";
 ```

package/components/button/README.md

@@ -46,5 +46,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/button/button.scss";
+@use "@bonniernews/dn-design-system-web/components/button/button";
 ```

package/components/button/button.njk

@@ -7,7 +7,7 @@
   {% set text = params.text %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -45,8 +45,8 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></a>
+    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe}}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></a>
   {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></button>
+    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}><div class="{{ componentClassName + '__inner'}}"><span>{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></button>
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -73,10 +73,10 @@ $ds-btn__icon-size: 24px;
     }
   }
 
-  &:hover .ds-btn__inner::before {
+  &:hover:not(:disabled) .ds-btn__inner::before {
     background-color: var($ds-color-component-primary-overlay);
   }
-  &:active .ds-btn__inner::before {
+  &:active:not(:disabled) .ds-btn__inner::before {
     background-color: var($ds-color-component-primary-overlay-02);
   }
   &:disabled .ds-btn__inner {
@@ -199,10 +199,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: var($ds-color-border-focus-02);
   }
-  &:hover .ds-btn__inner::before {
+  &:hover:not(:disabled) .ds-btn__inner::before {
     background-color: var($ds-color-component-secondary-overlay);
   }
-  &:active .ds-btn__inner::before {
+  &:active:not(:disabled) .ds-btn__inner::before {
     background-color: var($ds-color-component-secondary-overlay-02);
   }
 }

package/components/checkbox/README.md

@@ -38,5 +38,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/checkbox/checkbox.scss";
+@use "@bonniernews/dn-design-system-web/components/checkbox/checkbox";
 ```

package/components/checkbox/checkbox.njk

@@ -15,7 +15,7 @@
   {% set name = params.name | default("ds-checkbox") %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -38,7 +38,7 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   <div class="{{ classes }}">
-    <input type="checkbox" id="{{ name }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{-" required" if params.required }} {{- attributes }} />
+    <input type="checkbox" id="{{ name }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{-" required" if params.required }} {{- attributes | safe }} />
     {% if params.stripLabel %}
       <div class="{{ componentClassName + '__inner'}}">
         {{ CheckboxIcons(componentClassName) }}

package/components/checkbox/checkbox.scss

@@ -137,4 +137,7 @@ $ds-checkbox__error-icon-size: 20px;
   .ds-checkbox__text {
     color: var($ds-color-text-disabled);
   }
+  &::before {
+    background-color: unset;
+  }
 }

package/components/divider/README.md

@@ -28,5 +28,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/divider/divider.scss";
+@use "@bonniernews/dn-design-system-web/components/divider/divider";
 ```

package/components/icon-button/README.md

@@ -38,5 +38,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/icon-button/icon-button.scss";
+@use "@bonniernews/dn-design-system-web/components/icon-button/icon-button";
 ```

package/components/icon-button/icon-button.njk

@@ -7,7 +7,7 @@
   {% set variant = [] %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -40,12 +40,12 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>
+    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
       <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
     </a>
   {% else %}
-    <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
       <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
     </button>

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

@@ -28,7 +28,7 @@
         {% endif %}
       </div>
     {% endcall %}
-  </lit>
+  </li>
 {% endmacro %}
 
 {# Internal helper macro - not intended for use outside of this file #}
@@ -37,7 +37,7 @@
   {% set variant = [] %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -70,7 +70,7 @@
   {% endif %}
 
   {% if params.listItemType == "standard" or not params.listItemType %}
-    {% set element = "link" if params.href else "button"  %}
+    {% set element = "link" if params.href and not params.disabled else "button"  %}
     {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
   {% else %}
     {% set element = params.listItemType %}
@@ -80,15 +80,15 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if element == 'link' %}
-    <a class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }} href="#">
+    <a class="{{ classes }}" {{- attributes | safe }} href="#">
       {{ caller() if caller }}
     </a>
   {% elif element == 'button' %}
-    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{ caller() if caller }}
     </button>
   {% elif element == 'checkbox' %}
-    <div class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <div class="{{ classes }}" {{- attributes | safe }}>
       <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
       {% set iconLeftSvg %}
         {{ Checkbox({
@@ -103,7 +103,7 @@
       {{ caller() if caller }}
     </div>
   {% elif element == 'radio' %}
-    <div class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <div class="{{ classes }}" {{- attributes | safe }}>
       <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.id }}"></label>
       {% set iconLeftSvg %}
         {{ RadioButton({
@@ -118,7 +118,7 @@
       {{ caller() if caller }}
     </div>
   {% elif element == 'switch' %}
-    <div class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <div class="{{ classes }}" {{- attributes | safe }}>
       <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
       {% set iconRightSvg %}
         {{ Switch({
@@ -138,14 +138,14 @@
       {{ Icon({ icon: "expand_less" }) }}
       {{ Icon({ icon: "expand_more" }) }}
     {% endset %}
-    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{ caller() if caller }}
     </button>
     <div class="{{ componentClassName + '__accordion-inner'}}">
       {{ params.accordionContent | safe }}
     </div>
   {% else %}
-    <div class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
+    <div class="{{ classes }}" {{- attributes | safe }}>
       {{ caller() if caller }}
     </div>
   {% endif %}

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

@@ -110,10 +110,10 @@ $ds-list-item__icon-size: 24px;
     margin-left: ds-spacing-component(x4);
   }
 
-  &:hover .ds-list-item__inner::before {
+  &:hover:not(.ds-list-item--disabled) .ds-list-item__inner::before {
     background-color: var($ds-color-component-primary-overlay);
   }
-  &:active .ds-list-item__inner::before {
+  &:active:not(.ds-list-item--disabled) .ds-list-item__inner::before {
     background-color: var($ds-color-component-primary-overlay-02);
   }
   &:focus-visible {
@@ -123,16 +123,6 @@ $ds-list-item__icon-size: 24px;
       outline-offset: 2px;
     }
   }
-  &:disabled {
-    cursor: not-allowed;
-    .ds-list-item__inner {
-      outline: none;
-      color: var($ds-color-icon-disabled);
-      &::before {
-        background-color: transparent;
-      }
-    }
-  }
 
   @at-root a#{&} {
     box-sizing: border-box;
@@ -201,6 +191,16 @@ $ds-list-item__icon-size: 24px;
   .ds-list-item__icon-right {
     color: var($ds-color-icon-disabled);
   }
+
+  .ds-list-item__wrapping-label::after {
+    cursor: not-allowed;
+  }
+  .ds-list-item__inner {
+    color: var($ds-color-icon-disabled);
+    &::before {
+      background-color: unset;
+    }
+  }
 }
 
 .ds-list-item--accordion .ds-checkbox__accordion,

package/components/radio-button/README.md

@@ -41,5 +41,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button.scss";
+@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button";
 ```

package/components/radio-button/radio-button.njk

@@ -16,7 +16,7 @@
   {% set id = params.id | default("ds-radio-btn-id") %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -39,7 +39,7 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   <div class="{{ classes }}">
-    <input type="radio" id="{{ id }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{-" required" if params.required }} {{- attributes }} value="{{ params.value }}" />
+    <input type="radio" id="{{ id }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{-" required" if params.required }} {{- attributes | safe }} value="{{ params.value }}" />
     {% if params.stripLabel %}
       <div class="{{ componentClassName + '__inner'}}">
         {{ RadioButtonIcons(componentClassName) }}

package/components/radio-button/radio-button.scss

@@ -109,4 +109,7 @@ $ds-radio-btn__icon-size: 24px;
   .ds-radio-btn__text {
     color: var($ds-color-text-disabled);
   }
+  &::before {
+    background-color: unset;
+  }
 }

package/components/switch/README.md

@@ -38,5 +38,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/switch/switch.scss";
+@use "@bonniernews/dn-design-system-web/components/switch/switch";
 ```

package/components/switch/switch.njk

@@ -16,7 +16,7 @@
   {% set name = params.name | default("ds-switch") %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -35,7 +35,7 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   <div class="{{ classes }}">
-    <input type="checkbox" id="{{ name }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{- attributes }} />
+    <input type="checkbox" id="{{ name }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{- attributes | safe }} />
     {% if params.stripLabel %}
       <div class="{{ componentClassName + '__inner'}}">
         {{ SwitchInner(params, componentClassName) }}

package/components/switch/switch.scss

@@ -110,12 +110,12 @@ $ds-switch__container-width: 44px;
   }
 
   &:hover {
-    .ds-switch__box::before {
+    input:not(:disabled) + .ds-switch__box::before {
       background-color: var($ds-color-component-primary-overlay);
     }
   }
   &:active {
-    .ds-switch__box::before {
+    input:not(:disabled) + .ds-switch__box::before {
       background-color: var($ds-color-component-primary-overlay-02);
     }
   }

package/components/text-button/README.md

@@ -40,5 +40,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/text-button/text-button.scss";
+@use "@bonniernews/dn-design-system-web/components/text-button/text-button";
 ```

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

@@ -7,7 +7,7 @@
   {% set text = params.text %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
-      {{attribute}}={{value}}
+      {{attribute}}="{{value}}"
     {% endfor %}
   {% endset %}
 
@@ -39,8 +39,8 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}><div class="{{ componentClassName + '__inner'}}"><span class="ds-text-btn__text">{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></a>
+    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}><div class="{{ componentClassName + '__inner'}}"><span class="ds-text-btn__text">{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></a>
   {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}><div class="{{ componentClassName + '__inner'}}"><span class="ds-text-btn__text">{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></button>
+    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}><div class="{{ componentClassName + '__inner'}}"><span class="ds-text-btn__text">{{ text }}</span>{{- iconSvg | safe if iconSvg -}}</div></button>
   {% endif %}
 {% endmacro %}

package/components/text-input/README.md

@@ -45,7 +45,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Scss
 
 ```scss
-@use "@bonniernews/dn-design-system-web/components/text-input/text-input.scss";
+@use "@bonniernews/dn-design-system-web/components/text-input/text-input";
 ```
 
 ### Javascript

package/foundations/typography/README.md

@@ -4,35 +4,21 @@
 
 # Typography
 
-Can be included through *Sass mixin*, example:
-```css
-@use "@bonniernews/dn-design-system-web/foundations/helpers/typography.scss" as *;
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|token | Sass variable | yes | | | Ex.  $ds-typography-functional-body01regular, all typography variables starts with prefix $ds-typography- |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
 
-@include ds-typography($ds-typography-functional-body01regular);
-
-/** or use typography token name directly: */
-@include ds-typography(functional-body01regular);
-```
-
-To force 'px' (instead of rem) as unit for font-size, letter-spacing and line-height use the forcePx parameter:
-```css
-@include ds-typography($ds-typography-functional-body01regular, true);
-```
-
-Or included as *text component*:
+These are copy paste friendly examples to quickliy get started using a component.
 
-```javascript
-{% from '@bonniernews/dn-design-system-web/foundations/typography/typography.njk' import Typography %}
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/foundations/helpers/typography" as *;
 
-{{ Typography({
-  text: text,
-  textColor: textColor,
-  textComponent: textComponent
-})}}
+@include ds-typography($ds-typography-functional-body01regular);
 ```
 
-Or added directly through *class*.
-
-```html
-<span class="ds-t-body01regular">Body 01 Regular</span>
+With forcePX parameter:
+```scss
+@include ds-typography($ds-typography-functional-body01regular, true);
 ```

package/package.json

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