@bonniernews/dn-design-system-web 20.4.4 → 20.5.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [20.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.5...@bonniernews/dn-design-system-web@20.5.0) (2024-09-26)
+
+
+### Features
+
+* **web:** empty state component ([#1411](https://github.com/BonnierNews/dn-design-system/issues/1411)) ([41e01c9](https://github.com/BonnierNews/dn-design-system/commit/41e01c9ca7bf102596249ffc579128e38a9bd533))
+
+## [20.4.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.4...@bonniernews/dn-design-system-web@20.4.5) (2024-09-26)
+
+
+### Bug Fixes
+
+* **web:** pagination border-box ([#1412](https://github.com/BonnierNews/dn-design-system/issues/1412)) ([c4236fe](https://github.com/BonnierNews/dn-design-system/commit/c4236fe62e17b2655d3c50266e879515f89baada))
+
 ## [20.4.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.3...@bonniernews/dn-design-system-web@20.4.4) (2024-09-23)
 
 

package/components/empty-state/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/basic/empty-state](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/basic/empty-state)
+- Storybook: [EmptyState](https://designsystem.dn.se/?path=/docs/basic-emptystate--docs)
+- Storybook (Latest): [EmptyState](https://designsystem-latest.dn.se/?path=/docs/basic-emptystate--docs)
+
+----
+
+# Empty state
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+| iconName | String | no | add, arrow_back, delete etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+| title | String | no | | | Title for empty state |
+| body | String | no | | | Describing text |
+| brandButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional).|
+| primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
+| classNames | String | no | | | Ex. "my-special-class" |
+| attributes | Object | no | | | Ex. { data-prop: value } |
+
+## 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/empty-state/empty-state.njk' import EmptyState %}
+
+{{ EmptyState({ 
+    iconName: "delete",
+    title: "Attans då...",
+    body: "Din sökning gav tyvärr inga träffar.",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/basic/empty-state/empty-state" as *;
+```

package/components/empty-state/empty-state.njk

@@ -0,0 +1,62 @@
+{% from '@bonniernews/dn-design-system-web/components/pictogram/pictogram.njk' import Pictogram %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro EmptyState(params) %}
+  {% set componentClassName = "ds-empty-state" %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+      {% if params.iconName %}
+        {{ Pictogram({
+          variant: "brand",
+          size: "large",
+          iconName: params.iconName,
+          attributes: { "aria-label": params.body if params.body else "" }
+        })}}
+      {% endif %}
+
+      <div class="{{ componentClassName + '__text' }}">
+        {% if params.title %}
+          <h2>{{ params.title }}</h2>
+        {% endif %}
+        {% if params.body %}
+          <span class="{{ componentClassName + '__body' }}">{{ params.body }}</span>
+        {% endif %}
+      </div>
+
+      {% if params.brandButton or params.primaryButton %}
+        <div class="{{ componentClassName + '__button-wrapper' }}">
+          {% if params.brandButton %}
+            {{ Button({
+              text: params.brandButton.text,
+              variant: "brand",
+              href: params.brandButton.href,
+              classNames: params.brandButton.classNames,
+              attributes: params.brandButton.attributes,
+              forcePx: params.forcePx,
+              fullWidth: true
+            })}}
+          {% endif %}
+
+          {% if params.primaryButton %}
+            {{ Button({
+              text: params.primaryButton.text,
+              variant: "primary",
+              emphasis: "outline",
+              href: params.primaryButton.href,
+              classNames: params.primaryButton.classNames,
+              attributes: params.primaryButton.attributes,
+              forcePx: params.forcePx,
+              fullWidth: true
+            })}}
+          {% endif %}
+        </div>
+      {% endif %}
+  </div>
+{% endmacro %}

package/components/empty-state/empty-state.scss

@@ -0,0 +1,35 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/pictogram/pictogram.scss" as *;
+@use "../../components/button/button.scss" as *;
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  .ds-empty-state__text {
+    margin-top: ds-spacing($ds-s-100);
+
+    h2 {
+      @include ds-typography($ds-typography-functionalheading03);
+      color: $ds-color-text-primary;
+      margin: 0;
+    }
+
+    .ds-empty-state__body {
+      @include ds-typography($ds-typography-functionalbody02);
+      display: block;
+      color: $ds-color-text-primary-02;
+      margin-top: ds-spacing($ds-s-025);
+    }
+  }
+
+  .ds-empty-state__button-wrapper {
+    margin-top: ds-spacing($ds-s-100);
+
+    .ds-btn + .ds-btn {
+      margin-top: ds-spacing($ds-s-050);
+    }
+  }
+}

package/components/pagination/pagination.scss

@@ -9,6 +9,7 @@
   width: 100%;
   padding: ds-spacing($ds-s-050 $ds-s-100);
   color: $ds-color-text-primary;
+  box-sizing: border-box;
 
   &--simple {
     padding: ds-spacing($ds-s-100);

package/package.json

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