@bonniernews/dn-design-system-web 1.0.0-alpha.21 → 1.0.0-alpha.23

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.23](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.22...@bonniernews/dn-design-system-web@1.0.0-alpha.23) (2023-01-17)
+
+
+### Bug Fixes
+
+* **web:** add ds-dark and ds-light for color switching ([#571](https://github.com/BonnierNews/dn-design-system/issues/571)) ([3828761](https://github.com/BonnierNews/dn-design-system/commit/3828761c2835f189e431da0bb9017f811fa1d7cf))
+
+
+
+## [1.0.0-alpha.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.21...@bonniernews/dn-design-system-web@1.0.0-alpha.22) (2023-01-16)
+
+
+### Features
+
+* **web:** buddy menu ([#549](https://github.com/BonnierNews/dn-design-system/issues/549)) ([d0230ee](https://github.com/BonnierNews/dn-design-system/commit/d0230eec5b97fd04247035230471293ff72a3619))
+
+
+
 ## [1.0.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.20...@bonniernews/dn-design-system-web@1.0.0-alpha.21) (2023-01-13)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/buddy-menu/README.md

@@ -0,0 +1,63 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+- Storybook: [BuddyMenu > Web](https://designsystem.dn.se/?path=/story/components-web-buddymenu-web--buddy-menu)
+
+----
+
+# BuddyMenu
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | 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 |
+|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }] |
+|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu.njk' import BuddyMenu %}
+
+{% macro BuddyMenuSample() %}
+  {{ ListItem({
+    title: 'Följer (ämnen och skribenter)',
+    leadingIcon: 'favorite',
+    border: true,
+    listItemType: "standard",
+    forcePx: true,
+    href: "https://www.dn.se/foljer/"
+  })}}
+  {{ ListItem({
+    title: 'Logga ut',
+    leadingIcon: 'logout',
+    border: false,
+    listItemType: "standard",
+    forcePx: true,
+    href: params.urls.logOut | default('#'),
+    classNames: "js-buddy-menu__logout"
+  })}}
+{% endmacro %}
+
+{{ BuddyMenu({
+  name: "",
+  accountLevel: "",
+  myAccountUrl: "https://kund.dn.se/mitt-konto",
+  links: BuddyMenuSample(),
+  addons: [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }],
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
+```

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

@@ -0,0 +1,77 @@
+{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro BuddyMenu(params) %}
+  {% set componentClassName = "ds-buddy-menu" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% 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
+        })}}
+
+        {%- 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 %}
+
+              {{ Button({
+                text: "Mitt konto",
+                variant: "secondaryOutlined",
+                fullWidth: true,
+                href: params.myAccountUrl | default("#"),
+                attributes: { "data-hide-promo" : "" },
+                forcePx: params.forcePx
+              })}}
+            </div>
+          </div>
+
+          {# @todo add support for preniverse container and subscription cta #}
+
+          <div class="ds-buddy-menu__links">
+            <h2 class="ds-buddy-menu__links-title">Mitt innehåll</h2>
+            <ul class="ds-buddy-menu__links-list">
+              {{ params.links | safe }}
+            </ul>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,115 @@
+@use "../../foundations/helpers/spacing.scss" as *;
+@use "../../foundations/helpers/typography.scss" as *;
+@use "../../foundations/helpers/mediaQueries.scss" as *;
+@use "../../foundations/helpers/metrics.scss" as *;
+@use "../../foundations/helpers/utilities.scss" as *;
+@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/links.scss" as *;
+@use "../button/button.scss" as *;
+@use "../icon-button/icon-button.scss" as *;
+@use "../list-item/list-item.scss" as *;
+
+.ds-buddy-menu {
+  width: 360px;
+  background-color: var($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;
+  }
+
+  &__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 var($ds-color-component-primary-overlay);
+      background-color: var($ds-color-border-primary-02);
+      border-radius: ds-metrics-border-radius(x2);
+    }
+    &::-webkit-scrollbar-track {
+      border: 0;
+      background-color: var($ds-color-component-primary-overlay);
+      border-radius: ds-metrics-border-radius(x2);
+    }
+    */
+  }
+  &__content {
+    position: relative;
+  }
+  &__header {
+    padding: ds-spacing-component(x8 x4 x4);
+    margin: ds-spacing-component(0 0 x4);
+  }
+  &__close {
+    position: absolute;
+    right: ds-spacing-component(x1);
+    top: ds-spacing-component(x1);
+  }
+  &__greeting {
+    @include ds-typography($ds-typography-functional-heading03bold);
+    color: var($ds-color-text-primary);
+    margin: ds-spacing-component(0 0 x4);
+    display: block;
+  }
+  &__account-title,
+  &__addons-title,
+  &__links-title {
+    @include ds-typography($ds-typography-functional-body02medium);
+    color: var($ds-color-text-primary);
+    margin: ds-spacing-component(0 0 x1);
+  }
+  &__links-title {
+    padding: ds-spacing-component(0 x4);
+  }
+  &__addons-list {
+    padding: 0;
+    margin: ds-spacing-component(0 0 x4);
+    list-style: none;
+    a {
+      @include ds-typography($ds-typography-functional-body02regular);
+      color: var($ds-color-text-primary-02);
+      margin: ds-spacing-component(0 0 x4);
+      @include ds-link($ds-link-list);
+    }
+  }
+  &__account-level {
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: var($ds-color-text-primary-02);
+    margin: ds-spacing-component(0 0 x4);
+    display: block;
+  }
+  &__links-list {
+    border-bottom-left-radius: ds-metrics-border-radius(x2);
+    border-bottom-right-radius: ds-metrics-border-radius(x2);
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+  }
+
+  &.ds-force-px {
+    .ds-buddy-menu__greeting {
+      @include ds-typography($ds-typography-functional-heading03bold, true);
+    }
+    .ds-buddy-menu__account-title,
+    .ds-buddy-menu__addons-title,
+    .ds-buddy-menu__links-title {
+      @include ds-typography($ds-typography-functional-body02medium, true);
+    }
+    .ds-buddy-menu__addons-list a {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+    .ds-buddy-menu__account-level {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+  }
+}

package/components/list-item/list-item.njk

@@ -76,7 +76,7 @@
   {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% if element == 'link' %}
-    <a class="{{ classes }}" {{- attributes | safe }} href="#">
+    <a class="{{ classes }}" {{- attributes | safe }} href="{{ params.href }}">
       {{ caller() if caller }}
     </a>
   {% elif element == 'button' %}

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

@@ -82,6 +82,7 @@ $ds-list-item__icon-size: 24px;
         @include ds-typography($ds-typography-functional-body02regular, true);
       }
       color: var($ds-color-text-primary);
+      text-align: left;
     }
 
     .ds-list-item__subtitle {
@@ -122,7 +123,7 @@ $ds-list-item__icon-size: 24px;
     outline: none;
     .ds-list-item__inner {
       outline: ds-metrics-border-width(x2) solid var($ds-color-border-focus-02);
-      outline-offset: 2px;
+      outline-offset: -2px;
     }
   }
 

package/foundations/colors.scss

@@ -3,7 +3,8 @@
 @use './variables/colorsDnLightTokens';
 @use './variables/colorsDnDarkTokens';
 
-html {
+html,
+.ds-light {
   @each $name, $value in meta.module-variables("colorsDnLightTokens") {
     --ds-color-#{string.slice($name, 8)}: #{$value};
   }
@@ -23,8 +24,10 @@ html {
   }
 }
 
-// for manually switching on dark mode, for exemple used when switching theme in storybook
-.dnDark {
+// for manually switching on dark mode
+// dnDark should only be used in storybook otherwise use ds-dark
+.dnDark,
+.ds-dark {
   @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
     --ds-color-#{string.slice($name, 13)}: #{$value};
   }

package/foundations/shadows.scss

@@ -4,7 +4,8 @@
 @use './variables/shadowsDnLightTokens';
 @use './variables/shadowsDnDarkTokens';
 
-html {
+html,
+.ds-light {
   @each $name, $value in meta.module-variables("shadowsDnLightTokens") {
     @each $key in map-keys($value) {
       @include ds-shadow($key, light);
@@ -12,8 +13,10 @@ html {
   }
 }
 
-// for manually switching on dark mode, for exemple used when switching theme in storybook
-.dnDark {
+// for manually switching on dark mode
+// dnDark should only be used in storybook otherwise use ds-dark
+.dnDark,
+.ds-dark {
   @each $name, $value in meta.module-variables("shadowsDnDarkTokens") {
     @each $key in map-keys($value) {
       @include ds-shadow($key, dark);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",