From 9c7450d85c02c60dbcddc940d1709e27e383d2c3 Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:42:10 +0300
Subject: [PATCH] feat: add utilities to hide and display elements based on
 screen size

---
 src/scss/components/button/_button.scss  |  4 +++-
 src/scss/iati.scss                       |  1 +
 src/scss/layout/header/header.stories.ts |  2 +-
 src/scss/utilities/_display.scss         | 15 +++++++++++++++
 src/scss/utilities/_index.scss           |  1 +
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/utilities/_display.scss
 create mode 100644 src/scss/utilities/_index.scss

diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss
index 47f2aa4..ca96dca 100644
--- a/src/scss/components/button/_button.scss
+++ b/src/scss/components/button/_button.scss
@@ -3,7 +3,9 @@
 @use "../../tokens/spacing" as *;
 
 .iati-button {
-  display: inline-flex;
+  --display: inline-flex; // Used by .display--* utilities
+
+  display: var(--display);
   align-items: center;
   justify-content: center;
   gap: 0.25em;
diff --git a/src/scss/iati.scss b/src/scss/iati.scss
index 12bc329..9a99298 100644
--- a/src/scss/iati.scss
+++ b/src/scss/iati.scss
@@ -4,6 +4,7 @@
 @use "typography";
 @use "components";
 @use "layout";
+@use "utilities";
 
 // Expose tokens as Sass variables
 @forward "tokens";
diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts
index ee2348c..9ddf282 100644
--- a/src/scss/layout/header/header.stories.ts
+++ b/src/scss/layout/header/header.stories.ts
@@ -52,7 +52,7 @@ export const Header: Story = {
         <div class="iati-header__container iati-brand-background__content">
           <div class="iati-header__actions">
             ${CountrySwitcher.render?.call({ ...args })}
-            <button class="iati-button iati-button--light">
+            <button class="iati-button iati-button--light hide display--sm">
               <span>Help Docs</span>
               <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
             </button>
diff --git a/src/scss/utilities/_display.scss b/src/scss/utilities/_display.scss
new file mode 100644
index 0000000..3be4d94
--- /dev/null
+++ b/src/scss/utilities/_display.scss
@@ -0,0 +1,15 @@
+@use "../tokens/screens" as *;
+
+:root {
+  --display: block;
+}
+
+.hide {
+  display: none;
+}
+
+.display--sm {
+  @media (min-width: $screen-sm) {
+    display: var(--display);
+  }
+}
diff --git a/src/scss/utilities/_index.scss b/src/scss/utilities/_index.scss
new file mode 100644
index 0000000..51eb377
--- /dev/null
+++ b/src/scss/utilities/_index.scss
@@ -0,0 +1 @@
+@use "display";