From 506aa9f4afe493344fc33f5352ca93627bc12055 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 24 Aug 2022 11:08:15 -0400
Subject: [PATCH] ISTWCMS-5747: css for block spacing
---
src/patterns/03-layouts/_index.scss | 1 +
src/patterns/03-layouts/block/_block.scss | 11 +++++
src/patterns/03-layouts/block/block.twig | 49 ++++++++++++++++++++
src/patterns/03-layouts/block/block.yml | 10 ++++
src/patterns/04-components/image/_image.twig | 2 +-
5 files changed, 72 insertions(+), 1 deletion(-)
create mode 100644 src/patterns/03-layouts/block/_block.scss
create mode 100644 src/patterns/03-layouts/block/block.twig
create mode 100644 src/patterns/03-layouts/block/block.yml
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 8c184908..70e40923 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/src/patterns/03-layouts/_index.scss
@@ -1,3 +1,4 @@
+@forward 'block/block';
@forward 'carousel/carousel';
@forward 'content/content';
@forward 'footer/footer';
diff --git a/src/patterns/03-layouts/block/_block.scss b/src/patterns/03-layouts/block/_block.scss
new file mode 100644
index 00000000..97d7e060
--- /dev/null
+++ b/src/patterns/03-layouts/block/_block.scss
@@ -0,0 +1,11 @@
+// @file
+// Styles for Block.
+
+.block {
+ margin-bottom: var(--grid-gap);
+}
+
+// disable margin for layout builder blocks
+.block--provider-layout-builder {
+ margin-bottom: 0;
+}
diff --git a/src/patterns/03-layouts/block/block.twig b/src/patterns/03-layouts/block/block.twig
new file mode 100644
index 00000000..44b3ca4e
--- /dev/null
+++ b/src/patterns/03-layouts/block/block.twig
@@ -0,0 +1,49 @@
+{% set classes = [
+ 'block l-block',
+ modifier ? modifier: '',
+ attributes ? attributes.class
+]|join(' ')|trim %}
+
+{% set title_classes = [
+ 'block__title l-block__title',
+ title_attributes ? title_attributes.class
+]|join(' ')|trim %}
+
+{% set content_classes = [
+ 'block__content l-block__content',
+ content_attributes ? content_attributes.class
+]|join(' ')|trim %}
+
+{% if block_wrapper %}
+<div class="{{ classes }}" {{ attributes ? attributes|without('class','id') }}>
+{% endif %}
+
+ {% if constrain %}
+ <div class="{{ constrain }}">
+ {% endif %}
+
+ {{ title_prefix }}
+ {% if label %}
+ <{{ label_element ?: 'h2' }} class="{{ title_classes }}" {{ title_attributes ? title_attributes|without('class') }}>{{ label }}</{{ label_element ?: 'h2' }}>
+ {% endif %}
+ {{ title_suffix }}
+
+ {% if content_wrapper %}
+ <div class="{{ content_classes }}" {{ content_attributes ? content_attributes|without('class') }}>
+ {% endif %}
+
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+
+ {% if content_wrapper %}
+ </div>
+ {% endif %}
+
+ {% if constrain %}
+ </div>
+{% endif %}
+
+{% if block_wrapper %}
+</div>
+{% endif %}
diff --git a/src/patterns/03-layouts/block/block.yml b/src/patterns/03-layouts/block/block.yml
new file mode 100644
index 00000000..a7e3dabe
--- /dev/null
+++ b/src/patterns/03-layouts/block/block.yml
@@ -0,0 +1,10 @@
+---
+block_wrapper: true
+constrain: ''
+title_prefix: ''
+label_element: ''
+label: 'Block title'
+title_suffix: ''
+content_wrapper: true
+content: |-
+ <p>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
diff --git a/src/patterns/04-components/image/_image.twig b/src/patterns/04-components/image/_image.twig
index 942db39a..e2410e60 100644
--- a/src/patterns/04-components/image/_image.twig
+++ b/src/patterns/04-components/image/_image.twig
@@ -8,7 +8,7 @@
<div class="uw-image__wrapper {{ image_class }}">
{% if image.type == 'full' %}
- {{ image.image.img_element['#uri'] }}
+
{% include '@components/responsive-image/responsive-image.twig' with {
'sources': image.image.sources,
'img_element': image.image.img_element['#uri'],
--
GitLab