@bonniernews/dn-design-system-web 20.1.1 → 20.2.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [20.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.1.1...@bonniernews/dn-design-system-web@20.2.0) (2024-09-12)
+
+
+### Features
+
+* **web:** pagination component ([#1397](https://github.com/BonnierNews/dn-design-system/issues/1397)) ([42ee258](https://github.com/BonnierNews/dn-design-system/commit/42ee2581cc56184d96940a793a1eebea5fe51087))
+
+
+### Maintenance
+
+* bump node to 20.x in gh actions ([#1394](https://github.com/BonnierNews/dn-design-system/issues/1394)) ([d83371e](https://github.com/BonnierNews/dn-design-system/commit/d83371e0aa82fe8962d996ba5dc718f41f6d1ad1))
+* prerelease packages ([3bc50c6](https://github.com/BonnierNews/dn-design-system/commit/3bc50c66efc6e4279d3f07ebfeff63bd26a1ad69))
+
 ## [20.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.1.0...@bonniernews/dn-design-system-web@20.1.1) (2024-09-09)
 
 

package/components/icon-button/README.md

@@ -14,6 +14,7 @@
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
 |emphasis | String | no | default, elevated, outline, transparent | default | |
+|rounded | bool | no | true, false | true | Button will be rounded to the max |
 |size| String | no | small, medium, large, xlarge | medium | |
 |loading | bool | no | true, false | false | |
 |a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |

package/components/icon-button/icon-button.njk

@@ -7,6 +7,7 @@
     variant: params.variant,
     href: params.href,
     emphasis: params.emphasis,
+    rounded: false if params.rounded === false else true,
     disabled: params.disabled,
     size: params.size,
     iconName: params.iconName,

package/components/icon-button/icon-button.scss

@@ -2,8 +2,6 @@
 @use "../button/button.scss" as *;
 
 .ds-btn.ds-btn--icon-only {
-  border-radius: 50%;
-
   &.ds-btn--small {
     padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-outlined__border-width);
     @at-root .ds-force-px#{&} {

package/components/pagination/README.md

@@ -0,0 +1,55 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
+- Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--docs)
+- Storybook (Latest): [Pagination](https://designsystem-latest.dn.se/?path=/docs/basic-pagination--docs)
+
+----
+
+# Pagination
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|pages | Array | no | | | Array with link objects. Ex. [ { label: '8' , url: 'https://www.dn.se/om/danmark/?offset=40', current: true, attributes: {} } ] |
+|previousLabel | String | no | 'Föregående' | | Previous button/link label |
+|previousUrl | String | no | | | |
+|previousAttributes | Object | no | | | |
+|previousClassNames | String | no | | | |
+|nextLabel | String | no | 'Nästa' | | Next button/link label |
+|nextUrl | String | no | | | |
+|nextAttributes | Object | no | | | |
+|nextClassNames | String | no | | | |
+|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/pagination/pagination.njk' import Pagination %}
+
+{{ Pagination({
+  nextUrl: 'https://www.dn.se/om/danmark/?offset=48',
+  nextLabel: undefined,
+  previousUrl: 'https://www.dn.se/om/danmark/?offset=0',
+  previousLabel: undefined,
+  pages: [
+    { label: '6' , url: 'https://www.dn.se/om/danmark/?offset=24', attributes: {} },
+    { label: '7' , url: 'https://www.dn.se/om/danmark/?offset=32' },
+    { label: '8' , url: 'https://www.dn.se/om/danmark/?offset=40', current: true },
+    { label: '9' , url: 'https://www.dn.se/om/danmark/?offset=48' },
+    { label: '10' , url: 'https://www.dn.se/om/danmark/?offset=56' },
+  ],
+  attributes: {},
+  classNames: undefined,
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/pagination/pagination" as *;
+```

package/components/pagination/pagination.njk

@@ -0,0 +1,60 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/text-button/text-button.njk' import TextButton %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+
+{% macro Pagination(params) %}
+  {%- set componentClassName = "ds-pagination" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set classes = [
+    componentClassName,
+    componentClassName + "--simple " if not params.pages,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set visiblePages = 5 %}
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {%- set prevClasses = [
+      componentClassName + "__prev ",
+      params.previousClassNames if params.previousClassNames
+    ] | join(" ") %}
+    {{ TextButton({
+      text: params.previousLabel if params.previousLabel else 'Föregående',
+      size: 'large',
+      hideTextOnMobile: true if params.pages,
+      iconPosition: 'left',
+      iconName: 'arrow_back',
+      classNames: prevClasses,
+      attributes: params.previousAttributes,
+      href: params.previousUrl,
+      disabled: true if not params.previousUrl else false
+    })}}
+    {% if params.pages %}
+      <div class="{{ componentClassName }}__pages">
+      {% for page in params.pages %}
+        {%- set pageAttributes = getAttributes(page.attributes) %}
+        {%- set pageClass = componentClassName + "__page" %}
+        {% if page.current %}
+          <span class="{{ pageClass }} {{ pageClass }}--current" {{- pageAttributes | safe }}>{{ page.label }}</span>
+        {% else %}
+          <a href="{{ page.url }}" class="{{ pageClass }}" {{- pageAttributes | safe }}>{{ page.label }}</a>
+        {% endif %}
+      {% endfor %}
+      </div>
+    {% endif %}
+    {%- set nextClasses = [
+      componentClassName + "__next ",
+      params.nextClassNames if params.nextClassNames
+    ] | join(" ") %}
+    {{ TextButton({
+      text: params.nextLabel if params.nextLabel else 'Nästa',
+      size: 'large',
+      hideTextOnMobile: true if params.pages,
+      iconPosition: 'right',
+      iconName: 'arrow_forward',
+      classNames: nextClasses,
+      attributes: params.nextAttributes,
+      href: params.nextUrl,
+      disabled: true if not params.nextUrl else false
+    })}}
+  </div>
+{% endmacro %}

package/components/pagination/pagination.scss

@@ -0,0 +1,47 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/text-button/text-button";
+
+.ds-pagination {
+  background-color: $ds-color-surface-background;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: ds-spacing($ds-s-050 $ds-s-100);
+
+  &--simple {
+    padding: ds-spacing($ds-s-100);
+  }
+
+  &__pages {
+    display: flex;
+  }
+  &__page {
+    @include ds-typography($ds-typography-functionalbody02);
+    color: $ds-color-text-primary;
+    margin: ds-spacing($ds-s-050);
+    min-height: ds-px-to-rem(32);
+    min-width: ds-px-to-rem(32);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--current {
+      color: $ds-color-text-secondary;
+      background-color: $ds-color-component-primary;
+      border-radius: 100%;
+    }
+
+    &:not(.ds-pagination__page--current) {
+      @include ds-link($ds-link-list);
+    }
+  }
+
+  .ds-pagination__prev {
+    margin-right: auto;
+  }
+
+  .ds-pagination__next {
+    margin-left: auto;
+  }
+}

package/components/text-button/README.md

@@ -11,6 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |text | String | yes | | | |
+|hideTextOnMobile | bool | no | true, false | false | Text will be hidden on mobile, make sure to use with icon |
 |size| String | no | default, small | default | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |

package/components/text-button/text-button.njk

@@ -18,6 +18,7 @@
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullwWidth,
     classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    classNamePrefix + "icon-only-mobile" if params.hideTextOnMobile,
     params.classNames if params.classNames
   ] | join(" ") %}
   {%- set text = params.text %}

package/components/text-button/text-button.scss

@@ -35,6 +35,18 @@ $ds-text-btn__underline-offset: 2px;
     }
   }
 
+  &.ds-text-btn--icon-only-mobile {
+    &.ds-text-btn--icon-left,
+    &.ds-text-btn--icon-right {
+      @include ds-mq-only-breakpoint(mobile) {
+        --ds-text-btn__icon-margin: 0;
+        .ds-text-btn__text {
+          display: none;
+        }
+      }
+    }
+  }
+
   cursor: pointer;
   background-color: transparent;
   border: 0;

package/package.json

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