Merge pull request #853 from NoRedInk/tessa/shadows

Adds Shadows

elm.json

@@ -51,6 +51,7 @@
         "Nri.Ui.RadioButton.V4",
         "Nri.Ui.SegmentedControl.V14",
         "Nri.Ui.Select.V8",
+        "Nri.Ui.Shadows.V1",
         "Nri.Ui.SideNav.V1",
         "Nri.Ui.SideNav.V2",
         "Nri.Ui.Slide.V1",

src/Nri/Ui/Shadows/V1.elm

@@ -0,0 +1,30 @@
+module Nri.Ui.Shadows.V1 exposing (low, medium, high)
+
+{-| We use three levels of shadow:
+
+@docs low, medium, high
+
+-}
+
+import Css exposing (Style)
+
+
+{-| Low: for standard containers and similar elements like large messages
+-}
+low : Style
+low =
+    Css.property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);"
+
+
+{-| Medium: for larger, more prominent containers like Container.Pillow and marketing site cards
+-}
+medium : Style
+medium =
+    Css.property "box-shadow" "0 0.5px 0.7px hsl(0deg 0% 0% / 0.075), 0 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.075), 0 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.075), 5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.075);"
+
+
+{-| High: for “floating” elements like tooltips, popovers, and modals
+-}
+high : Style
+high =
+    Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"

styleguide-app/Examples.elm

@@ -25,6 +25,7 @@ import Examples.Pennant as Pennant
 import Examples.RadioButton as RadioButton
 import Examples.SegmentedControl as SegmentedControl
 import Examples.Select as Select
+import Examples.Shadows as Shadows
 import Examples.SlideModal as SlideModal
 import Examples.SortableTable as SortableTable
 import Examples.Sprite as Sprite
@@ -495,6 +496,25 @@ all =
                     SelectState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , Shadows.example
+        |> Example.wrapMsg ShadowsMsg
+            (\msg ->
+                case msg of
+                    ShadowsMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ShadowsState
+            (\msg ->
+                case msg of
+                    ShadowsState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -773,6 +793,7 @@ type State
     | RadioButtonState RadioButton.State
     | SegmentedControlState SegmentedControl.State
     | SelectState Select.State
+    | ShadowsState Shadows.State
     | SlideModalState SlideModal.State
     | SortableTableState SortableTable.State
     | SpriteState Sprite.State
@@ -813,6 +834,7 @@ type Msg
     | RadioButtonMsg RadioButton.Msg
     | SegmentedControlMsg SegmentedControl.Msg
     | SelectMsg Select.Msg
+    | ShadowsMsg Shadows.Msg
     | SlideModalMsg SlideModal.Msg
     | SortableTableMsg SortableTable.Msg
     | SpriteMsg Sprite.Msg

styleguide-app/Examples/Shadows.elm

@@ -0,0 +1,93 @@
+module Examples.Shadows exposing (example, State, Msg)
+
+{-|
+
+@docs example, State, Msg
+
+-}
+
+import Category exposing (Category(..))
+import Css exposing (Style)
+import Example exposing (Example)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attributes exposing (css)
+import Nri.Ui.Shadows.V1 as Shadows
+import Nri.Ui.Text.V6 as Text
+import ViewHelpers
+
+
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Shadows"
+    , version = 1
+    , categories = [ Atoms ]
+    , keyboardSupport = []
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , preview = List.map (\( _, style, _ ) -> viewPreviewShadow style) allShadows
+    , view =
+        \_ ->
+            [ List.map (\( name, style, usage ) -> ( name, viewShadow ( usage, style ) )) allShadows
+                |> ViewHelpers.viewExamples
+            ]
+    }
+
+
+allShadows : List ( String, Style, String )
+allShadows =
+    [ ( "Shadows.low"
+      , Shadows.low
+      , "Use for standard containers and similar elements like large messages."
+      )
+    , ( "Shadows.medium"
+      , Shadows.medium
+      , "Use for larger, more prominent containers like Container.Pillow and marketing site cards."
+      )
+    , ( "Shadows.high"
+      , Shadows.high
+      , "Use for “floating” elements like tooltips, popovers, and modals"
+      )
+    ]
+
+
+viewPreviewShadow : Css.Style -> Html msg
+viewPreviewShadow shadow =
+    Html.div
+        [ Attributes.css
+            [ Css.padding2 (Css.px 8) Css.zero
+            , Css.margin2 (Css.px 4) Css.zero
+            , Css.borderRadius (Css.px 4)
+            , Css.height (Css.px 14)
+            , shadow
+            ]
+        ]
+        []
+
+
+viewShadow : ( String, Css.Style ) -> Html msg
+viewShadow ( usageGuidance, shadow ) =
+    Html.div
+        [ Attributes.css
+            [ Css.padding2 (Css.px 10) Css.zero
+            , Css.margin2 (Css.px 20) (Css.px 4)
+            , Css.borderRadius (Css.px 8)
+            , Css.height (Css.px 16)
+            , shadow
+            ]
+        ]
+        [ Text.smallBodyGray
+            [ Text.css [ Css.textAlign Css.center ]
+            , Text.plaintext usageGuidance
+            ]
+        ]