@bonniernews/dn-design-system-web 3.0.0-alpha.30 → 3.0.0-alpha.31

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.31 (2023-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Quote and Factbox has property from ´variant´ to ´theme´
+
+### Bug Fixes
+
+* **web:** add web themes and update quote and factbox ([#761](https://github.com/BonnierNews/dn-design-system/issues/761)) ([0ee3299](https://github.com/BonnierNews/dn-design-system/commit/0ee329900641325278e04242074f819f66bda025))
+
+
+
 ## 3.0.0-alpha.30 (2023-04-19)
 
 

package/components/factbox/README.md

@@ -13,7 +13,7 @@
 |vignetteHtml | HTML String | no | | | |
 |titleHtml | HTML String | yes | | | |
 |bodyHtml | HTML String | yes | | | |
-|variant | String | yes | standard, culture, sport, economy | standard | Design variant |
+|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
 |grade | String | no | | | zero, one, two, three, four, five, none |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
@@ -33,7 +33,7 @@ These are copy paste friendly examples to quickliy get started using a component
   vignetteHtml: "",
   titleHtml: "Drama",
   bodyHtml: "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>",
-  variant: "culture",
+  theme: "kultur",
   grade: "two",
   forcePx: true
 })}}

package/components/factbox/factbox.njk

@@ -5,31 +5,29 @@
 {% macro Factbox(params) %}
   {% set componentClassName = "ds-factbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
+  {% set additionalClasses = [] %}
   {% set grades = ["zero", "one", "two", "three", "four", "five"] %}
   {% set gradesNumeric = ["0", "1", "2", "3", "4", "5"] %}
   {% set activeGrade = params.grade | default("") | string %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
   {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
   {% if params.forceExpand %}
-    {% set variant = (variant.push(classNamePrefix + "expanded"), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "expanded"), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">

package/components/factbox/factbox.scss

@@ -19,7 +19,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
   .ds-factbox__inner {
     border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    border-left: $ds-factbox-border-width solid $ds-color-component-brand;
+    border-left: $ds-factbox-border-width solid $ds-theme-color;
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
@@ -73,7 +73,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
   }
   .ds-factbox__vignette {
-    color: $ds-color-component-brand;
+    color: $ds-theme-color;
     margin-right: ds-spacing-component($ds-sc-x1);
   }
   .ds-factbox__grade {
@@ -140,37 +140,4 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       }
     }
   }
-
-  &--culture {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-kultur;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-kultur;
-    }
-  }
-  &--sport {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-sport;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-sport;
-    }
-  }
-  &--economy {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-economy;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-economy;
-    }
-  }
-  &--sthlm {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-sthlm;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-sthlm;
-    }
-  }
 }

package/components/quote/README.md

@@ -10,7 +10,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |bodyHtml | HTML String | yes | | | |
-|variant | String | no | standard, culture, sport, economy | standard | Design variant |
+|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
 |attributes | Object | no | | | Ex. { target: "_blank", "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 |
@@ -25,7 +25,6 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/quote/quote.njk' import Quote %}
 
 {{ Quote({
-  variant: "culture",
   bodyHtml: ""
 })}}
 ```

package/components/quote/quote.njk

@@ -3,24 +3,22 @@
 {% macro Quote(params) %}
   {% set componentClassName = "ds-quote" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
+  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
   <blockquote class="{{ classes }}" {{- attributes | safe }}>
     <span class="{{ componentClassName + '__border'}}"></span>

package/components/quote/quote.scss

@@ -17,21 +17,8 @@
     display: block;
     width: 40px;
     height: 8px;
-    color: $ds-color-component-brand;
+    color: $ds-theme-color;
     background: currentColor;
     margin: ds-spacing-component(0 0 $ds-sc-x2);
   }
-
-  &--culture .ds-quote__border {
-    color: $ds-color-static-kultur;
-  }
-  &--sport .ds-quote__border {
-    color: $ds-color-static-sport;
-  }
-  &--economy .ds-quote__border {
-    color: $ds-color-static-economy;
-  }
-  &--sthlm .ds-quote__border {
-    color: $ds-color-static-sthlm;
-  }
 }

package/foundations/colors.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 @use './variables/colorsDnLightTokens';
 @use './variables/colorsDnDarkTokens';
+@use './helpers/colors.scss' as *;
 
 html,
 .ds-light {
@@ -25,4 +26,34 @@ html,
   @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
     --ds-color-#{string.slice($name, 13)}: #{$value};
   }
+
+  // these are not static so needs to be defined here also
+  --ds-theme-color: #{$ds-color-component-brand};
+  .ds-theme--nyheter {
+    --ds-theme-color: #{$ds-color-component-brand};
+  }
+}
+
+html {
+  --ds-theme-color: #{$ds-color-component-brand};
+}
+
+.ds-theme--nyheter {
+  --ds-theme-color: #{$ds-color-component-brand};
+}
+
+.ds-theme--ekonomi {
+  --ds-theme-color: #{$ds-color-static-economy};
+}
+
+.ds-theme--kultur {
+  --ds-theme-color: #{$ds-color-static-kultur};
+}
+
+.ds-theme--sport {
+  --ds-theme-color: #{$ds-color-static-sport};
+}
+
+.ds-theme--sthlm {
+  --ds-theme-color: #{$ds-color-static-sthlm};
 }

package/foundations/helpers/colors.scss

@@ -1 +1,3 @@
 @forward '../variables/colorsCssVariables.scss';
+
+$ds-theme-color: var(--ds-theme-color);

package/package.json

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