@bonniernews/dn-design-system-web 1.0.0-alpha.21 → 1.0.0-alpha.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/components/buddy-menu/README.md +63 -0
- package/components/buddy-menu/buddy-menu.njk +77 -0
- package/components/buddy-menu/buddy-menu.scss +115 -0
- package/components/list-item/list-item.njk +1 -1
- package/components/list-item/list-item.scss +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [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)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **web:** buddy menu ([#549](https://github.com/BonnierNews/dn-design-system/issues/549)) ([d0230ee](https://github.com/BonnierNews/dn-design-system/commit/d0230eec5b97fd04247035230471293ff72a3619))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [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)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @bonniernews/dn-design-system-web
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
|
|
2
|
+
- Storybook: [BuddyMenu > Web](https://designsystem.dn.se/?path=/story/components-web-buddymenu-web--buddy-menu)
|
|
3
|
+
|
|
4
|
+
----
|
|
5
|
+
|
|
6
|
+
# BuddyMenu
|
|
7
|
+
|
|
8
|
+
## Parameters
|
|
9
|
+
|
|
10
|
+
|parameter | type | required | options | default | description |
|
|
11
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
12
|
+
|name | String | no | | none | Should be populated with product specific js|
|
|
13
|
+
|links | HTML String | no | | | Should be list item components|
|
|
14
|
+
|accountLevel | String | no | | none | Should be populated with product specific js|
|
|
15
|
+
|myAccountUrl | String | yes | | | Url for "Mitt konto" button |
|
|
16
|
+
|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }] |
|
|
17
|
+
|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
|
|
18
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
19
|
+
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
|
|
20
|
+
|
|
21
|
+
## Minimum requirement example
|
|
22
|
+
|
|
23
|
+
### Nunjucks
|
|
24
|
+
|
|
25
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
{% from '@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu.njk' import BuddyMenu %}
|
|
29
|
+
|
|
30
|
+
{% macro BuddyMenuSample() %}
|
|
31
|
+
{{ ListItem({
|
|
32
|
+
title: 'Följer (ämnen och skribenter)',
|
|
33
|
+
leadingIcon: 'favorite',
|
|
34
|
+
border: true,
|
|
35
|
+
listItemType: "standard",
|
|
36
|
+
forcePx: true,
|
|
37
|
+
href: "https://www.dn.se/foljer/"
|
|
38
|
+
})}}
|
|
39
|
+
{{ ListItem({
|
|
40
|
+
title: 'Logga ut',
|
|
41
|
+
leadingIcon: 'logout',
|
|
42
|
+
border: false,
|
|
43
|
+
listItemType: "standard",
|
|
44
|
+
forcePx: true,
|
|
45
|
+
href: params.urls.logOut | default('#'),
|
|
46
|
+
classNames: "js-buddy-menu__logout"
|
|
47
|
+
})}}
|
|
48
|
+
{% endmacro %}
|
|
49
|
+
|
|
50
|
+
{{ BuddyMenu({
|
|
51
|
+
name: "",
|
|
52
|
+
accountLevel: "",
|
|
53
|
+
myAccountUrl: "https://kund.dn.se/mitt-konto",
|
|
54
|
+
links: BuddyMenuSample(),
|
|
55
|
+
addons: [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }],
|
|
56
|
+
forcePx: true
|
|
57
|
+
})}}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### SCSS
|
|
61
|
+
```scss
|
|
62
|
+
@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
|
|
63
|
+
```
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
|
|
2
|
+
{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
|
|
3
|
+
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
|
|
4
|
+
|
|
5
|
+
{% macro BuddyMenu(params) %}
|
|
6
|
+
{% set componentClassName = "ds-buddy-menu" %}
|
|
7
|
+
{% set classNamePrefix = componentClassName + "--" %}
|
|
8
|
+
{% set variant = [] %}
|
|
9
|
+
{% set attributes %}
|
|
10
|
+
{% for attribute, value in params.attributes %}
|
|
11
|
+
{{attribute}}="{{value}}"
|
|
12
|
+
{% endfor %}
|
|
13
|
+
{% endset %}
|
|
14
|
+
|
|
15
|
+
{% if params.forcePx %}
|
|
16
|
+
{% set variant = (variant.push("ds-force-px"), variant) %}
|
|
17
|
+
{% endif %}
|
|
18
|
+
|
|
19
|
+
{% if params.classNames %}
|
|
20
|
+
{% set variant = (variant.push(params.classNames), variant) %}
|
|
21
|
+
{% endif%}
|
|
22
|
+
|
|
23
|
+
{% set classes = componentClassName + " " + variant | join(" ") %}
|
|
24
|
+
|
|
25
|
+
<div class="{{ classes }} {{ 'ds-buddy-menu--skola' if params.isDnSkola }}" {{- attributes | safe}}>
|
|
26
|
+
<div class="ds-buddy-menu__scrollable-container">
|
|
27
|
+
<div class="ds-buddy-menu__content">
|
|
28
|
+
{{ IconButton({
|
|
29
|
+
variant: "transparent",
|
|
30
|
+
size: "small",
|
|
31
|
+
iconName: "close",
|
|
32
|
+
classNames: "ds-buddy-menu__close",
|
|
33
|
+
forcePx: params.forcePx
|
|
34
|
+
})}}
|
|
35
|
+
|
|
36
|
+
{%- if params.isDnSkola %}
|
|
37
|
+
{# @todo add support for skola users #}
|
|
38
|
+
{%- else %}
|
|
39
|
+
<div class="ds-buddy-menu__header">
|
|
40
|
+
<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>
|
|
41
|
+
<div class="ds-buddy-menu__account">
|
|
42
|
+
<h2 class="ds-buddy-menu__account-title">Min prenumeration</h2>
|
|
43
|
+
<span class="ds-buddy-menu__account-level js-buddy-menu__account-level">{{ params.accountLevel }}</span>
|
|
44
|
+
|
|
45
|
+
{% if params.addons %}
|
|
46
|
+
<h2 class="ds-buddy-menu__addons-title">Mina tillägg</h2>
|
|
47
|
+
<ul class="ds-buddy-menu__addons-list">
|
|
48
|
+
{% for addon in params.addons %}
|
|
49
|
+
<li><a href="{{ addon.href }}">{{ addon.title }}</a></li>
|
|
50
|
+
{% endfor %}
|
|
51
|
+
</ul>
|
|
52
|
+
{% endif %}
|
|
53
|
+
|
|
54
|
+
{{ Button({
|
|
55
|
+
text: "Mitt konto",
|
|
56
|
+
variant: "secondaryOutlined",
|
|
57
|
+
fullWidth: true,
|
|
58
|
+
href: params.myAccountUrl | default("#"),
|
|
59
|
+
attributes: { "data-hide-promo" : "" },
|
|
60
|
+
forcePx: params.forcePx
|
|
61
|
+
})}}
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
{# @todo add support for preniverse container and subscription cta #}
|
|
66
|
+
|
|
67
|
+
<div class="ds-buddy-menu__links">
|
|
68
|
+
<h2 class="ds-buddy-menu__links-title">Mitt innehåll</h2>
|
|
69
|
+
<ul class="ds-buddy-menu__links-list">
|
|
70
|
+
{{ params.links | safe }}
|
|
71
|
+
</ul>
|
|
72
|
+
</div>
|
|
73
|
+
{% endif %}
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
{% endmacro %}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@use "../../foundations/helpers/spacing.scss" as *;
|
|
2
|
+
@use "../../foundations/helpers/typography.scss" as *;
|
|
3
|
+
@use "../../foundations/helpers/mediaQueries.scss" as *;
|
|
4
|
+
@use "../../foundations/helpers/metrics.scss" as *;
|
|
5
|
+
@use "../../foundations/helpers/utilities.scss" as *;
|
|
6
|
+
@use "../../foundations/helpers/colors.scss" as *;
|
|
7
|
+
@use "../../foundations/helpers/links.scss" as *;
|
|
8
|
+
@use "../button/button.scss" as *;
|
|
9
|
+
@use "../icon-button/icon-button.scss" as *;
|
|
10
|
+
@use "../list-item/list-item.scss" as *;
|
|
11
|
+
|
|
12
|
+
.ds-buddy-menu {
|
|
13
|
+
width: 360px;
|
|
14
|
+
background-color: var($ds-color-surface-elevated);
|
|
15
|
+
border-radius: ds-metrics-border-radius(x2);
|
|
16
|
+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
right: 0;
|
|
20
|
+
z-index: 1;
|
|
21
|
+
|
|
22
|
+
@include ds-mq-largest-breakpoint(mobile) {
|
|
23
|
+
width: 100vw;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__scrollable-container {
|
|
27
|
+
max-height: calc(100vh - 100px);
|
|
28
|
+
overflow-y: auto;
|
|
29
|
+
/* @todo - should we style scrollbar?
|
|
30
|
+
// Scrollbar styling based on existing styling in arkivet/bang
|
|
31
|
+
&::-webkit-scrollbar {
|
|
32
|
+
width: 8px;
|
|
33
|
+
}
|
|
34
|
+
&::-webkit-scrollbar-thumb {
|
|
35
|
+
border: 1px solid var($ds-color-component-primary-overlay);
|
|
36
|
+
background-color: var($ds-color-border-primary-02);
|
|
37
|
+
border-radius: ds-metrics-border-radius(x2);
|
|
38
|
+
}
|
|
39
|
+
&::-webkit-scrollbar-track {
|
|
40
|
+
border: 0;
|
|
41
|
+
background-color: var($ds-color-component-primary-overlay);
|
|
42
|
+
border-radius: ds-metrics-border-radius(x2);
|
|
43
|
+
}
|
|
44
|
+
*/
|
|
45
|
+
}
|
|
46
|
+
&__content {
|
|
47
|
+
position: relative;
|
|
48
|
+
}
|
|
49
|
+
&__header {
|
|
50
|
+
padding: ds-spacing-component(x8 x4 x4);
|
|
51
|
+
margin: ds-spacing-component(0 0 x4);
|
|
52
|
+
}
|
|
53
|
+
&__close {
|
|
54
|
+
position: absolute;
|
|
55
|
+
right: ds-spacing-component(x1);
|
|
56
|
+
top: ds-spacing-component(x1);
|
|
57
|
+
}
|
|
58
|
+
&__greeting {
|
|
59
|
+
@include ds-typography($ds-typography-functional-heading03bold);
|
|
60
|
+
color: var($ds-color-text-primary);
|
|
61
|
+
margin: ds-spacing-component(0 0 x4);
|
|
62
|
+
display: block;
|
|
63
|
+
}
|
|
64
|
+
&__account-title,
|
|
65
|
+
&__addons-title,
|
|
66
|
+
&__links-title {
|
|
67
|
+
@include ds-typography($ds-typography-functional-body02medium);
|
|
68
|
+
color: var($ds-color-text-primary);
|
|
69
|
+
margin: ds-spacing-component(0 0 x1);
|
|
70
|
+
}
|
|
71
|
+
&__links-title {
|
|
72
|
+
padding: ds-spacing-component(0 x4);
|
|
73
|
+
}
|
|
74
|
+
&__addons-list {
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: ds-spacing-component(0 0 x4);
|
|
77
|
+
list-style: none;
|
|
78
|
+
a {
|
|
79
|
+
@include ds-typography($ds-typography-functional-body02regular);
|
|
80
|
+
color: var($ds-color-text-primary-02);
|
|
81
|
+
margin: ds-spacing-component(0 0 x4);
|
|
82
|
+
@include ds-link($ds-link-list);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
&__account-level {
|
|
86
|
+
@include ds-typography($ds-typography-functional-body02regular);
|
|
87
|
+
color: var($ds-color-text-primary-02);
|
|
88
|
+
margin: ds-spacing-component(0 0 x4);
|
|
89
|
+
display: block;
|
|
90
|
+
}
|
|
91
|
+
&__links-list {
|
|
92
|
+
border-bottom-left-radius: ds-metrics-border-radius(x2);
|
|
93
|
+
border-bottom-right-radius: ds-metrics-border-radius(x2);
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
margin: 0;
|
|
96
|
+
padding: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.ds-force-px {
|
|
100
|
+
.ds-buddy-menu__greeting {
|
|
101
|
+
@include ds-typography($ds-typography-functional-heading03bold, true);
|
|
102
|
+
}
|
|
103
|
+
.ds-buddy-menu__account-title,
|
|
104
|
+
.ds-buddy-menu__addons-title,
|
|
105
|
+
.ds-buddy-menu__links-title {
|
|
106
|
+
@include ds-typography($ds-typography-functional-body02medium, true);
|
|
107
|
+
}
|
|
108
|
+
.ds-buddy-menu__addons-list a {
|
|
109
|
+
@include ds-typography($ds-typography-functional-body02regular, true);
|
|
110
|
+
}
|
|
111
|
+
.ds-buddy-menu__account-level {
|
|
112
|
+
@include ds-typography($ds-typography-functional-body02regular, true);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
{% set classes = componentClassName + " " + variant | join(" ") %}
|
|
77
77
|
|
|
78
78
|
{% if element == 'link' %}
|
|
79
|
-
<a class="{{ classes }}" {{- attributes | safe }} href="
|
|
79
|
+
<a class="{{ classes }}" {{- attributes | safe }} href="{{ params.href }}">
|
|
80
80
|
{{ caller() if caller }}
|
|
81
81
|
</a>
|
|
82
82
|
{% elif element == 'button' %}
|
|
@@ -82,6 +82,7 @@ $ds-list-item__icon-size: 24px;
|
|
|
82
82
|
@include ds-typography($ds-typography-functional-body02regular, true);
|
|
83
83
|
}
|
|
84
84
|
color: var($ds-color-text-primary);
|
|
85
|
+
text-align: left;
|
|
85
86
|
}
|
|
86
87
|
|
|
87
88
|
.ds-list-item__subtitle {
|
|
@@ -122,7 +123,7 @@ $ds-list-item__icon-size: 24px;
|
|
|
122
123
|
outline: none;
|
|
123
124
|
.ds-list-item__inner {
|
|
124
125
|
outline: ds-metrics-border-width(x2) solid var($ds-color-border-focus-02);
|
|
125
|
-
outline-offset: 2px;
|
|
126
|
+
outline-offset: -2px;
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonniernews/dn-design-system-web",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.22",
|
|
4
4
|
"description": "DN design system for web.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
|