@bonniernews/dn-design-system-web 8.7.0 → 8.8.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.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)
 
 

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.7.0",
+  "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",