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

package/CHANGELOG.md

@@ -3,6 +3,177 @@
 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
+
+
+
+
+
+# 0.1.0-alpha.12 (2022-09-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.10...@bonniernews/dn-design-system-web@0.1.0-alpha.11) (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.10 (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.9 (2022-08-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.8 (2022-08-22)
+
+
+### Bug Fixes
+
+* **web:** focus style only on focus-visible and use pressed design as active ([#174](https://github.com/BonnierNews/dn-design-system/issues/174)) ([503ee14](https://github.com/BonnierNews/dn-design-system/commit/503ee148593fac203ff9127e0372061ab7280df5))
+
+
+
+
+
+# 0.1.0-alpha.7 (2022-08-19)
+
+
+### Features
+
+* **app:** add input field component ([#156](https://github.com/BonnierNews/dn-design-system/issues/156)) ([be8231c](https://github.com/BonnierNews/dn-design-system/commit/be8231c4b0b9b707eda5384bfc462c5f4e787b32))
+
+
+
+
+
+# 0.1.0-alpha.6 (2022-08-18)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.5 (2022-08-15)
+
+
+### Features
+
+* **web:** add option for full-width on mobile for buttons ([#162](https://github.com/BonnierNews/dn-design-system/issues/162)) ([845a187](https://github.com/BonnierNews/dn-design-system/commit/845a187132a5976a804a86b2561fbbdbf5ee81fa))
+
+
+
+
+
+# [0.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.3...@bonniernews/dn-design-system-web@0.1.0-alpha.4) (2022-08-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.3 (2022-08-04)
+
+
+### Features
+
+* **core:** add info icon ([#157](https://github.com/BonnierNews/dn-design-system/issues/157)) ([fa62ae1](https://github.com/BonnierNews/dn-design-system/commit/fa62ae15901bfe87d5dfcaa0db0d70e107ccd0ed))
+
+
+
+
+
 # 0.1.0-alpha.2 (2022-07-01)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/button/README.md

@@ -1,22 +1,26 @@
-### @bonniernews/dn-design-system-web/components/button/README.md
+**@bonniernews/dn-design-system-web/components/button/README.md**
 
 ----
 
-#### **Some sample documentation for a component**
+# Button
 
-Here we can document **technical details** and for example list parameters not available in storybook but used in the *real world*.
+Parameters available but not used in storybook:
 
 ```javascript
-/* Additional available parameters */
 attributes: {
   "data-test": "12345"
 },
 classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/" // if you add href parameter the button will rendered as an <a>
-type: "submit"
+href: "https://designsystem-latest.dn.se/",
+type: "submit",
+mobile: {
+  fullWidth: true
+}
 ```
 
-We could also link to places where the component is/will be implemented
+ℹ️ If you add href parameter the button will be rendered as an `<a>`
 
-#### 🧐 See it in the wild:
+----
+
+# 🧐 See it in the wild:
 - [DN Skola prenumeration](https://prenumerera.dn.se/skolor/)

package/components/button/button.njk

@@ -5,7 +5,6 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
   {% set text = params.text %}
-  {% set isDisabled = true if params.state and params.state == 'disabled' else false %}
   {% set attributes %}
     {% for attribute, value in params.attributes %}
       {{attribute}}={{value}}
@@ -26,6 +25,10 @@
     {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
   {% endif %}
 
+  {% if params.mobile and params.mobile.fullWidth %}
+    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {% endif %}
+
   {% if params.iconName and params.iconPosition and params.iconPosition != "none" %}
     {% set iconName = params.iconName | lower %}
     {% set variant = (variant.push(classNamePrefix + "icon" + "-" + params.iconPosition ), variant) %}
@@ -39,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="{{ type | default('button') }}" class="{{ classes }}" {{ "disabled" if isDisabled }} {{ attributes }}>{{ text }}{{- 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,31 +1,39 @@
 @use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/variable.scss" as *;
-@use "../../foundations/helpers/fontFamily.scss" as *;
-@use "../../foundations/variables/colorsDnLight" 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);
+  &::before {
+    background-color: unset;
+  }
+}
 
 .ds-btn {
-  @include ds-font-sans();
   cursor: pointer;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: .4px;
+  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);
+  min-width: $ds-btn__clickable-area;
+  min-height: $ds-btn__clickable-area;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
 
-  &:focus {
-    outline-offset: 2px;
-  }
-  &:disabled {
+  &:focus-visible {
     outline: none;
+    .ds-btn__inner {
+      outline: ds-metrics-border-width(x2) solid;
+      outline-offset: 2px;
+    }
+  }
+  &:disabled .ds-btn__inner {
+    @include ds-btn-disabled;
   }
 
   @at-root a#{&} {
@@ -34,124 +42,207 @@ $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 .ds-btn__inner {
+      padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width ds-spacing-component(x5)-$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;
+@include ds-mq-only-breakpoint(mobile) {
+  .ds-btn--mobile-full-width {
+    &,
+    & .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-action-brand-default);
-  color: var(--ds-text-on-brand);
-  &:hover {
-    background-color: var(--ds-action-brand-hover);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-brand-strong);
+    color: var(--ds-text-on-brand);
+    &::before {
+      background-color: var(--ds-interaction-primary-none);
+    }
   }
-  &:focus {
-    outline: $ds-btn__outline-width solid var(--ds-border-brand-default);
+  &:hover .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-soft);
   }
-  &:disabled {
-    background-color: var(--ds-action-brand-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+  &:active .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-strong);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-brand-strong);
+  }
+  &:disabled .ds-btn__inner {
+    @include ds-btn-disabled;
   }
 }
 
 .ds-btn--business {
-  background-color: var(--ds-action-business-default);
-  color: var(--ds-text-on-business);
-  &:hover {
-    background-color: var(--ds-action-business-hover);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-business-strong);
+    color: var(--ds-text-on-business);
+    &::before {
+      background-color: var(--ds-interaction-primary-none);
+    }
   }
-  &:focus {
-    outline: $ds-btn__outline-width solid var(--ds-border-business-default);
+  &:hover .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-soft);
   }
-  &:disabled {
-    background-color: var(--ds-action-business-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+  &:active .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-strong);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-business-strong);
+  }
+  &:disabled .ds-btn__inner {
+    @include ds-btn-disabled;
   }
 }
 
 .ds-btn--primary {
-  background-color: var(--ds-action-primary-default);
-  color: var(--ds-text-on-primary);
-  &:hover {
-    background-color: var(--ds-action-primary-hover);
+  .ds-btn__inner {
+    background-color: var(--ds-surface-primary-strong);
+    color: var(--ds-text-on-primary);
+    &::before {
+      background-color: var(--ds-interaction-secondary-none);
+    }
   }
-  &:focus {
-    outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
+  &:hover .ds-btn__inner::before {
+    background-color: var(--ds-interaction-secondary-soft);
   }
-  &:disabled {
-    background-color: var(--ds-action-primary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+  &:active .ds-btn__inner::before {
+    background-color: var(--ds-interaction-secondary-strong);
+  }
+  &:focus-visible .ds-btn__inner {
+    outline-color: var(--ds-border-primary-strong);
+  }
+  &:disabled .ds-btn__inner {
+    @include ds-btn-disabled;
   }
 }
 
-.ds-btn--outlined {
-  background-color: var(--ds-action-secondary-default);
-  border: $ds-btn__border-width--outlined solid var(--ds-border-primary-strong);
-  color: var(--ds-text-primary-default);
-  &:hover {
-    background-color: var(--ds-action-secondary-hover);
+.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);
+    }
   }
-  &:focus {
-    outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
+  &:hover .ds-btn__inner::before {
+    background-color: var(--ds-interaction-primary-soft);
   }
-  &:disabled {
-    background-color: var(--ds-action-secondary-disabled);
-    border-color: var(--ds-action-secondary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+  &: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;
+    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-action-secondary-default);
-  border: $ds-btn__border-width--outlined solid var(--ds-border-critical-default);
-  color: var(--ds-text-critical-default);
-  &:hover {
-    background-color: var(--ds-action-critical-hover);
-  }
-  &:focus {
-    outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
-  }
-  &:disabled {
-    background-color: var(--ds-action-secondary-disabled);
-    border-color: var(--ds-action-secondary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+  .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 .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-critical-strong);
+  }
+  &: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/hyperlink/README.md

@@ -0,0 +1,15 @@
+**@bonniernews/dn-design-system-web/components/hyperlink/README.md**
+
+----
+
+# Hyperlink
+
+Parameters available but not used in storybook:
+
+```javascript
+attributes: {
+  "data-test": "12345"
+},
+classNames: "my-special-class",
+href: "https://designsystem-latest.dn.se/"
+```

package/components/hyperlink/hyperlink.njk

@@ -1,8 +1,16 @@
 {% macro Hyperlink(params) %}
-  {% set componentClassName = "ds-hyperlink" %}
-  {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
 
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}={{value}}
+    {% endfor %}
+  {% endset %}
+
+  {% if params.textComponent %}
+    {% set variant = (variant.push('ds-t-' + params.textComponent), variant) %}
+  {% endif %}
+
   {% if params.textColor %}
     {% set variant = (variant.push("ds-color-text-" + params.textColor), variant) %}
   {% endif %}
@@ -11,7 +19,7 @@
     {% set variant = (variant.push(params.classNames), variant) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = variant | join(" ") %}
 
-  <a href="{{ params.href | default('#', true) }}" class="{{ classes }}">{{ params.text }}</a>
+  <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>{{ params.text }}</a>
 {% endmacro %}