Add Icon Page

explorer/elm.json

@@ -8,6 +8,8 @@
     "dependencies": {
         "direct": {
             "avh4/elm-color": "1.0.0",
+            "capitalist/elm-octicons": "2.3.0",
+            "danmarcab/material-icons": "1.0.0",
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
@@ -16,12 +18,18 @@
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm-explorations/markdown": "1.0.0",
+            "feathericons/elm-feather": "1.5.0",
             "ianmackenzie/elm-units": "2.9.0",
             "icidasset/elm-material-icons": "8.0.0",
             "insurello/elm-ui-explorer": "2.0.0",
+            "j-panasiuk/elm-ionicons": "2.0.0",
+            "jasonliang-dev/elm-heroicons": "1.0.3",
+            "lattyware/elm-fontawesome": "5.0.0",
+            "lemol/ant-design-icons-elm": "2.0.0",
             "mdgriffith/elm-ui": "1.1.7",
             "miyamoen/select-list": "4.1.0",
             "noahzgordon/elm-color-extra": "1.0.2",
+            "pehota/elm-zondicons": "1.0.1",
             "turboMaCk/queue": "1.1.0",
             "zwilias/elm-rosetree": "1.5.0"
         },

explorer/src/Main.elm

@@ -14,6 +14,7 @@ import Page.SortTable
 import Page.Switch
 import Page.Tab
 import Page.TextInput
+import Page.Icon
 import UIExplorer
 
 
@@ -31,6 +32,7 @@ pages =
         |> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page
         |> UIExplorer.nextPage "Modal" Page.Modal.page
         |> UIExplorer.nextPage "Layout" Page.Layout.page
+        |> UIExplorer.nextPage "Icon" Page.Icon.page
 
 
 main =

explorer/src/Page/Icon.elm

@@ -0,0 +1,164 @@
+module Page.Icon exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Ant.Icons.Svg
+import Browser
+import Element exposing (Element)
+import Element.Background as Background
+import FeatherIcons
+import FontAwesome.Solid
+import FontAwesome.Svg
+import Heroicons.Solid
+import Ionicon
+import Material.Icons
+import Material.Icons.Action
+import Material.Icons.Types exposing (Coloring(..))
+import Octicons
+import Page
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget exposing (ButtonStyle, RowStyle)
+import Widget.Customize as Customize
+import Widget.Icon
+import Widget.Material as Material
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+import Zondicons
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Icon"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Every icon package on elm-packages is supported."
+
+
+
+
+
+{- This next section is essentially just a normal Elm program. -}
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+
+
+type alias Model =
+    ()
+
+
+type alias Msg =
+    ()
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( ()
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        () ->
+            ( ()
+            , 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.
+-}
+view : Context -> Model -> Element Msg
+view { palette } () =
+    [ ( Material.Icons.done
+            |> Widget.Icon.elmMaterialIcons Color
+        , "elm-material-icons"
+        )
+      , ( Material.Icons.Action.done
+            |> Widget.Icon.materialIcons
+        , "material-icons"
+        )
+      , ( FeatherIcons.check
+            |> Widget.Icon.elmFeather FeatherIcons.toHtml
+        , "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
+            |> Widget.Icon.elmHeroicons
+        , "elm-heroicons"
+        )
+      , ( Ant.Icons.Svg.checkOutlined
+            |> Widget.Icon.antDesignIconsElm
+        , "ant-design-icons-elm"
+        )
+      , ( Zondicons.checkmark
+            |> Widget.Icon.elmZondicons
+        , "elm-zondicons"
+        )
+      ]
+        |> List.map
+            (\( icon, text ) ->
+                Widget.button (Material.containedButton palette)
+                    { text = text
+                    , icon = icon
+                    , onPress = Just  ()
+                    }
+            )
+        |> Element.wrappedRow [ Element.spacing 10 ]
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = Page.demo view
+    , subscriptions = subscriptions
+    }
+
+
+page =
+    Tile.static []
+        (\_ _ ->
+            [ title |> Element.text |> Element.el Typography.h3
+            , description |> Element.text |> List.singleton |> Element.paragraph []
+            ]
+                |> Element.column [ Element.spacing 32 ]
+        )
+        |> Tile.first
+        |> Tile.next demo
+        |> Tile.page

explorer/src/UIExplorer.elm

@@ -701,6 +701,7 @@ viewSuccess config ((PageBuilder pages) as pages_) model =
                 :: Element.inFront
                     (Element.el
                         [ Element.height <| Element.px (Pixels.inPixels model.windowSize.height)
+                        , Element.scrollbarY
                         , Element.Font.size 16
                         ]
                         (viewSidebar pages_ config model)