@bonniernews/dn-design-system-web 1.0.0 → 1.1.0-alpha.10

package/CHANGELOG.md

@@ -3,6 +3,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.9...@bonniernews/dn-design-system-web@1.1.0-alpha.10) (2023-02-01)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.8...@bonniernews/dn-design-system-web@1.1.0-alpha.9) (2023-01-31)
+
+
+### Bug Fixes
+
+* **web:** always set width on icons ([#619](https://github.com/BonnierNews/dn-design-system/issues/619)) ([69f60b1](https://github.com/BonnierNews/dn-design-system/commit/69f60b152846fdffbe00207479e9ae0cc6e1d7d7))
+
+
+
+## [1.1.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.7...@bonniernews/dn-design-system-web@1.1.0-alpha.8) (2023-01-30)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 1.1.0-alpha.7 (2023-01-30)
+
+
+### Bug Fixes
+
+* **web:** add support for tablet in typography helper ([#616](https://github.com/BonnierNews/dn-design-system/issues/616)) ([0704561](https://github.com/BonnierNews/dn-design-system/commit/0704561de888c11213ca2c49246595bba85dc56e))
+
+
+
+## [1.1.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.5...@bonniernews/dn-design-system-web@1.1.0-alpha.6) (2023-01-27)
+
+
+### Bug Fixes
+
+* **web:** correct color on addon link in buddy ([#608](https://github.com/BonnierNews/dn-design-system/issues/608)) ([3677a10](https://github.com/BonnierNews/dn-design-system/commit/3677a1077bf67657d1f68efa1aaa5bfa2741b124))
+
+
+
+## [1.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.4...@bonniernews/dn-design-system-web@1.1.0-alpha.5) (2023-01-26)
+
+
+### Bug Fixes
+
+* **web:** use css variables in buddymenu ([#604](https://github.com/BonnierNews/dn-design-system/issues/604)) ([547119f](https://github.com/BonnierNews/dn-design-system/commit/547119f14095f53d73109360fe30d8bed89a940d))
+
+
+
+## [1.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.3...@bonniernews/dn-design-system-web@1.1.0-alpha.4) (2023-01-26)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [1.1.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.2...@bonniernews/dn-design-system-web@1.1.0-alpha.3) (2023-01-25)
+
+
+### Bug Fixes
+
+* **web:** move buddy campaign area below button ([#597](https://github.com/BonnierNews/dn-design-system/issues/597)) ([f14c24b](https://github.com/BonnierNews/dn-design-system/commit/f14c24b13c256b8ef2500ebd87b231b05676fc2f))
+
+
+
+## 1.1.0-alpha.2 (2023-01-25)
+
+
+### Bug Fixes
+
+* **web:** adapt buddy menu to bang ([#593](https://github.com/BonnierNews/dn-design-system/issues/593)) ([37bb585](https://github.com/BonnierNews/dn-design-system/commit/37bb585df40132b39d552fdea67cd388be23f105))
+
+
+
+## [1.1.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.0...@bonniernews/dn-design-system-web@1.1.0-alpha.1) (2023-01-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 1.1.0-alpha.0 (2023-01-23)
+
+
+### Features
+
+* **foundations:** update font to serif 20 and added italic for serif display ([#581](https://github.com/BonnierNews/dn-design-system/issues/581)) ([66afa75](https://github.com/BonnierNews/dn-design-system/commit/66afa75397a11e4ff4b7947a644344f174a6714f))
+
+
+
+### [1.0.1-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0...@bonniernews/dn-design-system-web@1.0.1-alpha.0) (2023-01-23)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## [1.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.30...@bonniernews/dn-design-system-web@1.0.0) (2023-01-20)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/assets/form-field/form-field.scss

@@ -3,6 +3,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/typography.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 
 $ds-form-field__error-icon-size: 20px;
 

package/components/buddy-menu/README.md

@@ -9,7 +9,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|name | String | no | | none | Should be populated with product specific js|
+|userName | String | no | | none | Should be populated with product specific js|
 |links | HTML String | no | | | Should be list item components|
 |accountLevel | String | no | | none | Should be populated with product specific js|
 |myAccountUrl | String | yes | | | Url for "Mitt konto" button |
@@ -48,7 +48,7 @@ These are copy paste friendly examples to quickliy get started using a component
 {% endmacro %}
 
 {{ BuddyMenu({
-  name: "",
+  userName: "",
   accountLevel: "",
   myAccountUrl: "https://kund.dn.se/mitt-konto",
   links: BuddyMenuSample(),
@@ -60,4 +60,11 @@ These are copy paste friendly examples to quickliy get started using a component
 ### SCSS
 ```scss
 @use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
+
+// these css variables can be overwritten to adjust
+// top/right position:
+--ds-buddy-menu-bottom-margin: 100px;
+--ds-buddy-menu-position-top: 0;
+// bottom-margin i.e. total max-height; calc(100vh - var(--ds-buddy-menu-bottom-margin))
+--ds-buddy-menu-position-right: 0;
 ```

package/components/buddy-menu/buddy-menu.njk

@@ -23,46 +23,50 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   <div class="{{ classes }} {{ 'ds-buddy-menu--skola' if params.isDnSkola }}" {{- attributes | safe}}>
-    <div class="ds-buddy-menu__scrollable-container">
-      <div class="ds-buddy-menu__content">
-        {{ IconButton({
-          variant: "transparent",
-          size: "small",
-          iconName: "close",
-          classNames: "ds-buddy-menu__close",
-          forcePx: params.forcePx
-        })}}
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="ds-buddy-menu__scrollable-container">
+        <div class="ds-buddy-menu__content">
+          {{ IconButton({
+            variant: "transparent",
+            size: "small",
+            iconName: "close",
+            classNames: "ds-buddy-menu__close",
+            forcePx: params.forcePx
+          })}}
 
-        {%- if params.isDnSkola %}
-          {# @todo add support for skola users #}
-        {%- else %}
           <div class="ds-buddy-menu__header">
-            <span class="ds-buddy-menu__greeting">Hej <span class="ds-buddy-menu__name js-buddy-menu-name" data-name-type="given">{{ params.name }}</span>!</span>
-            <div class="ds-buddy-menu__account">
-              <h2 class="ds-buddy-menu__account-title">Min prenumeration</h2>
-              <span class="ds-buddy-menu__account-level js-buddy-menu__account-level">{{ params.accountLevel }}</span>
-    
-              {% if params.addons %}
-                <h2 class="ds-buddy-menu__addons-title">Mina tillägg</h2>
-                <ul class="ds-buddy-menu__addons-list">
-                  {% for addon in params.addons %}
-                    <li><a href="{{ addon.href }}">{{ addon.title }}</a></li>
-                  {% endfor %}
-                </ul>
-              {% endif %}
+            <span class="ds-buddy-menu__greeting">Hej <span class="ds-buddy-menu__name js-buddy-menu-name" data-name-type="given">{{ params.userName }}</span>!</span>
+            {%- if not params.isDnSkola %}
+              <div class="ds-buddy-menu__account">
+                <h2 class="ds-buddy-menu__account-title">Min prenumeration</h2>
+                <span class="ds-buddy-menu__account-level js-buddy-menu__account-level">{{ params.accountLevel }}</span>
 
-              {{ Button({
-                text: "Mitt konto",
-                variant: "secondaryOutlined",
-                fullWidth: true,
-                href: params.myAccountUrl | default("#"),
-                attributes: { "data-hide-promo" : "" },
-                forcePx: params.forcePx
-              })}}
-            </div>
-          </div>
+                {% if params.addons %}
+                  <div class="ds-buddy-menu__addons {{ params.addonClassNames }}">
+                    <h2 class="ds-buddy-menu__addons-title">Mina tillägg</h2>
+                    <ul class="ds-buddy-menu__addons-list">
+                      {% for addon in params.addons %}
+                        <li class="{{ addon.classNames }}"><a href="{{ addon.href }}">{{ addon.title }}</a></li>
+                      {% endfor %}
+                    </ul>
+                  </div>
+                {% endif %}
+
+                {{ Button({
+                  text: "Mitt konto",
+                  variant: "primary",
+                  fullWidth: true,
+                  href: params.myAccountUrl | default("#"),
+                  attributes: { "data-hide-promo" : "" },
+                  forcePx: params.forcePx
+                })}}
 
-          {# @todo add support for preniverse container and subscription cta #}
+                <div class="ds-buddy-menu__campaign">
+                  {{ params.campaignHtml | safe }}
+                </div>
+              </div>
+            {% endif %}
+          </div>
 
           <div class="ds-buddy-menu__links">
             <h2 class="ds-buddy-menu__links-title">Mitt innehåll</h2>
@@ -70,7 +74,7 @@
               {{ params.links | safe }}
             </ul>
           </div>
-        {% endif %}
+        </div>
       </div>
     </div>
   </div>

package/components/buddy-menu/buddy-menu.scss

@@ -9,86 +9,84 @@
 @use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;
 
+:root {
+  --ds-buddy-menu-bottom-margin: 100px;
+  --ds-buddy-menu-position-top: 0;
+  --ds-buddy-menu-position-right: 0;
+}
+
 .ds-buddy-menu {
-  width: 360px;
-  background-color: $ds-color-surface-elevated;
-  border-radius: ds-metrics-border-radius(x2);
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
   position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
+  top: var(--ds-buddy-menu-position-top);
+  right: var(--ds-buddy-menu-position-right);
+
+  &,
+  .ds-buddy-menu__inner {
+    width: 360px;
 
-  @include ds-mq-largest-breakpoint(mobile) {
-    width: 100vw;
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 100vw;
+    }
   }
 
-  &__scrollable-container {
-    max-height: calc(100vh - 100px);
+  .ds-buddy-menu__inner {
+    background-color: $ds-color-surface-elevated;
+    border-radius: ds-metrics-border-radius(x2);
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+    position: relative;
+    z-index: 1;
+  }
+
+  .ds-buddy-menu__scrollable-container {
+    max-height: calc(100vh - var(--ds-buddy-menu-bottom-margin));
     overflow-y: auto;
-    /* @todo - should we style scrollbar? 
-    // Scrollbar styling based on existing styling in arkivet/bang
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      border: 1px solid $ds-color-component-primary-overlay;
-      background-color: $ds-color-border-primary-02;
-      border-radius: ds-metrics-border-radius(x2);
-    }
-    &::-webkit-scrollbar-track {
-      border: 0;
-      background-color: $ds-color-component-primary-overlay;
-      border-radius: ds-metrics-border-radius(x2);
-    }
-    */
   }
-  &__content {
+  .ds-buddy-menu__content {
     position: relative;
   }
-  &__header {
+  .ds-buddy-menu__header {
     padding: ds-spacing-component(x8 x4 x4);
     margin: ds-spacing-component(0 0 x4);
   }
-  &__close {
+  .ds-buddy-menu__close {
     position: absolute;
     right: ds-spacing-component(x1);
     top: ds-spacing-component(x1);
   }
-  &__greeting {
+  .ds-buddy-menu__greeting {
     @include ds-typography($ds-typography-functional-heading03bold);
     color: $ds-color-text-primary;
     margin: ds-spacing-component(0 0 x4);
     display: block;
   }
-  &__account-title,
-  &__addons-title,
-  &__links-title {
+  .ds-buddy-menu__account-title,
+  .ds-buddy-menu__addons-title,
+  .ds-buddy-menu__links-title {
     @include ds-typography($ds-typography-functional-body02medium);
     color: $ds-color-text-primary;
     margin: ds-spacing-component(0 0 x1);
   }
-  &__links-title {
+  .ds-buddy-menu__links-title {
     padding: ds-spacing-component(0 x4);
   }
-  &__addons-list {
+  .ds-buddy-menu__addons-list {
     padding: 0;
     margin: ds-spacing-component(0 0 x4);
     list-style: none;
     a {
+      @include ds-link($ds-link-list);
       @include ds-typography($ds-typography-functional-body02regular);
       color: $ds-color-text-primary-02;
       margin: ds-spacing-component(0 0 x4);
-      @include ds-link($ds-link-list);
     }
   }
-  &__account-level {
+  .ds-buddy-menu__account-level {
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary-02;
     margin: ds-spacing-component(0 0 x4);
     display: block;
   }
-  &__links-list {
+  .ds-buddy-menu__links-list {
     border-bottom-left-radius: ds-metrics-border-radius(x2);
     border-bottom-right-radius: ds-metrics-border-radius(x2);
     overflow: hidden;
@@ -112,4 +110,14 @@
       @include ds-typography($ds-typography-functional-body02regular, true);
     }
   }
+
+  .ds-buddy-menu__campaign {
+    margin: 0 -#{ds-spacing-component(x4)};
+  }
+
+  &.ds-buddy-menu--skola {
+    .ds-buddy-menu__greeting {
+      margin: 0;
+    }
+  }
 }

package/components/button/button.scss

@@ -6,6 +6,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);

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

@@ -6,6 +6,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);

package/components/checkbox/checkbox.scss

@@ -4,6 +4,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 
 $ds-checkbox__icon-size: 24px;
 

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

@@ -5,6 +5,7 @@
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/shadows.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-icon-btn__border-radius: 50%;

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

@@ -48,8 +48,9 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import textInput from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
-DsListItem();
+import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
+const accordionElements = Array.from(document.getElementsByClassName("ds-list-item--accordion"));
+dsListItem(accordionElements);
 ```
 
 *The javascript is only needed for list items of type accordion*

package/components/list-item/list-item.js

@@ -1,8 +1,18 @@
-export function DsListItem() {
-  const accordionElements = Array.from(document.getElementsByClassName("ds-list-item--accordion"));
+export {
+  dsListItem,
+  dsListItemStorybook
+};
+
+function dsListItem(accordionElements = []) {
+  if (!accordionElements.length) return;
   accordionElements.forEach((accordionEl) => {
     accordionEl.addEventListener("click", () => {
-      accordionEl.classList.toggle('ds-list-item--accordion-active');
+      accordionEl.classList.toggle("ds-list-item--accordion-active");
     });
   });
 }
+
+function dsListItemStorybook() {
+  const accordionElements = Array.from(document.getElementsByClassName("ds-list-item--accordion"));
+  dsListItem(accordionElements);
+}

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

@@ -3,6 +3,7 @@
 @use "../../foundations/helpers/metrics.scss" as *;
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../checkbox/checkbox.scss" as *;
 @use "../switch/switch.scss" as *;
 @use "../radio-button/radio-button.scss" as *;
@@ -137,7 +138,8 @@ $ds-list-item__icon-size: 24px;
 .ds-list-item--border {
   position: relative;
 
-  &::after {
+  &::after,
+  &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
     content: "";
     height: ds-metrics-border-width(x1);
     width: calc(100% - (ds-spacing-component(x4) * 2));
@@ -146,6 +148,12 @@ $ds-list-item__icon-size: 24px;
     left: ds-spacing-component(x4);
     bottom: 0;
   }
+
+  &.ds-list-item--accordion-active {
+    &::after {
+      background-color: transparent;
+    }
+  }
 }
 
 .ds-list-item--accordion {
@@ -171,6 +179,7 @@ $ds-list-item__icon-size: 24px;
 
     & + .ds-list-item__accordion-inner {
       display: block;
+      position: relative;
     }
   }
 }

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

@@ -4,6 +4,7 @@
 @use "../../foundations/helpers/metrics.scss" as *;
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
 
 $ds-radio-btn__icon-size: 24px;

package/components/text-button/text-button.scss

@@ -5,6 +5,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-text-btn__min-clickable-area: 0;

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

@@ -5,6 +5,7 @@
 @use "../../foundations/helpers/utilities.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../foundations/helpers/loading.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
 $ds-text-btn-toggle__min-clickable-area: 0;

package/components/text-input/text-input.scss

@@ -4,6 +4,7 @@
 @use "../../foundations/helpers/typography.scss" as *;
 @use "../../foundations/helpers/colors.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
 @use "../icon-button/icon-button.scss" as *;
 
 $ds-text-input-toggle-btn__width: 32px;

package/foundations/helpers/typography.scss

@@ -42,6 +42,7 @@ $dsTypographyKeys: (
   letterSpacing: "letter-spacing",
   textDecorationLine: "text-decoration-line",
   color: "color",
+  fontStyle: "font-style",
 );
 
 $dsSansWeights: (
@@ -57,7 +58,7 @@ $dsSansWeights: (
 // @todo fix how we handle weight for serif, current span is 86-180
 $dsSerifWeights: (
   light: 86,
-  regular: 102,
+  regular: 104,
   medium: 126,
   semibold: 142,
   bold: 150,
@@ -94,10 +95,10 @@ $dsSerifWeights: (
   }
 }
 
-@mixin ds-typography-without-mq($component, $screen: false, $forcePx) {
+@mixin ds-typography-without-mq($component, $screen: false, $forcePx: false) {
   $tmpMap: false;
 
-  @if $screen == mobile {
+  @if $screen == mobile or $screen == tablet {
     $tmpMap: map.get($typographyTokensScreenSmall, $component);
   } @else if $screen == desktop {
     $tmpMap: map.get($typographyTokensScreenLarge, $component);
@@ -130,6 +131,8 @@ $dsSerifWeights: (
       $value: map.get($fontWeights, $value);
     }
     font-weight: #{$value};
+  } @else if $key == "fontStyle" {
+    font-style: string.to-lower-case($value);
   } @else if $canForcePx and $value != "" {
     @if $forcePx {
       $value: $value * 1px;

package/foundations/icons/icon.scss

@@ -1,5 +1,6 @@
 .ds-icon {
   svg {
     fill: currentColor;
+    width: 100%;
   }
 }