From 7060113940e9dc4d91f8ff6e146f605c66c832c0 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Tue, 5 Nov 2024 16:51:27 +0100
Subject: [PATCH] Add a `au-u-height-full` utility

This is common enough to warrant a new utility.
---
 stories/4-utilities/Heights.stories.mdx | 51 +++++++++++++++++++++++++
 styles/_a-utilities.scss                |  1 +
 styles/utilities/_u-heights.scss        |  3 ++
 3 files changed, 55 insertions(+)
 create mode 100644 stories/4-utilities/Heights.stories.mdx
 create mode 100644 styles/utilities/_u-heights.scss

diff --git a/stories/4-utilities/Heights.stories.mdx b/stories/4-utilities/Heights.stories.mdx
new file mode 100644
index 000000000..0c382ad87
--- /dev/null
+++ b/stories/4-utilities/Heights.stories.mdx
@@ -0,0 +1,51 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Utilities/Heights" />
+
+<style>{`
+  .sbdocs-p,
+  .sbdocs-ul,
+  .sbdocs-li,
+  .sbdocs-p code {
+    font-weight: 400;
+    font-size: 1.6rem;
+  }
+
+  .sbdocs-a {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--au-font);
+    transition: color var(--au-transition), text-decoration var(--au-transition);
+    font-weight: var(--au-regular);
+    text-decoration: underline;
+    text-decoration-color: var(--au-blue-300);
+    color: var(--au-blue-700);
+  }
+
+  .sbdocs-a:visited {
+    color: var(--au-blue-700);
+  }
+
+  .sbdocs-a:hover,
+  .sbdocs-a:focus {
+    color: var(--au-blue-900);
+    text-decoration-color: var(--au-blue-200);
+  }
+
+  .sbdocs-a:focus {
+    outline: var(--au-outline);
+    outline-offset: var(--au-outline-offset);
+  }
+
+  code {
+    font-family: courier, monospace;
+  }
+
+  .os-content {
+    background-color: var(--au-gray-100);
+  }
+`}</style>
+
+# Heights
+
+`.au-u-height-full`: 100%
diff --git a/styles/_a-utilities.scss b/styles/_a-utilities.scss
index 4967a4edc..4e9f8fe6d 100644
--- a/styles/_a-utilities.scss
+++ b/styles/_a-utilities.scss
@@ -9,6 +9,7 @@
 @import "./utilities/u-background";
 @import "./utilities/u-break-word";
 @import "./utilities/u-headings";
+@import "./utilities/u-heights";
 @import "./utilities/u-hide";
 @import "./utilities/u-flex";
 @import "./utilities/u-font-family";
diff --git a/styles/utilities/_u-heights.scss b/styles/utilities/_u-heights.scss
new file mode 100644
index 000000000..951989646
--- /dev/null
+++ b/styles/utilities/_u-heights.scss
@@ -0,0 +1,3 @@
+.au-u-height-full {
+  height: 100% !important;
+}