diff --git a/src/Nri/Ui/Tabs/V5.elm b/src/Nri/Ui/Tabs/V5.elm index 5b0803c8..ab8dee21 100644 --- a/src/Nri/Ui/Tabs/V5.elm +++ b/src/Nri/Ui/Tabs/V5.elm @@ -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 diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm index 824da711..372f5c07 100644 --- a/styleguide-app/Examples/Tabs.elm +++ b/styleguide-app/Examples/Tabs.elm @@ -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