@dta-au/civictheme-twig 1.13.1

package/components/00-base/layout/layout.js

@@ -0,0 +1,97 @@
+/**
+ * CivicTheme Layout component.
+ */
+
+function CivicThemeLayout(el) {
+  this.el = el;
+  this.grid = el.querySelector(':scope > .ct-layout__inner');
+  const gridStyle = getComputedStyle(this.grid);
+
+  if (gridStyle.gridTemplateRows === 'masonry' || this.grid.hasAttribute('data-masonry')) {
+    return;
+  }
+
+  this.grid.setAttribute('data-masonry', true);
+
+  this.stl = this.grid.querySelector(':scope > .ct-layout__sidebar_top_left');
+  this.str = this.grid.querySelector(':scope > .ct-layout__sidebar_top_right');
+  this.sbl = this.grid.querySelector(':scope > .ct-layout__sidebar_bottom_left');
+  this.sbr = this.grid.querySelector(':scope > .ct-layout__sidebar_bottom_right');
+
+  // Only enable masonry if all 4 elements are present.
+  if (this.stl && this.str && this.sbl && this.sbr) {
+    // Prepare redraw variables.
+    this.gap = parseFloat(gridStyle.gridRowGap);
+    // Items include all children of the grid, not just the 4 sidebar regions.
+    this.items = Array.from(this.grid.children);
+    this.height = 0;
+
+    // Listen for redraw events.
+    this.resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        this.masonryRedraw();
+      });
+    });
+
+    // Observe all children of the grid items rather than the items themselves:
+    // this allows us to detect changes in the height of the children rather
+    // tnan of the grid items as their height will not change when children
+    // combined heights is less than a single grid row height.
+    this.items.forEach((item) => {
+      Array.from(item.children).forEach((child) => {
+        this.resizeObserver.observe(child);
+      });
+    });
+
+    this.masonryRedraw();
+  }
+}
+
+/**
+ * Position element in relation to it's above element.
+ */
+CivicThemeLayout.prototype.masonryPositionElement = function (el, aboveEl, gap) {
+  const aboveChildIdx = aboveEl.children.length - 1;
+  const aboveChild = (aboveChildIdx >= 0) ? aboveEl.children[aboveChildIdx] : null;
+  const aboveBottom = aboveChild ? aboveChild.getBoundingClientRect().bottom : aboveEl.getBoundingClientRect().top;
+  const currentTop = el.getBoundingClientRect().top;
+  el.style.marginTop = `${aboveBottom + gap - currentTop}px`;
+};
+
+/**
+ * Reposition grid elements.
+ */
+CivicThemeLayout.prototype.masonryRedraw = function () {
+  // Calculate the new height of all children.
+  //
+  // Although masonry layout is applied only if the element has the
+  // CSS variable --js-masonry-enabled set and we could have check for this
+  // variable to preserve height reclaulation, this variable can be assigned
+  // within a specific media query. Therefore, we need to calculate the height
+  // in case --js-masonry-enabled is assigned to the element after the viewport
+  // has been resized.
+  const newHeight = this.items.reduce((totalHeight, item) => {
+    const childrenHeight = Array.from(item.children).reduce((childTotal, child) => childTotal + child.getBoundingClientRect().height, 0);
+    return totalHeight + childrenHeight;
+  }, 0);
+
+  // Proceed only if the height has changed.
+  if (newHeight !== this.height) {
+    this.height = newHeight;
+
+    // Clear existing positioning.
+    this.sbl.style.removeProperty('margin-top');
+    this.sbr.style.removeProperty('margin-top');
+
+    // Set new position (if masonry css has been applied).
+    if (getComputedStyle(this.grid).getPropertyValue('--js-masonry-enabled')) {
+      this.masonryPositionElement(this.sbl, this.stl, this.gap);
+      this.masonryPositionElement(this.sbr, this.str, this.gap);
+    }
+  }
+};
+
+document.querySelectorAll('.ct-layout').forEach((layout) => {
+   
+  new CivicThemeLayout(layout);
+});

package/components/00-base/layout/layout.scss

@@ -0,0 +1,329 @@
+//
+// CivicTheme Layout component styles.
+//
+
+.ct-layout {
+  $root: &;
+
+  &__sidebar_top_left,
+  &__sidebar_top_right,
+  &__sidebar_bottom_left,
+  &__sidebar_bottom_right {
+    @include ct-print-hide();
+  }
+
+  &.ct-layout--no-top-left.ct-layout--no-top-right.ct-layout--no-bottom-left.ct-layout--no-bottom-right {
+    & > #{$root}__inner {
+      grid-template-rows: auto;
+    }
+  }
+
+  &.ct-vertical-spacing--top {
+    #{$root}.ct-vertical-spacing--top,
+    #{$root}.ct-vertical-spacing--both {
+      margin-top: 0;
+    }
+
+    #{$root}.ct-vertical-spacing--bottom,
+    #{$root}.ct-vertical-spacing--both {
+      margin-bottom: 0;
+    }
+  }
+
+  &__inner {
+    $inner: &;
+
+    display: grid;
+    grid-template-columns: repeat($ct-layout-columns, 1fr);
+    row-gap: $ct-layout-row-gap;
+    grid-template-rows: auto 1fr;
+    grid-template-rows: masonry;
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      // Activate masonry layout.
+      --js-masonry-enabled: 1;
+
+      // See the responsive layout rules at the bottom of this file.
+      column-gap: $ct-layout-column-gap;
+    }
+
+    & {
+      --stl: 1;
+      --str: 2;
+      --m: 3;
+      --sbl: 4;
+      --sbr: 5;
+    }
+
+    #{$root}--no-top-left > & {
+      --stl: 0;
+      --str: 1;
+      --m: 2;
+      --sbl: 3;
+      --sbr: 4;
+    }
+
+    #{$root}--no-top-right > & {
+      --stl: 1;
+      --str: 0;
+      --m: 2;
+      --sbl: 3;
+      --sbr: 4;
+    }
+
+    #{$root}--no-bottom-left > & {
+      --stl: 1;
+      --str: 2;
+      --m: 3;
+      --sbl: 0;
+      --sbr: 4;
+    }
+
+    #{$root}--no-bottom-right > & {
+      --stl: 1;
+      --str: 2;
+      --m: 3;
+      --sbl: 4;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-left#{$root}--no-top-right > & {
+      --stl: 0;
+      --str: 0;
+      --m: 1;
+      --sbl: 2;
+      --sbr: 3;
+    }
+
+    #{$root}--no-top-left#{$root}--no-bottom-left > & {
+      --stl: 0;
+      --str: 1;
+      --m: 2;
+      --sbl: 0;
+      --sbr: 3;
+    }
+
+    #{$root}--no-top-left#{$root}--no-bottom-right > & {
+      --stl: 0;
+      --str: 1;
+      --m: 2;
+      --sbl: 3;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-right#{$root}--no-bottom-left > & {
+      --stl: 1;
+      --str: 0;
+      --m: 2;
+      --sbl: 0;
+      --sbr: 3;
+    }
+
+    #{$root}--no-top-right#{$root}--no-bottom-right > & {
+      --stl: 1;
+      --str: 0;
+      --m: 2;
+      --sbl: 3;
+      --sbr: 0;
+    }
+
+    #{$root}--no-bottom-left#{$root}--no-bottom-right > & {
+      --stl: 1;
+      --str: 2;
+      --m: 3;
+      --sbl: 0;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-left#{$root}--no-top-right#{$root}--no-bottom-left > & {
+      --stl: 0;
+      --str: 0;
+      --m: 1;
+      --sbl: 0;
+      --sbr: 2;
+    }
+
+    #{$root}--no-top-left#{$root}--no-top-right#{$root}--no-bottom-right > & {
+      --stl: 0;
+      --str: 0;
+      --m: 1;
+      --sbl: 2;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-left#{$root}--no-bottom-left#{$root}--no-bottom-right > & {
+      --stl: 0;
+      --str: 1;
+      --m: 2;
+      --sbl: 0;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-right#{$root}--no-bottom-left#{$root}--no-bottom-right > & {
+      --stl: 1;
+      --str: 0;
+      --m: 2;
+      --sbl: 0;
+      --sbr: 0;
+    }
+
+    #{$root}--no-top-left#{$root}--no-top-right#{$root}--no-bottom-left#{$root}--no-bottom-right > & {
+      --stl: 0;
+      --str: 0;
+      --m: 1;
+      --sbl: 0;
+      --sbr: 0;
+    }
+  }
+
+  &__sidebar_top_left {
+    grid-column: 1 / span $ct-layout-columns;
+    grid-row-start: var(--stl, 1);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      grid-column: 1 / span $ct-layout-sidebar-left-columns;
+      grid-row: 1 / span 1;
+      height: auto;
+
+      #{$root}--no-bottom-left > #{$root}__inner > & {
+        grid-row: 1 / span 2;
+      }
+    }
+  }
+
+  &__sidebar_top_right {
+    grid-column: 1 / span $ct-layout-columns;
+    grid-row-start: var(--str, 2);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      grid-column: ($ct-layout-columns - $ct-layout-sidebar-right-columns + 1) / span $ct-layout-sidebar-right-columns;
+      grid-row: 1 / span 1;
+      height: auto;
+
+      #{$root}--no-bottom-right > #{$root}__inner > & {
+        grid-row: 1 / span 2;
+      }
+    }
+  }
+
+  &__main {
+    grid-column: 1 / span $ct-layout-columns;
+    grid-row-start: var(--m, 3);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      grid-column: ($ct-layout-sidebar-left-columns + 1) / span ($ct-layout-columns - $ct-layout-sidebar-left-columns - $ct-layout-sidebar-right-columns);
+      grid-row: 1 / span 2;
+
+      #{$root}--no-top-left#{$root}--no-bottom-left > #{$root}__inner > & {
+        grid-column: 1 / span ($ct-layout-columns - $ct-layout-sidebar-right-columns);
+      }
+
+      #{$root}--no-top-right#{$root}--no-bottom-right > #{$root}__inner > & {
+        grid-column: ($ct-layout-sidebar-left-columns + 1) / span ($ct-layout-columns - $ct-layout-sidebar-left-columns);
+      }
+
+      #{$root}--no-top-left#{$root}--no-bottom-left#{$root}--no-top-right#{$root}--no-bottom-right > #{$root}__inner > & {
+        grid-column: 1 / span $ct-layout-columns;
+      }
+    }
+  }
+
+  &__sidebar_bottom_left {
+    grid-column: 1 / span $ct-layout-columns;
+    grid-row-start: var(--sbl, 4);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      grid-column: 1 / span $ct-layout-sidebar-left-columns;
+      grid-row: 2 / span 1;
+      height: 100%;
+
+      #{$root}--no-top-left > #{$root}__inner > & {
+        grid-row: 1 / span 2;
+      }
+    }
+  }
+
+  &__sidebar_bottom_right {
+    grid-column: 1 / span $ct-layout-columns;
+    grid-row-start: var(--sbr, 5);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      grid-column: ($ct-layout-columns - $ct-layout-sidebar-right-columns + 1) / span $ct-layout-sidebar-right-columns;
+      grid-row: 2 / span 1;
+      height: 100%;
+
+      #{$root}--no-top-right > #{$root}__inner > & {
+        grid-row: 1 / span 2;
+      }
+    }
+  }
+}
+
+//
+// Layout has larger gaps when only one sidebar is present.
+// Nested layouts should have the smae larger gaps when only one sidebar is
+// present, but only when the parent layout has no sidebars.
+//
+@include ct-breakpoint($ct-layout-breakpoint) {
+  .ct-layout {
+    $root: &;
+
+    // stylelint-disable-next-line no-duplicate-selectors
+    &#{$root}--no-top-left#{$root}--no-bottom-left > #{$root}__inner {
+      column-gap: $ct-layout-column-gap-right-only;
+    }
+
+    // stylelint-disable-next-line no-duplicate-selectors
+    &#{$root}--no-top-right#{$root}--no-bottom-right > #{$root}__inner {
+      column-gap: $ct-layout-column-gap-left-only;
+    }
+
+    & > #{$root}__inner {
+      #{$root} {
+        > #{$root}__inner {
+          column-gap: $ct-layout-column-gap;
+        }
+      }
+    }
+
+    // stylelint-disable-next-line no-duplicate-selectors
+    &#{$root}--no-top-left#{$root}--no-bottom-left > #{$root}__inner {
+      #{$root} {
+        &#{$root}--no-top-left#{$root}--no-bottom-left,
+        &#{$root}--no-top-right#{$root}--no-bottom-right {
+          > #{$root}__inner {
+            column-gap: $ct-layout-column-gap;
+          }
+        }
+      }
+    }
+
+    // stylelint-disable-next-line no-duplicate-selectors
+    &#{$root}--no-top-right#{$root}--no-bottom-right > #{$root}__inner {
+      #{$root} {
+        &#{$root}--no-top-left#{$root}--no-bottom-left,
+        &#{$root}--no-top-right#{$root}--no-bottom-right {
+          > #{$root}__inner {
+            column-gap: $ct-layout-column-gap;
+          }
+        }
+      }
+    }
+
+    &#{$root}--no-top-left#{$root}--no-bottom-left#{$root}--no-top-right#{$root}--no-bottom-right > #{$root}__inner {
+      #{$root} {
+        &#{$root}--no-top-left#{$root}--no-bottom-left {
+          > #{$root}__inner {
+            column-gap: $ct-layout-column-gap-right-only;
+          }
+        }
+
+        &#{$root}--no-top-right#{$root}--no-bottom-right {
+          > #{$root}__inner {
+            column-gap: $ct-layout-column-gap-right-only;
+          }
+        }
+      }
+    }
+  }
+}

package/components/00-base/layout/layout.stories.data.js

@@ -0,0 +1,22 @@
+export default {
+  args: () => ({
+    content_top: '<div class="story-placeholder" contenteditable="true">content_top</div>',
+    sidebar_top_left: '<div class="story-placeholder" contenteditable="true">sidebar_top_left</div>',
+    sidebar_top_right: '<div class="story-placeholder" contenteditable="true">sidebar_top_right</div>',
+    content: '<div class="story-placeholder" contenteditable="true">content</div>',
+    sidebar_bottom_left: '<div class="story-placeholder" contenteditable="true">sidebar_bottom_left</div>',
+    sidebar_bottom_right: '<div class="story-placeholder" contenteditable="true">sidebar_bottom_right</div>',
+    content_bottom: '<div class="story-placeholder" contenteditable="true">content_bottom</div>',
+    sidebar_top_left_attributes: null,
+    sidebar_top_right_attributes: null,
+    content_attributes: null,
+    sidebar_bottom_left_attributes: null,
+    sidebar_bottom_right_attributes: null,
+    hide_sidebar_left: false,
+    hide_sidebar_right: false,
+    is_contained: false,
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  }),
+};

package/components/00-base/layout/layout.stories.js

@@ -0,0 +1,120 @@
+/**
+ * CivicTheme Layout component stories.
+ */
+
+import Component from './layout.twig';
+import LayoutData from './layout.stories.data';
+
+const meta = {
+  title: 'Base/Layout',
+  component: Component,
+  argTypes: {
+    content_top: {
+      control: { type: 'text' },
+    },
+    sidebar_top_left: {
+      control: { type: 'text' },
+    },
+    sidebar_top_right: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    sidebar_bottom_left: {
+      control: { type: 'text' },
+    },
+    sidebar_bottom_right: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    hide_sidebar_left: {
+      control: { type: 'boolean' },
+    },
+    hide_sidebar_right: {
+      control: { type: 'boolean' },
+    },
+    is_contained: {
+      control: { type: 'boolean' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Layout = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: LayoutData.args(),
+};
+
+export const LayoutTopLeftSidebar = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LayoutData.args(),
+    sidebar_top_right: '',
+    sidebar_bottom_left: '',
+    sidebar_bottom_right: '',
+  },
+};
+
+export const LayoutBottomLeftSidebar = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LayoutData.args(),
+    sidebar_top_left: '',
+    sidebar_top_right: '',
+    sidebar_bottom_right: '',
+  },
+};
+
+export const LayoutTopRightSidebar = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LayoutData.args(),
+    sidebar_top_left: '',
+    sidebar_bottom_left: '',
+    sidebar_bottom_right: '',
+  },
+};
+
+export const LayoutBottomRightSidebar = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LayoutData.args(),
+    sidebar_top_left: '',
+    sidebar_top_right: '',
+    sidebar_bottom_left: '',
+  },
+};
+
+export const LayoutNoSidebars = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LayoutData.args(),
+    sidebar_top_left: '',
+    sidebar_top_right: '',
+    sidebar_bottom_left: '',
+    sidebar_bottom_right: '',
+  },
+};

package/components/00-base/layout/layout.stories.scss

@@ -0,0 +1,55 @@
+//
+// CivicTheme Layout component story styles.
+//
+
+@use 'sass:color';
+
+// Nested layout.
+.ct-layout {
+  .ct-layout {
+    .story-placeholder {
+      $_color: #6b5394;
+
+      background-color: color.adjust($_color, $alpha: -0.7);
+      border: dashed 1px color.adjust($_color, $alpha: -0.3);
+      color: color.adjust($_color, $lightness: -30%);
+    }
+  }
+}
+
+.story-layout-outlines {
+  $_viewport-color: blue;
+  $_layout-color: green;
+  $_container-color: red;
+  $_fluid-container-color: purple;
+  $_grid-color: orange;
+
+  overflow: auto;
+  background-color: rgba($_viewport-color, 0.025);
+  box-shadow: 0 0 1px 1px $_viewport-color inset;
+
+  .ct-layout {
+    background-color: rgba($_layout-color, 0.025);
+    box-shadow: 0 0 1px 1px $_layout-color inset;
+  }
+
+  .ct-layout__main,
+  .ct-layout__sidebar_top_left,
+  .ct-layout__sidebar_top_right,
+  .ct-layout__sidebar_bottom_left,
+  .ct-layout__sidebar_bottom_right {
+    background-color: rgba($_grid-color, 0.025);
+    box-shadow: 0 0 1px 1px $_grid-color inset;
+  }
+
+  .container,
+  .container-fluid {
+    background-color: rgba($_container-color, 0.025);
+    box-shadow: 0 0 1px 1px $_container-color inset;
+  }
+
+  .container-fluid {
+    background-color: rgba($_fluid-container-color, 0.025);
+    box-shadow: 0 0 1px 1px $_fluid-container-color inset;
+  }
+}