ISTWCMS-4837: convert 5 column and inverted l left layout to pattern-lab

layouts/layout--uw-4-col.html.twig

@@ -6,22 +6,7 @@
 ]
 %}
 
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.fourth }}
-  </div>
-
-</section>
+{% include '@layouts/layout/layout--4-col/layout--4-col.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-5-col.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-5-col',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--5-col/layout--5-col.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-inverted-l-left.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-inverted-l-left',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/uw-5-col/layout--uw-5-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-5-col',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
-    {{ content.fifth }}
-  </div>
-
-</section>

layouts/uw-5-col/uw-layout-5-col.css

-.layout--uw-5-col {
-  display: grid;
-}
-
-.layout--uw-5-col.even-split {
-  grid-template-columns: 20% 20% 20% 20% 20%;
-}
-
-.layout--uw-5-col.larger-left {
-  grid-template-columns: 40% 15% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-second {
-  grid-template-columns: 15% 40% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-third {
-  grid-template-columns: 15% 15% 40% 15% 15%;
-}
-
-.layout--uw-5-col.larger-fourth {
-  grid-template-columns: 15% 15% 15% 40% 15%;
-}
-
-.layout--uw-5-col.larger-right {
-  grid-template-columns: 15% 15% 15% 15% 40%;
-}
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
-  grid-template-columns: 23% 19% 19% 19% 20%;
-}
-
-.layout--uw-5-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-5-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-5-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.layout--uw-5-col .layout__region--fourth {
-  grid-column: 4 / 5;
-}
-
-.layout--uw-5-col.layout__region--fifth {
-  grid-column: 5 / 6;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-inverted-l-left',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.fourth }}
-  </div>
-
-</section>

layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css

-.layout--uw-inverted-l-left {
-  display: grid;
-}
-
-.layout--uw-inverted-l-left.even-split {
-  grid-template-columns: 50% 25% 25%;
-}
-
-.layout--uw-inverted-l-left.larger-left {
-  grid-template-columns: 50% 33.5% 16.5%;
-}
-
-.layout--uw-inverted-l-left.larger-right {
-  grid-template-columns: 50% 16.5% 33.5%;
-}
-
-.layout--uw-inverted-l-left .layout__region--first {
-  grid-column: 1 / 2;
-  grid-row: 1 / 3;
-}
-
-.layout--uw-inverted-l-left .layout__region--second {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--third {
-  grid-column: 3 / 4;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--fourth {
-  grid-column: 2 / 4;
-  grid-row: 2 / 3;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

uw_cfg_common.layouts.yml

@@ -81,8 +81,7 @@ uw_5_column:
   label: 'Five columns'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_5_col
-  template: layouts/uw-5-col/layout--uw-5-col
+  template: layouts/layout--uw-5-col
   default_region: first
   regions:
     first:
@@ -111,7 +110,6 @@ uw_inverted_l_right:
   label: 'Inverted "L" - right'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_inverted_l_right
   template: layouts/uw-inverted-l-right/layout--uw-inverted-l-right
   default_region: first
   regions:
@@ -136,8 +134,7 @@ uw_inverted_l_left:
   label: 'Inverted "L" - left'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_inverted_l_left
-  template: layouts/uw-inverted-l-left/layout--uw-inverted-l-left
+  template: layouts/layout--uw-inverted-l-left
   default_region: first
   regions:
     first:

uw_cfg_common.libraries.yml

-uw_layout_5_col:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-5-col/uw-layout-5-col.css: {}
 uw_layout_inverted_l_right:
   version: 1.0
   css:
     theme:
       layouts/uw-inverted-l-right/uw-layout-inverted-l-right.css: {}
-uw_layout_inverted_l_left:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css: {}
 uw_mathjax:
   js:
     https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML: { type: external, minified: true }