@bonniernews/dn-design-system-web 8.6.1 → 8.8.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.8.0 (2023-11-27)
+
+
+### Features
+
+* **web:** link box component ([#1115](https://github.com/BonnierNews/dn-design-system/issues/1115)) ([e062369](https://github.com/BonnierNews/dn-design-system/commit/e0623692ab5292d96c83cae29c0b60eb138926f5))
+
+
+
+## 8.7.0 (2023-11-24)
+
+
+### Features
+
+* **web:** add Direkt circle as DS component and use it in new group header variant "Direkt" ([#1112](https://github.com/BonnierNews/dn-design-system/issues/1112)) ([a0e6f8b](https://github.com/BonnierNews/dn-design-system/commit/a0e6f8b765b270bf6b0708a034b323809abc6266))
+
+
+
 ## 8.6.1 (2023-11-23)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/direkt-circle/README.md

@@ -0,0 +1,32 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
+- Storybook: [Subcomponents > DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
+- Storybook (Latest): [Subcomponents > DirektCircle](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
+
+----
+
+# DirektCircle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|circleColor | 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/direkt-circle/direkt-circle.njk' import DirektCircle %}
+
+{{ DirektCircle() }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle";

package/components/direkt-circle/direkt-circle.njk

@@ -0,0 +1,55 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro DirektCircle(params) %}
+  {% set componentClassName = "ds-direkt-circle" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set circleColor = params.circleColor or "white" %}
+
+  {% set circleOpacity = [
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.24,
+    0.235,
+    0.222,
+    0.218,
+    0.212,
+    0.202,
+    0.19,
+    0.178,
+    0.165,
+    0.155,
+    0.145,
+    0.135,
+    0.12,
+    0.107,
+    0.095,
+    0.083,
+    0.07,
+    0.06,
+    0.047,
+    0.035,
+    0.023,
+    0.02
+  ] %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  
+  <svg class="{{ classes }}" width="500" height="500" viewBox="-250 -250 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"  {{ attributes | safe }}>
+    <circle r="5" fill={{circleColor}} />
+
+    {% for opacity in circleOpacity %}
+      {% set radius = loop.index * 8 + 5 %}
+      <circle opacity="{{ opacity }}" r="{{ radius }}" stroke={{circleColor}} stroke-width="1.5"/>
+    {% endfor %}
+  </svg>
+{% endmacro %}

package/components/group-header/README.md

@@ -13,7 +13,7 @@
 |title | string | yes | | | The title text |
 |variant | string | no | icon, link, toggle, arrows | icon | The variant to render |
 |href | string | no | | | If given, the title is rendered as a link |
-|linkText | string | no | | | The link text to render (only for variant `link`) |
+|linkText | string | no | | | The link text to render (only for variants `link` and `direkt`) |
 |showBottomBorder | boolean | no | | | If true there will be a bottom border |
 |toggleText | text | no | | | `text` parameter to ToggleButton (only for variant `toggle`) |
 |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for variant `toggle`) |

package/components/group-header/group-header.njk

@@ -2,6 +2,7 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.njk' import DirektCircle %}
 
 {% macro GroupHeader(params) %}
   {% set componentClassName = "ds-group-header" %}
@@ -30,6 +31,16 @@
       </span>
     {% elif (params.variant == 'arrows') and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon hidden-desktop' }) }}
+    {% elif params.variant == 'direkt' %}
+      <span class="{{ componentClassName + '__direkt-circle' }}">
+        {{ DirektCircle()}}
+      </span>
+
+      {% if params.linkText %}
+        <span class="{{ componentClassName + '__right-link' }}">
+          {{ params.linkText }}
+        </span>
+      {% endif %}
     {% endif %}
   {% endset %}
 

package/components/group-header/group-header.scss

@@ -28,6 +28,13 @@
     --group-header-color: #{$ds-color-static-yellow};
   }
 
+  &--direkt {
+    --group-header-background: #{$ds-theme-color};
+    --group-header-color: #{$ds-color-text-on-brand};
+    position: relative;
+    overflow: hidden;
+  }
+
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn-toggle {
@@ -58,6 +65,18 @@
     color: var(--group-header-icon-color);
   }
 
+  .ds-group-header__direkt-circle {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    $centerDotRadius: 5px;
+
+    .ds-direkt-circle {
+      transform: translate(calc(-50% - $centerDotRadius), calc(-50% - $centerDotRadius));
+    }
+  }
+
   .ds-group-header__href {
     display: flex;
     align-items: center;
@@ -95,4 +114,8 @@
   &--bautaxl .ds-group-header__title {
     @include ds-typography($ds-typography-detailbaota-xl-label);
   }
+
+  &--direkt .ds-group-header__title {
+    z-index: 5;
+  }
 }

package/components/link-box/README.md

@@ -0,0 +1,41 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
+- Storybook: [LinkBox](https://designsystem.dn.se/?path=/docs/section-linkbox--docs)
+- Storybook (Latest): [LinkBox](https://designsystem-latest.dn.se/?path=/docs/section-linkbox--docs)
+
+----
+
+# link-box
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
+|vignetteText | String | no | | | Heading of the link box |
+|vignetteTargetUrl | String | no | | | Target URL for the header |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~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/link-box/link-box.njk' import LinkBox %}
+
+{{ LinkBox({
+  vignetteText: "Välj kategori – massor av quiz väntar",
+  linkBoxItems: [
+    { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } },
+    { label: 'Film & TV', link: '#', mediaHtml: "", layout: 'quiz' }
+  ],
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/link-box/link-box" as *;
+```

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

@@ -0,0 +1,23 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro LinkBoxItem(params) %}
+  {% set componentClassName = "ds-link-box-item" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames,
+    classNamePrefix + params.layout if params.layout
+  ] | join(" ") %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  <a class="{{ classes }}" href="{{ params.link }}" {{- attributes | safe }}>
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml | safe }}
+      </div>
+    {% endif %}
+
+    {% if params.label %}
+      <span class="{{ componentClassName + '__label'}}">{{ params.label }}</span>
+    {% endif %}
+  </a>
+{% endmacro %}

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

@@ -0,0 +1,51 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-link-box-item {
+  padding: ds-spacing($ds-s-100);
+  background-color: $ds-color-surface-background;
+  border: ds-border-width(x1) solid $ds-color-border-primary;
+  border-radius: ds-border-radius(x2);
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:focus-visible {
+    outline: none;
+
+    .ds-link-box-item__label {
+      @include ds-focus(2px, false);
+    }
+  }
+
+  @include ds-hover(true) {
+    > .ds-link-box-item__label {
+      @include ds-underline();
+    }
+  }
+
+  .ds-link-box-item__label {
+    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functional-body01semibold);
+    text-align: center;
+  }
+
+  .ds-link-box-item__media + .ds-link-box-item__label {
+    margin-top: ds-spacing($ds-s-050);
+  }
+
+  .ds-link-box-item__media {
+    font-size: 0;
+  }
+
+  // Just sample css, replace with actual when design is available
+  &.ds-link-box-item--pod {
+    .ds-link-box-item__media {
+      &,
+      & img {
+        width: 100%;
+      }
+    }
+  }
+}

package/components/link-box/link-box.njk

@@ -0,0 +1,26 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
+{% from '@bonniernews/dn-design-system-web/components/link-box/link-box-item.njk' import LinkBoxItem %}
+
+{% macro LinkBox(params) %}
+  {%- set componentClassName = "ds-link-box" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {% if params.vignetteText %}
+      {{ GroupHeader({
+        title: params.vignetteText,
+        href: params.vignetteTargetUrl
+      }) }}
+    {% endif %}
+    <div class="{{ componentClassName + '__grid' }}">
+      {% for item in params.linkBoxItems %}
+        {{ LinkBoxItem(item) | safe }}
+      {% endfor %}
+    </div>
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,32 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/group-header/group-header";
+@use "./link-box-item";
+
+$ds-link-box-grid-gap: ds-spacing($ds-s-050);
+
+.ds-link-box {
+  background-color: $ds-color-surface-background;
+
+  .ds-link-box__grid {
+    padding: ds-spacing($ds-s-075);
+    display: grid;
+    grid-column-gap: $ds-link-box-grid-gap;
+    row-gap: $ds-link-box-grid-gap;
+
+    @include ds-mq-only-breakpoint(mobile) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @include ds-mq-only-breakpoint(tablet) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @include ds-mq-only-breakpoint(desktop) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+
+  .ds-group-header + .ds-link-box__grid {
+    padding-top: 0;
+  }
+}

package/package.json

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