@bonniernews/dn-design-system-web 3.0.0-alpha.3 → 3.0.0-alpha.5

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.4...@bonniernews/dn-design-system-web@3.0.0-alpha.5) (2023-03-08)
+
+
+### Features
+
+* **web:** video caption component ([#706](https://github.com/BonnierNews/dn-design-system/issues/706)) ([a64278a](https://github.com/BonnierNews/dn-design-system/commit/a64278a64840e2422baed278b7bae29055dabf78))
+
+
+
+## [3.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* typography medium to semibold (#717)
+
+### Miscellaneous Chores
+
+* typography medium to semibold ([#717](https://github.com/BonnierNews/dn-design-system/issues/717)) ([964de48](https://github.com/BonnierNews/dn-design-system/commit/964de485f43f18cd3f93ce4f0f82a1ce89219dee))
+
+
+
 ## [3.0.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.2...@bonniernews/dn-design-system-web@3.0.0-alpha.3) (2023-03-08)
 
 

package/README.md

@@ -10,4 +10,4 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
-For specific instructions see each component or helper readme.
+For specific instructions see each component or helper readme

package/components/badge/badge.scss

@@ -11,7 +11,7 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    @include ds-typography($ds-typography-functional-meta02medium);
+    @include ds-typography($ds-typography-functional-meta02semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
     border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -23,7 +23,7 @@ $ds-badge__min-size: 8px;
     min-width: ds-px-to-rem($ds-badge__min-size);
     padding: 0 ds-px-to-rem(ds-spacing-component(x1));
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-meta02medium, true);
+      @include ds-typography($ds-typography-functional-meta02semibold, true);
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
       padding: 0 ds-spacing-component(x1);

package/components/blocked-content/blocked-content.scss

@@ -24,11 +24,11 @@
     }
   }
   .ds-blocked-content__title {
-    @include ds-typography($ds-typography-functional-heading01medium);
+    @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
     margin: 0 0 ds-spacing-component(x2);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-heading01medium, true);
+      @include ds-typography($ds-typography-functional-heading01semibold, true);
     }
   }
 }

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

@@ -64,7 +64,7 @@
   .ds-buddy-menu__account-title,
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
-    @include ds-typography($ds-typography-functional-body02medium);
+    @include ds-typography($ds-typography-functional-body02semibold);
     color: $ds-color-text-primary;
     margin: ds-spacing-component(0 0 x1);
   }
@@ -103,7 +103,7 @@
     .ds-buddy-menu__account-title,
     .ds-buddy-menu__addons-title,
     .ds-buddy-menu__links-title {
-      @include ds-typography($ds-typography-functional-body02medium, true);
+      @include ds-typography($ds-typography-functional-body02semibold, true);
     }
     .ds-buddy-menu__addons-list a {
       @include ds-typography($ds-typography-functional-body02regular, true);

package/components/byline/byline.scss

@@ -101,9 +101,12 @@ $ds-byline__image-size: 44px;
     word-break: break-all;
 
     .ds-byline__title {
-      @include ds-typography($ds-typography-functional-heading01medium);
+      @include ds-typography($ds-typography-functional-heading01semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-heading01medium, true);
+        @include ds-typography(
+          $ds-typography-functional-heading01semibold,
+          true
+        );
       }
       color: $ds-color-text-primary;
       text-align: left;

package/components/disclaimer/disclaimer.scss

@@ -33,10 +33,10 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     }
 
     strong {
-      @include ds-typography($ds-typography-functional-body01medium);
+      @include ds-typography($ds-typography-functional-body01semibold);
       color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01medium, true);
+        @include ds-typography($ds-typography-functional-body01semibold, true);
       }
     }
   }

package/components/factbox/factbox.scss

@@ -52,9 +52,9 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       @include ds-link($ds-link-article-body);
     }
     strong {
-      @include ds-typography($ds-typography-functional-body02medium);
+      @include ds-typography($ds-typography-functional-body02semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02medium, true);
+        @include ds-typography($ds-typography-functional-body02semibold, true);
       }
     }
     img {

package/components/video-caption/README.md

@@ -0,0 +1,37 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
+- Storybook (PROD): [VideoCaption > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-videocaption-web--video-caption)
+- Storybook (LATEST): [VideoCaption > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-videocaption-web--video-caption)
+
+----
+
+# VideoCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|caption | String | no | | | |
+|duration | String | no | | | |
+|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 |
+
+## 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/video-caption/video-caption.njk' import VideoCaption %}
+
+{{ VideoCaption({
+  caption: "Tre år har gått sedan terrordåden i Paris.",
+  duration: "47 sek."
+}) }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
+```

package/components/video-caption/video-caption.njk

@@ -0,0 +1,24 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro VideoCaption(params) %}
+  {%- set componentClassName = "ds-video-caption" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- if params.forcePx %}
+    {%- set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <figcaption class="{{ classes }}" {{- attributes | safe }}>
+    {%- if params.duration %}
+      <span class="{{ componentClassName + '__duration'}}">
+        {{- params.duration -}}
+      </span>
+    {% endif %}
+    {%- if params.caption %}
+      {{- params.caption -}}
+    {% endif %}
+  </figcaption>
+{% endmacro %}

package/components/video-caption/video-caption.scss

@@ -0,0 +1,18 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-video-caption {
+  @include ds-typography($ds-typography-functional-body01regular);
+  color: $ds-color-text-primary;
+
+  .ds-video-caption__duration {
+    @include ds-typography($ds-typography-functional-body01bold);
+    margin-right: ds-spacing-component(x1);
+  }
+
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($ds-typography-functional-body01regular, true);
+    .ds-video-caption__duration {
+      @include ds-typography($ds-typography-functional-body01bold, true);
+    }
+  }
+}

package/foundations/typography/fontDefinitions.scss

@@ -249,7 +249,7 @@ $dnSans: (
     fontFamily: DNSansVF,
     sources: (
       (
-        file: "DNSans10-Variable.woff2",
+        file: "DNSans11-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -260,11 +260,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Light.woff2",
+        file: "DNSans11-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Light.woff",
+        file: "DNSans11-Light.woff",
         format: "woff",
       ),
     ),
@@ -275,11 +275,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-LightItalic.woff2",
+        file: "DNSans11-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-LightItalic.woff",
+        file: "DNSans11-LightItalic.woff",
         format: "woff",
       ),
     ),
@@ -291,11 +291,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Regular.woff2",
+        file: "DNSans11-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Regular.woff",
+        file: "DNSans11-Regular.woff",
         format: "woff",
       ),
     ),
@@ -306,11 +306,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-RegularItalic.woff2",
+        file: "DNSans11-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-RegularItalic.woff",
+        file: "DNSans11-RegularItalic.woff",
         format: "woff",
       ),
     ),
@@ -322,11 +322,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Medium.woff2",
+        file: "DNSans11-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Medium.woff",
+        file: "DNSans11-Medium.woff",
         format: "woff",
       ),
     ),
@@ -337,11 +337,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-MediumItalic.woff2",
+        file: "DNSans11-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-MediumItalic.woff",
+        file: "DNSans11-MediumItalic.woff",
         format: "woff",
       ),
     ),
@@ -353,11 +353,42 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Bold.woff2",
+        file: "DNSans11-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Bold.woff",
+        file: "DNSans11-SemiBold.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 600,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans11-SemiBoldItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans11-SemiBoldItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 600,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans11-Bold.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans11-Bold.woff",
         format: "woff",
       ),
     ),
@@ -368,11 +399,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BoldItalic.woff2",
+        file: "DNSans11-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BoldItalic.woff",
+        file: "DNSans11-BoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -384,11 +415,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Black.woff2",
+        file: "DNSans11-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Black.woff",
+        file: "DNSans11-Black.woff",
         format: "woff",
       ),
     ),
@@ -399,11 +430,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BlackItalic.woff2",
+        file: "DNSans11-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BlackItalic.woff",
+        file: "DNSans11-BlackItalic.woff",
         format: "woff",
       ),
     ),

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -1,17 +1,10 @@
 $spacingLayoutLargeScreen: (
   page-top-small: 32,
-  page-top-large: 32,
+  page-top-large: 48,
   page-bottom: 32,
   page-horizontal: 32,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,
-  gap-vertical-static-small: 8,
-  x1: 8,
-  x2: 16,
-  x3: 24,
-  x4: 32,
-  x5: 40,
-  x6: 48,
-  x8: 64
+  gap-vertical-static-small: 8
 );

package/foundations/variables/typographyTokensList.scss

@@ -1,83 +1,84 @@
 $ds-typography-expressive-heading01regular: 'expressive-heading01regular';
-$ds-typography-expressive-heading01medium: 'expressive-heading01medium';
+$ds-typography-expressive-heading01semibold: 'expressive-heading01semibold';
 $ds-typography-expressive-heading01bold: 'expressive-heading01bold';
 $ds-typography-expressive-heading01italicregular: 'expressive-heading01italicregular';
-$ds-typography-expressive-heading01italicmedium: 'expressive-heading01italicmedium';
+$ds-typography-expressive-heading01italicsemibold: 'expressive-heading01italicsemibold';
 $ds-typography-expressive-heading01italicbold: 'expressive-heading01italicbold';
 $ds-typography-expressive-heading02regular: 'expressive-heading02regular';
-$ds-typography-expressive-heading02medium: 'expressive-heading02medium';
+$ds-typography-expressive-heading02semibold: 'expressive-heading02semibold';
 $ds-typography-expressive-heading02bold: 'expressive-heading02bold';
 $ds-typography-expressive-heading02italicregular: 'expressive-heading02italicregular';
-$ds-typography-expressive-heading02italicmedium: 'expressive-heading02italicmedium';
+$ds-typography-expressive-heading02italicsemibold: 'expressive-heading02italicsemibold';
 $ds-typography-expressive-heading02italicbold: 'expressive-heading02italicbold';
 $ds-typography-expressive-heading03regular: 'expressive-heading03regular';
-$ds-typography-expressive-heading03medium: 'expressive-heading03medium';
+$ds-typography-expressive-heading03semibold: 'expressive-heading03semibold';
 $ds-typography-expressive-heading03bold: 'expressive-heading03bold';
 $ds-typography-expressive-heading03italicregular: 'expressive-heading03italicregular';
-$ds-typography-expressive-heading03italicmedium: 'expressive-heading03italicmedium';
+$ds-typography-expressive-heading03italicsemibold: 'expressive-heading03italicsemibold';
 $ds-typography-expressive-heading03italicbold: 'expressive-heading03italicbold';
 $ds-typography-expressive-heading04regular: 'expressive-heading04regular';
-$ds-typography-expressive-heading04medium: 'expressive-heading04medium';
+$ds-typography-expressive-heading04semibold: 'expressive-heading04semibold';
 $ds-typography-expressive-heading04bold: 'expressive-heading04bold';
 $ds-typography-expressive-heading04italicregular: 'expressive-heading04italicregular';
-$ds-typography-expressive-heading04italicmedium: 'expressive-heading04italicmedium';
+$ds-typography-expressive-heading04italicsemibold: 'expressive-heading04italicsemibold';
 $ds-typography-expressive-heading04italicbold: 'expressive-heading04italicbold';
 $ds-typography-expressive-heading05regular: 'expressive-heading05regular';
-$ds-typography-expressive-heading05medium: 'expressive-heading05medium';
+$ds-typography-expressive-heading05semibold: 'expressive-heading05semibold';
 $ds-typography-expressive-heading05bold: 'expressive-heading05bold';
 $ds-typography-expressive-heading05italicregular: 'expressive-heading05italicregular';
-$ds-typography-expressive-heading05italicmedium: 'expressive-heading05italicmedium';
+$ds-typography-expressive-heading05italicsemibold: 'expressive-heading05italicsemibold';
 $ds-typography-expressive-heading05italicbold: 'expressive-heading05italicbold';
 $ds-typography-functional-heading01regular: 'functional-heading01regular';
-$ds-typography-functional-heading01medium: 'functional-heading01medium';
+$ds-typography-functional-heading01semibold: 'functional-heading01semibold';
 $ds-typography-functional-heading01bold: 'functional-heading01bold';
 $ds-typography-functional-heading02regular: 'functional-heading02regular';
-$ds-typography-functional-heading02medium: 'functional-heading02medium';
+$ds-typography-functional-heading02semibold: 'functional-heading02semibold';
 $ds-typography-functional-heading02bold: 'functional-heading02bold';
 $ds-typography-functional-heading03regular: 'functional-heading03regular';
-$ds-typography-functional-heading03medium: 'functional-heading03medium';
+$ds-typography-functional-heading03semibold: 'functional-heading03semibold';
 $ds-typography-functional-heading03bold: 'functional-heading03bold';
 $ds-typography-functional-heading04regular: 'functional-heading04regular';
-$ds-typography-functional-heading04medium: 'functional-heading04medium';
+$ds-typography-functional-heading04semibold: 'functional-heading04semibold';
 $ds-typography-functional-heading04bold: 'functional-heading04bold';
 $ds-typography-functional-heading05regular: 'functional-heading05regular';
-$ds-typography-functional-heading05medium: 'functional-heading05medium';
+$ds-typography-functional-heading05semibold: 'functional-heading05semibold';
 $ds-typography-functional-heading05bold: 'functional-heading05bold';
-$ds-typography-expressive-paragraph01regular: 'expressive-paragraph01regular';
-$ds-typography-expressive-paragraph01medium: 'expressive-paragraph01medium';
-$ds-typography-expressive-paragraph01bold: 'expressive-paragraph01bold';
-$ds-typography-expressive-paragraph01italicregular: 'expressive-paragraph01italicregular';
-$ds-typography-expressive-paragraph01italicmedium: 'expressive-paragraph01italicmedium';
-$ds-typography-expressive-paragraph01italicbold: 'expressive-paragraph01italicbold';
+$ds-typography-expressive-preamble01regular: 'expressive-preamble01regular';
+$ds-typography-expressive-preamble01semibold: 'expressive-preamble01semibold';
+$ds-typography-expressive-preamble01bold: 'expressive-preamble01bold';
+$ds-typography-expressive-preamble01italicregular: 'expressive-preamble01italicregular';
+$ds-typography-expressive-preamble01italicsemibold: 'expressive-preamble01italicsemibold';
+$ds-typography-expressive-preamble01italicbold: 'expressive-preamble01italicbold';
 $ds-typography-expressive-body01regular: 'expressive-body01regular';
-$ds-typography-expressive-body01medium: 'expressive-body01medium';
+$ds-typography-expressive-body01semibold: 'expressive-body01semibold';
 $ds-typography-expressive-body01bold: 'expressive-body01bold';
 $ds-typography-expressive-body01italicregular: 'expressive-body01italicregular';
-$ds-typography-expressive-body01italicmedium: 'expressive-body01italicmedium';
+$ds-typography-expressive-body01italicsemibold: 'expressive-body01italicsemibold';
 $ds-typography-expressive-body01italicbold: 'expressive-body01italicbold';
 $ds-typography-expressive-body02regular: 'expressive-body02regular';
-$ds-typography-expressive-body02medium: 'expressive-body02medium';
+$ds-typography-expressive-body02semibold: 'expressive-body02semibold';
 $ds-typography-expressive-body02bold: 'expressive-body02bold';
 $ds-typography-expressive-body02italicregular: 'expressive-body02italicregular';
-$ds-typography-expressive-body02italicmedium: 'expressive-body02italicmedium';
+$ds-typography-expressive-body02italicsemibold: 'expressive-body02italicsemibold';
 $ds-typography-expressive-body02italicbold: 'expressive-body02italicbold';
 $ds-typography-functional-body01regular: 'functional-body01regular';
-$ds-typography-functional-body01medium: 'functional-body01medium';
+$ds-typography-functional-body01semibold: 'functional-body01semibold';
 $ds-typography-functional-body01bold: 'functional-body01bold';
 $ds-typography-functional-body02regular: 'functional-body02regular';
-$ds-typography-functional-body02medium: 'functional-body02medium';
+$ds-typography-functional-body02semibold: 'functional-body02semibold';
 $ds-typography-functional-body02bold: 'functional-body02bold';
 $ds-typography-functional-body03regular: 'functional-body03regular';
-$ds-typography-functional-body03medium: 'functional-body03medium';
+$ds-typography-functional-body03semibold: 'functional-body03semibold';
 $ds-typography-functional-body03bold: 'functional-body03bold';
 $ds-typography-functional-meta01regular: 'functional-meta01regular';
-$ds-typography-functional-meta01medium: 'functional-meta01medium';
+$ds-typography-functional-meta01semibold: 'functional-meta01semibold';
 $ds-typography-functional-meta01bold: 'functional-meta01bold';
 $ds-typography-functional-meta02regular: 'functional-meta02regular';
-$ds-typography-functional-meta02medium: 'functional-meta02medium';
+$ds-typography-functional-meta02semibold: 'functional-meta02semibold';
 $ds-typography-functional-meta02bold: 'functional-meta02bold';
 $ds-typography-detailstandard-button: 'detailstandard-button';
 $ds-typography-detailbottom-nav: 'detailbottom-nav';
 $ds-typography-detaildropcap: 'detaildropcap';
 $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
 $ds-typography-detailarticle-label: 'detailarticle-label';
+$ds-typography-detailmedryckare: 'detailmedryckare';