@bonniernews/dn-design-system-web 2.1.0-alpha.13 → 2.1.0-alpha.15

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 (10) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/components/checkbox/checkbox.njk +2 -5
  3. package/components/disclaimer/README.md +3 -1
  4. package/components/disclaimer/disclaimer.njk +7 -6
  5. package/components/disclaimer/disclaimer.scss +10 -0
  6. package/foundations/variables/colorsCssVariables.scss +1 -0
  7. package/foundations/variables/colorsDnDarkTokens.scss +1 -0
  8. package/foundations/variables/colorsDnLightTokens.scss +1 -0
  9. package/package.json +1 -1
  10. package/tokens/colors-css-variables.json +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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
+ ## [2.1.0-alpha.15](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.14...@bonniernews/dn-design-system-web@2.1.0-alpha.15) (2023-02-23)
7
+
8
+
9
+ ### Features
10
+
11
+ * **web:** native variant of disclaimer ([#696](https://github.com/BonnierNews/dn-design-system/issues/696)) ([1294432](https://github.com/BonnierNews/dn-design-system/commit/1294432532d92ec7cb1c1db21e489da0a36ec43c))
12
+
13
+
14
+
15
+ ## [2.1.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.13...@bonniernews/dn-design-system-web@2.1.0-alpha.14) (2023-02-23)
16
+
17
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
18
+
19
+
20
+
21
+
22
+
6
23
  ## [2.1.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.12...@bonniernews/dn-design-system-web@2.1.0-alpha.13) (2023-02-23)
7
24
 
8
25
 
package/components/checkbox/checkbox.njk CHANGED
@@ -1,5 +1,6 @@
1
1
  {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
2
2
  {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
3
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
3
4
 
4
5
  {# Internal helper macro - not intended for use outside of this file #}
5
6
  {% macro CheckboxIcons(componentClassName) %}
@@ -14,11 +15,7 @@
14
15
  {% set classNamePrefix = componentClassName + "--" %}
15
16
  {% set wrapperClasses = [] %}
16
17
  {% set name = params.name | default("ds-checkbox") %}
17
- {% set attributes %}
18
- {% for attribute, value in params.attributes %}
19
- {{attribute}}="{{value}}"
20
- {% endfor %}
21
- {% endset %}
18
+ {% set attributes = getAttributes(params.attributes) %}
22
19
 
23
20
  {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
24
21
 
package/components/disclaimer/README.md CHANGED
@@ -1,5 +1,6 @@
1
1
  - GitHub: [BonnierNews/dn-design-system/../web/src/components/disclaimer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/disclaimer)
2
- - Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-disclaimer-web)
2
+ - Storybook (PROD): [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
3
+ - Storybook (LATEST): [Disclaimer > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
3
4
 
4
5
  ----
5
6
 
@@ -11,6 +12,7 @@
11
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
12
13
  |bodyHtml | String | yes | | | Intended use is text, links and inlined icons |
13
14
  |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
15
+ |variant | String | no | default, native | default | |
14
16
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
15
17
  |classNames | String | no | | | Ex. "my-special-class" |
16
18
  |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
package/components/disclaimer/disclaimer.njk CHANGED
@@ -1,14 +1,15 @@
1
1
  {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
2
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
3
 
3
4
  {% macro Disclaimer(params) %}
4
5
  {% set componentClassName = "ds-disclaimer" %}
5
6
  {% set classNamePrefix = componentClassName + "--" %}
6
7
  {% set additionalClasses = [] %}
7
- {% set attributes %}
8
- {% for attribute, value in params.attributes %}
9
- {{attribute}}="{{value}}"
10
- {% endfor %}
11
- {% endset %}
8
+ {% set attributes = getAttributes(params.attributes) %}
9
+
10
+ {% if params.variant and params.variant !== "default" %}
11
+ {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
12
+ {% endif %}
12
13
 
13
14
  {% if params.forcePx %}
14
15
  {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
@@ -16,7 +17,7 @@
16
17
 
17
18
  {% if params.iconName %}
18
19
  {% set iconSvg = Icon({ icon: params.iconName }) %}
19
- {% set additionalClasses = (additionalClasses.push(componentClassName + "--with-icon"), additionalClasses) %}
20
+ {% set additionalClasses = (additionalClasses.push(classNamePrefix + "with-icon"), additionalClasses) %}
20
21
  {% endif %}
21
22
 
22
23
  {% if params.classNames %}
package/components/disclaimer/disclaimer.scss CHANGED
@@ -55,4 +55,14 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
55
55
  fill: currentColor;
56
56
  }
57
57
  }
58
+
59
+ &--native {
60
+ background-color: $ds-color-static-ad-yellow;
61
+
62
+ .ds-icon,
63
+ .ds-disclaimer__body-html,
64
+ .ds-disclaimer__body-html strong {
65
+ color: $ds-color-static-black;
66
+ }
67
+ }
58
68
  }
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -60,6 +60,7 @@ $ds-color-static-economy: var(--ds-color-static-economy);
60
60
  $ds-color-static-sport: var(--ds-color-static-sport);
61
61
  $ds-color-static-neutral-200: var(--ds-color-static-neutral-200);
62
62
  $ds-color-static-sthlm: var(--ds-color-static-sthlm);
63
+ $ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
63
64
  $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
64
65
  $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
65
66
  $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -65,3 +65,4 @@ $ds-hex-dark-static-economy: #60BCA1;
65
65
  $ds-hex-dark-static-sport: #F58D2D;
66
66
  $ds-hex-dark-static-neutral-200: #E0E0E0;
67
67
  $ds-hex-dark-static-sthlm: #FF589B;
68
+ $ds-hex-dark-static-ad-yellow: #FFEAC2;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -60,6 +60,7 @@ $ds-hex-static-economy: #60BCA1;
60
60
  $ds-hex-static-sport: #F58D2D;
61
61
  $ds-hex-static-neutral-200: #E0E0E0;
62
62
  $ds-hex-static-sthlm: #FF589B;
63
+ $ds-hex-static-ad-yellow: #FFEAC2;
63
64
  $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
64
65
  $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
65
66
  $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "2.1.0-alpha.13",
3
+ "version": "2.1.0-alpha.15",
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-css-variables.json CHANGED
@@ -61,6 +61,7 @@
61
61
  "static-sport": "var(--ds-color-static-sport)",
62
62
  "static-neutral-200": "var(--ds-color-static-neutral-200)",
63
63
  "static-sthlm": "var(--ds-color-static-sthlm)",
64
+ "static-ad-yellow": "var(--ds-color-static-ad-yellow)",
64
65
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
65
66
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
66
67
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",