@openeuropa/bcl-description-list 0.1.202408021145

package/data/data--horizontal.js

@@ -0,0 +1,52 @@
+module.exports = {
+  variant: "horizontal",
+  items: [
+    {
+      term: [
+        {
+          label: "<p class='mb-0'>Only title label with <em>icon</em></p>",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+      definition:
+        "Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.",
+    },
+    {
+      term: [
+        {
+          label: "First title label",
+          color: "bg-success",
+        },
+        {
+          label: "Second title label",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+      definition: "Description text goes here.",
+    },
+    {
+      term: "Only title <strong>label</strong>",
+      definition: [
+        {
+          label: "Description text goes here.",
+        },
+        {
+          label: "Description text goes here.",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+    },
+  ],
+};

package/data/data.js

@@ -0,0 +1,51 @@
+module.exports = {
+  items: [
+    {
+      term: [
+        {
+          label: "<p class='mb-0'>Only title label with <em>icon</em></p>",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+      definition:
+        "Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.",
+    },
+    {
+      term: [
+        {
+          label: "First title label",
+          color: "bg-success",
+        },
+        {
+          label: "Second title label",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+      definition: "Description text goes here.",
+    },
+    {
+      term: "Only title <strong>label</strong>",
+      definition: [
+        {
+          label: "Description text goes here.",
+        },
+        {
+          label: "Description text goes here.",
+          icon: {
+            name: "geo-alt-fill",
+            size: "xs",
+            path: "/icons.svg",
+          },
+        },
+      ],
+    },
+  ],
+};

package/description-list-details.html.twig

@@ -0,0 +1,44 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - button: (button object) (default: {})
+  - link: (link object) (default: {})
+  - icon: (icon object) (default: {})
+  - label: (string) (default: '')
+
+  BLOCKS:
+  - definition
+#}
+
+{% set _button = button|default({}) %}
+{% set _link = link|default({}) %}
+{% set _icon = icon|default({}) %}
+{% set _label = label|default('') %}
+
+
+<dd>
+{%- block definition -%}
+  {%- if _button is not empty -%}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+  {%- elseif _link is not empty %}
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _link only -%}
+  {%- else -%}
+    {%- if _icon is not empty -%}
+      {%- set _icon_classes = ["me-2", "align-self-center", "flex-shrink-0"] -%}
+      {% set _icon_attributes = _icon.attributes ?: create_attribute() %}
+      {% set _icon_attributes = _icon_attributes.addClass(_icon_classes) %}
+      {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+        attributes: _icon_attributes,
+      }) only -%}
+      <div class="mb-0 d-inline-block">
+        {{- _label -}}
+      </div>
+    {%- else -%}
+      <div>{{- _label -}}</div>
+    {%- endif -%}
+  {%- endif -%}
+{% endblock %}
+</dd>
+
+{% endapply %}

package/description-list-title.html.twig

@@ -0,0 +1,33 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - icon: (icon object) (default: {})
+  - color: (string) (default: '')
+    - options: ['bg-primary', 'bg-secondary', 'bg-success', 'bg-warning', 'bg-info', 'bg-light', 'bg-dark', 'bg-lighter', 'bg-gray-200', 'bg-gray-400']
+  - label: (string) (default: '')
+#}
+
+{% set _icon = icon|default({}) %}
+{% set _color = color|default('') %}
+{% set _label = label|default('') %}
+
+<dt>
+  <div class="d-flex">
+  {%- if _icon is not empty -%}
+    {% set _icon_classes = ["me-2", "align-self-center", "flex-shrink-0"] %}
+    {% set _icon_attributes = _icon.attributes ?: create_attribute() %}
+    {% set _icon_attributes = _icon_attributes.addClass(_icon_classes) %}
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+      attributes: _icon_attributes,
+    }) only %}
+  {%- elseif _color is not empty -%}
+    <div class="align-self-center">
+      <span class="p-2 me-2 d-inline-block rounded-1 {{ _color }}"></span>
+    </div>
+  {%- endif -%}
+    <div>{{- _label -}}</div>
+  </div>
+</dt>
+
+{% endapply %}

package/description-list.html.twig

@@ -0,0 +1,121 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - bordered (boolean) (default: false)
+  - col_classes (string) (default: 'col-3')
+  - items (array) (default: []): format: [
+      {
+        term (string or description list title [])
+        definition (string or description list details [])
+      },
+      ...
+    ]
+  - variant (string) (default: '') 
+    - option: ['horizontal']
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _bordered = bordered ?? false %}
+{% set _col_classes = col_classes|default('col-md-3') %}
+{% set _items = items|default([]) %}
+{% set _variant = variant|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _item_classes = ['mb-3'] %}
+
+{% if _bordered %}
+  {% set _item_classes = ['border-bottom', 'pb-2-5', 'mb-2-5'] %}
+{% endif %}
+
+{% if _variant == 'horizontal' %}
+  {% set _item_classes = _item_classes|merge(['row']) %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-description-list']) %}
+
+{% if _variant != 'horizontal' %}
+<dl
+  {{ attributes }}
+>
+{% else %}
+<div
+  {{ attributes }}
+>
+{% endif %}
+  {% for _item in _items %}
+  {% if _variant == 'horizontal' %}
+  <dl
+    {{ create_attribute().addClass(_item_classes) }}
+  >
+  {% else %}
+  <div
+    {{ create_attribute().addClass(_item_classes) }}
+  >
+  {% endif %}
+  {% if _item.term is not empty %}
+    {% if _variant == 'horizontal' %}
+    <div class="{{ _col_classes }}">
+    {% endif %}
+    {% if _item.term is iterable %}
+      {% for _term in _item.term %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with _term only -%}
+      {% endfor %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with {
+        label: _item.term
+      } only -%}
+    {% endif %}
+    {% if _variant == 'horizontal' %}
+    </div>
+    {% endif %}
+  {% endif %}
+  {% if _item.definition is not empty %}
+    {% if _variant == 'horizontal' %}
+    <div class="col">
+    {% endif %}
+    {% if _item.definition is iterable %}
+      {% for _definition in _item.definition %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with _definition only -%}
+      {% endfor %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with {
+        label: _item.definition
+      } only -%}
+    {% endif %}
+    {% if _variant == 'horizontal' %}
+    </div>
+    {% endif %}
+  {% endif %}
+  {% if _variant == 'horizontal' %}
+  </dl>
+  {% else %}
+  </div>
+  {% endif %}
+  {% endfor %}
+{% if _variant != 'horizontal' %}
+</dl>
+{% else %}
+</div>
+{% endif %}
+
+{% endapply %}

package/description-list.story.js

@@ -0,0 +1,70 @@
+import { withDesign } from "storybook-addon-designs";
+import withCode from "@openeuropa/storybook-addon-code";
+import { correctPaths, getTitleControls } from "@openeuropa/bcl-story-utils";
+
+import demoData from "@openeuropa/bcl-description-list/data/data.js";
+import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
+import descriptionList from "@openeuropa/bcl-description-list/description-list.html.twig";
+
+const getArgs = () => ({
+  title: "",
+  title_tag: "h2",
+  bordered: false,
+  col_classes: "col-md-3",
+});
+
+const getArgTypes = () => ({
+  ...getTitleControls(),
+  bordered: {
+    type: { name: "boolean" },
+    description: "Border between description items",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: "false" },
+      category: "Style",
+    },
+  },
+  col_classes: {
+    name: "col classes",
+    type: { name: "string" },
+    description: "Classes of the column in horizontal variant",
+    table: {
+      defaultValue: { summary: "col-md-3" },
+      type: { summary: "int" },
+      category: "Style",
+    },
+  },
+});
+
+const applyArgs = (data, args) => Object.assign(data, args);
+
+export default {
+  title: "Paragraphs/Description List",
+  decorators: [withCode, withDesign],
+  parameters: {
+    badges: ["deprecated"],
+    viewport: {
+      defaultViewport: "tablet",
+    },
+    design: [
+      {
+        name: "Mockup",
+        type: "figma",
+        url: "https://www.figma.com/file/7aJedLkk8hiDoD3RcxTnQi/BCL-Starter-kit?node-id=5976%3A68483",
+      },
+    ],
+  },
+};
+
+export const Default = (args) =>
+  descriptionList(applyArgs(correctPaths(demoData), args));
+Default.args = getArgs(demoData);
+Default.argTypes = getArgTypes(demoData);
+Default.argTypes.col_classes.table = { disable: true };
+
+export const Horizontal = (args) =>
+  descriptionList(applyArgs(correctPaths(demoDataHorizontal), args));
+
+Horizontal.storyName = "Horizontal";
+Horizontal.args = getArgs(demoDataHorizontal);
+Horizontal.argTypes = getArgTypes(demoDataHorizontal);

package/description-list.test.js

@@ -0,0 +1,165 @@
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+import drupalAttribute from "drupal-attribute";
+
+import demoData from "@openeuropa/bcl-description-list/data/data";
+import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
+
+const template = "@oe-bcl/bcl-description-list/description-list.html.twig";
+
+const render = (params) => renderTwigFileAsNode(template, params);
+
+expect.extend(toHaveNoViolations);
+
+describe("OE - Description List", () => {
+  test(`renders correctly`, () => {
+    expect.assertions(1);
+    return expect(render(demoData)).resolves.toMatchSnapshot();
+  });
+
+  test(`horizontal renders correctly`, () => {
+    expect.assertions(1);
+    return expect(render(demoDataHorizontal)).resolves.toMatchSnapshot();
+  });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData, true))
+    ).toHaveNoViolations();
+  });
+
+  test(`horizontal passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoDataHorizontal, true))
+    ).toHaveNoViolations();
+  });
+});
+
+describe("OE - Description List with title", () => {
+  test(`renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        ...demoData,
+        title: "Description list test title",
+        title_tag: "h6",
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`bordered renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        ...demoData,
+        title: "Description list test title",
+        title_tag: "h6",
+        bordered: true,
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`horizontal renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        ...demoDataHorizontal,
+        title: "Description list test title",
+        title_tag: "h6",
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`horizontal with different col size renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        ...demoDataHorizontal,
+        horizontal_size: "8-4",
+        title: "Description list test title",
+        title_tag: "h6",
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`horizontal and bordered renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        ...demoDataHorizontal,
+        bordered: true,
+        title: "Description list test title",
+        title_tag: "h6",
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`with inline icon renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        items: [
+          {
+            term: '<svg class="me-2 bi icon--fluid"><use xlink:href="/icons.svg#printer-fill"></use></svg>Only title <strong>label</strong> with inline icon',
+            definition:
+              '<svg class="me-2 bi icon--fluid"><use xlink:href="/icons.svg#printer-fill"></use></svg>Description text goes here.',
+          },
+        ],
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`with new classes on term icon renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        items: [
+          {
+            term: [
+              {
+                label:
+                  "<p class='mb-0'>Only title label with <em>icon</em></p>",
+                icon: {
+                  name: "geo-alt-fill",
+                  size: "xs",
+                  path: "/icons.svg",
+                  attributes: new drupalAttribute().addClass("new-class"),
+                },
+              },
+            ],
+            definition:
+              "Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.",
+          },
+        ],
+      })
+    ).resolves.toMatchSnapshot();
+  });
+
+  test(`with new classes on definition icon renders correctly`, () => {
+    expect.assertions(1);
+    return expect(
+      render({
+        items: [
+          {
+            term: "Term title",
+            definition: [
+              {
+                label:
+                  "<p class='mb-0'>Only title label with <em>icon</em></p>",
+                icon: {
+                  name: "geo-alt-fill",
+                  size: "xs",
+                  path: "/icons.svg",
+                  attributes: new drupalAttribute().addClass("new-class"),
+                },
+              },
+            ],
+          },
+        ],
+      })
+    ).resolves.toMatchSnapshot();
+  });
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@openeuropa/bcl-description-list",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "0.1.202408021145",
+  "description": "OE - BCL description-list",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@openeuropa/bcl-heading": "^0.1.202408021145",
+    "@openeuropa/bcl-icon": "^0.1.202408021145"
+  },
+  "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": "7ee2013f7f64a70ddfa35228a9a65967dd71eec3"
+}