@bonniernews/dn-design-system-web 8.8.8 → 8.9.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [8.9.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.0...@bonniernews/dn-design-system-web@8.9.1) (2023-12-01)
+
+
+### Bug Fixes
+
+* **web:** set width on quiz link box item ([#1130](https://github.com/BonnierNews/dn-design-system/issues/1130)) ([d8893bd](https://github.com/BonnierNews/dn-design-system/commit/d8893bd872db0ca473f4f51cadbb893da8389a48))
+
+## [8.9.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.8...@bonniernews/dn-design-system-web@8.9.0) (2023-12-01)
+
+
+### Features
+
+* **web:** tag header component ([#1124](https://github.com/BonnierNews/dn-design-system/issues/1124)) ([8d34353](https://github.com/BonnierNews/dn-design-system/commit/8d3435337daa2713aca2e745da627bc476457705))
+
 ## [8.8.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.7...@bonniernews/dn-design-system-web@8.8.8) (2023-12-01)
 
 

package/components/link-box/link-box-item.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 
   &:focus-visible {
     outline: none;
@@ -39,6 +39,12 @@
     font-size: 0;
   }
 
+  &.ds-link-box-item--quiz {
+    .ds-link-box-item__media {
+      width: 48px;
+    }
+  }
+
   // Just sample css, replace with actual when design is available
   &.ds-link-box-item--pod {
     .ds-link-box-item__media {

package/components/link-box/link-box.scss

@@ -17,11 +17,7 @@ $ds-link-box-grid-gap: ds-spacing($ds-s-050);
       grid-template-columns: 1fr 1fr;
     }
 
-    @include ds-mq-only-breakpoint(tablet) {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    @include ds-mq-only-breakpoint(desktop) {
+    @include ds-mq-smallest-breakpoint(tablet) {
       grid-template-columns: 1fr 1fr 1fr 1fr;
     }
   }

package/components/tag-header/README.md

@@ -0,0 +1,49 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/tag-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tag-header)
+- Storybook: [TagHeader](https://designsystem.dn.se/?path=/docs/section-Tagheader--docs)
+- Storybook (Latest): [TagHeader](https://designsystem-latest.dn.se/?path=/docs/section-Tagheader--docs)
+
+----
+
+# Tag header
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | H1 Title |
+|vignette | String | no | | | Vignette related to title |
+|mediaHtml | String | no | | | Main image |
+|descriptionHtml | String | no | | | Intended use is text, links |
+|toggle | Bool | no | true, false | false | Show/hide toggle button |
+|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|~forcePx~ | | | | | Not supported |
+
+## 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/tag-header/tag-header.njk' import TagHeader %}
+
+{{ TagHeader(
+  {
+    vignette: "SPEL",
+    title: "Quiz",
+    descriptionHtml: "<p>Utmana dig själv med smarta quiz av DN:s medarbetare. Välj mellan olika kategorier och svårighetsgrad.</p>"
+  }
+)}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/tag-header/tag-header" as *;
+```

package/components/tag-header/tag-header.njk

@@ -0,0 +1,47 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{% macro TagHeader(params) %}
+  {%- set componentClassName = "ds-tag-header" %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml | safe }}
+      </div>
+    {% endif %}
+    <div class="{{ componentClassName }}__content">
+      <div class="{{ componentClassName }}__bar">
+        <div class="{{ componentClassName }}__heading">
+          {% if params.vignette %}
+            <span class="{{ componentClassName }}__vignette">{{ params.vignette }}</span>
+          {% endif %}
+          <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
+        </div>
+        {% if params.toggle %}
+          {{ ButtonToggle({
+            variant: 'brand',
+            size: 'small',
+            text: params.toggleText,
+            selectedText: params.toggleSelectedText,
+            selected: params.toggleSelected,
+            loading: params.toggleLoading,
+            classNames: params.toggleClassNames,
+            attributes: params.toggleAttributes
+          }) }}
+        {% endif %}
+      </div>
+      {% if params.descriptionHtml %}
+        <div class="{{ componentClassName }}__description">
+          {{ params.descriptionHtml | safe }}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}

package/components/tag-header/tag-header.scss

@@ -0,0 +1,85 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button-toggle/button-toggle.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+
+.ds-tag-header {
+  width: 100%;
+  background-color: $ds-color-surface-background;
+  padding-bottom: ds-spacing($ds-s-100);
+  display: flex;
+
+  @include ds-mq-only-breakpoint(mobile) {
+    flex-direction: column;
+  }
+
+  .ds-tag-header__content {
+    width: 100%;
+  }
+
+  .ds-tag-header__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    padding-bottom: ds-spacing($ds-s-100);
+    margin: ds-spacing($ds-s-100 $ds-s-100 0);
+
+    .ds-btn-toggle {
+      flex-shrink: 0;
+      margin-left: ds-spacing($ds-s-100);
+    }
+  }
+
+  .ds-tag-header__heading {
+    margin: 0;
+  }
+
+  .ds-tag-header__vignette {
+    @include ds-typography($ds-typography-functional-meta02bold);
+    color: $ds-color-text-brand;
+    margin-bottom: ds-spacing($ds-s-025);
+  }
+
+  .ds-tag-header__title {
+    @include ds-typography($ds-typography-functional-heading03bold);
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+  }
+
+  .ds-tag-header__media {
+    @include ds-mq-smallest-breakpoint(tablet) {
+      flex-shrink: 0;
+      width: 256px;
+      max-width: 40%;
+      margin: ds-spacing($ds-s-100 0 0 $ds-s-100);
+    }
+  }
+
+  .ds-tag-header__description {
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: $ds-color-text-primary;
+    margin: ds-spacing($ds-s-100 $ds-s-100 0);
+
+    a {
+      @include ds-link($ds-link-article-body);
+    }
+
+    b,
+    strong {
+      @include ds-typography($ds-typography-functional-body02semibold);
+    }
+
+    p {
+      margin: ds-spacing($ds-s-100 0);
+    }
+
+    p:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/package.json

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