From cf1d697051e85c2d37c0e0ff985a34ddc2f44ba4 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Wed, 17 Jan 2024 12:25:03 -0700
Subject: [PATCH] Adds narrow spacing helper

---
 component-catalog/src/Examples/Spacing.elm |  4 +++
 src/Nri/Ui/Spacing/V1.elm                  | 30 +++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/component-catalog/src/Examples/Spacing.elm b/component-catalog/src/Examples/Spacing.elm
index 854d89e55..e423e1ae1 100644
--- a/component-catalog/src/Examples/Spacing.elm
+++ b/component-catalog/src/Examples/Spacing.elm
@@ -397,6 +397,10 @@ controlSettings =
                     |> asChoice
                  , ( "quizEngineCenteredContent", Spacing.quizEngineCenteredContent )
                     |> asChoice
+                 , ( "centeredNarrowContentWithSidePadding", Spacing.centeredNarrowContentWithSidePadding )
+                    |> asChoice
+                 , ( "narrowCenteredContent", Spacing.narrowCenteredContent )
+                    |> asChoice
                  , ( "centeredContentWithSidePaddingAndCustomWidth"
                    , Control.map
                         (\value ->
diff --git a/src/Nri/Ui/Spacing/V1.elm b/src/Nri/Ui/Spacing/V1.elm
index d02f4d4a2..53ea8127d 100644
--- a/src/Nri/Ui/Spacing/V1.elm
+++ b/src/Nri/Ui/Spacing/V1.elm
@@ -1,6 +1,7 @@
 module Nri.Ui.Spacing.V1 exposing
     ( centeredContentWithSidePadding, centeredContent
     , centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
+    , centeredNarrowContentWithSidePadding, narrowCenteredContent
     , centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
     , pageTopWhitespace, pageTopWhitespacePx
     , pageSideWhitespace, pageSideWhitespacePx
@@ -8,13 +9,16 @@ module Nri.Ui.Spacing.V1 exposing
     , verticalSpacerPx, horizontalSpacerPx
     )
 
-{-|
+{-| Patch changes:
+
+  - added centeredNarrowContentWithSidePadding, narrowCenteredContent
 
 
 ## Center a container on the page:
 
 @docs centeredContentWithSidePadding, centeredContent
 @docs centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
+@docs centeredNarrowContentWithSidePadding, narrowCenteredContent
 @docs centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
 
 
@@ -118,6 +122,30 @@ quizEngineCenteredContent =
     centeredContentWithCustomWidth MediaQuery.quizEngineBreakpoint
 
 
+{-| Use this style on pages with a narrow (500px) breakpoint.
+
+This is identical to `content`, except that it uses the narrow breakpoint instead of the mobile breakpoint.
+
+If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.
+
+-}
+centeredNarrowContentWithSidePadding : Style
+centeredNarrowContentWithSidePadding =
+    centeredContentWithSidePaddingAndCustomWidth MediaQuery.narrowMobileBreakpoint
+
+
+{-| Use this style on pages with a narrow (500px) breakpoint.
+
+This is identical to `centeredContent`, except that it uses the narrow breakpoint instead of the mobile breakpoint.
+
+This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.
+
+-}
+narrowCenteredContent : Style
+narrowCenteredContent =
+    centeredContentWithCustomWidth MediaQuery.narrowMobileBreakpoint
+
+
 {-| Convenience for adding the appriopriate amount of whitespace on the sides of a full-width container on the page or on the page with side padding.
 -}
 pageSideWhitespace : Style