Page object (#1043)

Author: tylersticka

.changeset/wicked-experts-listen.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Page object for "sticky" page footers

src/base/_defaults.scss

@@ -45,6 +45,18 @@ ul {
   margin: 0;
 }
 
+/**
+ * Forces the viewport to be filled. Necessary for the footer to "stick" to the
+ * bottom of short pages.
+ *
+ * @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid
+ */
+
+html,
+body {
+  height: 100%;
+}
+
 /**
  * 1. Prevents custom background colors, iframes, etc. from making page content
  *    unreadable.

src/objects/page/demo/example.twig

@@ -0,0 +1,15 @@
+{% embed '@cloudfour/objects/page/page.twig' %}
+  {% block content %}
+    <p class="u-pad-1">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex
+      enim. Nunc efficitur scelerisque dolor et sollicitudin. Donec finibus
+      lorem elit, eu consectetur quam pellentesque sed. Pellentesque habitant
+      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    </p>
+  {% endblock %}
+  {% block footer %}
+    <p class="u-pad-1 t-dark">
+      Footer content.
+    </p>
+  {% endblock %}
+{% endembed %}

src/objects/page/page.scss

@@ -0,0 +1,29 @@
+/**
+ * Page container
+ *
+ * Attempts to fill the available area (assuming `height: 100%` is correctly
+ * applied to all parent elements) and keeps the footer at the bottom of that
+ * area.
+ *
+ * @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid
+ */
+
+.o-page {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 100%;
+}
+
+/**
+ * These classes aren't strictly required, but they keep the HTML source a
+ * little easier to read while also supporting swapping of source order if
+ * that's ever something that content calls for.
+ */
+
+.o-page__content {
+  grid-row: 1;
+}
+
+.o-page__footer {
+  grid-row: 2;
+}

src/objects/page/page.stories.mdx

@@ -0,0 +1,28 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { useEffect } from '@storybook/client-api';
+import exampleDemo from './demo/example.twig';
+
+<Meta
+  title="Objects/Page"
+  parameters={{ docs: { inlineStories: false }, paddings: { disabled: true } }}
+/>
+
+# Page
+
+A wrapper for page body and footer content that keeps the footer at the bottom of the viewport even if the page is too short to push it down.
+
+For this to work correctly, each parent element needs to fill its container height. For best results, apply this to the `body` element directly or nested immediately within.
+
+<Canvas>
+  <Story name="Example" height="400px">
+    {() => {
+      useEffect(() => {
+        // Override Storybook's `min-height` in the preview
+        document.body.style.minHeight = '';
+        // Prevent Storybook's container from affecting this layout
+        document.querySelector('#root').style.display = 'contents';
+      });
+      return exampleDemo();
+    }}
+  </Story>
+</Canvas>

src/objects/page/page.twig

@@ -0,0 +1,8 @@
+<div class="o-page{% if class %} {{class}}{% endif %}">
+  <div class="o-page__footer">
+    {% block footer %}{% endblock %}
+  </div>
+  <div class="o-page__content">
+    {% block content %}{% endblock %}
+  </div>
+</div>