mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 19:21:29 +03:00
137 lines
3.5 KiB
Elm
137 lines
3.5 KiB
Elm
module Examples.IconExamples exposing
|
|
( preview
|
|
, viewSettings
|
|
, view, viewWithCustomStyles
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs preview
|
|
@docs viewSettings
|
|
@docs view, viewWithCustomStyles
|
|
|
|
-}
|
|
|
|
import Css
|
|
import Css.Global
|
|
import Html.Styled as Html exposing (Html)
|
|
import Html.Styled.Attributes exposing (css)
|
|
import Nri.Ui.Checkbox.V5 as Checkbox
|
|
import Nri.Ui.Colors.V1 as Colors
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Svg.V1 as Svg
|
|
import Nri.Ui.Text.V6 as Text
|
|
|
|
|
|
{-| -}
|
|
preview : List Svg.Svg -> List (Html msg)
|
|
preview icons =
|
|
[ Html.div
|
|
[ css
|
|
[ Css.displayFlex
|
|
, Css.flexWrap Css.wrap
|
|
, Css.property "gap" "10px"
|
|
, Css.color Colors.gray45
|
|
]
|
|
]
|
|
(List.map
|
|
(Svg.withWidth (Css.px 30) >> Svg.withHeight (Css.px 30) >> Svg.toHtml)
|
|
icons
|
|
)
|
|
]
|
|
|
|
|
|
{-| -}
|
|
viewSettings : (Bool -> msg) -> Bool -> Html msg
|
|
viewSettings toggle showIconName =
|
|
Checkbox.viewWithLabel
|
|
{ identifier = "show-icon-name-checkbox"
|
|
, label = "Show names"
|
|
, setterMsg = toggle
|
|
, selected = Checkbox.selectedFromBool showIconName
|
|
, disabled = False
|
|
, theme = Checkbox.Square
|
|
}
|
|
|
|
|
|
{-| -}
|
|
view : Bool -> String -> List ( String, Svg.Svg ) -> Html msg
|
|
view showIconName headerText icons =
|
|
let
|
|
defaultStyles =
|
|
[ Css.height (Css.px 25)
|
|
, Css.width (Css.px 25)
|
|
, Css.margin (Css.px 4)
|
|
, Css.color Colors.gray45
|
|
]
|
|
in
|
|
viewWithCustomStyles showIconName
|
|
headerText
|
|
(List.map (\( name, svg ) -> ( name, svg, defaultStyles )) icons)
|
|
|
|
|
|
{-| -}
|
|
viewWithCustomStyles : Bool -> String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg
|
|
viewWithCustomStyles showIconName headerText icons =
|
|
Html.section
|
|
[ css
|
|
[ Css.displayFlex
|
|
, Css.alignItems Css.center
|
|
, Css.property "gap" "10px"
|
|
, Css.marginTop (Css.px 10)
|
|
]
|
|
]
|
|
[ Heading.h2
|
|
[ Heading.css
|
|
[ Css.width (Css.px 150)
|
|
, Css.fontSize (Css.px 16)
|
|
, Css.lineHeight (Css.num 1.2)
|
|
, Css.fontWeight (Css.int 700)
|
|
]
|
|
]
|
|
[ Html.text headerText ]
|
|
, Html.div
|
|
[ css
|
|
[ Css.displayFlex
|
|
, Css.flexWrap Css.wrap
|
|
, Css.property "gap" "10px"
|
|
]
|
|
]
|
|
(List.map (viewIcon showIconName) icons)
|
|
]
|
|
|
|
|
|
viewIcon : Bool -> ( String, Svg.Svg, List Css.Style ) -> Html msg
|
|
viewIcon showIconName ( name, icon, style ) =
|
|
Html.div
|
|
[ css
|
|
[ Css.displayFlex
|
|
, Css.alignItems Css.center
|
|
, Css.backgroundColor Colors.gray96
|
|
, Css.borderRadius (Css.px 8)
|
|
, Css.padding2 (Css.px 5) (Css.px 10)
|
|
, Css.hover
|
|
[ Css.backgroundColor Colors.glacier
|
|
, Css.color Colors.azure
|
|
, Css.Global.descendants
|
|
[ Css.Global.selector "svg"
|
|
[ Css.color Colors.azure
|
|
]
|
|
]
|
|
]
|
|
]
|
|
]
|
|
[ icon
|
|
|> Svg.withCss style
|
|
|> Svg.toHtml
|
|
, Text.smallBody
|
|
[ Text.plaintext name
|
|
, Text.css <|
|
|
if showIconName then
|
|
[]
|
|
|
|
else
|
|
[ Css.display Css.none ]
|
|
]
|
|
]
|