@bonniernews/dn-design-system-web 8.4.6 → 8.6.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.6.0 (2023-11-22)
+
+
+### Features
+
+* **web:** add quiz header component ([#1102](https://github.com/BonnierNews/dn-design-system/issues/1102)) ([4f8b2f2](https://github.com/BonnierNews/dn-design-system/commit/4f8b2f2e1d9c7987ed0291645d5c4595d2332007))
+
+
+
+## 8.5.0 (2023-11-22)
+
+
+### Features
+
+* **web:** implement compact version of standard teaser ([#1100](https://github.com/BonnierNews/dn-design-system/issues/1100)) ([8c66b69](https://github.com/BonnierNews/dn-design-system/commit/8c66b695c7f2fac54bfdd819a62fc8014b30ce83))
+
+
+
 ## 8.4.6 (2023-11-21)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/game-header/README.md

@@ -0,0 +1,39 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/game-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/game-header)
+- Storybook: [GameHeader](https://designsystem.dn.se/?path=/docs/section-Gameheader--docs)
+- Storybook (Latest): [GameHeader](https://designsystem-latest.dn.se/?path=/docs/section-Gameheader--docs)
+
+----
+
+# Game header
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Text displayed on the header |
+|media | String | no | | | URL to icon displayed on the header |
+|descriptionHtml | String | no | | | Intended use is text, links and inlined icons |
+|backgroundColor | String | no | | | Hex code or supported color name |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+## 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/game-header/game-header.njk' import GameHeader %}
+
+{{ GameHeader(
+  {
+    title: "Quiz"
+  }
+)}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/game-header/game-header" as *;
+```

package/components/game-header/game-header.njk

@@ -0,0 +1,33 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro GameHeader(params) %}
+  {%- set componentClassName = "ds-game-header" %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName }}__top ds-light" style="backgroundColor: {{params.backgroundColor}}">
+      <div class="{{ componentClassName }}__top-content">
+        <h2 class="{{ componentClassName }}__title">{{ params.title}}</h2>
+
+        {% if params.media %}
+          <div class="{{ componentClassName + '__media'}}">
+            {{ params.media | safe }}
+          </div>
+        {% endif %}
+        </div>
+    </div>
+  
+    {% if params.descriptionHtml %}
+      <div class="{{ componentClassName }}__description">
+        <div class="{{ componentClassName }}__description-content">
+          {{ params.descriptionHtml | safe }}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+{% endmacro %}

package/components/game-header/game-header.scss

@@ -0,0 +1,51 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-game-header {
+  width: 100%;
+
+  .ds-game-header__top {
+    background-color: $ds-color-surface-background;
+  }
+
+  .ds-game-header__top-content {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: ds-spacing($ds-s-100);
+  }
+
+  .ds-game-header__top-content,
+  .ds-game-header__description-content {
+    max-width: var(--ds-game-header-content-width, 100%);
+    margin: 0 auto;
+  }
+
+  .ds-game-header__title {
+    @include ds-typography($ds-typography-functional-heading03bold);
+    color: $ds-color-text-primary;
+    margin: 0;
+  }
+  .ds-game-header__media {
+    margin-right: ds-spacing($ds-s-100);
+  }
+
+  .ds-game-header__description {
+    background-color: $ds-color-surface-background;
+  }
+
+  .ds-game-header__description-content {
+    @include ds-typography($ds-typography-functional-body02regular);
+    padding: ds-spacing($ds-s-025 $ds-s-100);
+    color: $ds-color-text-primary;
+
+    a {
+      @include ds-link($ds-link-article-body);
+    }
+
+    b,
+    strong {
+      @include ds-typography($ds-typography-functional-body02semibold);
+    }
+  }
+}

package/components/teaser-standard/teaser-standard.njk

@@ -11,6 +11,7 @@
   {% set extraClasses = [
     "ds-teaser--standard",
     classNamePrefix + params.variant if params.variant,
+    classNamePrefix + "compact" if params.compact,
     classNamePrefix + "quote-badge" if hasQuoteBadge,
     params.classNames if params.classNames
   ] | join(" ") %}

package/components/teaser-standard/teaser-standard.scss

@@ -14,6 +14,16 @@
     }
   }
 
+  &.ds-teaser--compact {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-detailteaser-standard-compact);
+
+      &--italic {
+        @include ds-typography($ds-typography-detailteaser-standard-compact-opinion);
+      }
+    }
+  }
+
   .ds-teaser__media,
   .ds-teaser__content {
     margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);

package/package.json

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