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

package/CHANGELOG.md

@@ -3,6 +3,74 @@
 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.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

@@ -26,6 +26,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) %}
@@ -41,6 +45,6 @@
   {% if params.href %}
     <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>{{ text }}{{- iconSvg | safe if iconSvg -}}</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 isDisabled }} {{ attributes }}>{{ text }}{{- iconSvg | safe if iconSvg -}}</button>
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -1,6 +1,6 @@
 @use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/variable.scss" as *;
-@use "../../foundations/helpers/fontFamily.scss" as *;
+@use "../../foundations/helpers/typography.scss" as *;
+@use "../../foundations/helpers/mediaQueries.scss" as *;
 @use "../../foundations/variables/colorsDnLight" as *;
 
 // Temporary variables we maybe should handle in a better way
@@ -8,6 +8,12 @@ $ds-btn__border-radius: 2px;
 $ds-btn__border-width--outlined: 1px;
 $ds-btn__outline-width: 2px;
 
+@mixin ds-btn-disabled() {
+  background-color: var(--ds-action-disabled);
+  color: var(--ds-text-disabled);
+  outline: none;
+}
+
 .ds-btn {
   @include ds-font-sans();
   cursor: pointer;
@@ -21,11 +27,11 @@ $ds-btn__outline-width: 2px;
   transition: background-color 50ms ease-out;
   padding: ds-spacing(1.5 3);
 
-  &:focus {
+  &:focus-visible {
     outline-offset: 2px;
   }
   &:disabled {
-    outline: none;
+    @include ds-btn-disabled;
   }
 
   @at-root a#{&} {
@@ -50,6 +56,12 @@ $ds-btn__outline-width: 2px;
   }
 }
 
+@include ds-mq-only-breakpoint(mobile) {
+  .ds-btn--mobile-full-width {
+    width: 100%;
+  }
+}
+
 .ds-btn--icon-left,
 .ds-btn--icon-right {
   display: inline-flex;
@@ -78,13 +90,14 @@ $ds-btn__outline-width: 2px;
   &:hover {
     background-color: var(--ds-action-brand-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-btn__outline-width solid var(--ds-border-brand-default);
   }
+  &:active {
+    background-color: var(--ds-action-brand-pressed);
+  }
   &:disabled {
-    background-color: var(--ds-action-brand-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+    @include ds-btn-disabled;
   }
 }
 
@@ -94,13 +107,14 @@ $ds-btn__outline-width: 2px;
   &:hover {
     background-color: var(--ds-action-business-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-btn__outline-width solid var(--ds-border-business-default);
   }
+  &:active {
+    background-color: var(--ds-action-business-pressed);
+  }
   &:disabled {
-    background-color: var(--ds-action-business-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+    @include ds-btn-disabled;
   }
 }
 
@@ -110,13 +124,14 @@ $ds-btn__outline-width: 2px;
   &:hover {
     background-color: var(--ds-action-primary-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
   }
+  &:active {
+    background-color: var(--ds-action-primary-pressed);
+  }
   &:disabled {
-    background-color: var(--ds-action-primary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+    @include ds-btn-disabled;
   }
 }
 
@@ -127,14 +142,15 @@ $ds-btn__outline-width: 2px;
   &:hover {
     background-color: var(--ds-action-secondary-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
   }
+  &:active {
+    background-color: var(--ds-action-secondary-pressed);
+  }
   &:disabled {
-    background-color: var(--ds-action-secondary-disabled);
-    border-color: var(--ds-action-secondary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+    @include ds-btn-disabled;
+    border-color: var(--ds-action-disabled);
   }
 }
 
@@ -143,15 +159,16 @@ $ds-btn__outline-width: 2px;
   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);
+    background-color: var(--ds-surface-critical-default);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-btn__outline-width solid var(--ds-border-primary-strong);
   }
+  &:active {
+    background-color: var(--ds-surface-critical-default);
+  }
   &:disabled {
-    background-color: var(--ds-action-secondary-disabled);
-    border-color: var(--ds-action-secondary-disabled);
-    color: var(--ds-text-primary-disabled);
-    outline: none;
+    @include ds-btn-disabled;
+    border-color: var(--ds-action-disabled);
   }
 }

package/components/button-group/button-group.scss

@@ -1,25 +1,20 @@
 @use "../../foundations/helpers/spacing.scss" as *;
+@use "../../foundations/helpers/mediaQueries.scss" as *;
 @use "../button/button.scss" as *;
 
-@mixin ds-btn-group-screen-l {
-  flex-direction: column;
-
-  .ds-btn:first-of-type {
-    margin: ds-spacing(0 0 1 0);
-  }
-}
-
 .ds-btn-group {
   display: flex;
-  .ds-btn:first-of-type {
-    margin: ds-spacing(0 1 0 0);
+
+  @include ds-mq-largest-breakpoint(mobile) {
+    flex-direction: column;
+    .ds-btn:first-of-type {
+      margin: ds-spacing(0 0 1 0);
+    }
   }
-}
 
-// @todo refactor when media queries are in place
-// remeber to keep large screen toggle in storybook working along side media queries
-.ds-screen-l {
-  .ds-btn-group {
-    @include ds-btn-group-screen-l;
+  @include ds-mq-smallest-breakpoint(tablet) {
+    .ds-btn:first-of-type {
+      margin: ds-spacing(0 1 0 0);
+    }
   }
 }

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 %}

package/components/hyperlink/hyperlink.scss

@@ -1,9 +1 @@
-@use "../../foundations/typography-sans.scss" as *;
-
-.ds-hyperlink {
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
+@use "../../foundations/typography/typography.scss";

package/components/icon-button/README.md

@@ -4,13 +4,14 @@
 
 # Icon button
 
-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>
+href: "https://designsystem-latest.dn.se/"
 ```
+
+ℹ️ If you add href parameter the button will be rendered as an `<a>`

package/components/icon-button/icon-button.scss

@@ -1,8 +1,13 @@
 @use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/variable.scss" as *;
-@use "../../foundations/helpers/fontFamily.scss" as *;
+@use "../../foundations/helpers/typography.scss" as *;
 @use "../../foundations/variables/colorsDnLight" as *;
 
+// @todo when these exists as tokens, change to tokens and switch to css variables
+$ds-action-overlay-default: rgba(13, 13, 13, 0.1);
+$ds-action-overlay-hover: rgba(13, 13, 13, 0.15);
+$ds-action-overlay-pressed: rgba(13, 13, 13, 0.15);
+$ds-action-transparent-default: transparent;
+
 // Temporary variables we maybe should handle in a better way
 $ds-icon-btn__border-radius: 100px;
 $ds-icon-btn__border-width--outlined: 1px;
@@ -36,7 +41,7 @@ $ds-icon-btn__icon-size--s: 20px;
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline-offset: 2px;
   }
   &:disabled {
@@ -63,31 +68,50 @@ $ds-icon-btn__icon-size--s: 20px;
 }
 
 .ds-icon-btn--transparent {
-  background-color: transparent;
+  background-color: $ds-action-transparent-default; // todo remove fallbak when token exists
+  // background-color: var(--ds-action-transparent-default);
   color: var(--ds-icon-primary-default);
   &:hover {
-    background-color: var(--ds-action-overlay-hover);
+    background-color: $ds-action-overlay-hover; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-overlay-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-icon-btn__outline-width solid var(--ds-border-primary-strong);
+    background-color: var(--ds-action-secondary-default);
+  }
+  &:active {
+    background-color: $ds-action-overlay-pressed; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-overlay-pressed);
+    border: $ds-icon-btn__border-width--outlined solid var(--ds-border-primary-strong);
   }
   &:disabled {
-    color: var(--ds-icon-primary-disabled);
+    background-color: $ds-action-transparent-default; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-transparent-default);
+    color: var(--ds-icon-disabled);
     outline: none;
   }
 }
 
 .ds-icon-btn--overlay {
-  background-color: var(--ds-action-overlay-default);
+  background-color: $ds-action-overlay-default; // todo remove fallbak when token exists
+  // background-color: var(--ds-action-overlay-default);
   color: var(--ds-icon-primary-default);
   &:hover {
-    background-color: var(--ds-action-overlay-hover);
+    background-color: $ds-action-overlay-hover; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-overlay-hover);
   }
-  &:focus {
+  &:focus-visible {
     outline: $ds-icon-btn__outline-width solid var(--ds-border-primary-strong);
   }
+  &:active {
+    background-color: $ds-action-overlay-pressed; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-overlay-pressed);
+    border: $ds-icon-btn__border-width--outlined solid var(--ds-border-primary-strong);
+  }
   &:disabled {
-    color: var(--ds-icon-primary-disabled);
+    background-color: $ds-action-overlay-default; // todo remove fallbak when token exists
+    // background-color: var(--ds-action-overlay-default);
+    color: var(--ds-icon-disabled);
     outline: none;
   }
 }
@@ -99,14 +123,17 @@ $ds-icon-btn__icon-size--s: 20px;
   &:hover {
     background-color: var(--ds-action-secondary-hover);
   }
-  &:focus {
-    outline: $ds-icon-btn__outline-width solid $ds-border-primary-strong;
-    outline-color: var(--ds-border-primary-strong);
+  &:focus-visible {
+    outline: $ds-icon-btn__outline-width solid var(--ds-border-primary-strong);
+  }
+  &:active {
+    background-color: var(--ds-action-secondary-pressed);
+    border-color: var(--ds-border-primary-strong);
   }
   &:disabled {
     border: none;
-    background-color: var(--ds-action-secondary-disabled);
-    color: var(--ds-icon-primary-disabled);
+    background-color: var(--ds-action-disabled);
+    color: var(--ds-icon-disabled);
     outline: none;
   }
 }

package/foundations/colors.scss

@@ -1,10 +1,10 @@
 @use 'sass:meta';
 @use 'sass:string';
-@use './variables/colorsDnLight';
-@use './variables/colorsDnDark';
+@use './variables/colorsDnLightTokens';
+@use './variables/colorsDnDarkTokens';
 
 html {
-  @each $name, $value in meta.module-variables("colorsDnLight") {
+  @each $name, $value in meta.module-variables("colorsDnLightTokens") {
     --#{$name}: #{$value};
   }
 
@@ -17,7 +17,7 @@ html {
   // }
 }
 
-@each $name, $value in meta.module-variables("colorsDnLight") {
+@each $name, $value in meta.module-variables("colorsDnLightTokens") {
   .ds-color-#{string.slice($name, 4)} {
     color: var(--#{$name});
   }
@@ -25,7 +25,7 @@ html {
 
 // for manually switching on dark mode, for exemple used when switching theme in storybook
 .dnDark {
-  @each $name, $value in meta.module-variables("colorsDnDark") {
+  @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
     --ds-#{string.slice($name, 9)}: #{$value};
   }
 }

package/foundations/helpers/mediaQueries.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+
+$ds-mq-min-width--desktop: 1025;
+$ds-mq-min-width--tablet: 768;
+
+$ds-breakpoints: (
+  "desktop": (
+    "min-width": $ds-mq-min-width--desktop
+  ),
+  "tablet": (
+    "min-width": $ds-mq-min-width--tablet,
+    "max-width": $ds-mq-min-width--desktop - 1
+  ),
+  "mobile": (
+    "max-width": $ds-mq-min-width--tablet - 1
+  )
+);
+
+@mixin ds-mq-smallest-breakpoint($breakpoint) {
+  $min: map-get($ds-breakpoints, $breakpoint, "min-width");
+  @if $min {
+    @media (min-width: ds-px($min)) {
+      @content;
+    }
+  }
+}
+
+@mixin ds-mq-largest-breakpoint($breakpoint) {
+  $max: map-get($ds-breakpoints, $breakpoint, "max-width");
+  @if $max {
+    @media (max-width: ds-px($max)) {
+      @content;
+    }
+  }
+}
+
+@mixin ds-mq-only-breakpoint($breakpoint) {
+  $min: map-get($ds-breakpoints, $breakpoint, "min-width");
+  $max: map-get($ds-breakpoints, $breakpoint, "max-width");
+
+  @if $min and $max {
+    @media (min-width: ds-px($min)) and (max-width: ds-px($max)) {
+      @content;
+    }
+  } @else if $min {
+    @media (min-width: ds-px($min)) {
+      @content;
+    }
+  } @else if $max {
+    @media (max-width: ds-px($max)) {
+      @content;
+    }
+  }
+}
+
+@function ds-px($n) {
+  @if $n {
+    @return $n * 1px;
+  }
+
+  @return $n;
+}