Copy in layout from the monolith

elm.json

@@ -34,6 +34,7 @@
         "Nri.Ui.Html.Attributes.V2",
         "Nri.Ui.Html.V3",
         "Nri.Ui.InputStyles.V3",
+        "Nri.Ui.Layout.V1",
         "Nri.Ui.Loading.V1",
         "Nri.Ui.Logo.V1",
         "Nri.Ui.MasteryIcon.V1",

src/Nri/Ui/Layout/V1.elm

@@ -0,0 +1,81 @@
+module Nri.Ui.Layout.V1 exposing
+    ( centeredContent, content, narrowContent
+    , sidePaddingPx, bottomMargin
+    )
+
+{-|
+
+@docs centeredContent, content, narrowContent
+@docs sidePaddingPx, bottomMargin
+
+-}
+
+import Css exposing (Style)
+import Css.Media as Media
+import Nri.Ui.MediaQuery.V1 as MediaQuery
+
+
+{-| This is meant to be reusable for any area that should fill the width of the screen
+and apply the normal max-width to its content.
+You can provide additional CSS styles (typically background or border, or flexbox styles).
+
+This is a responsive container, and will automatically add left and right padding when the
+screen gets too small.
+
+-}
+content : Style
+content =
+    Css.batch
+        [ centeredContent
+        , Media.withMedia [ MediaQuery.mobile ]
+            [ Css.padding2 Css.zero sidePaddingPx
+            ]
+        ]
+
+
+{-| Center content with a max width of the mobile breakpoint.
+-}
+centeredContent : Style
+centeredContent =
+    Css.batch
+        [ Css.maxWidth MediaQuery.mobileBreakpoint
+        , Css.width (Css.pct 100)
+        , Css.marginLeft Css.auto
+        , Css.marginRight Css.auto
+        ]
+
+
+{-| A narrower version of `content`
+-}
+narrowContent : Style
+narrowContent =
+    Css.batch
+        [ narrowCenteredContent
+        , Media.withMedia [ MediaQuery.quizEngineMobile ]
+            [ Css.padding2 Css.zero sidePaddingPx
+            ]
+        ]
+
+
+{-| Center content with a max width of the narrow breakpoint.
+-}
+narrowCenteredContent : Style
+narrowCenteredContent =
+    Css.batch
+        [ Css.maxWidth MediaQuery.quizEngineBreakpoint
+        , Css.width (Css.pct 100)
+        , Css.marginLeft Css.auto
+        , Css.marginRight Css.auto
+        ]
+
+
+sidePaddingPx : Css.Px
+sidePaddingPx =
+    Css.px 15
+
+
+{-| See <https://paper.dropbox.com/doc/UI-Style-Guide-and-Caveats--BnyI9dz1Cs5CnP2IOc276_fQAg-PvOLxeX3oyujYEzdJx5pu>
+-}
+bottomMargin : Style
+bottomMargin =
+    Css.marginBottom (Css.px 50)

styleguide-app/Examples.elm

@@ -17,6 +17,7 @@ import Examples.DisclosureIndicator as DisclosureIndicator
 import Examples.Divider as Divider
 import Examples.Fonts as Fonts
 import Examples.Heading as Heading
+import Examples.Layout as Layout
 import Examples.Loading as Loading
 import Examples.Logo as Logo
 import Examples.Menu as Menu
@@ -345,6 +346,25 @@ all =
                     HeadingState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , Layout.example
+        |> Example.wrapMsg LayoutMsg
+            (\msg ->
+                case msg of
+                    LayoutMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState LayoutState
+            (\msg ->
+                case msg of
+                    LayoutState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -805,6 +825,7 @@ type State
     | DividerState Divider.State
     | FontsState Fonts.State
     | HeadingState Heading.State
+    | LayoutState Layout.State
     | LoadingState Loading.State
     | LogoState Logo.State
     | MenuState Menu.State
@@ -847,6 +868,7 @@ type Msg
     | DividerMsg Divider.Msg
     | FontsMsg Fonts.Msg
     | HeadingMsg Heading.Msg
+    | LayoutMsg Layout.Msg
     | LoadingMsg Loading.Msg
     | LogoMsg Logo.Msg
     | MenuMsg Menu.Msg

styleguide-app/Examples/Layout.elm

@@ -0,0 +1,57 @@
+module Examples.Layout exposing (example, State, Msg)
+
+{-|
+
+@docs example, State, Msg
+
+-}
+
+import Browser.Events
+import Category exposing (Category(..))
+import Css
+import Example exposing (Example)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Events as Events
+import Json.Decode
+import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Layout.V1 as Layout
+import Nri.Ui.Svg.V1 as Svg
+import Nri.Ui.Text.V6 as Text
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Layout"
+    , version = 1
+    , categories = [ Layout ]
+    , keyboardSupport = []
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , preview = []
+    , view = \ellieLinkConfig model -> []
+    }
+
+
+{-| -}
+type alias State =
+    {}
+
+
+init : State
+init =
+    {}
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+update : Msg -> State -> ( State, Cmd Msg )
+update msg model =
+    ( model
+    , Cmd.none
+    )