Add Switch Page

explorer/src/Main.elm

@@ -4,12 +4,14 @@ import Element
 import Page.Button
 import Page.PasswordInput
 import Page.Select
+import Page.Switch
 import UIExplorer
 
 
 pages =
     UIExplorer.firstPage "Button" Page.Button.page
         |> UIExplorer.nextPage "Select" Page.Select.page
+        |> UIExplorer.nextPage "Switch" Page.Switch.page
         |> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
 
 

explorer/src/Page/Button.elm

@@ -14,11 +14,6 @@ import Widget
 import Widget.Customize as Customize
 import Widget.Icon as Icon
 import Widget.Material as Material
-    exposing
-        ( containedButton
-        , outlinedButton
-        , textButton
-        )
 import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
 
@@ -41,8 +36,8 @@ description =
 -}
 viewFunctions =
     let
-        viewButton button text icon onPress { palette } () =
-            Widget.button (button palette)
+        viewButton style text icon onPress { palette } () =
+            Widget.button (style palette)
                 { text = text
                 , icon = icon
                 , onPress = onPress
@@ -50,9 +45,9 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.button"
 
-        viewTextButton button text _ onPress { palette } () =
+        viewTextButton style text _ onPress { palette } () =
             Widget.textButton
-                (button palette
+                (style palette
                     |> Customize.elementButton
                         [ Element.alignLeft
                         , Element.centerY
@@ -64,9 +59,9 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.textButton"
 
-        viewIconButton button text icon onPress { palette } () =
+        viewIconButton style text icon onPress { palette } () =
             Widget.iconButton
-                (button palette
+                (style palette
                     |> Customize.elementButton
                         [ Element.alignLeft
                         , Element.centerY
@@ -93,9 +88,9 @@ book =
         --Adding a option for different styles.
         |> Story.addStory
             (Story.optionListStory "Style"
-                ( "Contained", containedButton )
-                [ ( "Outlined", outlinedButton )
-                , ( "Text", textButton )
+                ( "Contained", Material.containedButton )
+                [ ( "Outlined", Material.outlinedButton )
+                , ( "Text", Material.textButton )
                 ]
             )
         --Changing the text of the label
@@ -114,7 +109,7 @@ book =
             )
         --Should an event be triggered when pressing the button?
         |> Story.addStory
-            (Story.boolStory "with event handler"
+            (Story.boolStory "With event handler"
                 ( Just (), Nothing )
                 True
             )
@@ -122,10 +117,10 @@ book =
 
 
 
+{- This next section is essentially just a normal Elm program. -}
 --------------------------------------------------------------------------------
 -- Interactive Demonstration
 --------------------------------------------------------------------------------
-{- This section here is essentially just a normal Elm program. -}
 
 
 type alias Model =
@@ -139,10 +134,6 @@ type Msg
     | Noop
 
 
-
---|> Story.addTile (Just "Interactive example") view
-
-
 init : ( Model, Cmd Msg )
 init =
     ( 0, Cmd.none )
@@ -274,6 +265,12 @@ view { palette } model =
             )
 
 
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
 demo : Tile Model Msg ()
 demo =
     { init = always init
@@ -283,12 +280,6 @@ demo =
     }
 
 
-
---------------------------------------------------------------------------------
--- DO NOT MODIFY ANTHING AFTER THIS LINE
---------------------------------------------------------------------------------
-
-
 page =
     Page.create
         { title = title

explorer/src/Page/PasswordInput.elm

@@ -84,10 +84,10 @@ book =
 
 
 
---------------------------------------------------------------------------------
+---{- This next section is essentially just a normal Elm program. -}
+-----------------------------------------------------------------------------
 -- Interactive Demonstration
 --------------------------------------------------------------------------------
-{- This section here is essentially just a normal Elm program. -}
 
 
 type alias Model =
@@ -162,6 +162,12 @@ view { palette } model =
         |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
 
 
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
 demo : Tile Model Msg ()
 demo =
     { init = always init
@@ -171,12 +177,6 @@ demo =
     }
 
 
-
---------------------------------------------------------------------------------
--- DO NOT MODIFY ANTHING AFTER THIS LINE
---------------------------------------------------------------------------------
-
-
 page =
     Page.create
         { title = title

explorer/src/Page/Select.elm

@@ -132,7 +132,7 @@ book =
             )
         --Should an event be triggered when pressing the button?
         |> Story.addStory
-            (Story.boolStory "with event handler"
+            (Story.boolStory "With event handler"
                 ( always <| Just (), always Nothing )
                 True
             )
@@ -140,10 +140,10 @@ book =
 
 
 
+{- This next section is essentially just a normal Elm program. -}
 --------------------------------------------------------------------------------
 -- Interactive Demonstration
 --------------------------------------------------------------------------------
-{- This section here is essentially just a normal Elm program. -}
 
 
 type Model
@@ -197,6 +197,12 @@ view { palette } (Selected selected) =
             }
 
 
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
 demo =
     { init = always init
     , view = Page.demo view
@@ -205,12 +211,6 @@ demo =
     }
 
 
-
---------------------------------------------------------------------------------
--- DO NOT MODIFY ANTHING AFTER THIS LINE
---------------------------------------------------------------------------------
-
-
 page =
     Page.create
         { title = title

explorer/src/Page/Switch.elm

@@ -0,0 +1,163 @@
+module Page.Switch exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Element exposing (Element)
+import Element.Background as Background
+import Material.Icons as MaterialIcons
+import Material.Icons.Types exposing (Coloring(..))
+import Page
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget
+import Widget.Customize as Customize
+import Widget.Icon as Icon
+import Widget.Material as Material
+    exposing
+        ( containedButton
+        , outlinedButton
+        , textButton
+        )
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Switch"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Switches toggle the state of a single item on or off."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewSwitch style desc active onPress { palette } () =
+            Widget.switch (style palette)
+                { description = desc
+                , active = active
+                , onPress = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.switch"
+    in
+    [ viewSwitch ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+book =
+    Story.book (Just "Options")
+        viewFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "Switch", Material.switch )
+                []
+            )
+        --Changing the text of the label
+        |> Story.addStory
+            (Story.textStory "Description"
+                "Be Awesome"
+            )
+        --Change the Icon
+        |> Story.addStory
+            (Story.boolStory "Active"
+                ( True
+                , False
+                )
+                True
+            )
+        --Should an event be triggered when pressing the button?
+        |> Story.addStory
+            (Story.boolStory "with event handler"
+                ( Just (), Nothing )
+                True
+            )
+        |> Story.build
+
+
+
+{- This next section is essentially just a normal Elm program. -}
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+
+
+type Model
+    = IsButtonEnabled Bool
+
+
+type Msg
+    = ToggledButtonStatus
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsButtonEnabled False
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg (IsButtonEnabled buttonEnabled) =
+    case msg of
+        ToggledButtonStatus ->
+            ( IsButtonEnabled <| not buttonEnabled
+            , 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 } (IsButtonEnabled isButtonEnabled) =
+    Widget.switch (Material.switch palette)
+        { description = "click me"
+        , active = isButtonEnabled
+        , onPress =
+            ToggledButtonStatus
+                |> Just
+        }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = Page.demo view
+    , subscriptions = subscriptions
+    }
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }