From f212677a5ce56a3e2f1fa44ab47cbd0f51a1c286 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Wed, 15 Jun 2022 17:12:42 -0700
Subject: [PATCH] Improve the generated code example

---
 styleguide-app/Debug/Control/View.elm |  5 +++--
 styleguide-app/Examples/Carousel.elm  | 31 +++++++++++++++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm
index 7d9c626e..a5650e21 100644
--- a/styleguide-app/Debug/Control/View.elm
+++ b/styleguide-app/Debug/Control/View.elm
@@ -1,6 +1,6 @@
 module Debug.Control.View exposing
     ( view
-    , codeFromListSimple
+    , codeFromListSimple, codeFromListSimpleWithIndentLevel
     , codeFromList, codeFromListWithIndentLevel
     , codeFromListWithHardcoded
     , withIndentLevel
@@ -9,9 +9,10 @@ module Debug.Control.View exposing
 {-|
 
 @docs view
-@docs codeFromListSimple
+@docs codeFromListSimple, codeFromListSimpleWithIndentLevel
 @docs codeFromList, codeFromListWithIndentLevel
 @docs codeFromListWithHardcoded
+
 @docs withIndentLevel
 
 -}
diff --git a/styleguide-app/Examples/Carousel.elm b/styleguide-app/Examples/Carousel.elm
index a5ef9511..5fc8e8b5 100644
--- a/styleguide-app/Examples/Carousel.elm
+++ b/styleguide-app/Examples/Carousel.elm
@@ -170,6 +170,10 @@ example =
             let
                 settings =
                     Control.currentValue model.settings
+
+                allTabs =
+                    List.repeat settings.tabs ()
+                        |> List.indexedMap toTab
             in
             [ ControlView.view
                 { ellieLinkConfig = ellieLinkConfig
@@ -177,20 +181,20 @@ example =
                 , version = version
                 , update = SetSettings
                 , settings = model.settings
-                , mainType = "RootHtml.Html String"
+                , mainType = "RootHtml.Html { select : Int, focus : Maybe String }"
                 , extraImports = []
                 , toExampleCode =
                     \_ ->
                         let
                             code =
                                 [ moduleName ++ ".view"
-                                , "    { focusAndSelect = FocusAndSelectPage -- You will need to have this Msg type"
-                                , "    , selected = 1"
+                                , "    { focusAndSelect = identity"
+                                , "    , selected = " ++ String.fromInt model.selected
                                 , "    , tabListStyles = " ++ Tuple.first settings.tabListStyles
                                 , "    , tabStyles = " ++ Tuple.first settings.tabStyles
                                 , "    , containerStyles = " ++ Tuple.first settings.containerStyles
                                 , "    , tabListPosition = " ++ Tuple.first settings.tabListPosition
-                                , "    , tabs = []" ++ "-- TODO: add tab examples"
+                                , "    , tabs =" ++ ControlView.codeFromListSimpleWithIndentLevel 2 (List.map Tuple.first allTabs)
                                 , "    }"
                                 ]
                                     |> String.join "\n"
@@ -207,17 +211,26 @@ example =
                 , tabStyles = Tuple.second settings.tabStyles
                 , containerStyles = Tuple.second settings.containerStyles
                 , tabListPosition = Tuple.second settings.tabListPosition
-                , tabs =
-                    List.repeat settings.tabs ()
-                        |> List.indexedMap toTab
+                , tabs = List.map Tuple.second allTabs
                 }
             ]
     }
 
 
-toTab : Int -> a -> Tab Int msg
+toTab : Int -> a -> ( String, Tab Int msg )
 toTab id _ =
-    Carousel.buildTab { id = id, idString = String.fromInt id ++ "-slide" }
+    let
+        idString =
+            String.fromInt id
+    in
+    ( [ "Carousel.buildTab { id = " ++ idString ++ ", idString = \"" ++ idString ++ "-slide\" }"
+      , "      [ Carousel.tabHtml (Html.text \"" ++ idString ++ "\")"
+      , "      , Carousel.slideHtml (Html.text \"" ++ idString ++ " slide\")"
+      , "      ]"
+      ]
+        |> String.join "\n    "
+    , Carousel.buildTab { id = id, idString = String.fromInt id ++ "-slide" }
         [ Carousel.tabHtml (Html.text (String.fromInt (id + 1)))
         , Carousel.slideHtml (Html.text (String.fromInt (id + 1) ++ " slide"))
         ]
+    )