ISTWCMS-4837: moving layouts to pattern-lab

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

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

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

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

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

-.layout--uw-1-col {
-  display: grid;
-  grid-template-columns: 100%;
-}
-
-.layout--uw-1-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.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-2-col/layout--uw-2-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-2-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>
-
-</section>

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

-.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--uw-2-col .layout__region--second {
-  grid-column: 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;
-}

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

-{%
-  set classes = [
-  'layout',
-  'layout--uw-3-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>
-
-</section>

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

-.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--uw-3-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-3-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.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-4-col/uw-layout-4-col.css

-.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;
-}
-
-.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

 uw_1_column:
   label: 'One column'
   category: 'UW layouts'
-  library: uw_cfg_common/uw_layout_1_col
-  template: layouts/uw-1-col/layout--uw-1-col
+  template: layouts/layout--uw-1-col
   default_region: first
   regions:
     first:
@@ -13,8 +12,7 @@ uw_2_column:
   label: 'Two columns'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_2_col
-  template: layouts/uw-2-col/layout--uw-2-col
+  template: layouts/layout--uw-2-col
   default_region: first
   regions:
     first:
@@ -33,7 +31,6 @@ uw_3_column:
   label: 'Three columns'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_3_col
   template: layouts/uw-3-col/layout--uw-3-col
   default_region: first
   regions:
@@ -58,8 +55,7 @@ uw_4_column:
   label: 'Four columns'
   category: 'UW layouts'
   class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
-  library: uw_cfg_common/uw_layout_4_col
-  template: layouts/uw-4-col/layout--uw-4-col
+  template: layouts/layout--uw-4-col
   default_region: first
   regions:
     first:

uw_cfg_common.libraries.yml

-uw_layout_1_col:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-1-col/uw-layout-1-col.css: {}
-uw_layout_2_col:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-2-col/uw-layout-2-col.css: {}
-uw_layout_3_col:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-3-col/uw-layout-3-col.css: {}
-uw_layout_4_col:
-  version: 1.0
-  css:
-    theme:
-      layouts/uw-4-col/uw-layout-4-col.css: {}
-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 }
+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 }