@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.2...@bonniernews/dn-design-system-web@3.0.0-alpha.3) (2023-03-08)
+
+
+### Features
+
+* **web:** article image ([#697](https://github.com/BonnierNews/dn-design-system/issues/697)) ([e3e9cec](https://github.com/BonnierNews/dn-design-system/commit/e3e9cecd96f4d6240854ffc593a082f7d6c66793))
+
+
+
 ## [3.0.0-alpha.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.1...@bonniernews/dn-design-system-web@3.0.0-alpha.2) (2023-03-06)
 
 

package/assets/article-image/article-image.njk

@@ -0,0 +1,33 @@
+{% macro ArticleImage(params) %}
+  {% set macroClassName = "ds-article-image" %}
+  {% set additionalClasses = [] %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figure class="{{ classes }}" {{- params.attributes | safe }}>
+    {% if params.fullWidth %}
+      <div class="ds-full-width-element">
+        {{ params.imageHtml | safe }}
+      </div>
+    {% else %}
+      {{ params.imageHtml | safe }}
+    {% endif %}
+
+    {% if params.caption or params.author %}
+      <figcaption>
+        {% if params.caption %}
+          <span aria-hidden="true">{{ params.caption | safe }}</span>
+        {% endif %}
+        {% if params.author %}
+          <span class="ds-article-image__credits">
+            {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
+          </span>
+        {% endif %}
+      </figcaption>
+    {% endif %}
+  </figure>
+{% endmacro %}

package/assets/article-image/article-image.scss

@@ -0,0 +1,20 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-article-image {
+  margin: 0;
+
+  > figcaption {
+    @include ds-typography($ds-typography-functional-body01regular);
+    margin-top: ds-spacing-component(x2);
+    color: $ds-color-text-primary;
+
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body01regular, true);
+    }
+
+    > .ds-article-image__credits {
+      display: block;
+      color: $ds-color-text-primary-02;
+    }
+  }
+}

package/components/article-body-image/README.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
+- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+
+----
+
+# ArticleBodyImage
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | String | yes | | | Use to populate figure tag with image information |
+|fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|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/article-body-image/article-body-image.njk' import ArticleBodyImage %}
+
+{{ ArticleBodyImage({
+  imageHtml: exampleArticleBodyImageHtml(),
+  fullWidth: true,
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
+```

package/components/article-body-image/article-body-image.njk

@@ -0,0 +1,23 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
+{% set classes = [] %}
+
+{% macro ArticleBodyImage(params) %}
+  {% set componentClassName = "ds-article-image--body" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+
+  {% call ArticleImage(imageParams) %}{% endcall %}
+{% endmacro %}

package/components/article-body-image/article-body-image.scss

@@ -0,0 +1,8 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/article-image/article-image.scss" as *;
+
+.ds-article-image--body {
+  @include ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+}

package/components/article-top-image/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
+- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
+
+----
+
+# ArticleTopImage
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | String | yes | | | Use to populate figure tag with image information |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|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/article-top-image/article-top-image.njk' import ArticleTopImage %}
+
+{{ ArticleTopImage({
+  imageHtml: exampleArticleTopImageHtml(),
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Beatrice Lundborg",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/article-top-image/article-top-image";
+```

package/components/article-top-image/article-top-image.njk

@@ -0,0 +1,23 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
+{% set classes = [] %}
+
+{% macro ArticleTopImage(params) %}
+  {% set componentClassName = "ds-article-image--top" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+
+  {% call ArticleImage(imageParams) %}{% endcall %}
+{% endmacro %}

package/components/article-top-image/article-top-image.scss

@@ -0,0 +1,6 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/article-image/article-image.scss" as *;
+
+.ds-article-image--top {
+  @include ds-spacing-layout(gap-vertical-static-large, px, padding-bottom);
+}

package/package.json

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