@bonniernews/dn-design-system-web 2.1.0-alpha.14 → 2.1.0-alpha.16

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.15...@bonniernews/dn-design-system-web@2.1.0-alpha.16) (2023-02-24)
+
+
+### Features
+
+* **web:** web byline component ([#693](https://github.com/BonnierNews/dn-design-system/issues/693)) ([7ba1b30](https://github.com/BonnierNews/dn-design-system/commit/7ba1b30fda13c54ada24631e47bb8b3be580f274))
+
+
+
+## [2.1.0-alpha.15](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.14...@bonniernews/dn-design-system-web@2.1.0-alpha.15) (2023-02-23)
+
+
+### Features
+
+* **web:** native variant of disclaimer ([#696](https://github.com/BonnierNews/dn-design-system/issues/696)) ([1294432](https://github.com/BonnierNews/dn-design-system/commit/1294432532d92ec7cb1c1db21e489da0a36ec43c))
+
+
+
 ## [2.1.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.13...@bonniernews/dn-design-system-web@2.1.0-alpha.14) (2023-02-23)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/byline/README.md

@@ -0,0 +1,64 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
+- Storybook: [Byline > Web > Link](https://designsystem.dn.se/?path=/story/components-app-web-article-components-byline-web--link)
+- Storybook: [Byline > Web > Follow ](https://designsystem.dn.se/?path=/story/components-app-web-article-components-byline-web--follow)
+
+----
+
+# Byline
+
+The byline is a list item and should be wrapped in a list.
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | yes | follow, link | | |
+|authorName | String | yes | | | |
+|bylineImage | HTML | no | | | Html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
+|role | String | no | | | Only used in variant link |
+|email | String | no | | | email will be displayed instead of role for variant follow |
+|authorPageUrl | String | no | | | The whole item (varant link), or the title and subtitle (variant follow) will link to this url |
+|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant follow. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |
+|classNames | String | no | | | Ex. "my-special-class" |
+|elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## 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/byline/byline.njk' import Byline %}
+
+{{ Byline({
+  variant: variant,
+  bylineImage: imageHtml(),
+  authorName: authorName,
+  role: role,
+  email: email,
+  authorPageUrl: authorPageUrl,
+  followable: followable,
+  attributes: attributes,
+  elementAttributes: elementAttributes,
+  elementClassNames: elementClassNames,
+  classNames: "",
+  forcePx: false
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/byline/byline";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+dsButtonToggle(toggleElements);
+```

package/components/byline/byline.njk

@@ -0,0 +1,97 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{% macro Byline(params) %}
+  {% set componentClassName = "ds-byline" %}
+  <li class="{{ componentClassName + '__outer'}}">
+    {% call BylineInner(params, componentClassName) %}
+      <div class="{{ componentClassName + '__inner'}}">
+        {% set componentClassName = componentClassName %}
+        {% call BylineContent(params, visualVariant, componentClassName ) %}
+          {% if params.bylineImage %}
+            <span class="{{ componentClassName + '__image'}}">{{- params.bylineImage | safe -}}</span>
+          {% endif %}
+          <div class="{{ componentClassName + '__titles'}}">
+            {% if params.authorName %}
+              <span class="{{ componentClassName + '__title'}}">{{ params.authorName }}</span>
+            {% endif %}
+            {%- if subtitle %}
+              <span class="{{ componentClassName + '__subtitle'}}">{{ subtitle }}</span>
+            {% endif %}
+          </div>
+        {% endcall %}
+        {% if visualVariant == 'icon' %}
+          <span class="{{ componentClassName + '__icon-right'}}">{{- Icon({ icon: 'arrow_forward' }) | safe -}}</span>
+        {% endif %}
+        {% if visualVariant == 'button' and params.followable %}
+          {{ ButtonToggle({
+            text: "Följ",
+            selectedText: "Följer",
+            variant: "secondaryFilled",
+            size: "xsmall",
+            attributes: params.elementAttributes,
+            classNames: elementClassNames | join(" "),
+            forcePx: params.forcePx,
+            condensed: true
+          })}}
+        {% endif %}
+      </div>
+    {% endcall %}
+  </li>
+{% endmacro %}
+
+{# Internal helper macro - not intended for use outside of this file #}
+{% macro BylineContent(params, visualVariant, componentClassName) %}
+  {% set subtitle = params.role if params.variant == 'link' else params.email %}
+  {% if visualVariant == 'button' and params.authorPageUrl %}
+    <a href="{{params.authorPageUrl}}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ componentClassName + '__content-wrapper'}}">
+      {{ caller() if caller }}
+    </a>
+  {% else %}
+    <div class="{{ componentClassName + '__content-wrapper'}}">
+      {{ caller() if caller }}
+    </div>
+  {% endif %}
+{% endmacro %}
+
+{# Internal helper macro - not intended for use outside of this file #}
+{% macro BylineInner(params, componentClassName) %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set visualVariant = "icon" if (params.variant == 'link' or params.followable != true) and params.authorPageUrl else "button" %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif %}
+
+  {% if not params.authorPageUrl %}
+    {% set variant = (variant.push(componentClassName + '--noninteractive'), variant) %}
+  {% endif %}
+
+  {% if params.bylineImage %}
+    {% set bylineImage =  params.bylineImage %}
+  {% endif %}
+  {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  {% set elementClassNames = [ componentClassName + "__btn-toggle" ]%}
+  {% if params.elementClassNames %}
+    {% set elementClassNames = (elementClassNames.push(params.elementClassNames), elementClassNames) %}
+  {% endif %}
+
+  {% if visualVariant == 'icon' %}
+    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }}>
+      {{ caller() if caller }}
+    </a>
+  {% else %}
+    <div class="{{ classes }}" {{- attributes | safe }}>
+      {{ caller() if caller }}
+    </div>
+  {% endif %}
+{% endmacro %}

package/components/byline/byline.scss

@@ -0,0 +1,174 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
+@use "../../components/button-toggle/button-toggle.scss" as *;
+
+$ds-byline__icon-size: 24px;
+$ds-byline__image-size: 44px;
+
+.ds-byline__outer {
+  list-style: none;
+  line-height: 0;
+
+  & + .ds-byline__outer {
+    .ds-byline::before {
+      content: none; // remove first top border on all bylines except the first
+    }
+  }
+}
+
+.ds-byline {
+  background-color: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 100%;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    height: ds-metrics-border-width(x1);
+    width: calc(100% - (ds-spacing-component(x4) * 2));
+    background-color: $ds-color-border-primary;
+    position: absolute;
+    left: ds-spacing-component(x4);
+  }
+
+  &::before {
+    top: 0;
+  }
+
+  &::after {
+    bottom: 0;
+  }
+
+  .ds-byline__inner {
+    box-sizing: border-box;
+    border-radius: 0;
+    transition: background-color 50ms ease-out;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    padding: ds-spacing-component(x4);
+    width: 100%;
+
+    &::before {
+      content: "";
+      border-radius: inherit;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      transition: background-color 500ms ease;
+    }
+
+    .ds-icon {
+      position: relative;
+      display: flex;
+      height: ds-px-to-rem($ds-byline__icon-size);
+      width: ds-px-to-rem($ds-byline__icon-size);
+      margin: 0;
+      @at-root .ds-force-px#{&} {
+        height: $ds-byline__icon-size;
+        width: $ds-byline__icon-size;
+      }
+      svg {
+        fill: currentColor;
+      }
+    }
+  }
+
+  .ds-byline__content-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 1;
+    text-decoration: none;
+
+    &:focus-visible {
+      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline-offset: 2px;
+    }
+  }
+
+  .ds-byline__image {
+    height: $ds-byline__image-size;
+    width: $ds-byline__image-size;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: ds-spacing-component(x4);
+    background-color: $ds-color-component-primary-overlay;
+    flex-shrink: 0;
+  }
+
+  .ds-byline__titles {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    word-break: break-all;
+
+    .ds-byline__title {
+      @include ds-typography($ds-typography-functional-heading01medium);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-heading01medium, true);
+      }
+      color: $ds-color-text-primary;
+      text-align: left;
+    }
+
+    .ds-byline__subtitle {
+      @include ds-typography($ds-typography-functional-body02regular);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body02regular, true);
+      }
+      color: $ds-color-text-primary-02;
+      text-align: left;
+    }
+  }
+
+  .ds-byline__icon-right {
+    color: $ds-color-icon-primary;
+    display: inline-flex;
+    margin-left: ds-spacing-component(x4);
+  }
+
+  .ds-byline__btn-toggle {
+    min-height: 44px;
+    min-width: 48px;
+    margin-left: ds-spacing-component(x4);
+  }
+
+  @include ds-hover() {
+    &:hover:not(.ds-byline--noninteractive) {
+      cursor: pointer;
+
+      .ds-byline__inner::before {
+        background-color: $ds-color-component-primary-overlay;
+      }
+    }
+  }
+
+  &:active:not(.ds-byline--noninteractive) .ds-byline__inner::before {
+    background-color: $ds-color-component-primary-overlay-02;
+  }
+  &:focus-visible {
+    outline: none;
+    .ds-byline__inner {
+      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline-offset: -2px;
+    }
+  }
+
+  @at-root a#{&} {
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+  }
+}

package/components/checkbox/checkbox.njk

@@ -1,5 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro CheckboxIcons(componentClassName) %}
@@ -14,11 +15,7 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set wrapperClasses = [] %}
   {% set name = params.name | default("ds-checkbox") %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
 

package/components/disclaimer/README.md

@@ -1,5 +1,6 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/disclaimer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/disclaimer)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-disclaimer-web)
+- Storybook (PROD): [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
+- Storybook (LATEST): [Disclaimer > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-disclaimer-web--plain-disclaimer)
 
 ----
 
@@ -11,6 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |bodyHtml | String | yes | | | Intended use is text, links and inlined icons |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|variant | String | no | default, native | default | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

package/components/disclaimer/disclaimer.njk

@@ -1,14 +1,15 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Disclaimer(params) %}
   {% set componentClassName = "ds-disclaimer" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set additionalClasses = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant and params.variant !== "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
 
   {% if params.forcePx %}
     {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
@@ -16,7 +17,7 @@
 
   {% if params.iconName %}
     {% set iconSvg =  Icon({ icon: params.iconName }) %}
-    {% set additionalClasses = (additionalClasses.push(componentClassName + "--with-icon"), additionalClasses) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "with-icon"), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}

package/components/disclaimer/disclaimer.scss

@@ -55,4 +55,14 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
       fill: currentColor;
     }
   }
+
+  &--native {
+    background-color: $ds-color-static-ad-yellow;
+
+    .ds-icon,
+    .ds-disclaimer__body-html,
+    .ds-disclaimer__body-html strong {
+      color: $ds-color-static-black;
+    }
+  }
 }

package/package.json

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