ISTWCMS-4084: updating layouts to come from this module

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

+{%
+  set classes = [
+  'layout',
+  'layout--uw-1-col',
+  settings.column_class,
+]
+%}
+
+<section{{ attributes.addClass(classes) }}>
+
+  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+</section>

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') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    <div class="layout__region--wrapper">
+      {{ content.second }}
+    </div>
+  </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') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    <div class="layout__region--wrapper">
+      {{ content.second }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+    <div class="layout__region--wrapper">
+      {{ content.third }}
+    </div>
+  </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/layout--uw-4-col.html.twig

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

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

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') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    <div class="layout__region--wrapper">
+      {{ content.second }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+    <div class="layout__region--wrapper">
+      {{ content.third }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
+    <div class="layout__region--wrapper">
+      {{ content.fifth }}
+    </div>
+  </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') }}>
+    <div class="layout__region--wrapper">
+      {{ content.first }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    <div class="layout__region--wrapper">
+      {{ content.second }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+    <div class="layout__region--wrapper">
+      {{ content.third }}
+    </div>
+  </div>
+
+  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
+    <div class="layout__region--wrapper">
+      {{ content.fourth }}
+    </div>
+  </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;
+}

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

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

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

+.layout--uw-inverted-l-right {
+  display: grid;
+}
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 25% 25% 50%;
+}
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33.5% 16.5% 50%;
+}
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 16.5% 33.5% 50%;
+}
+
+.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;
+}
+
+.path-dashboard .layout__region {
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
+.path-dashboard .layout__region--wrapper {
+  box-shadow: none;
+  border: 1px solid #bfbfba;
+  padding: 1rem;
+}
\ No newline at end of file

uw_cfg_common.layouts.yml

-uw_one_column:
-  label: 'One column'
-  category: 'UW layouts'
-  template: uw_fdsu_theme_resp/templates/layout/layout--uw1col
-  default_region: first
-  regions:
-    first:
-      label: One
-  icon_map:
-    - [first]
-uw_two_column:
-  label: 'Two columns'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw2ColumnLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--uw2col
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-  icon_map:
-    - [first, second]
-uw_three_column:
-  label: 'Three columns'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw3ColumnLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--uw3col
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-    third:
-      label: Third
-  icon_map:
-    - [first, second, third]
-uw_four_column:
-  label: 'Four columns'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw4ColumnLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--uw4col
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-    third:
-      label: Third
-    fourth:
-      label: Fourth
-  icon_map:
-    - [first, second, third, fourth]
-uw_five_column:
-  label: 'Five columns'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw5ColumnLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--uw5col
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-    third:
-      label: Third
-    fourth:
-      label: Fourth
-    fifth:
-      label: Fifth
-  icon_map:
-    - [first, second, third, fourth, fifth]
-uw_inverted_l_right:
-  label: 'Inverted "L" - right'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\UwInvertedLRightLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--invertedlright
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-    third:
-      label: Third
-    fourth:
-      label: Fourth
-  icon_map:
-    - [first, second, fourth]
-    - [third, third, fourth]
-uw_inverted_l_left:
-  label: 'Inverted "L" - left'
-  category: 'UW layouts'
-  class: '\Drupal\uw_cfg_common\Plugin\Layout\UwInvertedLLeftLayout'
-  template: uw_fdsu_theme_resp/templates/layout/layout--invertedlleft
-  default_region: first
-  regions:
-    first:
-      label: First
-    second:
-      label: Second
-    third:
-      label: Third
-    fourth:
-      label: Fourth
-  icon_map:
-    - [first, second, third]
-    - [first, fourth, fourth]
\ No newline at end of file
+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
+  default_region: first
+  regions:
+    first:
+      label: One
+  icon_map:
+    - [first]
+uw_2_column:
+  label: 'Two columns'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw2ColumnLayout'
+  library: uw_cfg_common/uw_layout_2_col
+  template: layouts/uw-2-col/layout--uw-2-col
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+  icon_map:
+    - [first, second]
+uw_3_column:
+  label: 'Three columns'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw3ColumnLayout'
+  library: uw_cfg_common/uw_layout_3_col
+  template: layouts/uw-3-col/layout--uw-3-col
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+  icon_map:
+    - [first, second, third]
+uw_4_column:
+  label: 'Four columns'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw4ColumnLayout'
+  library: uw_cfg_common/uw_layout_4_col
+  template: layouts/uw-4-col/layout--uw-4-col
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    fourth:
+      label: Fourth
+  icon_map:
+    - [first, second, third, fourth]
+uw_5_column:
+  label: 'Five columns'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\Uw5ColumnLayout'
+  library: uw_cfg_common/uw_layout_5_col
+  template: layouts/uw-5-col/layout--uw-5-col
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    fourth:
+      label: Fourth
+    fifth:
+      label: Fifth
+  icon_map:
+    - [first, second, third, fourth, fifth]
+uw_inverted_l_right:
+  label: 'Inverted "L" - right'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\UwInvertedLRightLayout'
+  library: uw_cfg_common/uw_layout_inverted_l_right
+  template: layouts/uw-inverted-l-right/layout--uw-inverted-l-right
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    fourth:
+      label: Fourth
+  icon_map:
+    - [first, second, fourth]
+    - [third, third, fourth]
+uw_inverted_l_left:
+  label: 'Inverted "L" - left'
+  category: 'UW layouts'
+  class: '\Drupal\uw_cfg_common\Plugin\Layout\UwInvertedLLeftLayout'
+  library: uw_cfg_common/uw_layout_inverted_l_left
+  template: layouts/uw-inverted-l-left/layout--uw-inverted-l-left
+  default_region: first
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    fourth:
+      label: Fourth
+  icon_map:
+    - [first, second, third]
+    - [first, fourth, fourth]

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: {}