@openeuropa/bcl-featured-media 0.12.0 → 0.16.0

package/featured-media.html.twig

@@ -1,10 +1,16 @@
 {% spaceless %}
 
 {# Parameters:
+  - with_text (boolean) (default: false)
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h3')
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
+  - wrapper_classes: (default: '')
   - content_classes: (string) (default: "")
+  - read_more (object) (default: {})
+  - description (string) (default: '')
   - ratio: (string) (default: "16x9")
     - options ["1x1", "4x3", "16x9", "21x9"]
   - sources: (array of sources) (default: []) format: [
@@ -26,15 +32,47 @@
     - "embedded_media"
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _with_text = with_text|default(false) %}
+{% set _wrapper_classes = 'bcl-featured-item' %}
+{% set _description = description|default('') %}
 {% set _embedded_media = embedded_media|default('') %}
-{% set _image = image|default("") %}
-{% set _poster_image = poster_image|default("") %}
-{% set _content = content|default("") %}
-{% set _content_classes = content_classes|default("") %}
-{% set _ratio = ratio|default("16x9") %}
+{% set _image = image|default('') %}
+{% set _poster_image = poster_image|default('') %}
+{% set _content = content|default('') %}
+{% set _alignment = alignment|default('right') %}
+{% set _content_classes = content_classes|default('') %}
+{% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
 {% set _tracks = tracks|default([]) %}
+{% set _col_classes = 'col-12 col-md-6' %}
+{% set _read_more = read_more|default({}) %}
 
+{% if wrapper_classes is defined and wrapper_classes is not empty %}
+  {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
+{% endif %}
+
+{% if _with_text %}
+<div class="{{ _wrapper_classes }}">
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+  <div class="row">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+      {{- _description|default('') -}}
+
+      {% if _read_more is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
+      {% endif %}
+    </div>
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+{% endif %}
 
 <figure
   {{ attributes }}
@@ -79,4 +117,10 @@
 {% endif %}
 </figure>
 
+{% if _with_text %}
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endspaceless %}

package/package.json

@@ -2,11 +2,14 @@
   "name": "@openeuropa/bcl-featured-media",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.12.0",
+  "version": "0.16.0",
   "description": "OE - BCL featured media",
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@openeuropa/bcl-link": "^0.16.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
@@ -21,5 +24,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "b39df646cb20e7faf4564fe7d6bc78aa6bc9022f"
+  "gitHead": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
 }

package/__snapshots__/featured-media.test.js.snap

@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OE - Featured media renders correctly with iframe 1`] = `
-<jest>
-  <figure
-    src="https://www.youtube.com/embed/VFYlYeFAEH4"
-  >
-    <div
-      class="ratio ratio-16x9"
-    >
-      <iframe
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen=""
-        frameborder="0"
-        height="197"
-        src="https://www.youtube.com/embed/fgi-GSCB6ho"
-        title="New digital strategy"
-        width="350"
-      />
-    </div>
-    <figcaption
-      class="bg-light p-3"
-    >
-      Media description text goes here.
-    </figcaption>
-  </figure>
-</jest>
-`;
-
-exports[`OE - Featured media renders correctly with image 1`] = `
-<jest>
-  <figure>
-    <img
-      class="img-fluid"
-      src="https://picsum.photos/1000/400?random=1"
-    />
-    <figcaption
-      class="bg-light p-3"
-    >
-      Media description text goes here.
-    </figcaption>
-  </figure>
-</jest>
-`;
-
-exports[`OE - Featured media renders correctly with video 1`] = `
-<jest>
-  <figure>
-    <video
-      class="w-100 d-block"
-      controls=""
-      poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
-    >
-      <source
-        src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
-        type="video/mp4"
-      />
-      <source
-        src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
-        type="video/webm"
-      />
-      <track
-        kind="captions"
-        label="English"
-        src="example.vtt"
-        srclang=""
-      />
-    </video>
-    <figcaption
-      class="bg-light p-3"
-    >
-      Media description text goes here.
-    </figcaption>
-  </figure>
-</jest>
-`;

package/data.js

@@ -1,12 +0,0 @@
-const drupalAttribute = require("drupal-attribute");
-
-module.exports = {
-  content: "Media description text goes here.",
-  content_classes: "bg-light p-3",
-  embedded_media:
-    '<iframe title="New digital strategy" width="350" height="197" src="https://www.youtube.com/embed/fgi-GSCB6ho" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>',
-  attributes: new drupalAttribute().setAttribute(
-    "src",
-    "https://www.youtube.com/embed/VFYlYeFAEH4"
-  ),
-};

package/dataImage.js

@@ -1,6 +0,0 @@
-module.exports = {
-  content: "Media description text goes here.",
-  content_classes: "bg-light p-3",
-  image:
-    "<img class='img-fluid' src='https://picsum.photos/1000/400?random=1'>",
-};

package/dataVideo.js

@@ -1,24 +0,0 @@
-module.exports = {
-  content: "Media description text goes here.",
-  content_classes: "bg-light p-3",
-  poster_image:
-    "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg",
-  tracks: [
-    {
-      kind: "captions",
-      label: "English",
-      src: "example.vtt",
-      srclang: "en",
-    },
-  ],
-  sources: [
-    {
-      type: "video/mp4",
-      src: "https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4",
-    },
-    {
-      type: "video/webm",
-      src: "https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm",
-    },
-  ],
-};

package/featured-media.story.js

@@ -1,141 +0,0 @@
-import demoData from "@openeuropa/bcl-featured-media/data";
-import demoDataVideo from "@openeuropa/bcl-featured-media/dataVideo";
-import demoDataImage from "@openeuropa/bcl-featured-media/dataImage";
-import featuredMedia from "@openeuropa/bcl-featured-media/featured-media.html.twig";
-
-const getArgs = (data, type) => {
-  const args = {
-    content: data.content || "",
-    content_classes: data.content_classes || "",
-  };
-  if (type === "iframe") {
-    args.ratio = data.ratio || "16x9";
-  }
-  if (type === "text") {
-    args.alignment = "left";
-  }
-
-  return args;
-};
-
-const getArgTypes = (data, type) => {
-  const argTypes = {
-    content: {
-      description: "Content under featured media",
-      type: { name: "string" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" },
-        category: "Content",
-      },
-    },
-    content_classes: {
-      name: "classes content",
-      description: "Classes for content under featured media",
-      type: { name: "string" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" },
-        category: "Style",
-      },
-    },
-  };
-
-  if (type === "iframe") {
-    argTypes.ratio = {
-      type: { name: "select" },
-      description: "Ratio for iframe",
-      options: ["1x1", "4x3", "16x9", "21x9"],
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "16x9" },
-        category: "Style",
-      },
-    };
-  }
-
-  if (type === "text") {
-    argTypes.alignment = {
-      name: "alignment",
-      type: { name: "select" },
-      description: "Alignment inside text containter",
-      options: ["left", "right"],
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" },
-        category: "Layout",
-      },
-    };
-  }
-
-  return argTypes;
-};
-
-const adjustWidth = (story) => {
-  const demo = story();
-  return `
-  <div class="row">
-    <div class="col-12 col-md-4">
-      ${demo}
-    </div>
-  </div>`;
-};
-
-const withText = (story, params) => {
-  const demo = story();
-  const alignment = params.args.alignment;
-  return `
-  <h3 class="mb-4">Lorem ipsum dolor sit amet.</h3>
-  <div class="row">
-    <div class="col-12 col-md-6 ${
-      alignment == "right" ? "order-md-1" : "order-md-2"
-    }">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      <a href="#" class="mb-5 d-block">Read More</a>
-    </div>
-    <div class="col-12 col-md-6 ${
-      alignment == "right" ? "order-md-2" : "order-md-1"
-    }">
-      ${demo}
-    </div>
-  </div>`;
-};
-
-export default {
-  title: "Paragraphs/Featured media",
-  parameters: {
-    design: [
-      {
-        name: "Mockup",
-        type: "figma",
-        url: "https://www.figma.com/file/7aJedLkk8hiDoD3RcxTnQi/BCL-Starter-kit?node-id=3973%3A35941",
-      },
-    ],
-  },
-};
-
-const applyArgs = (data, args) => {
-  return Object.assign(data, args);
-};
-
-export const Iframe = (args) => featuredMedia(applyArgs(demoData, args));
-Iframe.args = getArgs(demoData, "iframe");
-Iframe.argTypes = getArgTypes(demoData, "iframe");
-Iframe.decorators = [adjustWidth];
-
-export const Video = (args) => featuredMedia(applyArgs(demoDataVideo, args));
-Video.args = getArgs(demoData);
-Video.argTypes = getArgTypes(demoData);
-Video.decorators = [adjustWidth];
-
-export const Image = (args) => featuredMedia(applyArgs(demoDataImage, args));
-Image.args = getArgs(demoDataImage);
-Image.argTypes = getArgTypes(demoDataImage);
-Image.decorators = [adjustWidth];
-
-export const insideTextContainer = (args) =>
-  featuredMedia(applyArgs(demoData, args));
-insideTextContainer.args = getArgs(demoData, "text");
-insideTextContainer.argTypes = getArgTypes(demoData, "text");
-insideTextContainer.decorators = [withText];

package/featured-media.test.js

@@ -1,26 +0,0 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
-
-import demoData from "@openeuropa/bcl-featured-media/data";
-import demoDataVideo from "@openeuropa/bcl-featured-media/dataVideo";
-import demoDataImage from "@openeuropa/bcl-featured-media/dataImage";
-
-const template = "@oe-bcl/bcl-featured-media/featured-media.html.twig";
-const render = (params) => renderTwigFileAsNode(template, params);
-
-describe("OE - Featured media", () => {
-  test("renders correctly with iframe", () => {
-    expect.assertions(1);
-
-    return expect(render(demoData)).resolves.toMatchSnapshot();
-  });
-  test("renders correctly with video", () => {
-    expect.assertions(1);
-
-    return expect(render(demoDataVideo)).resolves.toMatchSnapshot();
-  });
-  test("renders correctly with image", () => {
-    expect.assertions(1);
-
-    return expect(render(demoDataImage)).resolves.toMatchSnapshot();
-  });
-});