Copy Nri.Ui.SegmentedControl.V7 from V6

src/Nri/Ui/SegmentedControl/V7.elm

@@ -0,0 +1,150 @@
+module Nri.Ui.SegmentedControl.V7 exposing (Config, Icon, Option, Width(..), view)
+
+{-|
+
+@docs Config, Icon, Option, Width, view
+
+-}
+
+import Accessibility.Styled exposing (..)
+import Accessibility.Styled.Role as Role
+import Css exposing (..)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attr exposing (css)
+import Html.Styled.Events as Events
+import Nri.Ui
+import Nri.Ui.Colors.Extra exposing (withAlpha)
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Icon.V3 as Icon
+
+
+{-| -}
+type alias Config a msg =
+    { onClick : a -> msg
+    , options : List (Option a)
+    , selected : a
+    , width : Width
+    }
+
+
+{-| -}
+type alias Option a =
+    { value : a
+    , icon : Maybe Icon
+    , label : String
+    , id : String
+    }
+
+
+{-| -}
+type Width
+    = FitContent
+    | FillContainer
+
+
+{-| -}
+type alias Icon =
+    { alt : String
+    , icon : Icon.IconType
+    }
+
+
+{-| -}
+view : Config a msg -> Html.Html msg
+view config =
+    tabList <|
+        List.map (viewTab config) config.options
+
+
+tabList : List (Html.Html msg) -> Html.Html msg
+tabList =
+    Nri.Ui.styled div
+        "Nri-Ui-SegmentedControl-tabList"
+        [ displayFlex, cursor pointer ]
+        [ Role.tabList ]
+
+
+viewTab : Config a msg -> Option a -> Html.Html msg
+viewTab config option =
+    Html.div
+        [ Attr.id option.id
+        , Role.tab
+        , Events.onClick (config.onClick option.value)
+        , css sharedTabStyles
+        , css <|
+            if option.value == config.selected then
+                focusedTabStyles
+
+            else
+                unFocusedTabStyles
+        , css <|
+            case config.width of
+                FitContent ->
+                    []
+
+                FillContainer ->
+                    expandingTabStyles
+        ]
+        [ case option.icon of
+            Nothing ->
+                Html.text ""
+
+            Just icon ->
+                viewIcon icon
+        , Html.text option.label
+        ]
+
+
+viewIcon : Icon -> Html.Html msg
+viewIcon icon =
+    Html.span
+        [ css [ marginRight (px 10) ] ]
+        [ Icon.icon icon ]
+
+
+sharedTabStyles : List Style
+sharedTabStyles =
+    [ padding2 (px 6) (px 20)
+    , height (px 45)
+    , Fonts.baseFont
+    , fontSize (px 15)
+    , color Colors.azure
+    , fontWeight bold
+    , lineHeight (px 30)
+    , firstOfType
+        [ borderTopLeftRadius (px 8)
+        , borderBottomLeftRadius (px 8)
+        , borderLeft3 (px 1) solid Colors.azure
+        ]
+    , lastOfType
+        [ borderTopRightRadius (px 8)
+        , borderBottomRightRadius (px 8)
+        ]
+    , border3 (px 1) solid Colors.azure
+    , borderLeft (px 0)
+    , boxSizing borderBox
+    ]
+
+
+focusedTabStyles : List Style
+focusedTabStyles =
+    [ backgroundColor Colors.glacier
+    , boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20)
+    , color Colors.gray20
+    ]
+
+
+unFocusedTabStyles : List Style
+unFocusedTabStyles =
+    [ backgroundColor Colors.white
+    , boxShadow5 inset zero (px -2) zero Colors.azure
+    , color Colors.azure
+    ]
+
+
+expandingTabStyles : List Style
+expandingTabStyles =
+    [ flexGrow (int 1)
+    , textAlign center
+    ]

styleguide-app/Examples/SegmentedControl.elm

@@ -21,7 +21,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attr
 import Html.Styled.Events as Events
 import ModuleExample exposing (Category(..), ModuleExample)
-import Nri.Ui.SegmentedControl.V6 exposing (Width(..))
+import Nri.Ui.SegmentedControl.V7 as SegmentedControl
 
 
 {-| -}
@@ -32,18 +32,18 @@ type Msg
 
 {-| -}
 type alias State =
-    Nri.Ui.SegmentedControl.V6.Config Id Msg
+    SegmentedControl.Config Id Msg
 
 
 {-| -}
 example : (Msg -> msg) -> State -> ModuleExample msg
 example parentMessage state =
-    { name = "Nri.Ui.SegmentedControl.V6"
+    { name = "Nri.Ui.SegmentedControl.V7"
     , category = Widgets
     , content =
         List.map (Html.map parentMessage)
             [ fillContainerCheckbox state.width
-            , Nri.Ui.SegmentedControl.V6.view state
+            , SegmentedControl.view state
             ]
     }
 
@@ -65,11 +65,11 @@ init =
           }
         ]
     , selected = "a"
-    , width = FitContent
+    , width = SegmentedControl.FitContent
     }
 
 
-fillContainerCheckbox : Width -> Html Msg
+fillContainerCheckbox : SegmentedControl.Width -> Html Msg
 fillContainerCheckbox currentOption =
     let
         id =
@@ -77,10 +77,10 @@ fillContainerCheckbox currentOption =
 
         isChecked =
             case currentOption of
-                FitContent ->
+                SegmentedControl.FitContent ->
                     Just False
 
-                FillContainer ->
+                SegmentedControl.FillContainer ->
                     Just True
     in
     Html.div []
@@ -107,10 +107,10 @@ update msg state =
             ( { state
                 | width =
                     if fillContainer then
-                        FillContainer
+                        SegmentedControl.FillContainer
 
                     else
-                        FitContent
+                        SegmentedControl.FitContent
               }
             , Cmd.none
             )