@bonniernews/dn-design-system-web 0.1.0-alpha.13 → 0.1.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 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.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.19...@bonniernews/dn-design-system-web@0.1.0-alpha.20) (2022-10-07)
+
+
+### Bug Fixes
+
+* **web:** sync sass variables with tokens ([#269](https://github.com/BonnierNews/dn-design-system/issues/269)) ([b760051](https://github.com/BonnierNews/dn-design-system/commit/b760051a2a09ad299c20d193ac47cec95bbf5dab))
+
+
+
+
+
+# 0.1.0-alpha.19 (2022-10-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.17...@bonniernews/dn-design-system-web@0.1.0-alpha.18) (2022-10-03)
+
+
+### Features
+
+* **web:** divider component for web ([#252](https://github.com/BonnierNews/dn-design-system/issues/252)) ([93f5dfb](https://github.com/BonnierNews/dn-design-system/commit/93f5dfb365da8a554b4ea21d519c614cc06081df))
+
+
+
+
+
+# 0.1.0-alpha.17 (2022-10-03)
+
+
+### Features
+
+* **web:** text button component for web ([#254](https://github.com/BonnierNews/dn-design-system/issues/254)) ([6711a5b](https://github.com/BonnierNews/dn-design-system/commit/6711a5b6d46da68eb25db1f9af4f25fbb219011d))
+
+
+
+
+
+# [0.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.15...@bonniernews/dn-design-system-web@0.1.0-alpha.16) (2022-09-30)
+
+
+### Bug Fixes
+
+* **web:** use metrics and new spacing tokens ([#249](https://github.com/BonnierNews/dn-design-system/issues/249)) ([67fe9a7](https://github.com/BonnierNews/dn-design-system/commit/67fe9a715fdadeb1cf08f7fb291d35cd4818307a))
+
+
+
+
+
+# 0.1.0-alpha.15 (2022-09-29)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.14 (2022-09-27)
+
+
+### Features
+
+* **web:** update web typography ([#235](https://github.com/BonnierNews/dn-design-system/issues/235)) ([83a5039](https://github.com/BonnierNews/dn-design-system/commit/83a5039955f6df69f983b52531c46be29738e39d))
+
+
+
+
+
 # 0.1.0-alpha.13 (2022-09-09)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/button/README.md

@@ -11,7 +11,7 @@ attributes: {
   "data-test": "12345"
 },
 classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/"
+href: "https://designsystem-latest.dn.se/",
 type: "submit",
 mobile: {
   fullWidth: true

package/components/button/button.njk

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

package/components/button/button.scss

@@ -1,36 +1,38 @@
 @use "../../foundations/helpers/spacing.scss" as *;
 @use "../../foundations/helpers/typography.scss" as *;
 @use "../../foundations/helpers/mediaQueries.scss" as *;
+@use "../../foundations/helpers/metrics.scss" as *;
 
-// Temporary variables we maybe should handle in a better way
-$ds-btn__border-radius: 2px;
-$ds-btn__border-width--outlined: 1px;
-$ds-btn__outline-width: 2px;
+$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+$ds-btn__clickable-area: 48px;
 
 @mixin ds-btn-disabled() {
   background-color: var(--ds-surface-secondary-soft);
   color: var(--ds-text-primary-soft);
-  outline: none;
   &::before {
     background-color: unset;
   }
 }
 
 .ds-btn {
-  @include ds-typography('detailstandard-button');
-  font-size: 16px; // we should get this from detailstandard-button-token
   cursor: pointer;
+  background-color: transparent;
   border: 0;
-  border-radius: $ds-btn__border-radius;
-  display: inline-block;
-  transition: background-color 50ms ease-out;
-  padding: ds-spacing(1.5 3);
-  position: relative;
+  min-width: $ds-btn__clickable-area;
+  min-height: $ds-btn__clickable-area;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
 
   &:focus-visible {
-    outline-offset: 2px;
+    outline: none;
+    .ds-btn__inner {
+      outline: ds-metrics-border-width(x2) solid;
+      outline-offset: 2px;
+    }
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
   }
 
@@ -40,163 +42,206 @@ $ds-btn__outline-width: 2px;
     text-decoration: none;
   }
 
+  .ds-btn__inner {
+    @include ds-typography('detailstandard-button');
+    border-radius: ds-metrics-border-radius(x1);
+    padding: ds-spacing-component(x3 x6);
+    position: relative;
+    &::before {
+      content: "";
+      border-radius: inherit;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
   &--full-width {
-    width: 100%;
+    &,
+    & .ds-btn__inner {
+      width: 100%;
+    }
   }
-  &--small {
-    padding: ds-spacing(1 2.5);
+  &--small .ds-btn__inner {
+    padding: ds-spacing-component(x2 x5);
   }
-  &--outlined,
+  &--secondary-outlined,
   &--destructive {
-    padding: ds-spacing(1.5)-$ds-btn__border-width--outlined ds-spacing(3)-$ds-btn__border-width--outlined;
+    .ds-btn__inner {
+      padding: ds-spacing-component(x3)-$ds-btn-outlined__border-width ds-spacing-component(x6)-$ds-btn-outlined__border-width;
+    }
 
-    &.ds-btn--small {
-      padding: ds-spacing(1)-$ds-btn__border-width--outlined ds-spacing(2.5)-$ds-btn__border-width--outlined;
+    &.ds-btn--small .ds-btn__inner {
+      padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width ds-spacing-component(x5)-$ds-btn-outlined__border-width;
     }
   }
-  &::before {
-    content: "";
-    border-radius: inherit;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-  span,
-  i {
-    position: relative;
-  }
 }
 
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn--mobile-full-width {
-    width: 100%;
+    &,
+    & .ds-btn__inner {
+      width: 100%;
+    }
   }
 }
 
-.ds-btn--icon-left,
-.ds-btn--icon-right {
+.ds-btn--icon-left .ds-btn__inner,
+.ds-btn--icon-right .ds-btn__inner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   .ds-icon {
     display: flex;
     height: 24px;
-    margin: ds-spacing(0 0 0 1);
+    margin: ds-spacing-component(0 0 0 x2);
     svg {
       fill: currentColor;
     }
   }
 }
 
-.ds-btn--icon-left {
+.ds-btn--icon-left .ds-btn__inner {
   flex-direction: row-reverse;
   .ds-icon {
-    margin: ds-spacing(0 1 0 0);
+    margin: ds-spacing-component(0 x2 0 0);
   }
 }
 
 .ds-btn--brand {
-  background-color: var(--ds-surface-brand-strong);
-  color: var(--ds-text-on-brand);
-  &::before {
-    background-color: var(--ds-interaction-primary-none);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-brand-strong);
+    color: var(--ds-text-on-brand);
+    &::before {
+      background-color: var(--ds-interaction-primary-none);
+    }
   }
-  &:hover::before {
+  &:hover .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-soft);
   }
-  &:active::before {
+  &:active .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-strong);
   }
-  &:focus-visible {
-    outline: $ds-btn__outline-width solid var(--ds-border-brand-strong);
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-brand-strong);
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
   }
 }
 
 .ds-btn--business {
-  background-color: var(--ds-surface-business-strong);
-  color: var(--ds-text-on-business);
-  &::before {
-    background-color: var(--ds-interaction-primary-none);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-business-strong);
+    color: var(--ds-text-on-business);
+    &::before {
+      background-color: var(--ds-interaction-primary-none);
+    }
   }
-  &:hover::before {
+  &:hover .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-soft);
   }
-  &:active::before {
+  &:active .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-strong);
   }
-  &:focus-visible {
-    outline: $ds-btn__outline-width solid var(--ds-border-business-strong);
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-business-strong);
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
   }
 }
 
 .ds-btn--primary {
-  background-color: var(--ds-surface-primary-strong);
-  color: var(--ds-text-on-primary);
-  &::before {
-    background-color: var(--ds-interaction-secondary-none);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-primary-strong);
+    color: var(--ds-text-on-primary);
+    &::before {
+      background-color: var(--ds-interaction-secondary-none);
+    }
   }
-  &:hover::before {
+  &:hover .ds-btn__inner::before {
     background-color: var(--ds-interaction-secondary-soft);
   }
-  &:active::before {
+  &:active .ds-btn__inner::before {
     background-color: var(--ds-interaction-secondary-strong);
   }
-  &:focus-visible {
-    outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-primary-strong);
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
   }
 }
 
-.ds-btn--outlined {
-  background-color: var(--ds-surface-secondary-strong);
-  border: $ds-btn__border-width--outlined solid var(--ds-border-primary-strong);
-  color: var(--ds-text-primary-strong);
-  &::before {
-    background-color: var(--ds-interaction-primary-none);
+.ds-btn--secondaryOutlined {
+  .ds-btn__inner {
+    background-color: var(--ds-surface-secondary-strong);
+    border: $ds-btn-outlined__border-width solid var(--ds-border-primary-strong);
+    color: var(--ds-text-primary-strong);
+    &::before {
+      background-color: var(--ds-interaction-primary-none);
+    }
   }
-  &:hover::before {
+  &:hover .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-soft);
   }
-  &:active::before {
+  &:active .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-strong);
   }
-  &:focus-visible {
-    outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-primary-strong);
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
     border-color: var(--ds-surface-secondary-soft);
   }
 }
 
+.ds-btn--secondaryFilled {
+  .ds-btn__inner {
+    background-color: var(--ds-surface-secondary-soft);
+    color: var(--ds-text-primary-strong);
+    &::before {
+      background-color: var(--ds-interaction-secondary-none);
+    }
+  }
+  &:hover .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-soft);
+  }
+  &:active .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-strong);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-primary-strong);
+  }
+  &:disabled .ds-btn__inner {
+    @include ds-btn-disabled;
+  }
+}
+
 .ds-btn--destructive {
-  background-color: var(--ds-surface-secondary-strong);
-  border: $ds-btn__border-width--outlined solid var(--ds-border-critical-strong);
-  color: var(--ds-text-critical-strong);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-secondary-strong);
+    border: $ds-btn-outlined__border-width solid var(--ds-border-critical-strong);
+    color: var(--ds-text-critical-strong);
+  }
   &::before {
     background-color: var(--ds-interaction-primary-none);
   }
-  &:hover::before {
+  &:hover .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-soft);
   }
-  &:active::before {
+  &:active .ds-btn__inner::before {
     background-color: var(--ds-interaction-primary-strong);
   }
-  &:focus-visible {
-    outline: $ds-btn__outline-width solid var(--ds-border-critical-strong);
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-critical-strong);
   }
-  &:disabled {
+  &:disabled .ds-btn__inner {
     @include ds-btn-disabled;
     border-color: var(--ds-surface-secondary-soft);
   }

package/components/divider/README.md

@@ -0,0 +1,11 @@
+**@bonniernews/dn-design-system-web/components/divider/README.md**
+
+----
+
+# Divider
+
+Parameters available but not used in storybook:
+
+```javascript
+classNames: "my-special-class"
+```

package/components/divider/divider.njk

@@ -0,0 +1,21 @@
+{% macro Divider(params) %}
+  {% set componentClassName = "ds-divider" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+
+  {% if params.variant %}
+    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% else %}
+    {% set variant = (variant.push(classNamePrefix + "soft"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <div class="{{ classes }}">
+    <span class="{{ componentClassName + '__inner'}}"></span>
+  </div>
+{% endmacro %}

package/components/divider/divider.scss

@@ -0,0 +1,22 @@
+@use "../../foundations/helpers/spacing.scss" as *;
+@use "../../foundations/helpers/metrics.scss" as *;
+
+.ds-divider {
+  margin: ds-spacing-layout(x2 0);
+  width: 100%;
+  .ds-divider__inner {
+    background-color: currentColor;
+    display: block;
+    height: ds-metrics-border-width(x1);
+    width: 100%;
+  }
+  &--soft {
+    color: var(--ds-border-primary-soft);
+  }
+  &--medium {
+    color: var(--ds-border-primary-medium);
+  }
+  &--strong {
+    color: var(--ds-border-primary-strong);
+  }
+}

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

@@ -5,7 +5,6 @@
   {% set componentClassName = "ds-icon-btn" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
-  {% set text = params.text %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
       {{attribute}}={{value}}
@@ -40,14 +39,12 @@
   {% if params.href %}
     <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      {{ text }}
-      {{- iconSvg | safe if iconSvg -}}
+      <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
     </a>
   {% else %}
     <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{ attributes }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      {{ text }}
-      {{- iconSvg | safe if iconSvg -}}
+      <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
     </button>
   {% endif %}
 {% endmacro %}