Merge pull request #867 from NoRedInk/bat/pop-up

Generate Tooltip example code

styleguide-app/CommonControls.elm

@@ -81,7 +81,7 @@ httpError =
 content :
     { moduleName : String
     , plaintext : String -> attribute
-    , markdown : String -> attribute
+    , markdown : Maybe (String -> attribute)
     , html : List (Html msg) -> attribute
     , httpError : Maybe (Http.Error -> attribute)
     }
@@ -115,23 +115,30 @@ content ({ moduleName } as config) =
                         )
                     )
            )
-         , ( "markdown"
-           , Control.string markdown
-                |> Control.map
-                    (\str ->
-                        ( moduleName ++ ".markdown \"" ++ str ++ "\""
-                        , config.markdown str
-                        )
-                    )
-           )
-         , ( "HTML"
-           , Control.value
-                ( moduleName ++ ".html [ ... ]"
-                , config.html exampleHtml
-                )
-           )
          ]
-            ++ (case config.httpError of
+            ++ (case config.markdown of
+                    Just markdown_ ->
+                        [ ( "markdown"
+                          , Control.string markdown
+                                |> Control.map
+                                    (\str ->
+                                        ( moduleName ++ ".markdown \"" ++ str ++ "\""
+                                        , markdown_ str
+                                        )
+                                    )
+                          )
+                        ]
+
+                    Nothing ->
+                        []
+               )
+            ++ ( "HTML"
+               , Control.value
+                    ( moduleName ++ ".html [ ... ]"
+                    , config.html exampleHtml
+                    )
+               )
+            :: (case config.httpError of
                     Just httpError_ ->
                         [ ( "httpError"
                           , Control.map

styleguide-app/Examples/Message.elm

@@ -30,7 +30,7 @@ init =
                 (CommonControls.content
                     { moduleName = "Message"
                     , plaintext = Message.plaintext
-                    , markdown = Message.markdown
+                    , markdown = Just Message.markdown
                     , html = Message.html
                     , httpError = Just Message.httpError
                     }

styleguide-app/Examples/Text.elm

@@ -113,7 +113,7 @@ controlContent =
     CommonControls.content
         { moduleName = "Text"
         , plaintext = Text.plaintext
-        , markdown = Text.markdown
+        , markdown = Just Text.markdown
         , html = Text.html
         , httpError = Nothing
         }

styleguide-app/Examples/Tooltip.elm

@@ -9,15 +9,16 @@ module Examples.Tooltip exposing (example, State, Msg)
 import Accessibility.Styled as Html exposing (Html)
 import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
+import CommonControls
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Example exposing (Example)
-import Html.Styled.Attributes as Attributes exposing (css, href)
+import Html.Styled.Attributes exposing (css, href)
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Heading.V2 as Heading
-import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V2 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
@@ -64,7 +65,7 @@ example =
 
 type alias State =
     { openTooltip : Maybe TooltipType
-    , staticExampleSettings : Control (List (Tooltip.Attribute Never))
+    , staticExampleSettings : Control (List ( String, Tooltip.Attribute Never ))
     }
 
 
@@ -83,7 +84,7 @@ type TooltipType
 
 type Msg
     = ToggleTooltip TooltipType Bool
-    | SetStaticExampleSettings (Control (List (Tooltip.Attribute Never)))
+    | SetControl (Control (List ( String, Tooltip.Attribute Never )))
 
 
 update : Msg -> State -> ( State, Cmd Msg )
@@ -96,7 +97,7 @@ update msg model =
             else
                 ( { model | openTooltip = Nothing }, Cmd.none )
 
-        SetStaticExampleSettings settings ->
+        SetControl settings ->
             ( { model | staticExampleSettings = settings }, Cmd.none )
 
 
@@ -177,122 +178,122 @@ viewToggleTip openTooltip =
         ]
 
 
-initStaticExampleSettings : Control (List (Tooltip.Attribute Never))
+initStaticExampleSettings : Control (List ( String, Tooltip.Attribute Never ))
 initStaticExampleSettings =
     ControlExtra.list
         |> ControlExtra.listItem "content" controlContent
-        |> ControlExtra.listItem "direction" controlDirection
+        |> ControlExtra.optionalListItem "direction" controlDirection
-        |> ControlExtra.listItem "alignment" controlAlignment
+        |> ControlExtra.optionalListItem "alignment" controlAlignment
-        |> ControlExtra.listItem "withoutTail" controlTail
+        |> ControlExtra.optionalBoolListItem "withoutTail" ( "Tooltip.withoutTail", Tooltip.withoutTail )
-        |> ControlExtra.listItem "width" controlWidth
+        |> ControlExtra.optionalListItem "width" controlWidth
-        |> ControlExtra.listItem "padding" controlPadding
+        |> ControlExtra.optionalListItem "padding" controlPadding
 
 
-controlContent : Control (Tooltip.Attribute Never)
+controlContent : Control ( String, Tooltip.Attribute Never )
 controlContent =
-    Control.choice
+    CommonControls.content
-        [ ( "plaintext"
+        { moduleName = "Tooltip"
-          , "Song lyrics are literature."
+        , plaintext = Tooltip.plaintext
-                |> Control.string
+        , markdown = Nothing
-                |> Control.map Tooltip.plaintext
+        , html = Tooltip.html
-          )
+        , httpError = Nothing
-        , ( "HTML (short)"
+        }
-          , [ Html.code [] [ Html.text "git status" ]
-            , Html.text " ⇄ "
-            , Html.em [] [ Html.text "tries again" ]
-            ]
-                |> Tooltip.html
-                |> Control.value
-          )
-        , ( "HTML"
-          , [ Html.text "Click "
-            , Html.a [ href "http://www.noredink.com", Attributes.target "_blank" ]
-                [ Html.text "here, yes, HERE, right here on this long tooltip. "
-                , Html.div
-                    [ css
-                        [ Css.display Css.inlineBlock
-                        , Css.width (Css.px 20)
-                        ]
-                    ]
-                    [ Svg.toHtml UiIcon.gear ]
-                ]
-            , Html.text " to check out NoRedInk."
-            ]
-                |> Tooltip.html
-                |> Control.value
-          )
-        ]
 
 
-controlTail : Control (Tooltip.Attribute Never)
+controlDirection : Control ( String, Tooltip.Attribute Never )
-controlTail =
-    Control.map
-        (\bool ->
-            if bool then
-                Tooltip.withoutTail
-
-            else
-                -- TODO: change `withoutTail` to take
-                -- a bool or expose a `withTail` from Tooltip.
-                Tooltip.css []
-        )
-        (Control.bool False)
-
-
-controlDirection : Control (Tooltip.Attribute Never)
 controlDirection =
-    Control.choice
+    CommonControls.choice "Tooltip"
-        [ ( "onTop", Control.value Tooltip.onTop )
+        [ ( "onTop", Tooltip.onTop )
-        , ( "onBottom", Control.value Tooltip.onBottom )
+        , ( "onBottom", Tooltip.onBottom )
-        , ( "onLeft", Control.value Tooltip.onLeft )
+        , ( "onLeft", Tooltip.onLeft )
-        , ( "onRight", Control.value Tooltip.onRight )
+        , ( "onRight", Tooltip.onRight )
         ]
 
 
-controlAlignment : Control (Tooltip.Attribute Never)
+controlAlignment : Control ( String, Tooltip.Attribute Never )
 controlAlignment =
     Control.choice
-        [ ( "alignMiddle (default)", Control.value Tooltip.alignMiddle )
+        [ ( "alignMiddle (default)", Control.value ( "Tooltip.alignMiddle", Tooltip.alignMiddle ) )
-        , ( "alignStart", Control.map (Css.px >> Tooltip.alignStart) controlNumber )
+        , ( "alignStart"
-        , ( "alignEnd", Control.map (Css.px >> Tooltip.alignEnd) controlNumber )
+          , Control.map
+                (\float ->
+                    ( "Tooltip.alignStart (Css.px " ++ String.fromFloat float ++ ")"
+                    , Tooltip.alignStart (Css.px float)
+                    )
+                )
+                (ControlExtra.float 0)
+          )
+        , ( "alignEnd"
+          , Control.map
+                (\float ->
+                    ( "Tooltip.alignEnd (Css.px " ++ String.fromFloat float ++ ")"
+                    , Tooltip.alignEnd (Css.px float)
+                    )
+                )
+                (ControlExtra.float 0)
+          )
         ]
 
 
-controlNumber : Control Float
+controlWidth : Control ( String, Tooltip.Attribute Never )
-controlNumber =
-    Control.map (String.toFloat >> Maybe.withDefault 0) (Control.string "0")
-
-
-controlWidth : Control (Tooltip.Attribute Never)
 controlWidth =
     Control.choice
-        [ ( "exactWidth 320 (default)", Control.value (Tooltip.exactWidth 320) )
+        [ ( "exactWidth (default is 320)"
-        , ( "exactWidth", Control.map (round >> Tooltip.exactWidth) controlNumber )
+          , Control.map
-        , ( "fitToContent", Control.value Tooltip.fitToContent )
+                (\int ->
+                    ( "Tooltip.exactWidth " ++ String.fromInt int, Tooltip.exactWidth int )
+                )
+                (ControlExtra.int 320)
+          )
+        , ( "fitToContent", Control.value ( "Tooltip.fitToContent", Tooltip.fitToContent ) )
         ]
 
 
-controlPadding : Control (Tooltip.Attribute Never)
+controlPadding : Control ( String, Tooltip.Attribute Never )
 controlPadding =
     Control.choice
-        [ ( "normalPadding (default)", Control.value Tooltip.normalPadding )
+        [ ( "normalPadding (default)", Control.value ( "Tooltip.normalPadding", Tooltip.normalPadding ) )
-        , ( "smallPadding", Control.value Tooltip.smallPadding )
+        , ( "smallPadding", Control.value ( "Tooltip.smallPadding", Tooltip.smallPadding ) )
-        , ( "customPadding", Control.map Tooltip.customPadding controlNumber )
+        , ( "customPadding"
+          , Control.map
+                (\float ->
+                    ( "Tooltip.customPadding " ++ String.fromFloat float
+                    , Tooltip.customPadding float
+                    )
+                )
+                (ControlExtra.float 0)
+          )
         ]
 
 
-viewCustomizableExample : Control (List (Tooltip.Attribute Never)) -> Html Msg
+viewCustomizableExample : Control (List ( String, Tooltip.Attribute Never )) -> Html Msg
 viewCustomizableExample controlSettings =
-    let
-        settings =
-            Control.currentValue controlSettings
-
-        attributes =
-            Tooltip.open True :: settings
-    in
     Html.div []
-        [ Control.view SetStaticExampleSettings controlSettings
+        [ ControlView.view
-            |> Html.fromUnstyled
+            { update = SetControl
+            , settings = controlSettings
+            , toExampleCode =
+                \controls ->
+                    [ { sectionName = "Example"
+                      , code =
+                            String.join "\n"
+                                [ "Tooltip.view"
+                                , "    { trigger ="
+                                , "        \\popupTriggerAttributes ->"
+                                , "            ClickableSvg.button \"Up\""
+                                , "                UiIcon.arrowTop"
+                                , "                [ ClickableSvg.custom popupTriggerAttributes"
+                                , "                ]"
+                                , "    , id = \"an-id-for-the-tooltip\""
+                                , "    }"
+                                , "    [ "
+                                    ++ String.join "\n    , "
+                                        ("Tooltip.open True" :: List.map Tuple.first controls)
+                                , "    ]"
+                                ]
+                      }
+                    ]
+            }
         , Html.div
             [ css
                 [ Css.displayFlex
@@ -304,13 +305,15 @@ viewCustomizableExample controlSettings =
             [ Tooltip.view
                 { trigger =
                     \eventHandlers ->
-                        ClickableSvg.button "Arrow Up"
+                        ClickableSvg.button "Up"
                             UiIcon.arrowTop
                             [ ClickableSvg.custom eventHandlers
                             ]
-                , id = "my-top-tooltip"
+                , id = "an-id-for-the-tooltip"
                 }
-                attributes
+                (Tooltip.open True
+                    :: List.map Tuple.second (Control.currentValue controlSettings)
+                )
                 |> Html.map never
             ]
         ]