fixed iconButton.

build.sh

@@ -0,0 +1 @@
+elm-verify-examples --run-tests

elm.json

@@ -6,7 +6,6 @@
     "version": "2.3.0",
     "exposed-modules": [
         "Widget",
-        "Widget.Style",
         "Widget.Style.Material",
         "Widget.Style.Material.Typography",
         "Widget.Style.Material.Color",

example/elm.json

@@ -41,7 +41,11 @@
         }
     },
     "test-dependencies": {
-        "direct": {},
+        "direct": {
-        "indirect": {}
+            "elm-explorations/test": "1.2.2"
+        },
+        "indirect": {
+            "elm/random": "1.0.0"
+        }
     }
 }

example/src/Data/Example.elm

@@ -540,10 +540,13 @@ view msgMapper style model =
         Icon.view (Icon >> msgMapper) style (.icon model)
     }
 
+
+
 --------------------------------------------------------------------------------
 -- DO NOT CHANGE ANYTHING AFTER THIS
 --------------------------------------------------------------------------------
 
+
 toCardList :
     { idle : msg
     , msgMapper : Msg -> msg
@@ -590,9 +593,6 @@ toCardList { idle, msgMapper, style, model } =
             )
 
 
-
-
-
 updateField :
     (UpgradeCollection -> UpgradeRecord model msg)
     -> msg

example/src/Data/Style.elm

@@ -1,4 +1,4 @@
-module Data.Style exposing (Style,style)
+module Data.Style exposing (Style, style)
 
 import Color exposing (Color)
 import Color.Accessibility as Accessibility
@@ -10,41 +10,38 @@ import Element.Font as Font
 import FeatherIcons
 import Html.Attributes as Attributes
 import Icons
-import Widget.Icon as Icon
 import Widget
     exposing
         ( ButtonStyle
         , ColumnStyle
         , DialogStyle
-        , RowStyle
-        , SortTableStyle
-        , TabStyle
-        , TextInputStyle
-        , ButtonStyle
-        , ColumnStyle
-        , DialogStyle
         , DividerStyle
+        , ExpansionItemStyle
+        , HeaderStyle
+        , ImageItemStyle
         , ItemStyle
+        , MultiLineItemStyle
         , ProgressIndicatorStyle
         , RowStyle
         , SortTableStyle
         , SwitchStyle
         , TabStyle
         , TextInputStyle
-        , HeaderStyle
         , TextItemStyle
-        , ImageItemStyle
-        , MultiLineItemStyle
-        , ExpansionItemStyle
         )
-import Widget.Snackbar exposing (SnackbarStyle)
+import Widget.Icon as Icon
 import Widget.Layout exposing (LayoutStyle)
+import Widget.Snackbar exposing (SnackbarStyle)
 import Widget.Style.Material as Material exposing (Palette)
 
 
 style : Palette -> Style msg
 style palette =
-    { sortTable = Material.sortTable palette
+    { containedButton = Material.containedButton Material.defaultPalette
+    , outlinedButton = Material.outlinedButton Material.defaultPalette
+    , textButton = Material.textButton Material.defaultPalette
+    , iconButton = Material.iconButton Material.defaultPalette
+    , sortTable = Material.sortTable palette
     , row = Material.row
     , buttonRow = Material.buttonRow
     , cardColumn = Material.cardColumn palette
@@ -71,11 +68,12 @@ style palette =
     }
 
 
-
-
-
 type alias Style msg =
-    { dialog : DialogStyle msg
+    { containedButton : ButtonStyle msg
+    , outlinedButton : ButtonStyle msg
+    , textButton : ButtonStyle msg
+    , iconButton : ButtonStyle msg
+    , dialog : DialogStyle msg
     , button : ButtonStyle msg
     , switch : SwitchStyle msg
     , primaryButton : ButtonStyle msg

example/src/Data/Theme.elm

@@ -1,7 +1,6 @@
 module Data.Theme exposing (Theme(..), toStyle)
 
 import Data.Style as Style exposing (Style)
-import Data.Style
 import Widget.Style.Material exposing (Palette)
 
 

example/src/Example/Button.elm

@@ -2,49 +2,78 @@ module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)
-import FeatherIcons
+import Element.Background as Background
-import Widget
+import Element.Border as Border
+import Material.Icons as MaterialIcons
+import Material.Icons.Types exposing (Coloring(..))
+import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
 import Widget.Icon as Icon
-import Widget exposing (ButtonStyle, RowStyle)
+import Widget.Style.Customize as Customize
 import Widget.Style.Material as Material
+import Widget.Style.Material.Color as MaterialColor
+import Widget.Style.Material.Typography as Typography
 
 
 type alias Style style msg =
     { style
-        | primaryButton : ButtonStyle msg
+        | containedButton : ButtonStyle msg
-        , button : ButtonStyle msg
+        , outlinedButton : ButtonStyle msg
+        , textButton : ButtonStyle msg
+        , iconButton : ButtonStyle msg
         , row : RowStyle msg
+        , column : ColumnStyle msg
+        , cardColumn : ColumnStyle msg
     }
 
 
 materialStyle : Style {} msg
 materialStyle =
-    { primaryButton = Material.containedButton Material.defaultPalette
+    { containedButton = Material.containedButton Material.defaultPalette
-    , button = Material.outlinedButton Material.defaultPalette
+    , outlinedButton = Material.outlinedButton Material.defaultPalette
+    , textButton = Material.textButton Material.defaultPalette
+    , iconButton = Material.iconButton Material.defaultPalette
     , row = Material.row
+    , column = Material.column
+    , cardColumn = Material.cardColumn Material.defaultPalette
     }
 
 
-type Model
+type alias Model =
-    = IsButtonEnabled Bool
+    Int
 
 
 type Msg
-    = ChangedButtonStatus Bool
+    = Increase Int
+    | Decrease Int
+    | Reset
 
 
 init : ( Model, Cmd Msg )
 init =
-    ( IsButtonEnabled True
+    ( 0
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg _ =
+update msg model =
     case msg of
-        ChangedButtonStatus bool ->
+        Increase int ->
-            ( IsButtonEnabled bool
+            ( model + int
+            , Cmd.none
+            )
+
+        Decrease int ->
+            ( if (model - int) >= 0 then
+                model - int
+
+              else
+                model
+            , Cmd.none
+            )
+
+        Reset ->
+            ( 0
             , Cmd.none
             )
 
@@ -57,33 +86,91 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style (IsButtonEnabled isButtonEnabled) =
+view msgMapper style model =
-    [ Widget.button style.primaryButton
+    [ model
-        { text = "disable me"
+        |> String.fromInt
-        , icon =
+        |> Element.text
-            FeatherIcons.slash
+        |> Element.el
-                |> Icon.elmFeather FeatherIcons.toHtml
+            (Typography.h4
-        , onPress =
+                ++ [ Element.centerX, Element.centerY ]
-            if isButtonEnabled then
+            )
-                ChangedButtonStatus False
+        |> List.singleton
+        |> Widget.column
+            (style.cardColumn
+                |> Customize.elementColumn
+                    [ Element.centerX
+                    , Element.width <| Element.px 128
+                    , Element.height <| Element.px 128
+                    , Widget.iconButton style.iconButton
+                        { text = "+2"
+                        , icon =
+                            MaterialIcons.exposure_plus_2
+                                |> Icon.elmMaterialIcons Color
+                        , onPress =
+                            Increase 2
+                                |> msgMapper
+                                |> Just
+                        }
+                        |> Element.el [ Element.alignRight ]
+                        |> Element.inFront
+                    ]
+                |> Customize.mapContent
+                    (Customize.element
+                        [ Element.width <| Element.px 128
+                        , Element.height <| Element.px 128
+                        , Material.defaultPalette.secondary
+                            |> MaterialColor.fromColor
+                            |> Background.color
+                        ]
+                    )
+            )
+    , [ [ Widget.textButton style.textButton
+            { text = "Reset"
+            , onPress =
+                Reset
                     |> msgMapper
                     |> Just
+            }
+        , Widget.button style.outlinedButton
+            { text = "Decrease"
+            , icon =
+                MaterialIcons.remove
+                    |> Icon.elmMaterialIcons Color
+            , onPress =
+                if model > 0 then
+                    Decrease 1
+                        |> msgMapper
+                        |> Just
 
-            else
+                else
-                Nothing
+                    Nothing
-        }
+            }
-    , Widget.iconButton style.button
+        ]
-        { text = "reset"
+            |> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ])
-        , icon =
+      , [ Widget.button style.containedButton
-            FeatherIcons.repeat
+            { text = "Increase"
-                |> Icon.elmFeather FeatherIcons.toHtml
+            , icon =
-        , onPress =
+                MaterialIcons.add
-            ChangedButtonStatus True
+                    |> Icon.elmMaterialIcons Color
-                |> msgMapper
+            , onPress =
-                |> Just
+                Increase 1
-        }
+                    |> msgMapper
+                    |> Just
+            }
+        ]
+            |> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ])
+      ]
+        |> Widget.row
+            (style.row
+                |> Customize.elementRow [ Element.width <| Element.fill ]
+                |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
+            )
     ]
-        |> Widget.row style.row
+        |> Widget.column
+            (style.column
+                |> Customize.elementColumn [ Element.width <| Element.fill ]
+                |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
+            )
 
 
 main : Program () Model Msg

example/src/Example/Dialog.elm

@@ -3,9 +3,8 @@ module Example.Dialog exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import FeatherIcons
-import Widget
-import Widget.Icon as Icon
 import Widget exposing (ButtonStyle, DialogStyle)
+import Widget.Icon as Icon
 import Widget.Style.Material as Material
 
 

example/src/Example/Icon.elm

@@ -13,9 +13,8 @@ import Material.Icons exposing (offline_bolt)
 import Material.Icons.Action
 import Material.Icons.Types exposing (Coloring(..))
 import Octicons
-import Widget
-import Widget.Icon exposing (Icon)
 import Widget exposing (ButtonStyle, RowStyle)
+import Widget.Icon exposing (Icon)
 import Widget.Style.Material as Material
 import Zondicons
 
@@ -73,31 +72,49 @@ view msgMapper style () =
         |> Element.text
         |> List.singleton
         |> Element.paragraph []
-    , [ (Material.Icons.done
+    , [ ( Material.Icons.done
-            |> Widget.Icon.elmMaterialIcons Color,"elm-material-icons")
+            |> Widget.Icon.elmMaterialIcons Color
-      , (Material.Icons.Action.done
+        , "elm-material-icons"
-            |> Widget.Icon.materialIcons, "material-icons")
+        )
-      , (FeatherIcons.check
+      , ( Material.Icons.Action.done
-            |> Widget.Icon.elmFeather FeatherIcons.toHtml,"elm-feather")
+            |> Widget.Icon.materialIcons
-      , (FontAwesome.Solid.check
+        , "material-icons"
-            |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon,"elm-fontawesome")
+        )
-      , (Ionicon.checkmark
+      , ( FeatherIcons.check
-            |> Widget.Icon.elmIonicons,"elm-ionicons")
+            |> Widget.Icon.elmFeather FeatherIcons.toHtml
-      , (Octicons.check
+        , "elm-feather"
+        )
+      , ( FontAwesome.Solid.check
+            |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
+        , "elm-fontawesome"
+        )
+      , ( Ionicon.checkmark
+            |> Widget.Icon.elmIonicons
+        , "elm-ionicons"
+        )
+      , ( Octicons.check
             |> Widget.Icon.elmOcticons
                 { withSize = Octicons.size
                 , withColor = Octicons.color
                 , defaultOptions = Octicons.defaultOptions
-                },"elm-octicons")
+                }
-      , (Heroicons.Solid.check
+        , "elm-octicons"
-            |> Widget.Icon.elmHeroicons,"elm-heroicons")
+        )
-      , (Ant.Icons.Svg.checkOutlined
+      , ( Heroicons.Solid.check
-            |> Widget.Icon.antDesignIconsElm,"ant-design-icons-elm")
+            |> Widget.Icon.elmHeroicons
-      ,( Zondicons.checkmark
+        , "elm-heroicons"
-            |> Widget.Icon.elmZondicons,"elm-zondicons")
+        )
+      , ( Ant.Icons.Svg.checkOutlined
+            |> Widget.Icon.antDesignIconsElm
+        , "ant-design-icons-elm"
+        )
+      , ( Zondicons.checkmark
+            |> Widget.Icon.elmZondicons
+        , "elm-zondicons"
+        )
       ]
         |> List.map
-            (\(icon,text) ->
+            (\( icon, text ) ->
                 Widget.button style.primaryButton
                     { text = text
                     , icon = icon

example/src/Example/List.elm

@@ -2,14 +2,14 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)
-import Widget
-import Widget exposing (ColumnStyle,SwitchStyle, DividerStyle,ExpansionItemStyle,MultiLineItemStyle,ImageItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
-import Widget.Style.Material as Material
-import FeatherIcons
-import Widget.Icon as Icon
 import Element.Font as Font
+import FeatherIcons
+import Widget exposing (ColumnStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, TextItemStyle)
+import Widget.Icon as Icon
+import Widget.Style.Material as Material
 import Widget.Style.Material.Color as MaterialColor
 
+
 type alias Style style msg =
     { style
         | cardColumn : ColumnStyle msg
@@ -65,11 +65,11 @@ update msg _ =
             , Cmd.none
             )
 
+
 subscriptions : Model -> Sub Msg
 subscriptions _ =
     Sub.none
 
-    
 
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
@@ -79,93 +79,98 @@ view msgMapper style (IsExpanded isExpanded) =
         |> Widget.headerItem style.fullBleedHeader
     , Widget.item <| Element.text <| "Custom Item"
     , Widget.divider style.middleDivider
-    , Widget.item <| Element.el [Element.centerY ] <|  Element.text <| "Custom Item (centered)"
+    , Widget.item <| Element.el [ Element.centerY ] <| Element.text <| "Custom Item (centered)"
     , "Section 2"
         |> Widget.headerItem style.fullBleedHeader
     , Widget.textItem style.textItem
         { onPress = Nothing
-        , icon = 
+        , icon =
             FeatherIcons.triangle
-            |> Icon.elmFeather FeatherIcons.toHtml
+                |> Icon.elmFeather FeatherIcons.toHtml
         , text = "Item with Icon"
-        , content = \{size,color} ->
+        , content =
-            Element.none
+            \{ size, color } ->
+                Element.none
         }
     , Widget.imageItem style.imageItem
         { onPress = Nothing
-        , image = Element.image [Element.width <| Element.px <| 40, Element.height <| Element.px <| 40]
+        , image =
-            { src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
+            Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]
-       , description = "Elm logo"
+                { src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
-       }
+                , description = "Elm logo"
+                }
         , text = "Item with Image"
-        , content = \{size,color} ->
+        , content =
-            "1."
+            \{ size, color } ->
-            |> Element.text
+                "1."
-            |> Element.el
+                    |> Element.text
-                [Font.color <| MaterialColor.fromColor color
+                    |> Element.el
-                ,Font.size size
+                        [ Font.color <| MaterialColor.fromColor color
-                ]
+                        , Font.size size
+                        ]
         }
     , Widget.divider style.insetDivider
     , Widget.textItem style.textItem
-        { onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
+        { onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just
         , icon = always Element.none
         , text = "Click Me"
         , content =
-            \{size,color} ->
+            \{ size, color } ->
-            "2."
+                "2."
-            |> Element.text
+                    |> Element.text
-            |> Element.el
+                    |> Element.el
-                [Font.color <| MaterialColor.fromColor color
+                        [ Font.color <| MaterialColor.fromColor color
-                ,Font.size size
+                        , Font.size size
-                ]
+                        ]
         }
     , Widget.multiLineItem style.multiLineItem
         { title = "Item"
-        , text = "Description"
+        , text = "Description. Description. Description. Description. Description. Description. Description. Description. Description. Description."
         , onPress = Nothing
         , icon = always Element.none
         , content = always Element.none
         }
     , Widget.imageItem style.imageItem
-        { onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
+        { onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just
         , image = Element.none
         , text = "Clickable Item with Switch"
-        , content = \{size,color} ->
+        , content =
-            Widget.switch style.switch
+            \{ size, color } ->
-                { description = "Click Me"
+                Widget.switch style.switch
-                , active = isExpanded
+                    { description = "Click Me"
-                , onPress =
+                    , active = isExpanded
-                    not isExpanded 
+                    , onPress =
-                    |> ToggleCollapsable
+                        not isExpanded
-                    |> msgMapper
+                            |> ToggleCollapsable
-                    |> Just
+                            |> msgMapper
-                }
+                            |> Just
+                    }
         }
     , Widget.divider style.fullBleedDivider
-    ]++ (Widget.expansionItem style.expansionItem
+    ]
-        { onToggle = ToggleCollapsable >> msgMapper
+        ++ Widget.expansionItem style.expansionItem
-        , isExpanded = isExpanded
+            { onToggle = ToggleCollapsable >> msgMapper
-        , icon = always Element.none
+            , isExpanded = isExpanded
-        , text = "Expandable Item"
+            , icon = always Element.none
-        , content = 
+            , text = "Expandable Item"
-            [  "Section 3"
+            , content =
-            |> Widget.headerItem style.insetHeader
+                [ "Section 3"
-        , Widget.textItem style.textItem
+                    |> Widget.headerItem style.insetHeader
-        { onPress = Nothing
+                , Widget.textItem style.textItem
-        , icon =  always Element.none
+                    { onPress = Nothing
-        , text = "Item"
+                    , icon = always Element.none
-        , content =
+                    , text = "Item"
-            \{size,color} ->
+                    , content =
-            "3."
+                        \{ size, color } ->
-            |> Element.text
+                            "3."
-            |> Element.el
+                                |> Element.text
-                [Font.color <| MaterialColor.fromColor color
+                                |> Element.el
-                ,Font.size size
+                                    [ Font.color <| MaterialColor.fromColor color
+                                    , Font.size size
+                                    ]
+                    }
                 ]
-        }
+            }
-        ]
-        })
         |> Widget.itemList style.cardColumn
 
 

example/src/Example/Modal.elm

@@ -3,9 +3,8 @@ module Example.Modal exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import FeatherIcons
-import Widget
-import Widget.Icon as Icon
 import Widget exposing (ButtonStyle, ColumnStyle)
+import Widget.Icon as Icon
 import Widget.Style.Material as Material
 
 

example/src/Example/MultiSelect.elm

@@ -3,7 +3,6 @@ module Example.MultiSelect exposing (Model, Msg, init, subscriptions, update, vi
 import Browser
 import Element exposing (Element)
 import Set exposing (Set)
-import Widget
 import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material
 

example/src/Example/ProgressIndicator.elm

@@ -2,7 +2,6 @@ module Example.ProgressIndicator exposing (Model, Msg, init, subscriptions, upda
 
 import Browser
 import Element exposing (Element)
-import Widget
 import Widget exposing (ProgressIndicatorStyle)
 import Widget.Style.Material as Material
 

example/src/Example/Select.elm

@@ -2,7 +2,6 @@ module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)
-import Widget
 import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material
 

example/src/Example/Snackbar.elm

@@ -4,9 +4,8 @@ import Browser
 import Element exposing (Element)
 import FeatherIcons
 import Time
-import Widget
-import Widget.Snackbar as Snackbar exposing (Snackbar)
 import Widget exposing (ButtonStyle, ColumnStyle, RowStyle, SnackbarStyle)
+import Widget.Snackbar as Snackbar exposing (Snackbar)
 import Widget.Style.Material as Material
 
 

example/src/Example/SortTable.elm

@@ -2,7 +2,6 @@ module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view
 
 import Browser
 import Element exposing (Element)
-import Widget
 import Widget exposing (SortTableStyle)
 import Widget.Style.Material as Material
 

example/src/Example/Switch.elm

@@ -3,7 +3,6 @@ module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import FeatherIcons
-import Widget
 import Widget exposing (RowStyle, SwitchStyle)
 import Widget.Style.Material as Material
 

example/src/Example/Tab.elm

@@ -2,7 +2,6 @@ module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)
-import Widget
 import Widget exposing (TabStyle)
 import Widget.Style.Material as Material
 

example/src/Example/TextInput.elm

@@ -3,7 +3,6 @@ module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view
 import Browser
 import Element exposing (Element)
 import Set exposing (Set)
-import Widget
 import Widget exposing (ColumnStyle, TextInputStyle)
 import Widget.Style.Material as Material
 

example/src/Main.elm

@@ -439,36 +439,36 @@ viewLoaded m =
 
                                                 else
                                                     [ Widget.divider style.fullBleedDivider
-                                                    ] ++ Widget.expansionItem style.expansionItem
+                                                    ]
-                                                        { onToggle =
+                                                        ++ Widget.expansionItem style.expansionItem
-                                                            always
+                                                            { onToggle =
-                                                                (name
+                                                                always
-                                                                    |> Example.fromString
+                                                                    (name
-                                                                    |> Maybe.map ToggledExample
+                                                                        |> Example.fromString
-                                                                    |> Maybe.withDefault Idle
+                                                                        |> Maybe.map ToggledExample
-                                                                )
+                                                                        |> Maybe.withDefault Idle
-                                                        , icon = always Element.none
-                                                        , text =
-                                                            "States"
-                                                        , content =
-                                                            Element.column
-                                                                (Grid.simple
-                                                                    ++ [ Element.width <| Element.fill ]
-                                                                )
-                                                                more
-                                                                |> Widget.item
-                                                                |> List.singleton
-                                                        , isExpanded =
-                                                            name
-                                                                |> Example.fromString
-                                                                |> Maybe.map
-                                                                    (\example ->
-                                                                        m.expanded
-                                                                            |> AnySet.member example
                                                                     )
-                                                                |> Maybe.withDefault False
+                                                            , icon = always Element.none
-                                                        }
+                                                            , text =
-                                                    
+                                                                "States"
+                                                            , content =
+                                                                Element.column
+                                                                    (Grid.simple
+                                                                        ++ [ Element.width <| Element.fill ]
+                                                                    )
+                                                                    more
+                                                                    |> Widget.item
+                                                                    |> List.singleton
+                                                            , isExpanded =
+                                                                name
+                                                                    |> Example.fromString
+                                                                    |> Maybe.map
+                                                                        (\example ->
+                                                                            m.expanded
+                                                                                |> AnySet.member example
+                                                                        )
+                                                                    |> Maybe.withDefault False
+                                                            }
                                                )
                                         )
                                             |> Widget.itemList style.cardColumn

example/src/View/States.elm

@@ -276,7 +276,6 @@ multiSelect idle style =
     ]
 
 
-
 tab : msg -> Style msg -> List ( String, Element msg )
 tab idle style =
     [ ( "Nothing selected"
@@ -501,18 +500,25 @@ list _ style =
             |> Widget.row style.row
       )
     , ( "Column"
+      , [ Element.text "A"
+        , Element.text "B"
+        , Element.text "C"
+        ]
+            |> Widget.column style.column
+      )
+    , ( "Column as Card"
       , [ Element.text "A"
         , Element.text "B"
         , Element.text "C"
         ]
             |> Widget.column style.cardColumn
       )
-    , ( "Singleton List"
+    , ( "Singleton List as Card"
       , [ Element.text "A"
         ]
             |> Widget.column style.cardColumn
       )
-    , ( "Empty List"
+    , ( "Empty List as Card"
       , []
             |> Widget.column style.cardColumn
       )

example/tests/Example.elm

@@ -0,0 +1,10 @@
+module Example exposing (..)
+
+import Expect exposing (Expectation)
+import Fuzz exposing (Fuzzer, int, list, string)
+import Test exposing (..)
+
+
+suite : Test
+suite =
+    todo "Implement our first test. See https://package.elm-lang.org/packages/elm-explorations/test/latest for how to do this!"

src/Internal/ExpansionPanel.elm

@@ -30,9 +30,9 @@ type alias ExpansionPanelStyle msg =
                 , icon : IconStyle
                 }
             }
-        , content : {element : List (Attribute msg)}
+        , content : { element : List (Attribute msg) }
-            }
         }
+    }
 
 
 type alias ExpansionPanel msg =
@@ -62,12 +62,12 @@ expansionPanel style model =
                     |> Element.el style.content.panel.content.label.content.text.elementText
                 ]
             , if model.isExpanded then
-                    style.content.panel.content.collapseIcon
+                style.content.panel.content.collapseIcon
-                        style.content.panel.content.icon
+                    style.content.panel.content.icon
 
-                else
+              else
-                    style.content.panel.content.expandIcon
+                style.content.panel.content.expandIcon
-                        style.content.panel.content.icon
+                    style.content.panel.content.icon
             ]
         , if model.isExpanded then
             Element.el style.content.content.element <| model.content

src/Internal/Item.elm

@@ -1,4 +1,4 @@
-module Internal.Item exposing (DividerStyle, HeaderStyle, ImageItemStyle, ImageItem, MultiLineItemStyle,multiLineItem,imageItem, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
+module Internal.Item exposing (DividerStyle, ExpansionItem, ExpansionItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, TextItem, TextItemStyle, divider, expansionItem, headerItem, imageItem, item, multiLineItem, textItem, toItem)
 
 import Element exposing (Attribute, Element)
 import Element.Input as Input
@@ -34,7 +34,7 @@ type alias TextItemStyle msg =
         { elementRow : List (Attribute msg)
         , content :
             { text : { elementText : List (Attribute msg) }
-            , icon : 
+            , icon :
                 { element : List (Attribute msg)
                 , content : IconStyle
                 }
@@ -43,6 +43,7 @@ type alias TextItemStyle msg =
         }
     }
 
+
 type alias MultiLineItemStyle msg =
     { elementButton : List (Attribute msg)
     , ifDisabled : List (Attribute msg)
@@ -50,14 +51,14 @@ type alias MultiLineItemStyle msg =
     , content :
         { elementRow : List (Attribute msg)
         , content :
-            { description : 
+            { description :
-                { elementColumn :  List (Attribute msg)
+                { elementColumn : List (Attribute msg)
                 , content :
-                    { title : {elementText : List (Attribute msg)}
+                    { title : { elementText : List (Attribute msg) }
-                    , text : {elementText : List (Attribute msg)}
+                    , text : { elementText : List (Attribute msg) }
                     }
                 }
-            , icon : 
+            , icon :
                 { element : List (Attribute msg)
                 , content : IconStyle
                 }
@@ -66,6 +67,7 @@ type alias MultiLineItemStyle msg =
         }
     }
 
+
 type alias ImageItemStyle msg =
     { elementButton : List (Attribute msg)
     , ifDisabled : List (Attribute msg)
@@ -80,12 +82,14 @@ type alias ImageItemStyle msg =
         }
     }
 
+
 type alias ExpansionItemStyle msg =
     { item : ItemStyle (TextItemStyle msg) msg
     , expandIcon : Icon msg
     , collapseIcon : Icon msg
     }
 
+
 type alias Item msg =
     List (Attribute msg) -> Element msg
 
@@ -97,6 +101,7 @@ type alias TextItem msg =
     , content : Icon msg
     }
 
+
 type alias ImageItem msg =
     { text : String
     , onPress : Maybe msg
@@ -104,6 +109,7 @@ type alias ImageItem msg =
     , content : Icon msg
     }
 
+
 type alias ExpansionItem msg =
     { icon : Icon msg
     , text : String
@@ -112,6 +118,7 @@ type alias ExpansionItem msg =
     , isExpanded : Bool
     }
 
+
 type alias MultiLineItem msg =
     { title : String
     , text : String
@@ -120,6 +127,7 @@ type alias MultiLineItem msg =
     , content : Icon msg
     }
 
+
 item : Element msg -> Item msg
 item element =
     toItem
@@ -152,12 +160,15 @@ textItem : ItemStyle (TextItemStyle msg) msg -> TextItem msg -> Item msg
 textItem s { onPress, text, icon, content } =
     toItem s
         (\style ->
-            Input.button (style.elementButton ++ (if onPress == Nothing then
+            Input.button
-                    style.ifDisabled
+                (style.elementButton
+                    ++ (if onPress == Nothing then
+                            style.ifDisabled
 
-                else
+                        else
-                    style.otherwise
+                            style.otherwise
-               ))
+                       )
+                )
                 { onPress = onPress
                 , label =
                     [ icon style.content.content.icon.content
@@ -173,19 +184,23 @@ textItem s { onPress, text, icon, content } =
                 }
         )
 
+
 imageItem : ItemStyle (ImageItemStyle msg) msg -> ImageItem msg -> Item msg
 imageItem s { onPress, text, image, content } =
     toItem s
         (\style ->
-            Input.button (style.elementButton ++ (if onPress == Nothing then
+            Input.button
-                    style.ifDisabled
+                (style.elementButton
+                    ++ (if onPress == Nothing then
+                            style.ifDisabled
 
-                else
+                        else
-                    style.otherwise
+                            style.otherwise
-               ))
+                       )
+                )
                 { onPress = onPress
                 , label =
-                    [ image 
+                    [ image
                         |> Element.el style.content.content.image.element
                     , text
                         |> Element.text
@@ -199,46 +214,53 @@ imageItem s { onPress, text, image, content } =
         )
 
 
-
 expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
-expansionItem s { icon, text,onToggle,content,isExpanded} =
+expansionItem s { icon, text, onToggle, content, isExpanded } =
-    (textItem s.item
+    textItem s.item
-         { text = text
+        { text = text
         , onPress = Just <| onToggle <| not isExpanded
         , icon = icon
         , content =
-            (if isExpanded then 
+            if isExpanded then
-                s.collapseIcon 
+                s.collapseIcon
-            else 
+
-                s.expandIcon )
+            else
-        
+                s.expandIcon
         }
-    )
+        :: (if isExpanded then
-        :: (if isExpanded then content else [])
+                content
+
+            else
+                []
+           )
+
 
 multiLineItem : ItemStyle (MultiLineItemStyle msg) msg -> MultiLineItem msg -> Item msg
-multiLineItem s { onPress, title,text, icon, content } =
+multiLineItem s { onPress, title, text, icon, content } =
     toItem s
         (\style ->
-            Input.button (style.elementButton ++ (if onPress == Nothing then
+            Input.button
-                    style.ifDisabled
+                (style.elementButton
+                    ++ (if onPress == Nothing then
+                            style.ifDisabled
 
-                else
+                        else
-                    style.otherwise
+                            style.otherwise
-               ))
+                       )
+                )
                 { onPress = onPress
                 , label =
                     [ icon style.content.content.icon.content
                         |> Element.el style.content.content.icon.element
-                    ,   [ title
+                    , [ title
                             |> Element.text
                             |> List.singleton
                             |> Element.paragraph style.content.content.description.content.title.elementText
-                        , text
+                      , text
                             |> Element.text
                             |> List.singleton
                             |> Element.paragraph style.content.content.description.content.text.elementText
-                        ]
+                      ]
                         |> Element.column style.content.content.description.elementColumn
                     , content style.content.content.content
                     ]
@@ -246,9 +268,10 @@ multiLineItem s { onPress, title,text, icon, content } =
                 }
         )
 
+
 toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg
 toItem style element =
     \attr ->
         element style.content
             |> Element.el
-                (attr ++ (style.element))
+                (attr ++ style.element)

src/Internal/Material/Button.elm

@@ -427,6 +427,7 @@ iconButton palette =
     { elementButton =
         (baseButton palette |> .elementButton)
             ++ [ Element.height <| Element.px 48
+               , Element.width <| Element.minimum 48 <| Element.shrink
                , Border.rounded 24
                , Element.mouseDown
                     [ palette.surface

src/Internal/Material/Icon.elm

@@ -1,13 +1,14 @@
-module Internal.Material.Icon exposing (icon,expand_less,expand_more)
+module Internal.Material.Icon exposing (expand_less, expand_more, icon)
 
+import Color exposing (Color)
 import Element exposing (Element)
 import Svg exposing (Svg)
 import Svg.Attributes
-import Color exposing (Color)
 import Widget.Icon exposing (Icon)
 
-icon : {viewBox:String,size:Int,color:Color} -> List (Svg msg) -> Element msg
+
-icon {viewBox,size,color} =
+icon : { viewBox : String, size : Int, color : Color } -> List (Svg msg) -> Element msg
+icon { viewBox, size, color } =
     Svg.svg
         [ Svg.Attributes.height <| String.fromInt size
         , Svg.Attributes.stroke <| Color.toCssString <| color
@@ -22,15 +23,16 @@ icon {viewBox,size,color} =
         >> Element.html
         >> Element.el []
 
+
 expand_less : Icon msg
 expand_less { size, color } =
-    icon {viewBox = "0 0 48 48"
+    icon
+        { viewBox = "0 0 48 48"
         , size = size
         , color = color
-    }
+        }
         [ Svg.path
             [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z"
-
             ]
             []
         ]
@@ -38,13 +40,13 @@ expand_less { size, color } =
 
 expand_more : Icon msg
 expand_more { size, color } =
-    icon {viewBox = "0 0 48 48"
+    icon
+        { viewBox = "0 0 48 48"
         , size = size
         , color = color
-    }
+        }
         [ Svg.path
             [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z"
-
             ]
             []
-        ]
+        ]

src/Internal/Material/Item.elm

@@ -2,12 +2,12 @@ module Internal.Material.Item exposing
     ( expansionItem
     , fullBleedDivider
     , fullBleedHeader
+    , imageItem
     , insetDivider
     , insetHeader
     , middleDivider
-    , textItem
-    , imageItem
     , multiLineItem
+    , textItem
     )
 
 import Color
@@ -16,7 +16,7 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Html.Attributes as Attributes
-import Internal.Item exposing (DividerStyle,MultiLineItemStyle, ImageItemStyle , ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
+import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
 import Internal.Material.Icon as Icon
 import Internal.Material.Palette exposing (Palette)
 import Svg
@@ -25,6 +25,7 @@ import Widget.Icon exposing (Icon)
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography
 
+
 fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
 fullBleedDivider _ =
     { element =
@@ -240,7 +241,7 @@ textItem _ =
     }
 
 
-multiLineItem : Palette -> ItemStyle ( MultiLineItemStyle msg) msg
+multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
 multiLineItem _ =
     { element = [ Element.padding 0 ]
     , content =
@@ -278,15 +279,20 @@ multiLineItem _ =
             { elementRow = [ Element.spacing 16, Element.width Element.fill ]
             , content =
                 { description =
-                    { elementColumn = [ Element.width Element.fill 
+                    { elementColumn =
-                    , Element.spacing 4
+                        [ Element.width Element.fill
-                    ]
+                        , Element.spacing 4
+                        ]
                     , content =
-                        { title = {elementText = Typography.body1}
+                        { title = { elementText = Typography.body1 }
-                        , text = {elementText = Typography.body2 
+                        , text =
-                            ++ [MaterialColor.gray
+                            { elementText =
-                                |> MaterialColor.fromColor
+                                Typography.body2
-                                |> Font.color]}
+                                    ++ [ MaterialColor.gray
+                                            |> MaterialColor.fromColor
+                                            |> Font.color
+                                       ]
+                            }
                         }
                     }
                 , icon =
@@ -308,6 +314,7 @@ multiLineItem _ =
         }
     }
 
+
 imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
 imageItem _ =
     { element = [ Element.padding 0 ]
@@ -345,8 +352,11 @@ imageItem _ =
         , content =
             { elementRow = [ Element.spacing 16, Element.width Element.fill ]
             , content =
-                { text = { elementText = [ Element.width Element.fill
+                { text =
-                    ] }
+                    { elementText =
+                        [ Element.width Element.fill
+                        ]
+                    }
                 , image =
                     { element =
                         [ Element.width <| Element.px 40
@@ -363,8 +373,6 @@ imageItem _ =
     }
 
 
-
-
 expansionItem : Palette -> ExpansionItemStyle msg
 expansionItem palette =
     { item = textItem palette

src/Internal/Material/Layout.elm

@@ -22,10 +22,11 @@ import Widget.Style.Material.Typography as Typography
 
 more_vert : Icon msg
 more_vert { size, color } =
-    Icon.icon {viewBox = "0 0 48 48"
+    Icon.icon
+        { viewBox = "0 0 48 48"
         , size = size
         , color = color
-    }
+        }
         [ Svg.path
             [ Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"
             ]
@@ -35,10 +36,11 @@ more_vert { size, color } =
 
 search : Icon msg
 search { size, color } =
-    Icon.icon {viewBox = "0 0 48 48"
+    Icon.icon
+        { viewBox = "0 0 48 48"
         , size = size
         , color = color
-    }
+        }
         [ Svg.path
             [ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"
             ]
@@ -48,10 +50,11 @@ search { size, color } =
 
 menu : Icon msg
 menu { size, color } =
-    Icon.icon {viewBox = "0 0 48 48"
+    Icon.icon
+        { viewBox = "0 0 48 48"
         , size = size
         , color = color
-    }
+        }
         [ Svg.path
             [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"
             ]

src/Internal/Material/SortTable.elm

@@ -2,9 +2,10 @@ module Internal.Material.SortTable exposing (sortTable)
 
 import Element
 import Internal.Material.Button as Button
+import Internal.Material.Icon as Icon
 import Internal.Material.Palette exposing (Palette)
 import Internal.SortTable exposing (SortTableStyle)
-import Internal.Material.Icon as Icon
+
 
 sortTable : Palette -> SortTableStyle msg
 sortTable palette =

src/Internal/Material/Switch.elm

@@ -24,7 +24,7 @@ switch palette =
             [ Element.height <| Element.px 14
             , Element.width <| Element.px 34
             , Element.centerY
-        , Element.centerX
+            , Element.centerX
             , Border.rounded <| 10
             ]
         , ifDisabled =
@@ -75,7 +75,6 @@ switch palette =
                     |> Background.color
                 ]
             , Element.alignRight
-            
             , Element.moveRight 8
             ]
         , otherwise =

src/Widget.elm

@@ -6,13 +6,18 @@ module Widget exposing
     , DialogStyle, Dialog, modal, dialog
     , RowStyle, row, buttonRow
     , ColumnStyle, column, buttonColumn
-    , ItemStyle, DividerStyle, HeaderStyle, TextItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, textItem, expansionItem
+    , ItemStyle, Item, item
+    , TextItemStyle, TextItem, textItem
+    , ExpansionItemStyle, ExpansionItem, expansionItem
+    , ImageItemStyle, ImageItem, imageItem
+    , MultiLineItemStyle, MultiLineItem, multiLineItem
+    , HeaderStyle, headerItem
+    , DividerStyle, divider
+    , itemList
     , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
     , TextInputStyle, TextInput, textInput
     , TabStyle, Tab, tab
-    , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator, imageItem
+    , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
-    , ImageItemStyle
-    , MultiLineItemStyle,multiLineItem
     )
 
 {-| This module contains different stateless view functions. No wiring required.
@@ -78,7 +83,6 @@ You can create you own widgets by sticking widgets types together.
 @docs DialogStyle, Dialog, modal, dialog
 
 
-
 # List
 
 ![List](https://orasund.github.io/elm-ui-widgets/assets/list.png)
@@ -98,7 +102,14 @@ You can create you own widgets by sticking widgets types together.
 
 ## Item
 
-@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle,ImageItemStyle, ExpansionItemStyle,MultiLineItemStyle,Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem,imageItem, expansionItem,multiLineItem 
+@docs ItemStyle, Item, item
+@docs TextItemStyle, TextItem, textItem
+@docs ExpansionItemStyle, ExpansionItem, expansionItem
+@docs ImageItemStyle, ImageItem, imageItem
+@docs MultiLineItemStyle, MultiLineItem, multiLineItem
+@docs HeaderStyle, headerItem
+@docs DividerStyle, divider
+@docs itemList, buttonDrawer
 
 
 # Sort Table
@@ -141,11 +152,9 @@ You can create you own widgets by sticking widgets types together.
 import Color exposing (Color)
 import Element exposing (Attribute, Element, Length)
 import Element.Input exposing (Placeholder)
-import Html exposing (Html)
 import Internal.Button as Button
 import Internal.Dialog as Dialog
-import Internal.ExpansionPanel as ExpansionPanel
+import Internal.Item as Item
-import Internal.Item as Item 
 import Internal.List as List
 import Internal.ProgressIndicator as ProgressIndicator
 import Internal.Select as Select
@@ -221,6 +230,18 @@ type alias TextButton msg =
 
 
 {-| A button containing only an icon, the text is used for screenreaders.
+
+    import Widget.Style.Material as Material
+
+    type Msg
+    = Like
+
+    iconButton (Material.iconButton Material.defaultPalette)
+        { text = Like
+        , icon = MaterialIcons.hearth |> Icon.elmMaterialIcons Color
+        , onPress = Just Like
+        }
+
 -}
 iconButton :
     ButtonStyle msg
@@ -478,7 +499,6 @@ dialog =
 
 
 
-
 {----------------------------------------------------------
 - TEXT INPUT
 ----------------------------------------------------------}
@@ -538,7 +558,7 @@ textInput =
 
 
 {-| -}
-type alias ItemStyle content msg=
+type alias ItemStyle content msg =
     { element : List (Attribute msg)
     , content : content
     }
@@ -604,6 +624,7 @@ type alias TextItemStyle msg =
         }
     }
 
+
 {-| -}
 type alias MultiLineItemStyle msg =
     { elementButton : List (Attribute msg)
@@ -612,14 +633,14 @@ type alias MultiLineItemStyle msg =
     , content :
         { elementRow : List (Attribute msg)
         , content :
-            { description : 
+            { description :
-                { elementColumn :  List (Attribute msg)
+                { elementColumn : List (Attribute msg)
                 , content :
-                    { title : {elementText : List (Attribute msg)}
+                    { title : { elementText : List (Attribute msg) }
-                    , text : {elementText : List (Attribute msg)}
+                    , text : { elementText : List (Attribute msg) }
                     }
                 }
-            , icon : 
+            , icon :
                 { element : List (Attribute msg)
                 , content : IconStyle
                 }
@@ -628,6 +649,7 @@ type alias MultiLineItemStyle msg =
         }
     }
 
+
 {-| -}
 type alias ImageItemStyle msg =
     { elementButton : List (Attribute msg)
@@ -643,6 +665,7 @@ type alias ImageItemStyle msg =
         }
     }
 
+
 {-| -}
 type alias ExpansionItemStyle msg =
     { item : ItemStyle (TextItemStyle msg) msg
@@ -650,6 +673,7 @@ type alias ExpansionItemStyle msg =
     , collapseIcon : Icon msg
     }
 
+
 {-| -}
 type alias TextItem msg =
     { text : String
@@ -658,6 +682,7 @@ type alias TextItem msg =
     , content : Icon msg
     }
 
+
 {-| -}
 type alias MultiLineItem msg =
     { title : String
@@ -667,6 +692,7 @@ type alias MultiLineItem msg =
     , content : Icon msg
     }
 
+
 {-| -}
 type alias ImageItem msg =
     { text : String
@@ -675,6 +701,7 @@ type alias ImageItem msg =
     , content : Icon msg
     }
 
+
 {-| -}
 type alias ExpansionItem msg =
     { icon : Icon msg
@@ -717,45 +744,60 @@ headerItem =
 
 {-| A clickable item that contains two spots for icons or additional information and a single line of text.
 -}
-textItem : ItemStyle (TextItemStyle msg) msg
+textItem :
-    -> { text : String
+    ItemStyle (TextItemStyle msg) msg
-    , onPress : Maybe msg
+    ->
-    , icon : Icon msg
+        { text : String
-    , content : Icon msg
+        , onPress : Maybe msg
-    } -> Item msg
+        , icon : Icon msg
+        , content : Icon msg
+        }
+    -> Item msg
 textItem =
     Item.textItem
 
-multiLineItem : ItemStyle (MultiLineItemStyle msg) msg 
+
-    -> { title : String
+multiLineItem :
-    , text : String
+    ItemStyle (MultiLineItemStyle msg) msg
-    , onPress : Maybe msg
+    ->
-    , icon : Icon msg
+        { title : String
-    , content : Icon msg
+        , text : String
-    } -> Item msg
+        , onPress : Maybe msg
+        , icon : Icon msg
+        , content : Icon msg
+        }
+    -> Item msg
 multiLineItem =
     Item.multiLineItem
 
+
 {-| A clickable item that contains a image , a line of text and some additonal information
 -}
-imageItem : ItemStyle (ImageItemStyle msg) msg
+imageItem :
-    -> { text : String
+    ItemStyle (ImageItemStyle msg) msg
-    , onPress : Maybe msg
+    ->
-    , image : Element msg
+        { text : String
-    , content : Icon msg
+        , onPress : Maybe msg
-    } -> Item msg
+        , image : Element msg
+        , content : Icon msg
+        }
+    -> Item msg
 imageItem =
     Item.imageItem
 
+
 {-| An expandable Item
 -}
-expansionItem : ExpansionItemStyle msg 
+expansionItem :
-    -> { icon : Icon msg
+    ExpansionItemStyle msg
-    , text : String
+    ->
-    , onToggle : Bool -> msg
+        { icon : Icon msg
-    , content : List (Item msg)
+        , text : String
-    , isExpanded : Bool
+        , onToggle : Bool -> msg
-    } -> List (Item msg)
+        , content : List (Item msg)
+        , isExpanded : Bool
+        }
+    -> List (Item msg)
 expansionItem =
     Item.expansionItem
 

src/Widget/Layout.elm

@@ -27,7 +27,6 @@ It is responsive and changes view to apply to the [material design guidelines](h
 -}
 
 import Array
-import Color exposing (Color)
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
 import Html exposing (Html)
@@ -35,7 +34,7 @@ import Internal.Button as Button exposing (Button, ButtonStyle)
 import Internal.Dialog as Dialog
 import Internal.Select as Select exposing (Select)
 import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
-import Widget.Icon exposing (Icon, IconStyle)
+import Widget.Icon exposing (Icon)
 import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)
 import Widget.Style.Customize as Customize
 

src/Widget/Style/Material.elm

@@ -7,12 +7,12 @@ module Widget.Style.Material exposing
     , chip, textInput
     , alertDialog
     , row, column
-    , fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
+    , fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem
-    , progressIndicator,imageItem
+    , progressIndicator
     , sortTable
     , snackbar
     , tab, tabButton
-    , layout, multiLineItem
+    , layout
     )
 
 {-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@@ -85,7 +85,7 @@ The [List widget](https://material.io/components/lists) is a very complex widget
 A List is build from items.
 You way want to use special items to visually organize the content of your list.
 
-@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem,multiLineItem,imageItem, expansionItem
+@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem
 
 
 # Progress Indicator
@@ -123,7 +123,7 @@ Note that you might want to checkout the [file on GitHub](https://github.com/Ora
 import Color exposing (Color)
 import Internal.Button exposing (ButtonStyle)
 import Internal.Dialog exposing (DialogStyle)
-import Internal.Item exposing (DividerStyle, ExpansionItemStyle,ImageItemStyle, HeaderStyle, ItemStyle, TextItemStyle,MultiLineItemStyle)
+import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
 import Internal.List exposing (ColumnStyle, RowStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Chip as Chip
@@ -402,18 +402,23 @@ textItem : Palette -> ItemStyle (TextItemStyle msg) msg
 textItem =
     Item.textItem
 
+
 multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
 multiLineItem =
     Item.multiLineItem
 
+
 {-| Similar to a textItem but with an image instead of the icon.
 
 If the image is bigger then 40x40, the size of the item will change.
+
 -}
 imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
-imageItem  =
+imageItem =
     Item.imageItem
 
+
+
 {-------------------------------------------------------------------------------
 -- D I A L O G
 -------------------------------------------------------------------------------}
@@ -426,6 +431,7 @@ alertDialog =
     Dialog.alertDialog
 
 
+
 {-------------------------------------------------------------------------------
 -- P R O G R E S S   I N D I C A T O R
 -------------------------------------------------------------------------------}

tests/Accessibility.elm

@@ -8,8 +8,7 @@ import Element.Background
 import Element.Border
 import Element.Font
 import Element.Input
-import Widget
+import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
-import Widget.Style exposing (ButtonStyle, ColumnStyle, RowStyle)
 import Widget.Style.Material as Material exposing (Palette)
 
 

tests/elm-verify-examples.json

@@ -0,0 +1,15 @@
+{
+  "root": "../src",
+  "tests": [
+    "Widget",
+    "Widget.Style.Material",
+    "Widget.Style.Material.Typography",
+    "Widget.Style.Material.Color",
+    "Widget.Style.Customize",
+    "Widget.Layout",
+    "Widget.ScrollingNav",
+    "Widget.Snackbar",
+    "Widget.Icon",
+    "./README.md"
+  ]
+}