@bonniernews/dn-design-system-web 8.7.0 → 8.8.1-beta.6

package/.release-it.js

@@ -0,0 +1,39 @@
+const version = '${version}';
+const packageName = process.env.npm_package_name;
+
+module.exports = {
+  plugins: {
+    '@release-it/conventional-changelog': {
+      path: '.',
+      infile: 'CHANGELOG.md',
+      header: `# Changelog\n\nAll changes to @bonniernews/dn-design-system-web will be documented in this file.\n\n`,
+      preset: {
+        name: 'conventionalcommits',
+        types: [
+          { type: "feat", "section": "Features" },
+          { type: "fix", "section": "Bug Fixes" },
+          { type: "chore", "section": "Maintenance", "hidden": false },
+          { type: "docs", "section": "Maintenance", "hidden": false },
+          { type: "style", "section": "Maintenance", "hidden": false },
+          { type: "refactor", "section": "Maintenance", "hidden": false },
+          { type: "perf", "section": "Maintenance", "hidden": false },
+          { type: "test", "section": "Maintenance", "hidden": false }
+        ]
+      },
+    },
+  },
+  git: {
+    push: true,
+    tagName: `@bonniernews/dn-design-system-web@${version}`,
+    commitsPath: '.',
+    commitMessage: `chore(web): released version v${version}`,
+    requireCommits: false
+  },
+  github: {
+    "tokenRef": "GITHUB_TOKEN"
+  },
+  npm: {
+    publish: false,
+    versionArgs: ['--workspaces false'],
+  }
+};

package/CHANGELOG.md

@@ -1,68 +1,75 @@
-# Change Log
+# Changelog
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All changes to @bonniernews/dn-design-system-web will be documented in this file.
 
-## 8.7.0 (2023-11-24)
 
 
-### Features
+## [8.8.1-beta.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.5...@bonniernews/dn-design-system-web@8.8.1-beta.6) (2023-11-29)
 
-* **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.8.1-beta.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.4...@bonniernews/dn-design-system-web@8.8.1-beta.5) (2023-11-29)
 
+## [8.8.1-beta.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.3...@bonniernews/dn-design-system-web@8.8.1-beta.4) (2023-11-29)
 
+## [8.8.1-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.2...@bonniernews/dn-design-system-web@8.8.1-beta.3) (2023-11-29)
 
-## 8.6.1 (2023-11-23)
 
-**Note:** Version bump only for package @bonniernews/dn-design-system-web
+### Maintenance
 
+* **web:** release it config 13? ([1cd1ca5](https://github.com/BonnierNews/dn-design-system/commit/1cd1ca5e7e3d3c678228216ee2ae4fe3e4f91aa0))
 
+## [8.8.1-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.1...@bonniernews/dn-design-system-web@8.8.1-beta.2) (2023-11-28)
 
+## [8.8.1-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.1-beta.0...@bonniernews/dn-design-system-web@8.8.1-beta.1) (2023-11-28)
 
-
-## 8.6.0 (2023-11-22)
+## [8.8.1-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.0...@bonniernews/dn-design-system-web@8.8.1-beta.0) (2023-11-28)
 
 
-### Features
+### Maintenance
 
-* **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))
+* **web:** release it config ([082d6f5](https://github.com/BonnierNews/dn-design-system/commit/082d6f55140bd53a866b933ae822afc5dcc92b4e))
 
+## 8.8.0 (2023-11-27)
 
+### Features
 
-## 8.5.0 (2023-11-22)
+* **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:** 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))
+* **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
 
-## 8.4.6 (2023-11-21)
+## 8.6.0 (2023-11-22)
 
-**Note:** Version bump only for package @bonniernews/dn-design-system-web
+### 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.5 (2023-11-20)
+## 8.4.6 (2023-11-21)
 
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+## 8.4.5 (2023-11-20)
 
 ### Bug Fixes
 
 * **web:** remove bumped fonts ([#1109](https://github.com/BonnierNews/dn-design-system/issues/1109)) ([1a5b50a](https://github.com/BonnierNews/dn-design-system/commit/1a5b50a8e3df4732e029fd4ca0fd24287cc7e98b))
 
-
-
 ## 8.4.4 (2023-11-20)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web
 
-
-
-
-
 ## 8.4.3 (2023-11-20)
 
 
@@ -318,7 +325,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### ⚠ BREAKING CHANGES
 
-* **web:** Fonts now depend on css variables, if you do not load the base file it's required to load the file cssVariables.scss. This file replaces colors.scss and shadows.scss. 
+* **web:** Fonts now depend on css variables, if you do not load the base file it's required to load the file cssVariables.scss. This file replaces colors.scss and shadows.scss.
 
 ### Code Refactoring
 

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.1-beta.6",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -15,7 +15,12 @@
     "url": "https://github.com/BonnierNews/dn-design-system/issues"
   },
   "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "conventional-changelog-conventionalcommits": "^6.1.0",
     "postcss": "8.4.31",
+    "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-prettier": "^4.0.2",
@@ -23,6 +28,8 @@
     "stylelint-selector-bem-pattern": "^2.1.1"
   },
   "scripts": {
-    "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\""
+    "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\"",
+    "release:web": "release-it --ci --vv",
+    "prerelease:web": "release-it --preRelease=beta --ci --vv"
   }
 }