Use grid for layout paragraphs layouts

css/components/page-sections.css

@@ -1,3 +1,31 @@
+/*
+  Overrides from
+  localgov_paragraphs/modules/localgov_subsites_paragraphs/css/localgov-subsites-paragraphs.css
+
+  This is so that we only have the gap specified in our grid/custom CSS between
+  columns in page sections, rather than our gap + this extra padding.
+*/
+.paragraph--type--page-section .layout__region {
+  padding-bottom: 0;
+}
+.paragraph--type--page-section .layout--twocol .layout__region--first {
+  padding-right: 0;
+}
+.paragraph--type--page-section .layout--twocol .layout__region--second {
+  padding-left: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--first {
+  padding-right: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--second {
+  padding-right: 0;
+  padding-left: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--third {
+  padding-left: 0;
+}
+
+/* Page sections */
 .lgd-page-section {
   color: var(--color-page-section-text-color);
   background-color: var(--color-page-section-background-color);

templates/layouts/four-col/layout--localgov-fourcol-25-25-25-25.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 33%-34%-33% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--fourcol-25-25-25-25',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-quarter') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-quarter') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-quarter') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.fourth %}
+      <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth', 'lgd-row__one-quarter') }}>
+        {{ content.fourth }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}

templates/layouts/one-col/layout--localgov-onecol.html.twig

@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a one-column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}

templates/layouts/one-col/layout--onecol--flexible.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme template to display a one-column **flexible** layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'layout--onecol__flexible',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}

templates/layouts/one-col/layout--onecol.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override to display a one-column layout.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}

templates/layouts/three-col/layout--localgov-threecol-33-34-33.html.twig

@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 33%-34%-33% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-third') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-third') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}

templates/layouts/three-col/layout--threecol-33-34-33.html.twig

@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Theme override for a three column layout.
+ *
+ * This template provides a three column 33%-34%-33% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top', 'lgd-row__full') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-third') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-third') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom', 'lgd-row__full') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

templates/layouts/two-col/layout--localgov-twocol.html.twig

@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a two-column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-half') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-half') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}

templates/layouts/two-col/layout--twocol.html.twig

@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Theme override to display a two-column layout.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top', 'lgd-row__full') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-half') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-half') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom', 'lgd-row__full') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}