Demo 2-8 segmented controls

styleguide-app/Examples/SegmentedControl.elm

@@ -50,7 +50,7 @@ example =
               in
               viewFn
                 { onClick = SelectNav
-                , options = buildOptions "" options [ A, B, C ] [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
+                , options = buildOptions options (List.range 1 options.count) coloredIcons
                 , selected = state.selectedNav
                 , width = options.width
                 , content = Html.text ("[Content for " ++ Debug.toString state.selectedNav ++ "]")
@@ -59,19 +59,7 @@ example =
             , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
             , SegmentedControl.viewSelect
                 { onClick = MaybeSelect
-                , options =
-                    buildOptions ""
-                        options
-                        (List.range 1 8)
-                        [ UiIcon.leaderboard
-                        , UiIcon.person
-                        , UiIcon.performance
-                        , UiIcon.gift
-                        , UiIcon.document
-                        , UiIcon.key
-                        , UiIcon.badge
-                        , UiIcon.hat
-                        ]
+                , options = buildOptions options (List.range 1 options.count) plainIcons
                 , selected = state.optionallySelected
                 , width = options.width
                 }
@@ -82,8 +70,34 @@ example =
     }
 
 
-buildOptions : String -> Options -> List a -> List Svg -> List (SegmentedControl.Option a)
-buildOptions prefix options selections =
+coloredIcons : List Svg
+coloredIcons =
+    [ UiIcon.flag
+    , UiIcon.sprout
+    , UiIcon.star
+    , UiIcon.sapling
+    , Svg.withColor Colors.greenDark UiIcon.attention
+    , UiIcon.tree
+    , UiIcon.premiumLock
+    , Svg.withColor Colors.purple UiIcon.activity
+    ]
+
+
+plainIcons : List Svg
+plainIcons =
+    [ UiIcon.leaderboard
+    , UiIcon.person
+    , UiIcon.performance
+    , UiIcon.gift
+    , UiIcon.document
+    , UiIcon.key
+    , UiIcon.badge
+    , UiIcon.hat
+    ]
+
+
+buildOptions : Options -> List a -> List Svg -> List (SegmentedControl.Option a)
+buildOptions options selections =
     let
         buildOption option icon =
             { icon =
@@ -92,22 +106,16 @@ buildOptions prefix options selections =
 
                 else
                     Nothing
-            , label = prefix ++ "Choice " ++ Debug.toString option
+            , label = "Choice " ++ Debug.toString option
             , value = option
             }
     in
     List.map2 buildOption selections
 
 
-type ExampleOptionNav
-    = A
-    | B
-    | C
-
-
 {-| -}
 type alias State =
-    { selectedNav : ExampleOptionNav
+    { selectedNav : Int
     , optionallySelected : Maybe Int
     , optionsControl : Control Options
     }
@@ -116,7 +124,7 @@ type alias State =
 {-| -}
 init : State
 init =
-    { selectedNav = A
+    { selectedNav = 1
     , optionallySelected = Nothing
     , optionsControl = optionsControl
     }
@@ -126,6 +134,7 @@ type alias Options =
     { width : SegmentedControl.Width
     , icon : Bool
     , useSpa : Bool
+    , count : Int
     }
 
 
@@ -145,11 +154,15 @@ optionsControl =
                 , ( "viewSpa", Control.value True )
                 ]
             )
+        |> Control.field "count"
+            (Control.choice
+                (List.map (\i -> ( String.fromInt i, Control.value i )) (List.range 2 8))
+            )
 
 
 {-| -}
 type Msg
-    = SelectNav ExampleOptionNav
+    = SelectNav Int
     | MaybeSelect Int
     | ChangeOptions (Control Options)