@bonniernews/dn-design-system-web 2.0.0-alpha.0 → 2.1.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.0.0...@bonniernews/dn-design-system-web@2.1.0-alpha.0) (2023-02-14)
+
+
+### Features
+
+* **web:** disclaimer component. ([#659](https://github.com/BonnierNews/dn-design-system/issues/659)) ([91992af](https://github.com/BonnierNews/dn-design-system/commit/91992af5590fa7d254e00e9857130bae4d4c504a))
+
+
+
+## [2.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.0.0-alpha.0...@bonniernews/dn-design-system-web@2.0.0) (2023-02-14)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 2.0.0-alpha.0 (2023-02-14)
 
 

package/components/disclaimer/README.md

@@ -0,0 +1,35 @@
+- 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)
+
+----
+
+# Disclaimer
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|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 |
+|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
+
+## 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/disclaimer/disclaimer.njk' import Disclaimer %}
+
+{{ Disclaimer({
+  bodyHtml: "<strong>Detta är</strong> en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal."
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/disclaimer/disclaimer";
+```

package/components/disclaimer/disclaimer.njk

@@ -0,0 +1,34 @@
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+
+{% macro Disclaimer(params) %}
+  {% set componentClassName = "ds-disclaimer" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = [] %}
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.iconName %}
+    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+    {% set additionalClasses = (additionalClasses.push(componentClassName + "--with-icon"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <section class="{{ classes }}" {{- attributes | safe }}>
+    {% if iconSvg %}
+      <span class="{{ componentClassName + '__icon-wrapper'}}">{{- iconSvg | safe if iconSvg -}}</span>
+    {% endif %}
+    <div class="{{ componentClassName + '__body-html'}}">{{ params.bodyHtml | safe }}</div>
+  </section>
+{% endmacro %}

package/components/disclaimer/disclaimer.scss

@@ -0,0 +1,58 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../foundations/icons/icon.scss" as *;
+
+$ds-disclaimer__icon-size: 20px;
+$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+
+.ds-disclaimer {
+  padding: ds-spacing-component(x3 x4);
+  margin-bottom: ds-spacing-component(x4);
+  background-color: $ds-color-surface-raised;
+
+  &--with-icon {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .ds-disclaimer__icon-wrapper {
+    margin-right: ds-spacing-component(x2);
+  }
+
+  .ds-disclaimer__body-html {
+    @include ds-typography($ds-typography-functional-body01regular);
+    margin: 0;
+    color: $ds-color-text-primary-02;
+
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body01regular, true);
+    }
+
+    a {
+      @include ds-link($ds-link-paragraph);
+    }
+
+    strong {
+      @include ds-typography($ds-typography-functional-body01medium);
+      color: $ds-color-text-primary;
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body01medium, true);
+      }
+    }
+  }
+
+  .ds-icon {
+    position: relative;
+    display: flex;
+    height: ds-px-to-rem($ds-disclaimer__icon-size);
+    width: ds-px-to-rem($ds-disclaimer__icon-size);
+    margin: 0;
+    color: $ds-color-icon-primary;
+    @at-root .ds-force-px#{&} {
+      height: $ds-disclaimer__icon-size;
+      width: $ds-disclaimer__icon-size;
+    }
+    svg {
+      fill: currentColor;
+    }
+  }
+}

package/package.json

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