mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-22 13:12:04 +03:00
e2907d9ba2
* Use elm-css 16.0.0 * 💀 Ui.Checkbox V1 and V2 * s/Css.Foreign/Css.Global/g * 💀 Nri.Ui.Styles.V1 * 💀 BannerAlert.V1 * 💀 Modal.V1 * 💀 Dropdown.V1 * 💀 Select.V1 and V2 * 💀 Alert.V1 * 💀 Button.V1 and V2 * 💀 Divider.V1 * 💀 Icon.V1 and V2 * 💀 Outline.V1 * 💀 SegmentedControl.V1-V5 * 💀 TextArea.V1 and V2 * 💀 TextInput.V1 * delete the rest of the modules * actually more deletions * InputStyles v1 is unused * move to src-0.18 * do the 0.19 upgrade * select options are addressable by index * elm-css 16 * update scripts * elm-format * Update V2.elm * put the nbsp back * elm-format validation for both versions
90 lines
2.1 KiB
Elm
90 lines
2.1 KiB
Elm
module Nri.Ui.DisclosureIndicator.V1 exposing (view, viewInline)
|
|
|
|
{-| A caret that indicates that a section can expand. When the isOpen attribute is passed in as True, it will rotate. A "disclosure indicator" is a standard term for something that indicates that section can expand.
|
|
|
|
@docs view, viewInline
|
|
|
|
-}
|
|
|
|
import Css exposing (..)
|
|
import Html.Styled as Html exposing (..)
|
|
import Html.Styled.Attributes as Attributes exposing (alt, type_)
|
|
import Nri.Ui.AssetPath as AssetPath
|
|
|
|
|
|
type alias Config =
|
|
{ isOpen : Bool
|
|
, label : String
|
|
}
|
|
|
|
|
|
type alias Assets r =
|
|
{ r
|
|
| icons_arrowDownBlue_svg : AssetPath.Asset
|
|
}
|
|
|
|
|
|
{-| -}
|
|
view : Assets a -> Config -> Html msg
|
|
view =
|
|
viewWithStyle headerStyle
|
|
|
|
|
|
{-| The inline variant of the indicator is smaller and occupies
|
|
less vertical space so it can be inlined in lists or tables
|
|
without breaking text flow. Also, it rotates from right to
|
|
down direction when expanding.
|
|
-}
|
|
viewInline : Assets a -> Config -> Html msg
|
|
viewInline =
|
|
viewWithStyle inlineStyle
|
|
|
|
|
|
viewWithStyle : (Bool -> Css.Style) -> Assets a -> Config -> Html msg
|
|
viewWithStyle style assets config =
|
|
let
|
|
label =
|
|
if config.isOpen then
|
|
"hide " ++ config.label
|
|
|
|
else
|
|
"show " ++ config.label
|
|
in
|
|
img
|
|
[ alt label
|
|
, Attributes.src <| AssetPath.url <| assets.icons_arrowDownBlue_svg
|
|
, Attributes.css [ style config.isOpen ]
|
|
]
|
|
[]
|
|
|
|
|
|
headerStyle : Bool -> Css.Style
|
|
headerStyle isOpen =
|
|
Css.batch
|
|
[ marginRight (px 10)
|
|
, width (px 15)
|
|
, height (px 15)
|
|
, cursor pointer
|
|
, property "transition" "transform 0.2s"
|
|
, if isOpen then
|
|
transform (rotate <| deg 0)
|
|
|
|
else
|
|
transform (rotate <| deg -90)
|
|
]
|
|
|
|
|
|
inlineStyle : Bool -> Css.Style
|
|
inlineStyle isOpen =
|
|
Css.batch
|
|
[ padding2 (px 0) (px 8)
|
|
, height (px 9)
|
|
, cursor pointer
|
|
, property "transition" "transform 0.1s"
|
|
, if isOpen then
|
|
transform (rotate <| deg 0)
|
|
|
|
else
|
|
transform (rotate <| deg -90)
|
|
]
|