From 284066ff4df859ce3660b999b062b06794c96062 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Mon, 6 Jun 2022 11:24:13 -0400
Subject: [PATCH] ISTWCMS-5598: adding basic node
---
src/patterns/03-layouts/node/_node.scss | 113 ++++++++++++++++++++++++
src/patterns/03-layouts/node/node.twig | 28 ++++++
src/patterns/03-layouts/node/node.yml | 1 +
3 files changed, 142 insertions(+)
create mode 100644 src/patterns/03-layouts/node/_node.scss
create mode 100644 src/patterns/03-layouts/node/node.twig
create mode 100644 src/patterns/03-layouts/node/node.yml
diff --git a/src/patterns/03-layouts/node/_node.scss b/src/patterns/03-layouts/node/_node.scss
new file mode 100644
index 00000000..cf9086d2
--- /dev/null
+++ b/src/patterns/03-layouts/node/_node.scss
@@ -0,0 +1,113 @@
+$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;
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/node/node.twig b/src/patterns/03-layouts/node/node.twig
new file mode 100644
index 00000000..9d282b38
--- /dev/null
+++ b/src/patterns/03-layouts/node/node.twig
@@ -0,0 +1,28 @@
+{% 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>
diff --git a/src/patterns/03-layouts/node/node.yml b/src/patterns/03-layouts/node/node.yml
new file mode 100644
index 00000000..29602438
--- /dev/null
+++ b/src/patterns/03-layouts/node/node.yml
@@ -0,0 +1 @@
+has_sidebar: Yes
--
GitLab