feat: add utilities to hide and display elements based on screen size

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;

src/scss/iati.scss

@@ -4,6 +4,7 @@
 @use "typography";
 @use "components";
 @use "layout";
+@use "utilities";
 
 // Expose tokens as Sass variables
 @forward "tokens";

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>

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);
+  }
+}

src/scss/utilities/_index.scss

@@ -0,0 +1 @@
+@use "display";