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

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 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.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/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 %}
+            {%- 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 %}
+
+                <div class="ds-buddy-menu__campaign">
+                  {{ params.campaignHtml | safe }}
+                </div>
 
-          {# @todo add support for preniverse container and subscription cta #}
+                {{ Button({
+                  text: "Mitt konto",
+                  variant: "primary",
+                  fullWidth: true,
+                  href: params.myAccountUrl | default("#"),
+                  attributes: { "data-hide-promo" : "" },
+                  forcePx: params.forcePx
+                })}}
+              </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

@@ -10,68 +10,60 @@
 @use "../list-item/list-item.scss" as *;
 
 .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;
 
-  @include ds-mq-largest-breakpoint(mobile) {
-    width: 100vw;
+  &,
+  .ds-buddy-menu__inner {
+    width: 360px;
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 100vw;
+    }
   }
 
-  &__scrollable-container {
+  .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 - 100px);
     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;
@@ -82,13 +74,13 @@
       @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 +104,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/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

@@ -137,7 +137,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 +147,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 +178,7 @@ $ds-list-item__icon-size: 24px;
 
     & + .ds-list-item__accordion-inner {
       display: block;
+      position: relative;
     }
   }
 }

package/foundations/helpers/typography.scss

@@ -57,7 +57,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,

package/foundations/typography/fontDefinitions.scss

@@ -3,7 +3,7 @@ $dnSerif: (
     fontFamily: DNSerifVf,
     sources: (
       (
-        file: "DNSerif19-Variable.woff2",
+        file: "DNSerif20-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -14,11 +14,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-Light.woff2",
+        file: "DNSerifHeadline20-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-Light.woff",
+        file: "DNSerifHeadline20-Light.woff",
         format: "woff",
       ),
     ),
@@ -29,11 +29,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-Regular.woff2",
+        file: "DNSerifHeadline20-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-Regular.woff",
+        file: "DNSerifHeadline20-Regular.woff",
         format: "woff",
       ),
     ),
@@ -44,11 +44,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-Medium.woff2",
+        file: "DNSerifHeadline20-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-Medium.woff",
+        file: "DNSerifHeadline20-Medium.woff",
         format: "woff",
       ),
     ),
@@ -59,11 +59,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-SemiBold.woff2",
+        file: "DNSerifHeadline20-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-SemiBold.woff",
+        file: "DNSerifHeadline20-SemiBold.woff",
         format: "woff",
       ),
     ),
@@ -74,11 +74,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-Bold.woff2",
+        file: "DNSerifHeadline20-Bold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-Bold.woff",
+        file: "DNSerifHeadline20-Bold.woff",
         format: "woff",
       ),
     ),
@@ -89,11 +89,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-ExtraBold.woff2",
+        file: "DNSerifHeadline20-ExtraBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-ExtraBold.woff",
+        file: "DNSerifHeadline20-ExtraBold.woff",
         format: "woff",
       ),
     ),
@@ -104,11 +104,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline19-Black.woff2",
+        file: "DNSerifHeadline20-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline19-Black.woff",
+        file: "DNSerifHeadline20-Black.woff",
         format: "woff",
       ),
     ),
@@ -117,6 +117,133 @@ $dnSerif: (
   )
 );
 
+$dnSerifItalic: (
+  (
+    fontFamily: DNSerifVf,
+    sources: (
+      (
+        file: "DNSerifItalic20-Variable.woff2",
+        format: "woff2-variations",
+      ),
+    ),
+    fontWeight: 86 180,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-LightItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-LightItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 300,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-Italic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-Italic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 400,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-MediumItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-MediumItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 500,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-SemiBoldItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-SemiBoldItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 600,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-BoldItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-BoldItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 700,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-ExtraBoldItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-ExtraBoldItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 800,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSerif,
+    sources: (
+      (
+        file: "DNSerifDisplay20-BlackItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSerifDisplay20-BlackItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 900,
+    fontStyle: italic,
+    fontDisplay: swap,
+  )
+);
+
 $dnSans: (
   (
     fontFamily: DNSansVF,

package/foundations/variables/colorsCssVariables.scss

@@ -53,4 +53,7 @@ $ds-color-static-transparent-white: var(--ds-color-static-transparent-white);
 $ds-color-static-green-100: var(--ds-color-static-green-100);
 $ds-color-static-red-300: var(--ds-color-static-red-300);
 $ds-color-static-transparent-white-10: var(--ds-color-static-transparent-white-10);
+$ds-color-static-kultur: var(--ds-color-static-kultur);
+$ds-color-static-economy: var(--ds-color-static-economy);
+$ds-color-static-sport: var(--ds-color-static-sport);
 $ds-color-gradient-content-fade: var(--ds-color-gradient-content-fade);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -1,5 +1,5 @@
 $ds-hex-dark-text-primary: #EDEDED;
-$ds-hex-dark-text-primary-02: #CFCFCF;
+$ds-hex-dark-text-primary-02: #B8B8B8;
 $ds-hex-dark-text-secondary: #050505;
 $ds-hex-dark-text-critical: #EF7171;
 $ds-hex-dark-text-disabled: #B8B8B8;
@@ -54,3 +54,6 @@ $ds-hex-dark-static-transparent-white: #ffffff80;
 $ds-hex-dark-static-green-100: #CEE4D6;
 $ds-hex-dark-static-red-300: #EF7171;
 $ds-hex-dark-static-transparent-white-10: #ffffff1a;
+$ds-hex-dark-static-kultur: #568CBB;
+$ds-hex-dark-static-economy: #60BCA1;
+$ds-hex-dark-static-sport: #F58D2D;

package/foundations/variables/colorsDnLightTokens.scss

@@ -53,4 +53,7 @@ $ds-hex-static-transparent-white: #ffffff80;
 $ds-hex-static-green-100: #CEE4D6;
 $ds-hex-static-red-300: #EF7171;
 $ds-hex-static-transparent-white-10: #ffffff1a;
+$ds-hex-static-kultur: #568CBB;
+$ds-hex-static-economy: #60BCA1;
+$ds-hex-static-sport: #F58D2D;
 $ds-hex-gradient-content-fade: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/shadowsDnDarkTokens.scss

@@ -1,10 +1,10 @@
 $shadowsDnDarkTokens: (
   drop-shadow-02: (
     x: 0,
-    y: 0,
-    blur: 0,
+    y: 3,
+    blur: 6,
     spread: 0,
-    color: #00000000,
+    color: #0000001a,
     type: dropShadow
   )
 );

package/foundations/variables/spacingComponent.scss

@@ -5,5 +5,8 @@ $spacingComponent: (
   x4: 16,
   x5: 20,
   x6: 24,
-  x8: 32
+  x8: 32,
+  x20: 80,
+  outer: 16,
+  outer-negative: -16
 );

package/foundations/variables/spacingLayout.scss

@@ -1,8 +1,8 @@
 $spacingLayout: (
-  side: 16,
-  top-small: 16,
-  top-large: 48,
-  bottom: 16,
+  page-horizontal: 16,
+  page-top-small: 16,
+  page-top-large: 48,
+  page-bottom: 16,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,