mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 20:27:36 +03:00
Adds defaultCaret, bypassing DisclosureIndicator
This commit is contained in:
Tessa Kelly
parent
d6c716f9ce
commit
9a7fa05d4e
@ -2,6 +2,7 @@ module Nri.Ui.Accordion.V3 exposing
|
||||
( view, HeaderLevel(..)
|
||||
, AccordionEntry(..), Entry
|
||||
, StyleOptions, styleAccordion
|
||||
, defaultCaret
|
||||
)
|
||||
|
||||
{-|
|
||||
@ -21,15 +22,13 @@ module Nri.Ui.Accordion.V3 exposing
|
||||
|
||||
## Example
|
||||
|
||||
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
|
||||
|
||||
view : Model -> Html Msg
|
||||
view model =
|
||||
div []
|
||||
[ Accordion.view
|
||||
{ entries =
|
||||
[ AccordionEntry
|
||||
{ caret = \isOpen -> DisclosureIndicator.large [ marginRight (px 8) ] isOpen
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content = \() -> text "Accordion Content"
|
||||
, entryClass = "a-class-distinguishing-this-accordion-from-others-on-the-page"
|
||||
, headerContent = text "Accordion Header"
|
||||
@ -56,6 +55,7 @@ module Nri.Ui.Accordion.V3 exposing
|
||||
@docs view, HeaderLevel
|
||||
@docs AccordionEntry, Entry
|
||||
@docs StyleOptions, styleAccordion
|
||||
@docs defaultCaret
|
||||
|
||||
-}
|
||||
|
||||
@ -67,9 +67,23 @@ import Css.Global
|
||||
import Html.Styled.Attributes as Attributes
|
||||
import Html.Styled.Events exposing (onClick)
|
||||
import Html.Styled.Keyed
|
||||
import Nri.Ui.AnimatedIcon.V1 as AnimatedIcon
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.FocusRing.V1 as FocusRing
|
||||
import Nri.Ui.Fonts.V1 as Fonts
|
||||
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
|
||||
import Nri.Ui.Svg.V1 as Svg
|
||||
|
||||
|
||||
{-| -}
|
||||
defaultCaret : Bool -> Html msg
|
||||
defaultCaret isOpen =
|
||||
AnimatedIcon.arrowRightDown isOpen
|
||||
|> Svg.withColor Colors.azure
|
||||
|> Svg.withWidth (Css.px 17)
|
||||
|> Svg.withHeight (Css.px 17)
|
||||
|> Svg.withCss [ Css.marginRight (Css.px 8) ]
|
||||
|> Svg.toHtml
|
||||
|
||||
|
||||
{-| -}
|
||||
|
||||
@ -26,7 +26,6 @@ import KeyboardSupport exposing (Key(..))
|
||||
import Nri.Ui.Accordion.V3 as Accordion exposing (AccordionEntry(..))
|
||||
import Nri.Ui.Colors.Extra as ColorsExtra
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
|
||||
import Nri.Ui.FocusRing.V1 as FocusRing
|
||||
import Nri.Ui.Svg.V1 as Svg
|
||||
import Nri.Ui.Text.V6 as Text
|
||||
@ -58,11 +57,11 @@ example =
|
||||
-- component might look like
|
||||
Html.div []
|
||||
[ Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
|
||||
[ defaultCaret False
|
||||
[ Accordion.defaultCaret False
|
||||
, Text.smallBody [ Text.plaintext "Closed" ]
|
||||
]
|
||||
, Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
|
||||
[ defaultCaret True
|
||||
[ Accordion.defaultCaret True
|
||||
, Text.smallBody [ Text.plaintext "Open" ]
|
||||
]
|
||||
, Text.caption [ Text.plaintext "Accordion content." ]
|
||||
@ -87,11 +86,6 @@ example =
|
||||
}
|
||||
|
||||
|
||||
defaultCaret : Bool -> Html msg
|
||||
defaultCaret =
|
||||
DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml
|
||||
|
||||
|
||||
{-| -}
|
||||
view : EllieLink.Config -> State -> List (Html Msg)
|
||||
view ellieLinkConfig model =
|
||||
@ -106,10 +100,7 @@ view ellieLinkConfig model =
|
||||
, update = UpdateControls
|
||||
, settings = model.settings
|
||||
, mainType = Just "RootHtml.Html String"
|
||||
, extraCode =
|
||||
[ "import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator"
|
||||
, "import Nri.Ui.Svg.V1 as Svg"
|
||||
]
|
||||
, extraCode = [ "import Nri.Ui.Svg.V1 as Svg" ]
|
||||
, renderExample = Code.unstyledView
|
||||
, toExampleCode =
|
||||
\settings ->
|
||||
@ -162,7 +153,7 @@ view ellieLinkConfig model =
|
||||
}
|
||||
[]
|
||||
, AccordionEntry
|
||||
{ caret = defaultCaret
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content = \_ -> Html.text "🍎 There are many kinds of apples! Apples are more genetically diverse than humans. The genetic diversity of apples means that to preserve delicious apple varieties, growers must use grafting rather than seeds. In the apple market, clones have already taken over! 🍏"
|
||||
, entryClass = "accordion-example"
|
||||
, headerContent = Html.text "Apples (has children)"
|
||||
@ -172,7 +163,7 @@ view ellieLinkConfig model =
|
||||
, toggle = Just (Toggle 1)
|
||||
}
|
||||
[ AccordionEntry
|
||||
{ caret = defaultCaret
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content =
|
||||
\_ ->
|
||||
Html.div []
|
||||
@ -192,7 +183,7 @@ view ellieLinkConfig model =
|
||||
}
|
||||
[]
|
||||
, AccordionEntry
|
||||
{ caret = defaultCaret
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content =
|
||||
\_ ->
|
||||
Html.div []
|
||||
@ -212,7 +203,7 @@ view ellieLinkConfig model =
|
||||
}
|
||||
[]
|
||||
, AccordionEntry
|
||||
{ caret = defaultCaret
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content =
|
||||
\_ ->
|
||||
Html.div []
|
||||
@ -233,7 +224,7 @@ view ellieLinkConfig model =
|
||||
[]
|
||||
]
|
||||
, AccordionEntry
|
||||
{ caret = defaultCaret
|
||||
{ caret = Accordion.defaultCaret
|
||||
, content = \_ -> Html.text "🍊 I don't know anything about oranges! Except: YUM! 🍊"
|
||||
, entryClass = "accordion-example"
|
||||
, headerContent = Html.text "Oranges"
|
||||
@ -355,11 +346,8 @@ initSettings =
|
||||
controlIcon : Control ( String, Bool -> Html Msg )
|
||||
controlIcon =
|
||||
Control.choice
|
||||
[ ( "DisclosureIndicator"
|
||||
, Control.value
|
||||
( "DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml"
|
||||
, DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml
|
||||
)
|
||||
[ ( "defaultCaret"
|
||||
, Control.value ( "Accordion.defaultCaret", Accordion.defaultCaret )
|
||||
)
|
||||
, ( "none", Control.value ( "\\_ -> text \"\"", \_ -> Html.text "" ) )
|
||||
, ( "UiIcon"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user