NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 03:31:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adds the default tab view helper back in

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/Nri/Ui/Tabs/V5.elm
View File

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

16
styleguide-app/Examples/Tabs.elm
View File

@ -11,11 +11,15 @@ module Examples.Tabs exposing
-} -}
import Category exposing (Category(..)) import Category exposing (Category(..))
import Css
import Debug.Control as Control exposing (Control) import Debug.Control as Control exposing (Control)
import Example exposing (Example) import Example exposing (Example)
import Html.Styled as Html exposing (Html, fromUnstyled) import Html.Styled as Html exposing (Html, fromUnstyled)
import Html.Styled.Attributes exposing (css)
import List.Zipper exposing (Zipper) import List.Zipper exposing (Zipper)
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Tabs.V5 as Tabs exposing (Alignment(..)) import Nri.Ui.Tabs.V5 as Tabs exposing (Alignment(..))
import Nri.Ui.UiIcon.V1 as UiIcon
type alias State = type alias State =
@ -134,16 +138,20 @@ viewTab : Id -> Html msg
viewTab id = viewTab id =
case id of case id of
First -> First ->
Html.text "First Tab" Tabs.viewTabDefault "First Tab"
Second -> Second ->
Html.text "Second Tab" Tabs.viewTabDefault "Second Tab"
Third -> 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 -> Fourth ->
Html.text "Fourth Tab" Tabs.viewTabDefault "Fourth Tab"
viewPanel : Id -> Html msg viewPanel : Id -> Html msg