@bonniernews/dn-design-system-web 8.6.1 → 8.7.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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/package.json

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