Merge branch 'feature/ISTWCMS-4092-ebremner-sidebar' into '8.x-3.x'

ISTWCMS-4092: adding node stylings with and without sidebar

See merge request !2

css/styles.css

@@ -1923,6 +1923,35 @@ svg:not(:root) {
   margin: 0 0 0 1rem;
   order: 1; }
 
+.uw-node {
+  width: 100%; }
+  .uw-node__grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .uw-node__grid {
+        grid-template-columns: 70% 30%; } }
+  .uw-node__node {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+    @media (min-width: 48.06rem) {
+      .uw-node__node {
+        grid-column: 1 / 3; } }
+  .uw-node__node--with-sidebar {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+    @media (min-width: 48.06rem) {
+      .uw-node__node--with-sidebar {
+        grid-column: 1 / 2; } }
+  .uw-node__sidebar {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .uw-node__sidebar {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+
 .l-section {
   margin-bottom: 2.5rem; }
 

source/_patterns/03-layouts/node/_node.scss

+$sidebar-width: 300px;
+
+.uw-node {
+  width: 100%;
+
+  &__grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 100%;
+
+    @include medium {
+      grid-template-columns: 70% 30%;
+    }
+  }
+
+  &__node {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+
+    @include medium {
+      grid-column: 1 / 3;
+    }
+  }
+
+  &__node--with-sidebar {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+
+    @include medium {
+      grid-column: 1 / 2;
+    }
+  }
+
+  &__sidebar {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+
+    @include medium {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+  }
+}
\ No newline at end of file

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

+{% if has_sidebar == 'Yes' %}
+  {% set classes = classes | merge(['uw-node__node--with-sidebar']) %}
+{% else %}
+  {% set classes = classes | merge(['uw-node__node']) %}
+{% endif %}
+
+<div class="uw-node">
+  <div class="uw-node__grid">
+
+    <article{{ attributes.addClass(classes) }}>
+      {% block content %}
+        This is the node content
+      {% endblock %}
+    </article>
+
+    {% if has_sidebar %}
+      <aside class="uw-node__sidebar">
+        {% block sidebar_content %}
+          This is the sidebar
+        {% endblock %}
+      </aside>
+    {% endif %}
+
+  </div>
+</div>