Adds narrow spacing helper

NoRedInk · Jan 17, 2024 · cf1d697 · cf1d697
1 parent 76947a7
commit cf1d697
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git 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
@@ -1,20 +1,24 @@
 module Nri.Ui.Spacing.V1 exposing
     ( centeredContentWithSidePadding, centeredContent
     , centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
+    , centeredNarrowContentWithSidePadding, narrowCenteredContent
     , centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
     , pageTopWhitespace, pageTopWhitespacePx
     , pageSideWhitespace, pageSideWhitespacePx
     , pageBottomWhitespace, pageBottomWhitespacePx
     , 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