view -> medium, large

src/Nri/Ui/DisclosureIndicator/V2.elm

@@ -1,4 +1,4 @@
-module Nri.Ui.DisclosureIndicator.V2 exposing (view)
+module Nri.Ui.DisclosureIndicator.V2 exposing (medium, large)
 
 {-|
 
@@ -6,19 +6,16 @@ module Nri.Ui.DisclosureIndicator.V2 exposing (view)
 # Changes from V1
 
   - Removes dependency on Icon that makes versioned assets hard to work with
-  - Allows for customized size and styles with a single `view` function
+  - Renames the helpers to `medium` and `large`
   - Removes `Config` in favor of an explicit type annotation
 
-(If you need the old `view` and `viewInline` styles, please copy the configurations
-from the styleguide examples.)
-
 
 # About:
 
 A caret that indicates that a section can expand and collapse. When `isOpen` is True, the caret will rotate down.
 "Disclosure indicator" is a standard term for something that indicates that section can expand.
 
-@docs view
+@docs medium, large
 
 -}
 
@@ -30,6 +27,18 @@ import Nri.Ui.SpriteSheet exposing (arrowLeft)
 import Nri.Ui.Svg.V1 as NriSvg
 
 
+{-| -}
+medium : List Css.Style -> Bool -> Html msg
+medium styles isOpen =
+    view { isOpen = isOpen, size = px 15, styles = styles }
+
+
+{-| -}
+large : List Css.Style -> Bool -> Html msg
+large styles isOpen =
+    view { isOpen = isOpen, size = px 17, styles = styles }
+
+
 {-| -}
 view :
     { isOpen : Bool

styleguide-app/Examples/DisclosureIndicator.elm

@@ -17,8 +17,8 @@ import Nri.Ui.Fonts.V1 as Fonts
 
 {-| -}
 type alias State =
-    { mediumState : Bool
+    { largeState : Bool
-    , smallState : Bool
+    , mediumState : Bool
     }
 
 
@@ -28,38 +28,20 @@ example parentMessage state =
     { name = "Nri.Ui.DisclosureIndicator.V2"
     , category = Widgets
     , content =
-        [ viewExample ToggleMedium
+        [ viewExample ToggleLarge
+            state.largeState
+            (Css.px 17)
+            (DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState)
+            ("DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] True"
+                ++ "\nI'm a 17px caret icon."
+            )
+        , viewExample ToggleMedium
             state.mediumState
-            (Css.px 20)
+            (Css.px 15)
-            (DisclosureIndicator.view
+            (DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState)
-                { isOpen = state.mediumState
+            ("DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] True"
-                , size = Css.px 15
+                ++ "\nI'm a 15px caret icon."
-                , styles = [ Css.marginRight (Css.px 10) ]
-                }
             )
-            """
-            DisclosureIndicator.view
-                { isOpen = state.mediumState
-                , size = Css.px 15
-                , styles = [ Css.marginRight (Css.px 10) ]
-                }
-            """
-        , viewExample ToggleSmall
-            state.smallState
-            (Css.px 16)
-            (DisclosureIndicator.view
-                { isOpen = state.smallState
-                , size = Css.px 9
-                , styles = [ Css.paddingRight (Css.px 8) ]
-                }
-            )
-            """
-            DisclosureIndicator.view
-                { isOpen = state.smallState
-                , size = Css.px 9
-                , styles = [ Css.paddingRight (Css.px 8) ]
-                }
-            """
         ]
             |> List.map (Html.map parentMessage)
     }
@@ -67,7 +49,7 @@ example parentMessage state =
 
 viewExample : msg -> Bool -> Css.Px -> Html.Html msg -> String -> Html.Html msg
 viewExample toggle isOpen fontSize disclosureView disclosureCode =
-    Html.div []
+    Html.div [ css [ Css.margin2 (Css.px 16) Css.zero ] ]
         [ Html.div []
             [ Html.button
                 [ css
@@ -81,7 +63,7 @@ viewExample toggle isOpen fontSize disclosureView disclosureCode =
                 , onClick toggle
                 ]
                 [ disclosureView
-                , Html.text "Open for code example"
+                , Html.text "Toggle me!"
                 ]
             ]
         , if isOpen then
@@ -106,23 +88,23 @@ code copy =
 {-| -}
 init : State
 init =
-    { mediumState = False
+    { largeState = False
-    , smallState = False
+    , mediumState = False
     }
 
 
 {-| -}
 type Msg
-    = ToggleMedium
+    = ToggleLarge
-    | ToggleSmall
+    | ToggleMedium
 
 
 {-| -}
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
+        ToggleLarge ->
+            ( { state | largeState = not state.largeState }, Cmd.none )
+
         ToggleMedium ->
             ( { state | mediumState = not state.mediumState }, Cmd.none )
-
-        ToggleSmall ->
-            ( { state | smallState = not state.smallState }, Cmd.none )