Add narrow (500px) helpers to Spacing

component-catalog/src/Examples/Spacing.elm

@@ -250,33 +250,67 @@ view ellieLinkConfig state =
             , sort = Nothing
             }
         , Table.string
-            { header = "Content alignment"
-            , value = .alignment
+            { header = "Content max-width"
+            , value = .maxWidth
             , width = Css.pct 10
             , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
             , sort = Nothing
             }
         , Table.string
-            { header = "Content max-width"
-            , value = .maxWidth
+            { header = "Side padding"
+            , value = .sidePadding
             , width = Css.pct 10
             , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
             , sort = Nothing
             }
         , Table.string
-            { header = "Side padding"
-            , value = .sidePadding
+            { header = "Relevant breakpoint"
+            , value = .breakpoint
             , width = Css.pct 10
             , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
             , sort = Nothing
             }
         ]
-        [ { name = "centeredContentWithSidePadding", alignment = "Centered", maxWidth = "1000px", sidePadding = "when viewport <= 970px" }
-        , { name = "centeredContent", alignment = "Centered", maxWidth = "1000px", sidePadding = "0px" }
-        , { name = "centeredQuizEngineContentWithSidePadding", alignment = "Centered", maxWidth = "750px", sidePadding = "when viewport <= 720px" }
-        , { name = "centeredQuizEngineContent", alignment = "Centered", maxWidth = "750px", sidePadding = "0px" }
-        , { name = "centeredContentWithSidePaddingAndCustomWidth", alignment = "Centered", maxWidth = "(customizable)", sidePadding = "when viewport <= (custom breakpoint value - 30)" }
-        , { name = "centeredContentWithCustomWidth", alignment = "Centered", maxWidth = "(customizable)", sidePadding = "0px" }
+        [ { name = "centeredContentWithSidePadding"
+          , maxWidth = "1000px"
+          , sidePadding = "when viewport <= 970px"
+          , breakpoint = "MediaQuery.mobileBreakpoint"
+          }
+        , { name = "centeredContent"
+          , maxWidth = "1000px"
+          , sidePadding = "0px"
+          , breakpoint = "MediaQuery.mobileBreakpoint"
+          }
+        , { name = "centeredQuizEngineContentWithSidePadding"
+          , maxWidth = "750px"
+          , sidePadding = "when viewport <= 720px"
+          , breakpoint = "MediaQuery.quizEngineMobileBreakpoint"
+          }
+        , { name = "centeredQuizEngineContent"
+          , maxWidth = "750px"
+          , sidePadding = "0px"
+          , breakpoint = "MediaQuery.quizEngineMobileBreakpoint"
+          }
+        , { name = "centeredNarrowContentWithSidePadding"
+          , maxWidth = "500px"
+          , sidePadding = "when viewport <= 470px"
+          , breakpoint = "MediaQuery.narrowMobileBreakpoint"
+          }
+        , { name = "centeredNarrowContent"
+          , maxWidth = "500px"
+          , sidePadding = "0px"
+          , breakpoint = "MediaQuery.narrowMobileBreakpoint"
+          }
+        , { name = "centeredContentWithSidePaddingAndCustomWidth"
+          , maxWidth = "(customizable)"
+          , sidePadding = "when viewport <= (custom breakpoint value - 30)"
+          , breakpoint = "(customizable)"
+          }
+        , { name = "centeredContentWithCustomWidth"
+          , maxWidth = "(customizable)"
+          , sidePadding = "0px"
+          , breakpoint = "(customizable)"
+          }
         ]
     , Heading.h2 [ Heading.plaintext "Constants", Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ]
     , Table.view []
@@ -363,6 +397,10 @@ controlSettings =
                     |> asChoice
                  , ( "quizEngineCenteredContent", Spacing.quizEngineCenteredContent )
                     |> asChoice
+                 , ( "centeredNarrowContentWithSidePadding", Spacing.centeredNarrowContentWithSidePadding )
+                    |> asChoice
+                 , ( "narrowCenteredContent", Spacing.narrowCenteredContent )
+                    |> asChoice
                  , ( "centeredContentWithSidePaddingAndCustomWidth"
                    , Control.map
                         (\value ->

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