ISTWCMS-4837: adding templates and stylings for some of our layouts

source/_patterns/03-layouts/layout/_layout.scss

@@ -48,3 +48,14 @@
 
   }
 }
+
+.path-dashboard .layout__region {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
+.path-dashboard .layout__region--wrapper {
+  border: 1px solid #bfbfba;
+  box-shadow: none;
+  padding: 1rem;
+}

source/_patterns/03-layouts/layout/_layout.twig

+{% set section_names = {
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
+} %}
+
+{% set section_classes = '' %}
+
+<section
+  {% if pattern_lab %}
+    class="{{ classes }}"
+  {% else %}
+    {{ attributes.addClass(classes) }}
+  {% endif %}
+>
+
+  {% for i in 1..num_of_blocks %}
+
+    {% set section_name = section_names[loop.index] %}
+
+    <div
+      {% if pattern_lab %}
+        {% set region_classes = 'layout__region ' ~ 'layout__region--' ~ section_name %}
+        class="{{ region_classes }}"
+      {% else %}
+        {{ region_attributes.first.addClass('layout__region', 'layout__region--' ~ section_name) }}
+      {% endif %}
+    >
+
+      {% if pattern_lab %}
+        {{ section_name }} column
+      {% else %}
+        {{ content[section_name] }}
+      {% endif %}
+    </div>
+  {% endfor %}
+
+</section>
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss

+.layout--uw-1-col {
+  display: grid;
+  grid-template-columns: 100%;
+}
+
+.layout--uw-1-col .layout__region--first {
+  grid-column: 1 / 2;
+}
+
+

source/_patterns/03-layouts/layout/layout--1-col/layout--1-col.twig

+{% set num_of_blocks = 1 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--1-col/layout--1-col.yml

+column_classes:
+  -
+    name: 'Full (100%)'
+    classes: 'layout layout--uw-1-col'

source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss

+.layout--uw-2-col {
+  display: grid;
+}
+
+.layout--uw-2-col.larger-left {
+  grid-template-columns: 67% 33%;
+}
+
+.layout--uw-2-col.larger-right {
+  grid-template-columns: 33% 67%;
+
+}
+
+.layout--uw-2-col.even-split {
+  grid-template-columns: 50% 50%;
+}
+
+
+.layout--uw-2-col {
+  .layout__region--first {
+    grid-column: 1 / 2;
+  }
+
+  .layout__region--second {
+    grid-column: 2 / 3;
+  }
+}

source/_patterns/03-layouts/layout/layout--2-col/layout--2-col.twig

+{% set num_of_blocks = 2 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--2-col/layout--2-col.yml

+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-2-col even-split'
+  -
+    name: 'Larger Right (33%, 67%)'
+    classes: 'layout layout--uw-2-col larger-right'
+  -
+    name: 'Larger Left (67%, 33%)'
+    classes: 'layout layout--uw-2-col larger-left'

source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss

+.layout--uw-3-col {
+  display: grid;
+}
+
+.layout--uw-3-col.even-split {
+  grid-template-columns: 33% 34% 33%;
+}
+
+.layout--uw-3-col.larger-left {
+  grid-template-columns: 50% 25% 25%;
+}
+
+.layout--uw-3-col.larger-middle {
+  grid-template-columns: 25% 50% 25%;
+}
+
+.layout--uw-3-col.larger-right {
+  grid-template-columns: 25% 25% 50%;
+}
+
+.layout--uw-3-col.legacy-38-38-24 {
+  grid-template-columns: 38% 38% 24%;
+}
+
+.layout--uw-3-col.legacy-24-38-38 {
+  grid-template-columns: 24% 38% 38%;
+}
+
+.layout--uw-3-col {
+  .layout__region--first {
+    grid-column: 1 / 2;
+  }
+
+  .layout__region--second {
+    grid-column: 2 / 3;
+  }
+
+  .layout__region--third {
+    grid-column: 3 / 4;
+  }
+}

source/_patterns/03-layouts/layout/layout--3-col/layout--3-col.twig

+{% set num_of_blocks = 3 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--3-col/layout--3-col.yml

+column_classes:
+  -
+    name: 'Even Split (33%, 34%, 33%)'
+    classes: 'layout layout--uw-3-col even-split'
+  -
+    name: 'Larger Left (50%, 25%, 25%)'
+    classes: 'layout layout--uw-3-col larger-left'
+  -
+    name: 'Larger Middle (25%, 50%, 25%)'
+    classes: 'layout layout--uw-3-col larger-middle'
+  -
+    name: 'Larger Right (25%, 25%, 50%)'
+    classes: 'layout layout--uw-3-col larger-right'
+  -
+    name: 'Legacy (38%, 38%, 24%)'
+    classes: 'layout layout--uw-3-col legacy-38-38-24'
+  -
+    name: 'Legacy (24%, 38%, 38%)'
+    classes: 'layout layout--uw-3-col legacy-24-38-38'

source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss

+.layout--uw-4-col {
+  display: grid;
+}
+
+.layout--uw-4-col.even-split {
+  grid-template-columns: 25% 25% 25% 25%;
+}
+
+.layout--uw-4-col.larger-left {
+  grid-template-columns: 50% 16.67% 16.67% 16.66%;
+}
+
+.layout--uw-4-col.larger-second {
+  grid-template-columns: 16.67% 50% 16.67% 16.66%;
+}
+
+.layout--uw-4-col.larger-third {
+  grid-template-columns: 16.67% 16.67% 50% 16.66%;
+}
+
+.layout--uw-4-col.larger-right {
+  grid-template-columns: 16.67% 16.67% 16.66% 50%;
+}
+
+.layout--uw-4-col.legacy-23-27-27-23 {
+  grid-template-columns: 23% 27% 27% 23%;
+}
+
+.layout--uw-4-col .layout__region--first {
+  grid-column: 1 / 2;
+}
+
+.layout--uw-4-col .layout__region--second {
+  grid-column: 2 / 3;
+}
+
+.layout--uw-4-col .layout__region--third {
+  grid-column: 3 / 4;
+}
+
+.layout--uw-4-col .layout__region--fourth {
+  grid-column: 4 / 5;
+}

source/_patterns/03-layouts/layout/layout--4-col/layout--4-col.twig

+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--4-col/layout--4-col.yml

+column_classes:
+  -
+    name: 'Even Split (25% 25% 25% 25%)'
+    classes: 'layout layout--uw-4-col even-split'
+  -
+    name: 'Larger Left (50%, 16.67%, 16.67%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-left'
+  -
+    name: 'Larger Second (16.67%, 50%, 16.67%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-second'
+  -
+    name: 'Larger Third (16.67%, 16.67%, 50%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-third'
+  -
+    name: 'Larger Right (16.67%, 16.67%, 16.67%, 50%)'
+    classes: 'layout layout--uw-4-col larger-right'
+  -
+    name: 'Legacy (23%, 27%, 27%, 23%)'
+    classes: 'layout layout--uw-4-col legacy-23-27-27-23'

source/_patterns/03-layouts/layout/layout-base.scss

+.layout__region {
+  outline: 2px dashed #2f91da;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.pl-layout-h2 {
+  padding: 1rem 0;
+  text-align: center;
+}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout.twig

-<div{{ attributes }}>
-  <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
-    {% block content %}
-      Layout Region One Column Layout
-    {% endblock %}
-  </div>
-</div>