kalutheo / elm-ui-explorer / UIExplorer.Plugins.Note

Note Plugin

This plugin enables contextual notes for each story. It can be used to display some nice markdown content to document your UI.

Example:

note =
    { note = """
      #

Hello world

      Some markdown content here...
     """
    }

main : UIExplorerProgram {} () { a | note : String }
main =
    explore
        { defaultConfig | viewEnhancer = ExplorerNotesPlugin.viewEnhancer }
        [ storiesOf
            "Button"
            [ ( "Primary", \_ -> Button.view "Submit" defaultButtonConfig (), note )
            , ( "Secondary", \_ -> Button.view "Submit" { defaultButtonConfig | appearance = Secondary } (), note )
            ]
        ]

viewEnhancer : UIExplorer.Model a b { c | note : String } -> Html (UIExplorer.Msg b)

This is the part that allows to display notes underneath the view