Rename the indicator views

src/Nri/Ui/DisclosureIndicator/V2.elm

@@ -1,8 +1,8 @@
-module Nri.Ui.DisclosureIndicator.V2 exposing (view, viewInline)
+module Nri.Ui.DisclosureIndicator.V2 exposing (medium, small)
 
 {-| 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
+@docs medium, small
 
 -}
 
@@ -20,21 +20,17 @@ type alias Config =
 
 
 {-| -}
-view : Config -> Html msg
+medium : Config -> Html msg
-view config =
+medium config =
     viewWithStyle
         [ marginRight (px 10) ]
         (px 15)
         config
 
 
-{-| The inline variant of the indicator is smaller and occupies
+{-| -}
-less vertical space so it can be inlined in lists or tables
+small : Config -> Html msg
-without breaking text flow. Also, it rotates from right to
+small config =
-down direction when expanding.
--}
-viewInline : Config -> Html msg
-viewInline config =
     viewWithStyle
         [ padding2 (px 0) (px 8) ]
         (px 9)

styleguide-app/Examples/DisclosureIndicator.elm

@@ -1,7 +1,9 @@
 module Examples.DisclosureIndicator exposing (Msg, State, example, init, update)
 
-{- \
+{-|
-   @docs Msg, State, example, init, update,
+
+@docs Msg, State, example, init, update
+
 -}
 
 import Css
@@ -15,14 +17,14 @@ import Nri.Ui.Fonts.V1 as Fonts
 
 {-| -}
 type Msg
-    = DisclosureIndicatorToggle Bool
+    = ToggleMedium Bool
-    | InlineDisclosureIndicatorToggle Bool
+    | ToggleSmall Bool
 
 
 {-| -}
 type alias State =
-    { disclosed : Bool
+    { mediumState : Bool
-    , inlineDisclosed : Bool
+    , smallState : Bool
     }
 
 
@@ -39,9 +41,9 @@ example parentMessage state =
                 , Css.outline Css.none
                 , Css.fontSize (Css.px 20)
                 ]
-            , onClick (DisclosureIndicatorToggle (not state.disclosed))
+            , onClick (ToggleMedium (not state.mediumState))
             ]
-            [ DisclosureIndicator.view { isOpen = state.disclosed }
+            [ DisclosureIndicator.medium { isOpen = state.mediumState }
             , Html.text "Item with detail"
             ]
         , Html.h3 [] [ Html.text "Inline indicator" ]
@@ -63,9 +65,9 @@ example parentMessage state =
                 , Fonts.baseFont
                 , Css.fontSize (Css.px 16)
                 ]
-            , onClick (InlineDisclosureIndicatorToggle (not state.inlineDisclosed))
+            , onClick (ToggleSmall (not state.smallState))
             ]
-            [ DisclosureIndicator.viewInline { isOpen = state.inlineDisclosed }
+            [ DisclosureIndicator.small { isOpen = state.smallState }
             , Html.text "Item with detail"
             ]
         ]
@@ -76,8 +78,8 @@ example parentMessage state =
 {-| -}
 init : State
 init =
-    { disclosed = False
+    { mediumState = False
-    , inlineDisclosed = False
+    , smallState = False
     }
 
 
@@ -85,8 +87,8 @@ init =
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
-        DisclosureIndicatorToggle disclosed ->
+        ToggleMedium mediumState ->
-            ( { state | disclosed = disclosed }, Cmd.none )
+            ( { state | mediumState = mediumState }, Cmd.none )
 
-        InlineDisclosureIndicatorToggle disclosed ->
+        ToggleSmall mediumState ->
-            ( { state | inlineDisclosed = disclosed }, Cmd.none )
+            ( { state | smallState = mediumState }, Cmd.none )