explorer: add a dynamic source code view

explorer/src/Button.elm

@@ -34,6 +34,10 @@ book =
                 [ Background.color <| MaterialColor.fromColor MaterialColor.gray ]
                 Nothing
                 viewButton
+            |> Story.addBloc Tooling.FullWidthBloc
+                []
+                (Just "source code")
+                viewButtonSource
         )
         |> Story.addStory
             (Story.optionListStory "Palette"
@@ -88,6 +92,31 @@ viewButton palette text icon onPress size _ _ =
         }
 
 
+viewButtonSource palette text icon onPress size _ _ =
+    Tooling.sourceCode <|
+        """Widget.button
+    (Material.containedButton palette
+          |> Customize.elementButton [ Element.height <| Element.px """
+            ++ String.fromInt size
+            ++ """ ]
+    )
+    { text =\""""
+            ++ text
+            ++ """" 
+    , icon = MaterialIcons.done |> Icon.elmMaterialIcons Widget.Material.Types.Color
+    , onPress = """
+            ++ (case onPress of
+                    Nothing ->
+                        "Nothing"
+
+                    Just () ->
+                        "Just ()"
+               )
+            ++ """
+    }
+    """
+
+
 type alias Model =
     Int
 

explorer/src/Tooling.elm

@@ -408,3 +408,10 @@ canvas view =
             , Element.centerY
             ]
             view
+
+
+sourceCode : String -> Element msg
+sourceCode code =
+    ("```\n" ++ code ++ "\n```")
+        |> Markdown.toHtml []
+        |> Element.html