mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 10:17:49 +03:00
Copy Nri.Ui.SegmentedControl.V7 from V6
This commit is contained in:
parent
8674c950fd
commit
b05eefd421
150
src/Nri/Ui/SegmentedControl/V7.elm
Normal file
150
src/Nri/Ui/SegmentedControl/V7.elm
Normal file
@ -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
|
||||
]
|
@ -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
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user