Remove transition for prefers-reduced-motion users

src/Nri/Ui/Confetti/V2.elm

@@ -17,10 +17,10 @@ Changes from V1:
 -}
 
 import Css exposing (Color)
-import Css.Media exposing (withMediaQuery)
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Particle exposing (Particle)
 import Particle.System as ParticleSystem
 import Random exposing (Generator)
@@ -68,8 +68,7 @@ view (System system _) =
                     , Css.width (Css.pct 100)
                     , Css.height (Css.vh 100)
                     , Css.pointerEvents Css.none
-                    , withMediaQuery [ "(prefers-reduced-motion)" ]
-                        [ Css.display Css.none ]
+                    , MediaQuery.prefersReducedMotion [ Css.display Css.none ]
                     ]
                 ]
             )

src/Nri/Ui/MediaQuery/V1.elm

@@ -1,5 +1,6 @@
 module Nri.Ui.MediaQuery.V1 exposing
-    ( mobile, notMobile
+    ( anyMotion, prefersReducedMotion
+    , mobile, notMobile
     , mobileBreakpoint
     , quizEngineMobile
     , quizEngineBreakpoint
@@ -20,6 +21,8 @@ module Nri.Ui.MediaQuery.V1 exposing
             [ Css.padding (Css.px 2)
             ]
 
+@docs anyMotion, prefersReducedMotion
+
 @docs mobile, notMobile
 @docs mobileBreakpoint
 
@@ -31,8 +34,20 @@ module Nri.Ui.MediaQuery.V1 exposing
 
 -}
 
-import Css exposing (px)
-import Css.Media exposing (MediaQuery, maxWidth, minWidth, only, screen)
+import Css exposing (Style, px)
+import Css.Media exposing (MediaQuery, maxWidth, minWidth, only, screen, withMediaQuery)
+
+
+{-| -}
+anyMotion : List Style -> Style
+anyMotion =
+    withMediaQuery [ "(prefers-reduced-motion: no-preference)" ]
+
+
+{-| -}
+prefersReducedMotion : List Style -> Style
+prefersReducedMotion =
+    withMediaQuery [ "(prefers-reduced-motion)" ]
 
 
 {-| Styles using the `mobileBreakpoint` value as the maxWidth.

src/Nri/Ui/SideNav/V4.elm

@@ -121,15 +121,7 @@ type alias NavAttributeConfig msg =
 defaultNavAttributeConfig : NavAttributeConfig msg
 defaultNavAttributeConfig =
     { navLabel = Nothing
-    , css =
-        [ flexBasis (px 250)
-        , flexShrink (num 0)
-        , borderRadius (px 8)
-        , backgroundColor Colors.gray96
-        , padding (px 20)
-        , marginRight (px 20)
-        , position absolute
-        ]
+    , css = []
     , collapsible = Nothing
     }
 
@@ -187,11 +179,30 @@ view config navAttributes entries =
     let
         appliedNavAttributes =
             List.foldl (\(NavAttribute f) b -> f b) defaultNavAttributeConfig navAttributes
+
+        showNav =
+            Maybe.map .isOpen appliedNavAttributes.collapsible
+                |> Maybe.withDefault True
+
+        defaultCss =
+            [ if showNav then
+                flexBasis (px 250)
+
+              else
+                Css.flexBasis (Css.px 5)
+            , MediaQuery.anyMotion [ property "transition" "flex-basis 0.2s" ]
+            , flexShrink (num 0)
+            , borderRadius (px 8)
+            , backgroundColor Colors.gray96
+            , padding (px 20)
+            , marginRight (px 20)
+            , position absolute
+            ]
     in
-    div [ Attributes.css appliedNavAttributes.css ]
+    div [ Attributes.css (defaultCss ++ appliedNavAttributes.css) ]
         [ viewSkipLink config.onSkipNav
         , viewJust viewOpenCloseButton appliedNavAttributes.collapsible
-        , viewNav config appliedNavAttributes entries
+        , viewNav config appliedNavAttributes entries showNav
         ]
 
 
@@ -226,11 +237,16 @@ viewOpenCloseButton { isOpen, toggle } =
         ]
 
 
-viewNav : Config route msg -> NavAttributeConfig msg -> List (Entry route msg) -> Html msg
-viewNav config appliedNavAttributes entries =
+viewNav : Config route msg -> NavAttributeConfig msg -> List (Entry route msg) -> Bool -> Html msg
+viewNav config appliedNavAttributes entries showNav =
     nav
         ([ Maybe.map Aria.label appliedNavAttributes.navLabel
          , Just (Attributes.id sidenavId)
+         , if showNav then
+            Nothing
+
+           else
+            Just (Attributes.css [ Css.display Css.none ])
          ]
             |> List.filterMap identity
         )

src/Nri/Ui/Switch/V2.elm

@@ -36,13 +36,13 @@ import Accessibility.Styled as Html exposing (Html)
 import Accessibility.Styled.Aria as Aria
 import Css exposing (Color, Style)
 import Css.Global as Global
-import Css.Media
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
 import Nri.Ui.Colors.Extra exposing (toCssString)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as Extra
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Nri.Ui.Svg.V1 exposing (Svg)
 import Svg.Styled as Svg
 import Svg.Styled.Attributes as SvgAttributes
@@ -373,6 +373,4 @@ stroke color =
 
 transition : String -> Css.Style
 transition transitionRules =
-    Css.Media.withMediaQuery
-        [ "(prefers-reduced-motion: no-preference)" ]
-        [ Css.property "transition" transitionRules ]
+    MediaQuery.anyMotion [ Css.property "transition" transitionRules ]