@bonniernews/dn-design-system-web 20.4.5 → 20.5.1

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/components/empty-state/README-UXD.md +0 -0
  3. package/components/empty-state/README.md +40 -0
  4. package/components/empty-state/empty-state.njk +62 -0
  5. package/components/empty-state/empty-state.scss +35 -0
  6. package/foundations/variables/colorsDnDarkTokens.scss +1 -1
  7. package/package.json +1 -1
  8. package/tokens/colors-dark-mode.json +2 -2
package/CHANGELOG.md CHANGED
@@ -4,6 +4,40 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [20.5.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.0...@bonniernews/dn-design-system-web@20.5.1) (2024-09-30)
8
+
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+
12
+ * remove ComponentSpacing and LayoutSpacing (#1416)
13
+
14
+ ### Features
15
+
16
+ * **app:** use medium in Pill and BottomNavigationItem ([#1417](https://github.com/BonnierNews/dn-design-system/issues/1417)) ([49ff83e](https://github.com/BonnierNews/dn-design-system/commit/49ff83e4a9a90ed1fbb4976287e341edae264e6d))
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * **web:** fix aspect-ratio in screenshot tests ([#1418](https://github.com/BonnierNews/dn-design-system/issues/1418)) ([7d35c42](https://github.com/BonnierNews/dn-design-system/commit/7d35c42e7485d019460c8343d8e7fc826351327f))
22
+
23
+
24
+ ### Maintenance
25
+
26
+ * **app:** remove all usage of component colors ([#1413](https://github.com/BonnierNews/dn-design-system/issues/1413)) ([45b4245](https://github.com/BonnierNews/dn-design-system/commit/45b4245e84ea04376345c71458285014c29e905f))
27
+ * **app:** remove all usage of deprecated typo ([#1415](https://github.com/BonnierNews/dn-design-system/issues/1415)) ([fc84e28](https://github.com/BonnierNews/dn-design-system/commit/fc84e288f9e71052b829dcb1398f648101640f5b))
28
+ * **foundations:** update tokens from Figma ([#1414](https://github.com/BonnierNews/dn-design-system/issues/1414)) ([dd13750](https://github.com/BonnierNews/dn-design-system/commit/dd13750a2e4a6d87af86f5e753667ffb254a0bbb))
29
+ * prerelease packages ([545aca7](https://github.com/BonnierNews/dn-design-system/commit/545aca73322361d810f17ffe4c535ff78ea920ae))
30
+ * prerelease packages ([f49d888](https://github.com/BonnierNews/dn-design-system/commit/f49d888f4053c4cc1e6e23c7150e59a2d2bd01e3))
31
+ * prerelease packages ([3cac536](https://github.com/BonnierNews/dn-design-system/commit/3cac536bc7ac07eca654b21acf6c82533c926448))
32
+ * remove ComponentSpacing and LayoutSpacing ([#1416](https://github.com/BonnierNews/dn-design-system/issues/1416)) ([61c46d6](https://github.com/BonnierNews/dn-design-system/commit/61c46d6fdff175339b124d6cf54753004be043b7))
33
+
34
+ ## [20.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.5...@bonniernews/dn-design-system-web@20.5.0) (2024-09-26)
35
+
36
+
37
+ ### Features
38
+
39
+ * **web:** empty state component ([#1411](https://github.com/BonnierNews/dn-design-system/issues/1411)) ([41e01c9](https://github.com/BonnierNews/dn-design-system/commit/41e01c9ca7bf102596249ffc579128e38a9bd533))
40
+
7
41
  ## [20.4.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.4...@bonniernews/dn-design-system-web@20.4.5) (2024-09-26)
8
42
 
9
43
 
package/components/empty-state/README-UXD.md ADDED
File without changes
package/components/empty-state/README.md ADDED
@@ -0,0 +1,40 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/basic/empty-state](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/basic/empty-state)
2
+ - Storybook: [EmptyState](https://designsystem.dn.se/?path=/docs/basic-emptystate--docs)
3
+ - Storybook (Latest): [EmptyState](https://designsystem-latest.dn.se/?path=/docs/basic-emptystate--docs)
4
+
5
+ ----
6
+
7
+ # Empty state
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ | iconName | String | no | add, arrow_back, delete etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
14
+ | title | String | no | | | Title for empty state |
15
+ | body | String | no | | | Describing text |
16
+ | brandButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional).|
17
+ | primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
18
+ | classNames | String | no | | | Ex. "my-special-class" |
19
+ | attributes | Object | no | | | Ex. { data-prop: value } |
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/empty-state/empty-state.njk' import EmptyState %}
29
+
30
+ {{ EmptyState({
31
+ iconName: "delete",
32
+ title: "Attans då...",
33
+ body: "Din sökning gav tyvärr inga träffar.",
34
+ })}}
35
+ ```
36
+
37
+ ### SCSS
38
+ ```scss
39
+ @use "@bonniernews/dn-design-system-web/basic/empty-state/empty-state" as *;
40
+ ```
package/components/empty-state/empty-state.njk ADDED
@@ -0,0 +1,62 @@
1
+ {% from '@bonniernews/dn-design-system-web/components/pictogram/pictogram.njk' import Pictogram %}
2
+ {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
3
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
4
+
5
+ {% macro EmptyState(params) %}
6
+ {% set componentClassName = "ds-empty-state" %}
7
+
8
+ {%- set classes = [
9
+ componentClassName,
10
+ params.classNames if params.classNames
11
+ ] | join(" ") %}
12
+ {% set attributes = getAttributes(params.attributes) %}
13
+
14
+ <div class="{{ classes }}" {{- attributes | safe }}>
15
+ {% if params.iconName %}
16
+ {{ Pictogram({
17
+ variant: "brand",
18
+ size: "large",
19
+ iconName: params.iconName,
20
+ attributes: { "aria-label": params.body if params.body else "" }
21
+ })}}
22
+ {% endif %}
23
+
24
+ <div class="{{ componentClassName + '__text' }}">
25
+ {% if params.title %}
26
+ <h2>{{ params.title }}</h2>
27
+ {% endif %}
28
+ {% if params.body %}
29
+ <span class="{{ componentClassName + '__body' }}">{{ params.body }}</span>
30
+ {% endif %}
31
+ </div>
32
+
33
+ {% if params.brandButton or params.primaryButton %}
34
+ <div class="{{ componentClassName + '__button-wrapper' }}">
35
+ {% if params.brandButton %}
36
+ {{ Button({
37
+ text: params.brandButton.text,
38
+ variant: "brand",
39
+ href: params.brandButton.href,
40
+ classNames: params.brandButton.classNames,
41
+ attributes: params.brandButton.attributes,
42
+ forcePx: params.forcePx,
43
+ fullWidth: true
44
+ })}}
45
+ {% endif %}
46
+
47
+ {% if params.primaryButton %}
48
+ {{ Button({
49
+ text: params.primaryButton.text,
50
+ variant: "primary",
51
+ emphasis: "outline",
52
+ href: params.primaryButton.href,
53
+ classNames: params.primaryButton.classNames,
54
+ attributes: params.primaryButton.attributes,
55
+ forcePx: params.forcePx,
56
+ fullWidth: true
57
+ })}}
58
+ {% endif %}
59
+ </div>
60
+ {% endif %}
61
+ </div>
62
+ {% endmacro %}
package/components/empty-state/empty-state.scss ADDED
@@ -0,0 +1,35 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+ @use "../../components/pictogram/pictogram.scss" as *;
3
+ @use "../../components/button/button.scss" as *;
4
+
5
+ .ds-empty-state {
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ text-align: center;
10
+
11
+ .ds-empty-state__text {
12
+ margin-top: ds-spacing($ds-s-100);
13
+
14
+ h2 {
15
+ @include ds-typography($ds-typography-functionalheading03);
16
+ color: $ds-color-text-primary;
17
+ margin: 0;
18
+ }
19
+
20
+ .ds-empty-state__body {
21
+ @include ds-typography($ds-typography-functionalbody02);
22
+ display: block;
23
+ color: $ds-color-text-primary-02;
24
+ margin-top: ds-spacing($ds-s-025);
25
+ }
26
+ }
27
+
28
+ .ds-empty-state__button-wrapper {
29
+ margin-top: ds-spacing($ds-s-100);
30
+
31
+ .ds-btn + .ds-btn {
32
+ margin-top: ds-spacing($ds-s-050);
33
+ }
34
+ }
35
+ }
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -39,12 +39,12 @@ $ds-hex-dark-surface-background: #050505;
39
39
  $ds-hex-dark-surface-raised: #2B2B2B;
40
40
  $ds-hex-dark-surface-native-article: #2B2B2B;
41
41
  $ds-hex-dark-surface-elevated: #2B2B2B;
42
+ $ds-hex-dark-surface-inverted: #ffffff;
42
43
  $ds-hex-dark-surface-overlay: #05050580;
43
44
  $ds-hex-dark-surface-quiz: #EA3E3F;
44
45
  $ds-hex-dark-surface-korsord: #8BB6E8;
45
46
  $ds-hex-dark-surface-sudoko: #90D0BD;
46
47
  $ds-hex-dark-surface-brand: #DA000D;
47
- $ds-hex-dark-surface-inverted: #141414;
48
48
  $ds-hex-dark-border-primary: #3B3B3B;
49
49
  $ds-hex-dark-border-primary-02: #ffffff66;
50
50
  $ds-hex-dark-border-primary-03: #EDEDED;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "20.4.5",
3
+ "version": "20.5.1",
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",
package/tokens/colors-dark-mode.json CHANGED
@@ -47,12 +47,12 @@
47
47
  "raised": "#2B2B2B",
48
48
  "native-article": "#2B2B2B",
49
49
  "elevated": "#2B2B2B",
50
+ "inverted": "#ffffff",
50
51
  "overlay": "#05050580",
51
52
  "quiz": "#EA3E3F",
52
53
  "korsord": "#8BB6E8",
53
54
  "sudoko": "#90D0BD",
54
- "brand": "#DA000D",
55
- "inverted": "#141414"
55
+ "brand": "#DA000D"
56
56
  },
57
57
  "border": {
58
58
  "primary": "#3B3B3B",