Styled to headers in Tiles

explorer/src/Main.elm

@@ -1,14 +1,17 @@
 module Main exposing (main)
 
 import Element
-import Pages.Button
-import Pages.PasswordInput
+import Page.Button
+import Page.PasswordInput
 import UIExplorer
 
 
 pages =
-    UIExplorer.firstPage "Button" Pages.Button.page
-        |> UIExplorer.nextPage "Password Input" Pages.PasswordInput.page
+    UIExplorer.firstPage "Button" Page.Button.page
+
+
+
+--|> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
 
 
 main =

explorer/src/Page.elm

@@ -0,0 +1,35 @@
+module Page exposing (..)
+
+import Element
+import UIExplorer exposing (Page)
+import UIExplorer.Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Group, Tile, TileMsg)
+import Widget.Material as Material
+import Widget.Material.Typography as Typography
+
+
+{-| Creates a Page.
+
+  - `title` - Should match the name of the Page
+  - `description` - Should match the first paragraph of the documentation.
+
+-}
+create :
+    { title : String
+    , description : String
+    , book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+    , demo : Tile model msg ()
+    }
+    -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
+create { title, description, book, demo } =
+    Tile.static []
+        (\_ _ ->
+            [ title |> Element.text |> Element.el Typography.h3
+            , description |> Element.text |> Element.el []
+            ]
+                |> Element.column [ Element.spacing 32 ]
+        )
+        |> Tile.first
+        |> Tile.nextGroup book
+        |> Tile.next demo
+        |> Tile.page

explorer/src/Page/Button.elm

@@ -1,13 +1,14 @@
-module Pages.Button exposing (page)
+module Page.Button exposing (page)
 
 import Element exposing (Element)
 import Element.Background as Background
 import Element.Font
 import Material.Icons as MaterialIcons exposing (offline_bolt)
 import Material.Icons.Types exposing (Coloring(..))
+import Page
 import UIExplorer
-import UIExplorer.Story as Story
-import UIExplorer.Tile as Tile
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Tile, TileMsg)
 import Widget
 import Widget.Customize as Customize
 import Widget.Icon as Icon exposing (Icon)
@@ -25,19 +26,17 @@ import Widget.Material.Typography as Typography
 
 
 page =
-    Tile.first (intro |> Tile.withTitle "Button")
-        |> Tile.nextGroup book
-        |> Tile.next demo
-        |> Tile.page
-
-
-intro =
-    Tile.markdown []
-        """ A simple button """
+    Page.create
+        { title = "Button"
+        , description = "A simple button"
+        , book = book
+        , demo = demo
+        }
 
 
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
 book =
-    Story.book (Just "options")
+    Story.book (Just "Options")
         (Story.initStaticTiles
             |> Story.addTile viewButton
             |> Story.addTile viewTextButton
@@ -253,6 +252,7 @@ type Msg
 --|> Story.addTile (Just "Interactive example") view
 
 
+demo : Tile Model Msg ()
 demo =
     { init = always init
     , update = update

explorer/src/Page/PasswordInput.elm

@@ -1,4 +1,4 @@
-module Pages.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
+module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)

explorer/src/Page/Switch.elm

@@ -1,4 +1,4 @@
-module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
+module Page.Switch exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)

explorer/src/Page/Tab.elm

@@ -1,4 +1,4 @@
-module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
+module Page.Tab exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)

explorer/src/Page/TextInput.elm

@@ -1,4 +1,4 @@
-module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view)
+module Page.TextInput exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser
 import Element exposing (Element)

explorer/src/UIExplorer/Tile.elm

@@ -7,7 +7,7 @@ import Element.Font as Font
 import Markdown
 import SelectList exposing (SelectList)
 import UIExplorer exposing (Page, PageSize)
-import Widget
+import Widget exposing (Item)
 import Widget.Customize as Customize
 import Widget.Material as Material
 import Widget.Material.Color as MaterialColor
@@ -41,7 +41,7 @@ mapView map view =
     { title = view.title
     , position = view.position
     , attributes = List.map (Element.mapAttribute map) view.attributes
-    , body = Element.map map view.body
+    , body = view.body |> Element.map map
     }
 
 
@@ -279,18 +279,16 @@ layoutAddTile view layout =
 
 layoutView : Material.Palette -> List (Attribute msg) -> View msg -> Element msg
 layoutView palette attributes view =
-    Widget.column
-        (Material.cardColumn palette
-            |> Customize.elementColumn attributes
-            |> Customize.mapContent (Customize.element <| Element.height Element.fill :: view.attributes)
-        )
-    <|
-        List.filterMap identity
-            [ view.title
-                |> Maybe.map Element.text
-                |> Maybe.map (Element.el Typography.h3)
-            , Just view.body
+    case view.title of
+        Just string ->
+            [ string
+                |> Widget.headerItem (Material.fullBleedHeader palette)
+            , view.body |> Widget.asItem
             ]
+                |> Widget.itemList (Material.cardColumn palette)
+
+        Nothing ->
+            view.body
 
 
 layoutRowView : Material.Palette -> LayoutRow msg -> List (Element msg)