mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-20 20:21:33 +03:00
94 lines
2.2 KiB
Elm
94 lines
2.2 KiB
Elm
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
|
|
]
|
|
]
|