ISTWCMS-5598: adding basic node

src/patterns/03-layouts/node/_node.scss

+$sidebar-width: 18.75rem;
+$sidebar-gap: $grid-gap;
+
+.uw-node {
+
+  &__grid {
+    display: block;
+  }
+
+  &__sidebar{
+    display: none;
+  }
+
+  // Reset the grid to become flexed when we have sidebar.
+  &.uw-node__with-sidebar {
+
+    .uw-node__grid {
+      display: flex;
+      flex-direction: column;
+      gap: $sidebar-gap;
+      justify-content: center;
+
+      .layout {
+        margin: 0 auto;
+        width: 100%;
+      }
+
+      .uw-contained-width {
+        margin: 0 auto;
+      }
+
+      .uw-full-width {
+        width: 100vw;
+      }
+
+      @include medium {
+        flex-direction: row;
+        gap: $sidebar-gap;
+
+        .layout {
+          padding-right: 0;
+          width: clamp(320px, 868px, calc(100vw - 347px));
+        }
+
+        .uw-contained-width {
+          padding-right: 0;
+          width: clamp(320px, 868px, calc(100vw - 347px));
+        }
+
+        /* Match the width of WCMS2's narrow: 496px */
+        .uw-contained-width--narrow {
+          padding-right: 0;
+          width: clamp(320px, 496px, calc(100vw - 347px));
+        }
+
+        /* Match the width of WCMS2's wide: 753px */
+        .uw-contained-width--wide {
+          padding-right: 0;
+          width: clamp(320px, 753px, calc(100vw - 347px));
+        }
+      }
+    }
+
+    .uw-node__sidebar {
+
+      // Turn on sidebar with display.
+      display: block;
+      padding: 0 1rem;
+      width: 100%;
+
+      .layout {
+        padding: 0;
+      }
+
+      @include medium {
+        padding: 0;
+        width: $sidebar-width;
+        .layout {
+          width: inherit;
+        }
+      }
+    }
+  }
+}
+
+// Class appears when full width content loads with sidebar on page
+.uw-section-has-full-width.uw-node__with-sidebar {
+
+  .uw-node__grid {
+    justify-content: space-between;
+
+    .uw-node__node {
+      width: 100%;
+
+      @include medium {
+        padding-right: 0;
+        width: calc(100vw - 347px);
+      }
+    }
+
+    .uw-full-width {
+      max-width: inherit;
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  .uw-node__sidebar {
+    @include medium {
+      padding: 0;
+    }
+  }
+}

src/patterns/03-layouts/node/node.twig

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

src/patterns/03-layouts/node/node.yml

+has_sidebar: Yes