@openeuropa/bcl-subscription-block 0.20.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-2021 Mark Otto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/__snapshots__/subscription-block.test.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OE - Subscription Block renders correctly 1`] = `
+<jest>
+  <div
+    class="bg-light px-4-5 pt-4 pb-4-5"
+  >
+    <div
+      class="fs-2 fw-normal"
+    >
+      Subscribe
+    </div>
+    <p
+      class="fw-bold"
+    >
+      Get notified lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <div
+      class="pb-2"
+    >
+      <button
+        class="btn btn-secondary btn-lg"
+        data-bs-target="#subscribeModal"
+        data-bs-toggle="modal"
+        type="button"
+      >
+        Subscribe
+        <svg
+          class="ms-2-5 bi icon--fluid"
+        >
+          <use
+            xlink:href="/icons.svg#chevron-right"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</jest>
+`;

package/data/data.js

@@ -0,0 +1,19 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = {
+  title: "Subscribe",
+  content:
+    "<p class='fw-bold'>Get notified lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+  button: {
+    label: "Subscribe",
+    variant: "secondary",
+    size: "lg",
+    icon: {
+      name: "chevron-right",
+      path: "/icons.svg",
+    },
+    attributes: new drupalAttribute()
+      .setAttribute("data-bs-toggle", "modal")
+      .setAttribute("data-bs-target", "#subscribeModal"),
+  },
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@openeuropa/bcl-subscription-block",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "0.20.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "OE - BCL subscription block",
+  "dependencies": {
+    "@openeuropa/bcl-alert": "^0.20.0",
+    "@openeuropa/bcl-button": "^0.20.0",
+    "@openeuropa/bcl-form": "^0.20.0",
+    "@openeuropa/bcl-modal": "^0.20.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ],
+  "gitHead": "ea13560489a089d0c198f781e75951a9160d2554"
+}

package/subscription-block.html.twig

@@ -0,0 +1,36 @@
+{% spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - content: (string) (default: '')
+  - button: (button Object) (default: {})
+#}
+
+{% set _title = title|default(false) %}
+{% set _content = content|default('') %}
+{% set _button = button|default({}) %}
+{% set _modal = modal|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bg-light', 'px-4-5', 'pt-4', 'pb-4-5']) %}
+
+<div
+  {{ attributes }}
+>
+  {% if _title is not empty %}
+    <div class="fs-2 fw-normal">{{ _title }}</div>
+  {% endif %}
+  {% if _content is not empty %}
+    {{ _content }}
+  {% endif %}
+  {% if _button is not empty %}
+    <div class="pb-2">
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

package/subscription-block.story.js

@@ -0,0 +1,23 @@
+import { withDesign } from "storybook-addon-designs";
+import { correctPaths } from "@openeuropa/bcl-story-utils";
+import subscriptionBlock from "@openeuropa/bcl-subscription-block/subscription-block.html.twig";
+import demoData from "@openeuropa/bcl-subscription-block/data/data.js";
+
+export default {
+  title: "Compositions/Subscription Block",
+  decorators: [withDesign],
+  parameters: {
+    layout: "fullscreen",
+    controls: { disable: true },
+    badges: ["stable"],
+    design: [
+      {
+        name: "Mockup",
+        type: "figma",
+        url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=5859%3A239083",
+      },
+    ],
+  },
+};
+
+export const Default = () => subscriptionBlock(correctPaths(demoData));

package/subscription-block.test.js

@@ -0,0 +1,14 @@
+import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import demoData from "@openeuropa/bcl-subscription-block/data/data.js";
+
+const template = "@oe-bcl/bcl-subscription-block/subscription-block.html.twig";
+
+const render = (params) => renderTwigFileAsNode(template, params, true);
+
+describe("OE - Subscription Block", () => {
+  test("renders correctly", () => {
+    expect.assertions(1);
+
+    return expect(render(demoData)).resolves.toMatchSnapshot();
+  });
+});