Move css sidenav customization to a list of attributes

src/Nri/Ui/SideNav/V3.elm

@@ -1,5 +1,6 @@
 module Nri.Ui.SideNav.V3 exposing
-    ( view, Config
+    ( view, Config, NavAttribute
+    , navCss, navNotMobileCss, navMobileCss, navQuizEngineMobileCss
     , entry, entryWithChildren, html, Entry, Attribute
     , icon, custom, css, nriDescription, testId, id
     , onClick
@@ -10,7 +11,17 @@ module Nri.Ui.SideNav.V3 exposing
 
 {-|
 
-@docs view, Config
+
+# Changes from V1
+
+  - change to `NavAttribute` list-based API
+
+@docs view, Config, NavAttribute
+@docs navCss, navNotMobileCss, navMobileCss, navQuizEngineMobileCss
+
+
+## Entries
+
 @docs entry, entryWithChildren, html, Entry, Attribute
 @docs icon, custom, css, nriDescription, testId, id
 
@@ -36,6 +47,7 @@ import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Style as Style
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (..)
+import Css.Media exposing (MediaQuery)
 import Html.Styled
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
@@ -46,6 +58,7 @@ import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (PremiumDisplay)
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 import Nri.Ui.Html.V3 exposing (viewJust)
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
 
@@ -84,22 +97,75 @@ type alias Config route msg =
     { isCurrentRoute : route -> Bool
     , routeToString : route -> String
     , onSkipNav : msg
-    , css : List Style
     }
 
 
 {-| -}
-view : Config route msg -> List (Entry route msg) -> Html msg
-view config entries =
-    styled nav
+type NavAttribute
+    = NavAttribute (NavAttributeConfig -> NavAttributeConfig)
+
+
+type alias NavAttributeConfig =
+    { css : List Style
+    }
+
+
+defaultNavAttributeConfig : NavAttributeConfig
+defaultNavAttributeConfig =
+    { css =
         [ flexBasis (px 250)
         , flexShrink (num 0)
         , borderRadius (px 8)
         , backgroundColor Colors.gray96
         , padding (px 20)
         , marginRight (px 20)
-        , batch config.css
         ]
+    }
+
+
+{-| These styles are included automatically in the nav container:
+
+    [ flexBasis (px 250)
+    , flexShrink (num 0)
+    , borderRadius (px 8)
+    , backgroundColor Colors.gray96
+    , padding (px 20)
+    , marginRight (px 20)
+    ]
+
+-}
+navCss : List Style -> NavAttribute
+navCss styles =
+    NavAttribute (\config -> { config | css = List.append config.css styles })
+
+
+{-| -}
+navNotMobileCss : List Style -> NavAttribute
+navNotMobileCss styles =
+    navCss [ Css.Media.withMedia [ MediaQuery.notMobile ] styles ]
+
+
+{-| -}
+navMobileCss : List Style -> NavAttribute
+navMobileCss styles =
+    navCss [ Css.Media.withMedia [ MediaQuery.mobile ] styles ]
+
+
+{-| -}
+navQuizEngineMobileCss : List Style -> NavAttribute
+navQuizEngineMobileCss styles =
+    navCss [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
+
+
+{-| -}
+view : Config route msg -> List NavAttribute -> List (Entry route msg) -> Html msg
+view config navAttributes entries =
+    let
+        appliedNavAttributes =
+            List.foldl (\(NavAttribute f) b -> f b) defaultNavAttributeConfig navAttributes
+    in
+    styled nav
+        appliedNavAttributes.css
         []
         (viewSkipLink config.onSkipNav
             :: List.map (viewSidebarEntry config []) entries

styleguide-app/Examples/SideNav.elm

@@ -12,7 +12,7 @@ import CommonControls
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
-import Debug.Control.View as ControlView
+import Debug.Control.View as ControlView exposing (codeFromList)
 import EllieLink
 import Example exposing (Example)
 import Html.Styled.Attributes exposing (css)
@@ -89,7 +89,7 @@ view ellieLinkConfig state =
         , update = SetControls
         , settings = state.settings
         , toExampleCode =
-            \{ entries } ->
+            \{ navAttributes, entries } ->
                 [ { sectionName = "View"
                   , code =
                         String.join ""
@@ -97,11 +97,9 @@ view ellieLinkConfig state =
                             , "\n\t{ isCurrentRoute = (==) \"" ++ settings.currentRoute ++ "\""
                             , "\n\t, routeToString = identity"
                             , "\n\t, onSkipNav = SkipToContent"
-                            , "\n\t, css = " ++ Tuple.first settings.css
                             , "\n\t}"
-                            , "\n\t[ "
-                            , String.join "\n\t" (List.map Tuple.first entries)
-                            , "\n\t]"
+                            , codeFromList navAttributes
+                            , codeFromList entries
                             ]
                   }
                 ]
@@ -110,8 +108,8 @@ view ellieLinkConfig state =
         { isCurrentRoute = (==) settings.currentRoute
         , routeToString = identity
         , onSkipNav = SkipToContent
-        , css = Tuple.second settings.css
         }
+        (List.map Tuple.second settings.navAttributes)
         (List.map Tuple.second settings.entries)
     ]
 
@@ -124,7 +122,7 @@ type alias State =
 
 type alias Settings =
     { currentRoute : String
-    , css : ( String, List Css.Style )
+    , navAttributes : List ( String, SideNav.NavAttribute )
     , entries : List ( String, SideNav.Entry String Msg )
     }
 
@@ -135,29 +133,32 @@ init =
     { settings =
         Control.record Settings
             |> Control.field "currentRoute" (Control.string "#some-route")
-            |> Control.field "css"
-                (Control.maybe True
-                    (Control.choice
-                        [ ( "maxWidth"
-                          , Control.value
-                                ( "[ Css.maxWidth (Css.px 300) ]"
-                                , [ Css.maxWidth (Css.px 300) ]
-                                )
-                          )
-                        , ( "purple border"
-                          , Control.value
-                                ( "[ Css.border3 (Css.px 3) Css.dotted Colors.purple ]"
-                                , [ Css.border3 (Css.px 3) Css.dotted Colors.purple ]
-                                )
-                          )
-                        ]
-                    )
-                    |> Control.map (Maybe.withDefault ( "[]", [] ))
-                )
+            |> Control.field "navAttributes" controlNavAttributes
             |> Control.field "entries" (Control.map List.singleton (controlEntryType "#some-route"))
     }
 
 
+controlNavAttributes : Control (List ( String, SideNav.NavAttribute ))
+controlNavAttributes =
+    ControlExtra.list
+        |> ControlExtra.optionalListItem "navCss"
+            (Control.choice
+                [ ( "maxWidth"
+                  , Control.value
+                        ( "SideNav.navCss [ Css.maxWidth (Css.px 300) ]"
+                        , SideNav.navCss [ Css.maxWidth (Css.px 300) ]
+                        )
+                  )
+                , ( "purple border"
+                  , Control.value
+                        ( "SideNav.navCss [ Css.border3 (Css.px 3) Css.dotted Colors.purple ]"
+                        , SideNav.navCss [ Css.border3 (Css.px 3) Css.dotted Colors.purple ]
+                        )
+                  )
+                ]
+            )
+
+
 controlEntryType : String -> Control ( String, SideNav.Entry String Msg )
 controlEntryType href =
     Control.choice