Added images for doc, starting with doc

2024-11-22 13:14:10 +03:00 · 2020-05-25 07:40:46 +02:00 · 2020-05-25 07:40:46 +02:00 · bb3ae50376
commit bb3ae50376
parent cc2ca06d93
29 changed files with 490 additions and 295 deletions
--- a/docs/assets/button.png
+++ b/docs/assets/button.png
--- a/docs/assets/dialog.png
+++ b/docs/assets/dialog.png
--- a/docs/assets/expansionPanel.png
+++ b/docs/assets/expansionPanel.png
--- a/docs/assets/list.png
+++ b/docs/assets/list.png
--- a/docs/assets/material-style.png
+++ b/docs/assets/material-style.png
--- a/docs/assets/modal.png
+++ b/docs/assets/modal.png
--- a/docs/assets/multiSelect.png
+++ b/docs/assets/multiSelect.png
--- a/docs/assets/select.png
+++ b/docs/assets/select.png
--- a/docs/assets/snackbar.png
+++ b/docs/assets/snackbar.png
--- a/docs/assets/sortTable.png
+++ b/docs/assets/sortTable.png
--- a/docs/assets/tab.png
+++ b/docs/assets/tab.png
--- a/docs/assets/template-style.png
+++ b/docs/assets/template-style.png
--- a/docs/assets/textInput.png
+++ b/docs/assets/textInput.png
--- a/docs/select.png
+++ b/docs/select.png
--- a/elm.json
+++ b/elm.json
@ -6,9 +6,11 @@
    "version": "1.0.0",
    "exposed-modules": [
        "Widget.Layout",
-        "Widget.Style",
        "Widget.ScrollingNav",
-        "Widget.Snackbar"
+        "Widget.Snackbar",
+        "Widget.Style",
+        "Widget.Style.Material",
+        "Widget.Style.Template"
    ],
    "elm-version": "0.19.0 <= v < 0.20.0",
    "dependencies": {
@ -29,4 +31,4 @@
    "test-dependencies": {
        "elm-explorations/test": "1.2.1 <= v < 2.0.0"
    }
-}
+}
--- a/example/elm.json
+++ b/example/elm.json
@ -20,6 +20,7 @@
            "mdgriffith/elm-ui": "1.1.5",
            "noahzgordon/elm-color-extra": "1.0.2",
            "ryannhg/elm-spa": "4.1.0",
+            "turboMaCk/any-set": "1.4.0",
            "turboMaCk/queue": "1.0.2",
            "wernerdegroot/listzipper": "4.0.0"
        },
@ -28,7 +29,8 @@
            "elm/regex": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2",
-            "fredcy/elm-parseint": "2.0.1"
+            "fredcy/elm-parseint": "2.0.1",
+            "turboMaCk/any-dict": "2.3.0"
        }
    },
    "test-dependencies": {
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@ -1,4 +1,4 @@
-module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
+module Data.Example exposing (Example, Model, Msg, asList, fromString, init, subscriptions, toCardList, toString, update, view)

 import Data.Style exposing (Style)
 import Element exposing (Element)
@ -15,6 +15,7 @@ import Example.TextInput as TextInput
 import Framework.Grid as Grid
 import View.Test as Test

+
 type Example
    = ButtonExample
    | SelectExample
@ -27,6 +28,7 @@ type Example
    | TextInputExample
    | ListExample

+
 asList : List Example
 asList =
    [ ButtonExample
@ -40,65 +42,147 @@ asList =
    , TextInputExample
    , ListExample
    ]
-    |> List.sortBy toString
+        |> List.sortBy toString


 toString : Example -> String
 toString example =
    case example of
-        ButtonExample -> "Button"
-        SelectExample -> "Select"
-        MultiSelectExample -> "Multi Select"
-        ExpansionPanelExample -> "ExpansionPanel"
-        TabExample -> "Tab"
-        SortTableExample -> "SortTable"
-        ModalExample -> "Modal"
-        DialogExample -> "Dialog"
-        TextInputExample -> "TextInput"
-        ListExample -> "List"
+        ButtonExample ->
+            "Button"

-fromString  : String -> Maybe Example
+        SelectExample ->
+            "Select"
+
+        MultiSelectExample ->
+            "Multi Select"
+
+        ExpansionPanelExample ->
+            "ExpansionPanel"
+
+        TabExample ->
+            "Tab"
+
+        SortTableExample ->
+            "SortTable"
+
+        ModalExample ->
+            "Modal"
+
+        DialogExample ->
+            "Dialog"
+
+        TextInputExample ->
+            "TextInput"
+
+        ListExample ->
+            "List"
+
+
+fromString : String -> Maybe Example
 fromString string =
    case string of
-          "Button" -> Just ButtonExample
-          "Select" -> Just SelectExample
-          "Multi Select" -> Just MultiSelectExample
-          "ExpansionPanel" -> Just ExpansionPanelExample
-          "Tab" -> Just TabExample
-          "SortTable" -> Just SortTableExample
-          "Modal" -> Just ModalExample
-          "Dialog" -> Just DialogExample
-          "TextInput" -> Just TextInputExample
-          "List" -> Just ListExample
-          _ -> Nothing
+        "Button" ->
+            Just ButtonExample
+
+        "Select" ->
+            Just SelectExample
+
+        "Multi Select" ->
+            Just MultiSelectExample
+
+        "ExpansionPanel" ->
+            Just ExpansionPanelExample
+
+        "Tab" ->
+            Just TabExample
+
+        "SortTable" ->
+            Just SortTableExample
+
+        "Modal" ->
+            Just ModalExample
+
+        "Dialog" ->
+            Just DialogExample
+
+        "TextInput" ->
+            Just TextInputExample
+
+        "List" ->
+            Just ListExample
+
+        _ ->
+            Nothing
+

 get : Example -> ExampleView msg -> Element msg
 get example =
    case example of
-        ButtonExample -> .button
-        SelectExample -> .select
-        MultiSelectExample -> .multiSelect
-        ExpansionPanelExample -> .expansionPanel
-        TabExample -> .tab
-        SortTableExample -> .sortTable
-        ModalExample -> .modal
-        DialogExample -> .dialog
-        TextInputExample -> .textInput
-        ListExample -> .list
+        ButtonExample ->
+            .button
+
+        SelectExample ->
+            .select
+
+        MultiSelectExample ->
+            .multiSelect
+
+        ExpansionPanelExample ->
+            .expansionPanel
+
+        TabExample ->
+            .tab
+
+        SortTableExample ->
+            .sortTable
+
+        ModalExample ->
+            .modal
+
+        DialogExample ->
+            .dialog
+
+        TextInputExample ->
+            .textInput
+
+        ListExample ->
+            .list
+

 toTests : Example -> msg -> Style msg -> List ( String, Element msg )
 toTests example =
    case example of
-        ButtonExample -> Test.button
-        SelectExample -> Test.select
-        MultiSelectExample -> Test.multiSelect
-        ExpansionPanelExample -> Test.expansionPanel
-        TabExample -> Test.tab
-        SortTableExample -> Test.sortTable
-        ModalExample -> Test.modal
-        DialogExample -> Test.dialog
-        TextInputExample -> Test.textInput
-        ListExample -> Test.list
+        ButtonExample ->
+            Test.button
+
+        SelectExample ->
+            Test.select
+
+        MultiSelectExample ->
+            Test.multiSelect
+
+        ExpansionPanelExample ->
+            Test.expansionPanel
+
+        TabExample ->
+            Test.tab
+
+        SortTableExample ->
+            Test.sortTable
+
+        ModalExample ->
+            Test.modal
+
+        DialogExample ->
+            Test.dialog
+
+        TextInputExample ->
+            Test.textInput
+
+        ListExample ->
+            Test.list
+

 type Msg
    = Button Button.Msg
@ -113,7 +197,6 @@ type Msg
    | List List.Msg


-
 type alias Model =
    { button : Button.Model
    , select : Select.Model
@ -150,18 +233,20 @@ type alias UpgradeCollection =
    , list : UpgradeRecord List.Model List.Msg
    }

+
 type alias ExampleView msg =
    { button : Element msg
-        , select : Element msg
-        , multiSelect : Element msg
-        , expansionPanel : Element msg
-        , tab : Element msg
-        , sortTable : Element msg
-        , modal : Element msg
-        , dialog : Element msg
-        , textInput : Element msg
-        , list : Element msg
-        }
+    , select : Element msg
+    , multiSelect : Element msg
+    , expansionPanel : Element msg
+    , tab : Element msg
+    , sortTable : Element msg
+    , modal : Element msg
+    , dialog : Element msg
+    , textInput : Element msg
+    , list : Element msg
+    }
+

 init : ( Model, Cmd Msg )
 init =
@ -358,7 +443,6 @@ view :
    -> Style msg
    -> Model
    -> ExampleView msg
-        
 view msgMapper style model =
    { button =
        Button.view (Button >> msgMapper) style (.button model)
@ -392,13 +476,13 @@ toCardList :
    -> List ( String, Element msg, Element msg )
 toCardList { idle, msgMapper, style, model } =
    asList
-    |> List.map 
-        (\example ->
-            { title = example |> toString
-            , example = example |> get
-            , test = example |> toTests
-            }
-        )
+        |> List.map
+            (\example ->
+                { title = example |> toString
+                , example = example |> get
+                , test = example |> toTests
+                }
+            )
        |> List.map
            (\{ title, example, test } ->
                ( title
--- a/example/src/Data/Section.elm
+++ b/example/src/Data/Section.elm
@ -14,7 +14,6 @@ asList =
 toString : Section -> String
 toString section =
    case section of
-
        ReusableViews ->
            "Reusable"

@ -25,7 +24,6 @@ toString section =
 fromString : String -> Maybe Section
 fromString string =
    case string of
-
        "Reusable" ->
            Just ReusableViews

--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@ -6,27 +6,27 @@ import Widget.Style
        , ColumnStyle
        , DialogStyle
        , ExpansionPanelStyle
+        , LayoutStyle
        , RowStyle
        , SortTableStyle
        , TabStyle
        , TextInputStyle
-        , LayoutStyle
        )


 type alias Style msg =
-        { dialog : DialogStyle msg
-        , expansionPanel : ExpansionPanelStyle msg
-        , button : ButtonStyle msg
-        , primaryButton : ButtonStyle msg
-        , tab : TabStyle msg
-        , textInput : TextInputStyle msg
-        , chipButton : ButtonStyle msg
-        , row : RowStyle msg
-        , buttonRow : RowStyle msg
-        , column : ColumnStyle msg
-        , cardColumn : ColumnStyle msg
-        , sortTable : SortTableStyle msg
-        , selectButton : ButtonStyle msg
-        , layout : LayoutStyle msg
-        }
+    { dialog : DialogStyle msg
+    , expansionPanel : ExpansionPanelStyle msg
+    , button : ButtonStyle msg
+    , primaryButton : ButtonStyle msg
+    , tab : TabStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    , row : RowStyle msg
+    , buttonRow : RowStyle msg
+    , column : ColumnStyle msg
+    , cardColumn : ColumnStyle msg
+    , sortTable : SortTableStyle msg
+    , selectButton : ButtonStyle msg
+    , layout : LayoutStyle msg
+    }
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@ -9,6 +9,7 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Html.Attributes as Attributes
+import Icons
 import Widget.Style
    exposing
        ( ButtonStyle
@ -24,7 +25,7 @@ import Widget.Style
        )
 import Widget.Style.Material as Material exposing (Palette)
 import Widget.Style.Template as Template
-import Icons
+

 sortTable : Palette -> SortTableStyle msg
 sortTable palette =
@ -51,5 +52,5 @@ style palette =
    , chipButton = Material.chip palette
    , expansionPanel = Material.expansionPanel palette
    , dialog = Material.alertDialog palette
-    , layout = Material.layout palette "layout"
+    , layout = Material.layout palette
    }
--- a/example/src/Data/Theme.elm
+++ b/example/src/Data/Theme.elm
@ -6,6 +6,7 @@ import Data.Style.Material
 import Data.Style.Template
 import Widget.Style.Material

+
 type Theme
    = ElmUiFramework
    | Template
--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@ -13,8 +13,8 @@ type alias Style style msg =
    }


-type Model =
-    IsOpen Bool
+type Model
+    = IsOpen Bool


 type Msg
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@ -5,11 +5,11 @@ import Browser
 import Browser.Dom as Dom exposing (Viewport)
 import Browser.Events as Events
 import Browser.Navigation as Navigation
+import Data.Example as Example exposing (Example)
 import Data.Section as Section exposing (Section(..))
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme(..))
-import Data.Example as Example exposing (Example)
-import Element exposing (DeviceClass(..))
+import Element exposing (Element,DeviceClass(..))
 import Framework
 import Framework.Grid as Grid
 import Framework.Heading as Heading
@ -17,13 +17,14 @@ import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
 import Reusable
+import Set.Any as AnySet exposing (AnySet)
 import Stateless
 import Task
 import Time
 import Widget
 import Widget.Layout as Layout exposing (Layout, Part)
 import Widget.ScrollingNav as ScrollingNav
-
+import FeatherIcons

 type alias LoadedModel =
    { stateless : Stateless.Model
@ -40,6 +41,7 @@ type alias LoadedModel =
        , remaining : Int
        }
    , theme : Theme
+    , expanded : AnySet String Example
    }


@ -61,6 +63,7 @@ type LoadedMsg
    | ChangedSearch String
    | SetTheme Theme
    | Idle
+    | ToggledExample Example


 type Msg
@ -75,7 +78,7 @@ initialModel { viewport } =
            ScrollingNav.init
                { toString = Example.toString
                , fromString = Example.fromString
-                , arrangement = Example.asList 
+                , arrangement = Example.asList
                , toMsg =
                    \result ->
                        case result of
@ -103,6 +106,7 @@ initialModel { viewport } =
            , remaining = 0
            }
      , theme = Material
+      , expanded = AnySet.empty Example.toString
      }
    , [ cmd
      , statelessCmd |> Cmd.map StatelessSpecific
@ -118,187 +122,6 @@ init () =
    )


-view : Model -> Html Msg
-view model =
-    case model of
-        Loading ->
-            Element.none |> Framework.responsiveLayout []
-
-        Loaded m ->
-            let
-                style : Style msg
-                style =
-                    Theme.toStyle m.theme
-            in
-            Html.map LoadedSpecific <|
-                Layout.view style.layout
-                    { dialog =
-                        if m.displayDialog then
-                            { text = "This is a dialog window"
-                            , title = Just "Dialog"
-                            , accept =
-                                Just
-                                    { text = "Ok"
-                                    , onPress = Just <| ToggleDialog False
-                                    }
-                            , dismiss =
-                                Just
-                                    { text = "Dismiss"
-                                    , onPress = Just <| ToggleDialog False
-                                    }
-                            }
-                                |> Widget.dialog style.dialog
-                                |> Just
-
-                        else
-                            Nothing
-                    , layout = m.layout
-                    , window = m.window
-                    , menu =
-                        m.scrollingNav
-                            |> ScrollingNav.toSelect
-                                (\int ->
-                                    m.scrollingNav.arrangement
-                                        |> Array.fromList
-                                        |> Array.get int
-                                        |> Maybe.map JumpTo
-                                )
-                    , actions =
-                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
-                          , text = "Docs"
-                          , icon = Icons.book |> Element.html |> Element.el []
-                          }
-                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
-                          , text = "Github"
-                          , icon = Icons.github |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Material then
-                                    Just <| SetTheme <| Material
-
-                                else
-                                    Nothing
-                          , text = "Material Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= DarkMaterial then
-                                    Just <| SetTheme <| DarkMaterial
-
-                                else
-                                    Nothing
-                          , text = "Dark Material Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        
-                        , { onPress =
-                                if m.theme /= ElmUiFramework then
-                                    Just <| SetTheme <| ElmUiFramework
-
-                                else
-                                    Nothing
-                          , text = "Elm-Ui-Framework Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Template then
-                                    Just <| SetTheme <| Template
-
-                                else
-                                    Nothing
-                          , text = "Template Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        ]
-                    , onChangedSidebar = ChangedSidebar
-                    , title =
-                        "Elm-Ui-Widgets"
-                            |> Element.text
-                            |> Element.el Heading.h1
-                    , search =
-                        Just
-                            { text = m.search.raw
-                            , onChange = ChangedSearch
-                            , label = "Search"
-                            }
-                    } <|
-                    (
-                        [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
-                        , [StatelessViews,ReusableViews]
-                                |> List.map
-                                    (\section ->
-                                        (case section of
-                                            ReusableViews ->
-                                                Reusable.view
-                                                    { theme = m.theme
-                                                    , addSnackbar = AddSnackbar
-                                                    }
-
-                                            StatelessViews ->
-                                                Stateless.view
-                                                    { theme = m.theme
-                                                    , msgMapper = StatelessSpecific
-                                                    , model = m.stateless
-                                                    }
-                                        )
-                                            |> (\{ title, description, items } ->
-                                                    [ title
-                                                    |> Element.text
-                                                    |> Element.el ( Heading.h2 )
-                                                    , if m.search.current == "" then
-                                                        description
-                                                            |> Element.text
-                                                            |> List.singleton
-                                                            |> Element.paragraph []
-
-                                                      else
-                                                        Element.none
-                                                    , items
-                                                        |> (if m.search.current /= "" then
-                                                                List.filter
-                                                                    (\( a, _, _ ) ->
-                                                                        a
-                                                                            |> String.toLower
-                                                                            |> String.contains (m.search.current |> String.toLower)
-                                                                    )
-
-                                                            else
-                                                                identity
-                                                           )
-                                                        |> List.map
-                                                            (\( name, elem, more ) ->
-                                                                [ [ Element.text name
-                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink 
-                                                                       , name
-                                                            |> Attributes.id
-                                                            |> Element.htmlAttribute])
-                                                                  , elem
-                                                                  ]
-                                                                    |> Element.column Grid.simple
-                                                                , more
-                                                                    |> Element.el
-                                                                        [ Element.width <| Element.fill
-                                                                        ]
-                                                                ]
-                                                                    |> Widget.column style.cardColumn
-                                                            )
-                                                        |> Element.wrappedRow
-                                                            (Grid.simple
-                                                                ++ [ Element.height <| Element.shrink
-                                                                   ]
-                                                            )
-                                                    ]
-                                                        |> Element.column (Grid.section ++ [ Element.centerX ])
-                                               )
-                                    )
-                               -- |> Element.column Grid.section
-                          --]
-                            |> Element.column (Framework.container ++ style.layout.container)
-                        ]
-                            |> Element.column Grid.compact
-                    )
-
-
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
 updateLoaded msg model =
    case msg of
@ -414,6 +237,13 @@ updateLoaded msg model =
            , Cmd.none
            )

+        ToggledExample example ->
+            ( { model
+                | expanded = model.expanded |> AnySet.toggle example
+              }
+            , Cmd.none
+            )
+
        Idle ->
            ( model, Cmd.none )

@ -442,6 +272,218 @@ subscriptions _ =
        |> Sub.map LoadedSpecific


+view : Model -> Html Msg
+view model =
+    case model of
+        Loading ->
+            Element.none |> Framework.responsiveLayout []
+
+        Loaded m ->
+            let
+                style : Style msg
+                style =
+                    Theme.toStyle m.theme
+            in
+            Html.map LoadedSpecific <|
+                Layout.view style.layout
+                    { dialog =
+                        if m.displayDialog then
+                            { text = "This is a dialog window"
+                            , title = Just "Dialog"
+                            , accept =
+                                Just
+                                    { text = "Ok"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
+                            , dismiss =
+                                Just
+                                    { text = "Dismiss"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
+                            }
+                                |> Widget.dialog style.dialog
+                                |> Just
+
+                        else
+                            Nothing
+                    , layout = m.layout
+                    , window = m.window
+                    , menu =
+                        m.scrollingNav
+                            |> ScrollingNav.toSelect
+                                (\int ->
+                                    m.scrollingNav.arrangement
+                                        |> Array.fromList
+                                        |> Array.get int
+                                        |> Maybe.map JumpTo
+                                )
+                    , actions =
+                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
+                          , text = "Docs"
+                          , icon = Icons.book |> Element.html |> Element.el []
+                          }
+                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
+                          , text = "Github"
+                          , icon = Icons.github |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Material then
+                                    Just <| SetTheme <| Material
+
+                                else
+                                    Nothing
+                          , text = "Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= DarkMaterial then
+                                    Just <| SetTheme <| DarkMaterial
+
+                                else
+                                    Nothing
+                          , text = "Dark Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        ]
+                    , onChangedSidebar = ChangedSidebar
+                    , title =
+                        "Elm-Ui-Widgets"
+                            |> Element.text
+                            |> Element.el Heading.h1
+                    , search =
+                        Just
+                            { text = m.search.raw
+                            , onChange = ChangedSearch
+                            , label = "Search"
+                            }
+                    }
+                <|
+                    viewLoaded m
+
+
+viewLoaded : LoadedModel -> Element LoadedMsg
+viewLoaded m =
+    let
+        style : Style msg
+        style =
+            Theme.toStyle m.theme
+    in
+    [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
+    , [ StatelessViews, ReusableViews ]
+        |> List.map
+            (\section ->
+                (case section of
+                    ReusableViews ->
+                        Reusable.view
+                            { theme = m.theme
+                            , addSnackbar = AddSnackbar
+                            }
+
+                    StatelessViews ->
+                        Stateless.view
+                            { theme = m.theme
+                            , msgMapper = StatelessSpecific
+                            , model = m.stateless
+                            }
+                )
+                    |> (\{ title, description, items } ->
+                            [ title
+                                |> Element.text
+                                |> Element.el Heading.h2
+                            , if m.search.current == "" then
+                                description
+                                    |> Element.text
+                                    |> List.singleton
+                                    |> Element.paragraph []
+
+                              else
+                                Element.none
+                            , items
+                                |> (if m.search.current /= "" then
+                                        List.filter
+                                            (\( a, _, _ ) ->
+                                                a
+                                                    |> String.toLower
+                                                    |> String.contains (m.search.current |> String.toLower)
+                                            )
+
+                                    else
+                                        identity
+                                   )
+                                |> List.map
+                                    (\( name, elem, more ) ->
+                                        [ [ Element.text name
+                                                |> Element.el
+                                                    (Heading.h3
+                                                        ++ [ Element.height <| Element.shrink
+                                                           , name
+                                                                |> Attributes.id
+                                                                |> Element.htmlAttribute
+                                                           ]
+                                                    )
+                                          , elem
+                                          ]
+                                            |> Element.column Grid.simple
+                                        , 
+                                            Widget.expansionPanel style.expansionPanel
+    
+                                                { onToggle = 
+                                                    always
+                                                    (name
+                                                    |> Example.fromString
+                                                    |> Maybe.map ToggledExample
+                                                    |> Maybe.withDefault Idle
+                                                    )
+                                                , icon = Element.none
+                                                , text =
+                                                    "States"
+                                                , content = more
+                                                , isExpanded =
+                                                    name
+                                                    |> Example.fromString
+                                                    |> Maybe.map
+                                                    (\example ->
+                                                    m.expanded 
+                                                    |> AnySet.member example 
+                                                    )|> Maybe.withDefault False
+                                                    
+
+                                                }
+                                        ]
+                                            |> Widget.column style.cardColumn
+                                    )
+                                |> Element.wrappedRow
+                                    (Grid.simple
+                                        ++ [ Element.height <| Element.shrink
+                                           ]
+                                    )
+                            ]
+                                |> Element.column (Grid.section ++ [ Element.centerX ])
+                       )
+            )
+        |> Element.column (Framework.container ++ style.layout.container)
+    ]
+        |> Element.column Grid.compact
+
+
 main : Program () Model Msg
 main =
    Browser.element
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@ -242,8 +242,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                    , menu
                        |> Widget.select
                        |> List.map
-                            (Widget.selectButton style.sheetButton
-                            )
+                            (Widget.selectButton style.sheetButton)
                    ]
                        |> List.concat
                        |> Element.column [ Element.width <| Element.fill ]
--- a/src/Widget/ScrollingNav.elm
+++ b/src/Widget/ScrollingNav.elm
@ -1,7 +1,6 @@
 module Widget.ScrollingNav exposing
-    ( Model, init, view, current
-    , jumpTo, syncPositions
-    , getPos, jumpToWithOffset, setPos, toSelect
+    ( Model, init, view, current, toSelect
+    , jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
    )

 {-| The Scrolling Nav is a navigation bar thats updates while you scroll through
@ -10,18 +9,17 @@ the page. Clicking on a navigation button will scroll directly to that section.

 # Basics

-@docs Model, Msg, init, update, subscriptions, view, viewSections, current
+@docs Model, init, view, current, toSelect


 # Operations

-@docs jumpTo, syncPositions
+@docs jumpTo, jumpToWithOffset, syncPositions, getPos, setPos

 -}

 import Browser.Dom as Dom
 import Element exposing (Element)
-import Framework.Grid as Grid
 import Html.Attributes as Attributes
 import IntDict exposing (IntDict)
 import Task exposing (Task)
@ -62,6 +60,8 @@ init { toString, fromString, arrangement, toMsg } =
           )


+{-| Syncs the position of of the viewport
+-}
 getPos : Task x (Model selection -> Model selection)
 getPos =
    Dom.getViewport
@ -73,12 +73,14 @@ getPos =
            )


+{-| sets the position of the viewport to show a specific section
+-}
 setPos : Int -> Model section -> Model section
 setPos pos model =
    { model | scrollPos = pos }


-{-| scrolls the screen to the respective section
+{-| Scrolls the screen to the respective section
 -}
 jumpTo :
    { section : section
@ -95,7 +97,7 @@ jumpTo { section, onChange } { toString } =
        |> Task.attempt onChange


-{-| scrolls the screen to the respective section with some offset
+{-| Scrolls the screen to the respective section with some offset
 -}
 jumpToWithOffset :
    { offset : Float
@ -113,7 +115,9 @@ jumpToWithOffset { offset, section, onChange } { toString } =
        |> Task.attempt onChange


-{-| -}
+{-| Updates the positions of all sections.
+This functions should be called regularly if the height of elements on your page can change during time.
+-}
 syncPositions : Model section -> Task Dom.Error (Model section -> Model section)
 syncPositions { toString, arrangement } =
    arrangement
@ -144,7 +148,8 @@ syncPositions { toString, arrangement } =
            )


-{-| -}
+{-| Returns the current section
+-}
 current : (String -> Maybe section) -> Model section -> Maybe section
 current fromString { positions, scrollPos } =
    positions
@ -155,6 +160,8 @@ current fromString { positions, scrollPos } =
        |> Maybe.andThen fromString


+{-| Returns a select widget containing all section, with the current section selected.
+-}
 toSelect : (Int -> Maybe msg) -> Model section -> Select msg
 toSelect onSelect ({ arrangement, toString, fromString } as model) =
    { selected =
@ -181,11 +188,37 @@ toSelect onSelect ({ arrangement, toString, fromString } as model) =
    }


-{-| -}
+{-| Opinionated way of viewing the section.
+
+This might be useful at first, but you should consider writing your own view function.
+
+```
 view :
    (section -> Element msg)
    -> Model section
-    -> Element msg
+    -> List (Element msg)
+view asElement { toString, arrangement } =
+    arrangement
+        |> List.map
+            (\header ->
+                Element.el
+                    [ header
+                        |> toString
+                        |> Attributes.id
+                        |> Element.htmlAttribute
+                    , Element.width <| Element.fill
+                    ]
+                <|
+                    asElement <|
+                        header
+            )
+```
+
+-}
+view :
+    (section -> Element msg)
+    -> Model section
+    -> List (Element msg)
 view asElement { toString, arrangement } =
    arrangement
        |> List.map
@ -201,4 +234,3 @@ view asElement { toString, arrangement } =
                    asElement <|
                        header
            )
-        |> Element.column Grid.simple
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@ -1,7 +1,6 @@
 module Widget.Snackbar exposing
-    ( Model, init, current, timePassed
+    ( Model, Message, init, current, timePassed, view
    , insert, insertFor, dismiss
-    , Message, view
    )

 {-| A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.
@ -9,7 +8,7 @@ module Widget.Snackbar exposing

 # Basics

-@docs Model, init, current, timePassed
+@docs Model, Message, init, current, timePassed, view


 # Operations
@ -104,6 +103,8 @@ current model =
    model.current |> Maybe.map Tuple.first


+{-| Views the current Message. (only one at a time)
+-}
 view :
    SnackbarStyle msg
    -> (a -> Message msg)
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@ -1,9 +1,16 @@
 module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)

+{-| This module contains style types for every widget.
+
+@docs ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle
+
+-}
+
 import Element exposing (Attribute, Element)
 import Html exposing (Html)


+{-| -}
 type alias ButtonStyle msg =
    { container : List (Attribute msg)
    , labelRow : List (Attribute msg)
@ -14,6 +21,7 @@ type alias ButtonStyle msg =
    }


+{-| -}
 type alias DialogStyle msg =
    { containerColumn : List (Attribute msg)
    , title : List (Attribute msg)
@ -24,6 +32,12 @@ type alias DialogStyle msg =
    }


+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias ExpansionPanelStyle msg =
    { containerColumn : List (Attribute msg)
    , panelRow : List (Attribute msg)
@ -34,6 +48,7 @@ type alias ExpansionPanelStyle msg =
    }


+{-| -}
 type alias SnackbarStyle msg =
    { containerRow : List (Attribute msg)
    , text : List (Attribute msg)
@ -41,6 +56,7 @@ type alias SnackbarStyle msg =
    }


+{-| -}
 type alias TextInputStyle msg =
    { chipButton : ButtonStyle msg
    , containerRow : List (Attribute msg)
@ -49,6 +65,7 @@ type alias TextInputStyle msg =
    }


+{-| -}
 type alias TabStyle msg =
    { button : ButtonStyle msg
    , optionRow : List (Attribute msg)
@ -57,6 +74,7 @@ type alias TabStyle msg =
    }


+{-| -}
 type alias RowStyle msg =
    { containerRow : List (Attribute msg)
    , element : List (Attribute msg)
@ -66,6 +84,7 @@ type alias RowStyle msg =
    }


+{-| -}
 type alias ColumnStyle msg =
    { containerColumn : List (Attribute msg)
    , element : List (Attribute msg)
@ -75,6 +94,12 @@ type alias ColumnStyle msg =
    }


+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias SortTableStyle msg =
    { containerTable : List (Attribute msg)
    , headerButton : ButtonStyle msg
@ -84,6 +109,12 @@ type alias SortTableStyle msg =
    }


+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias LayoutStyle msg =
    { container : List (Attribute msg)
    , snackbar : SnackbarStyle msg
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@ -66,7 +66,6 @@ import Widget.Style
        , TabStyle
        , TextInputStyle
        )
-import Widget.Style.Template as Template



@ -1301,8 +1300,8 @@ drawerButton palette =
  - The drawer button as not taken from the specification (This will been to be added later)

 -}
-layout : Palette -> String -> LayoutStyle msg
-layout palette string =
+layout : Palette -> LayoutStyle msg
+layout palette =
    { container =
        (palette.background |> textAndBackground)
            ++ [ Font.family
--- a/src/Widget/Style/Template.elm
+++ b/src/Widget/Style/Template.elm
@ -1,5 +1,8 @@
 module Widget.Style.Template exposing (box, button, column, decoration, dialog, expansionPanel, icon, layout, row, snackbar, sortTable, tab, textInput)

+{-| This package
+-}
+
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Border as Border