Add Alert block to Page object (#1921)

Author: gerardo-rodriguez

.changeset/dirty-snails-impress.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Adds an optional Alert block to the Page object

src/components/alert/alert.stories.mdx

@@ -185,3 +185,7 @@ When more contrast is desired, you may also attach a theme class to the the floa
 ## Template Blocks
 
 - `content`
+
+## Alert within a Page object
+
+The Page object has an `alert` block that was designed to accept an Alert component. See the [Page with Alert example](/?path=/docs/objects-page--example-with-alert) for more details.

src/objects/page/demo/example-with-alert.twig

@@ -0,0 +1,28 @@
+{% embed '@cloudfour/objects/page/page.twig' only %}
+  {% block alert %}
+    {% include '@cloudfour/components/alert/alert.twig' with {
+      dismissable: true,
+      floating: true,
+      icon: 'cloud-slash',
+      message: 'You appear to be offline, some content may be unavailable.'
+    } only %}
+  {% endblock %}
+  {% block header %}
+    <p class="u-pad-1 t-dark">
+      Header content.
+    </p>
+  {% endblock %}
+  {% 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

@@ -1,3 +1,6 @@
+@use '../../compiled/tokens/scss/size';
+@use '../../mixins/spacing';
+
 /**
  * Page container
  *
@@ -11,7 +14,7 @@
 .o-page {
   display: grid;
   grid-template-columns: minmax(0, 1fr); // 1
-  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); // 2
+  grid-template-rows: minmax(0, auto) 0 minmax(0, 1fr) minmax(0, auto); // 2
   min-block-size: 100%;
 }
 
@@ -25,10 +28,25 @@
   grid-row: 1;
 }
 
-.o-page__content {
+/**
+ * An optional `alert` block can be used to pass an Alert component
+ *
+ * 1. The alert should overlap the content above slightly
+ */
+
+.o-page__alert {
+  @include spacing.fluid-padding-inline;
+  display: grid;
   grid-row: 2;
+  inset-block-start: calc(size.$overlap-large * -1); // 1
+  justify-content: center;
+  position: relative;
 }
 
-.o-page__footer {
+.o-page__content {
   grid-row: 3;
 }
+
+.o-page__footer {
+  grid-row: 4;
+}

src/objects/page/page.stories.mdx

@@ -11,10 +11,24 @@ import { useEffect } from '@storybook/client-api';
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import exampleDemoSource from '!!raw-loader!./demo/example.twig';
 import exampleDemo from './demo/example.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import exampleDemoWithAlertSource from '!!raw-loader!./demo/example-with-alert.twig';
+import exampleDemoWithAlert from './demo/example-with-alert.twig';
 
 <Meta
   title="Objects/Page"
   parameters={{ docs: { inlineStories: false }, layout: 'fullscreen' }}
+  decorators={[
+    (story) => {
+      useEffect(() => {
+        // Set this story's `body` element to full-height
+        document.body.style.height = '100%';
+        // Prevent Storybook's container from affecting this layout
+        document.querySelector('#root').style.display = 'contents';
+      });
+      return story();
+    },
+  ]}
 />
 
 # Page
@@ -34,14 +48,23 @@ The header block is optional.
       docs: { source: { code: exampleDemoSource } },
     }}
   >
-    {() => {
-      useEffect(() => {
-        // Set this story's `body` element to full-height
-        document.body.style.height = '100%';
-        // Prevent Storybook's container from affecting this layout
-        document.querySelector('#root').style.display = 'contents';
-      });
-      return exampleDemo();
+    {exampleDemo()}
+  </Story>
+</Canvas>
+
+## Page with Alert
+
+The Page object also has an optional `alert` block that can be used to pass an [Alert component](/?path=/docs/components-alert--basic).
+
+<Canvas>
+  <Story
+    name="Example with Alert"
+    height="400px"
+    parameters={{
+      layout: 'fullscreen',
+      docs: { source: { code: exampleDemoWithAlertSource } },
     }}
+  >
+    {exampleDemoWithAlert()}
   </Story>
 </Canvas>

src/objects/page/page.twig

@@ -4,6 +4,11 @@
       {% block header %}{% endblock %}
     </div>
   {% endif %}
+  {% if block('alert') %}
+    <div class="o-page__alert">
+      {% block alert %}{% endblock %}
+    </div>
+  {% endif %}
   <div class="o-page__content{% if content_class %} {{ content_class }}{% endif %}">
     {% block content %}{% endblock %}
   </div>

src/tokens/size/sizing.js

@@ -59,6 +59,10 @@ module.exports = {
         comment:
           'Small amount of overlap between adjacent items organized in a visual bunch.',
       },
+      large: {
+        value: modularEm(1),
+        comment: 'Larger amount of overlap between adjacent items.',
+      },
     },
   },
 };