Adds the default tab view helper back in

This commit is contained in:
Tessa Kelly 2020-06-09 15:28:12 -07:00
parent 738418074d
commit 0fd1cafed9
2 changed files with 29 additions and 7 deletions

View File

@ -4,6 +4,7 @@ module Nri.Ui.Tabs.V5 exposing
, LinkTabConfig(..)
, links
, view
, viewTabDefault
)
{-|
@ -14,6 +15,11 @@ module Nri.Ui.Tabs.V5 exposing
@docs links
@docs view
## Defaults
@docs viewTabDefault
-}
import Accessibility.Styled.Aria as Aria
@ -94,6 +100,17 @@ view config =
]
{-| -}
viewTabDefault : String -> Html msg
viewTabDefault title =
Html.div
[ Attributes.css
[ Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
]
]
[ Html.text title ]
viewTitle : String -> Html msg
viewTitle title =
Html.styled Html.h1
@ -164,7 +181,6 @@ viewTab_ { onSelect, tabs, viewTab, idToString } selected tab =
, Attributes.css
[ Css.color Colors.navy
, Css.margin zero
, Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
, Css.position Css.relative
, Css.textDecoration Css.none
, Css.property "background" "none"
@ -271,7 +287,6 @@ viewTabLink isSelected tabConfig =
Html.styled Html.a
[ Css.color Colors.navy
, Css.display Css.inlineBlock
, Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
, Css.textDecoration Css.none
, hover
[ textDecoration none
@ -294,7 +309,6 @@ viewTabLink isSelected tabConfig =
Html.styled Html.button
[ Css.color Colors.navy
, Css.display Css.inlineBlock
, Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
, Css.textDecoration Css.none
, Css.fontFamily Css.inherit
, Css.fontSize Css.inherit

View File

@ -11,11 +11,15 @@ module Examples.Tabs exposing
-}
import Category exposing (Category(..))
import Css
import Debug.Control as Control exposing (Control)
import Example exposing (Example)
import Html.Styled as Html exposing (Html, fromUnstyled)
import Html.Styled.Attributes exposing (css)
import List.Zipper exposing (Zipper)
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Tabs.V5 as Tabs exposing (Alignment(..))
import Nri.Ui.UiIcon.V1 as UiIcon
type alias State =
@ -134,16 +138,20 @@ viewTab : Id -> Html msg
viewTab id =
case id of
First ->
Html.text "First Tab"
Tabs.viewTabDefault "First Tab"
Second ->
Html.text "Second Tab"
Tabs.viewTabDefault "Second Tab"
Third ->
Html.text "Third Tab"
UiIcon.bulb
|> Svg.withWidth (Css.px 40)
|> Svg.withHeight (Css.px 40)
|> Svg.withCss [ Css.padding2 Css.zero (Css.px 6) ]
|> Svg.toHtml
Fourth ->
Html.text "Fourth Tab"
Tabs.viewTabDefault "Fourth Tab"
viewPanel : Id -> Html msg