ISTWCMS_4837: adding inverted l right layout

css/styles.css

@@ -2211,6 +2211,44 @@ svg:not(:root) {
   grid-column: 1 / 3;
   grid-row: 2 / 3; }
 
+.layout--uw-inverted-l-right {
+  display: grid; }
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%; }
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--left-side {
+  display: grid;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--right-side {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--third {
+  grid-column: 1 / 3;
+  grid-row: 2 / 3; }
+
+.layout--uw-inverted-l-right .layout__region--fourth {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3; }
+
 .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;

css/uw-dashboards.css

@@ -632,6 +632,44 @@
   grid-column: 1 / 3;
   grid-row: 2 / 3; }
 
+.layout--uw-inverted-l-right {
+  display: grid; }
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%; }
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--left-side {
+  display: grid;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--right-side {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--third {
+  grid-column: 1 / 3;
+  grid-row: 2 / 3; }
+
+.layout--uw-inverted-l-right .layout__region--fourth {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3; }
+
 .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;

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

@@ -28,6 +28,11 @@
       {% if inverted_l_left and loop.index == 2 %}
           <div class="uw-inverted-l--right-side">
       {% endif %}
+
+      {% if inverted_l_right and loop.index == 4 %}
+        <div class="uw-inverted-l--right-side">
+      {% endif %}
+
     {% endif %}
 
     <div
@@ -47,11 +52,11 @@
     </div>
 
     {% if inverted_l_left or inverted_l_right %}
-      {% if loop.index == 1 %}
+      {% if inverted_l_left and loop.index == 1 or loop.index == 4 %}
         </div>
       {% endif %}
 
-      {% if inverted_l_left and loop.index == 4 %}
+      {% if inverted_l_right and loop.index == 3 or loop.index == 4 %}
         </div>
       {% endif %}
 

source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss

+.layout--uw-inverted-l-right {
+  display: grid;
+}
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%;
+}
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%;
+}
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%;
+}
+
+.layout--uw-inverted-l-right {
+  .uw-inverted-l--left-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    grid-template-columns: 50% 50%;
+  }
+
+  .uw-inverted-l--right-side {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+
+  .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+  }
+}

source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.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,
+      inverted_l_right: 1,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+    inverted_l_right: 1,
+  } %}
+
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml

+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-inverted-l-right even-split'
+  -
+    name: 'Larger Left (33%, 67%)'
+    classes: 'layout layout--uw-inverted-l-right larger-left'
+  -
+    name: 'Larger Right (67%, 33%)'
+    classes: 'layout layout--uw-inverted-l-right larger-right'
\ No newline at end of file