diff --git a/component-catalog/src/Category.elm b/component-catalog/src/Category.elm index c1c91543..1b89695d 100644 --- a/component-catalog/src/Category.elm +++ b/component-catalog/src/Category.elm @@ -32,6 +32,7 @@ type Category | Animations | Progress | Navigation + | Tabs {-| -} @@ -47,6 +48,7 @@ all = , Layout , Navigation , Progress + , Tabs , Text ] @@ -89,6 +91,9 @@ fromString string = "Navigation" -> Ok Navigation + "Tabs" -> + Ok Tabs + _ -> Err "Invalid String" @@ -130,6 +135,9 @@ forDisplay category = Navigation -> "Navigation" + Tabs -> + "Tabs" + {-| -} forRoute : Category -> String @@ -179,3 +187,6 @@ forId category = Navigation -> "navigation" + + Tabs -> + "tabs" diff --git a/component-catalog/src/Code.elm b/component-catalog/src/Code.elm index 3c8a487c..be531ef3 100644 --- a/component-catalog/src/Code.elm +++ b/component-catalog/src/Code.elm @@ -8,7 +8,7 @@ module Code exposing , pipelineMultiline , record, recordMultiline , listOfRecordsMultiline - , newlineWithIndent, newlines + , newlineWithIndent, newline, newlines , withParens, withParensMultiline , anonymousFunction, always , caseExpression @@ -32,7 +32,7 @@ module Code exposing @docs pipelineMultiline @docs record, recordMultiline @docs listOfRecordsMultiline -@docs newlineWithIndent, newlines +@docs newlineWithIndent, newline, newlines @docs withParens, withParensMultiline @docs anonymousFunction, always @docs caseExpression @@ -206,11 +206,19 @@ pipelineMultiline pipedWith indent = String.join (indents ++ "|> ") pipedWith +{-| -} newlines : String newlines = - newlineWithIndent 0 ++ newlineWithIndent 0 + newline ++ newline +{-| -} +newline : String +newline = + newlineWithIndent 0 + + +{-| -} newlineWithIndent : Int -> String newlineWithIndent indent = "\n" ++ String.repeat indent tab diff --git a/component-catalog/src/Examples/Carousel.elm b/component-catalog/src/Examples/Carousel.elm index 07c7381d..6e49f963 100644 --- a/component-catalog/src/Examples/Carousel.elm +++ b/component-catalog/src/Examples/Carousel.elm @@ -20,6 +20,7 @@ import Css exposing (..) import Debug.Control as Control exposing (Control) import Debug.Control.View as ControlView import Example exposing (Example) +import Examples.ClickableSvg import Html.Styled as Html exposing (..) import Html.Styled.Attributes as Attributes exposing (class, css) import KeyboardSupport exposing (Key(..)) @@ -35,6 +36,7 @@ import Nri.Ui.Html.V3 exposing (viewJust) import Nri.Ui.Table.V7 as Table import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon +import Routes import Task @@ -194,7 +196,7 @@ example : Example State Msg example = { name = moduleName , version = version - , categories = [ Navigation ] + , categories = [ Layout, Category.Tabs ] , keyboardSupport = [ { keys = [ KeyboardSupport.Tab ] , result = "Move focus to the currently-selected Tab's tab panel" @@ -262,16 +264,39 @@ example = , version = version , update = SetSettings , settings = model.settings - , mainType = Nothing + , mainType = Just "Program () Model Msg" , extraCode = - [ Code.newlines + [ "import Browser" + , Code.newline + , "type alias Model = {}" + , Code.varWithTypeAnnotation "init" "Model" "{}" , Code.unionType "Msg" [ "AnnounceAndSelect { select : Int, announce : String }" , "FocusAndSelect { select : Int, focus : Maybe String }" , "FocusSelectAndAnnounce { select : Int, focus : Maybe String, announce : Maybe String }" ] + , Code.funcWithType "update" + "Msg -> Model -> ( Model, Cmd Msg )" + "msg model" + (Code.caseExpression "msg" + [ ( "_", Code.tuple "model" "Cmd.none" ) + ] + 1 + ) ] - , renderExample = Code.unstyledView + , renderExample = + \viewCode -> + Code.browserElement + { init = Code.always (Code.tuple "init" "Cmd.none") + , view = "view >> toUnstyled" + , update = "update" + , subscriptions = Code.always "Sub.none" + } + ++ Code.newlines + ++ Code.funcWithType "view" + "Model -> Html Msg" + "model" + viewCode , toExampleCode = \_ -> [ { sectionName = "Example" @@ -283,7 +308,15 @@ example = [ Heading.plaintext "Customizable example" , Heading.css [ Css.marginTop (Css.px 30) ] ] - , view + , div + [ css + [ Css.minHeight (Css.px 200) + , Css.displayFlex + , Css.justifyContent Css.center + , Css.alignItems Css.center + ] + ] + [ view ] , Heading.h2 [ Heading.plaintext "Usage examples" , Heading.css [ Css.marginTop (Css.px 30) ] @@ -305,7 +338,7 @@ example = , Table.custom { header = text "Example with added styles" , view = .example - , width = Css.pct 60 + , width = Css.pct 40 , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7) @@ -314,15 +347,54 @@ example = ] , sort = Nothing } + , Table.custom + { header = text "Usage" + , view = .about >> div [] + , width = Css.px 200 + , cellStyles = + always + [ Css.padding2 (Css.px 14) (Css.px 7) + , Css.verticalAlign Css.middle + ] + , sort = Nothing + } ] [ { viewName = "viewWithPreviousAndNextControls" , example = viewTips model.tip + , about = + [ Text.smallBody + [ Text.html [ text "Use this view when you want to control slides with \"next\" and \"previous\" buttons." ] + ] + , Text.smallBody [ Text.html [ text "You can style the slides however you want." ] ] + , Text.smallBody + [ Text.html + [ text "The buttons are " + , ClickableText.link "ClickableSvg" + [ ClickableText.href (Routes.exampleHref Examples.ClickableSvg.example) + , ClickableText.appearsInline + ] + , text "s, and can be styled/modified using ClickableSvg Attributes." + ] + ] + ] } , { viewName = "viewWithTabControls" , example = viewTestimonials model.testimonial + , about = + [ Text.smallBody + [ Text.html [ text "Use this view when you want to control the slides with direct jump-to-slide-style controls." ] + ] + , Text.smallBody [ Text.html [ text "You can style the slides however you want." ] ] + , Text.smallBody [ Text.html [ text "The controls require custom styling, as unfortunately they don't currently compose with any other noredink-ui component." ] ] + ] } , { viewName = "viewWithCombinedControls" , example = viewPackages model.package + , about = + [ Text.smallBody + [ Text.html [ text "Use this view when you want to control the slides with \"next\" and \"previous\" buttons AND direct jump-to-slide-style controls." ] + ] + ] } ] , Heading.h2 diff --git a/component-catalog/src/Examples/SegmentedControl.elm b/component-catalog/src/Examples/SegmentedControl.elm index 9dc241dd..319a43cb 100644 --- a/component-catalog/src/Examples/SegmentedControl.elm +++ b/component-catalog/src/Examples/SegmentedControl.elm @@ -158,7 +158,7 @@ example = , positioning = Tuple.second options.positioning } ] - , categories = [ Layout, Inputs ] + , categories = [ Layout, Inputs, Tabs ] , keyboardSupport = [ { keys = [ KeyboardSupport.Tab ] , result = "Move focus to the currently-selected Control's content" diff --git a/component-catalog/src/Examples/Tabs.elm b/component-catalog/src/Examples/Tabs.elm index 628862db..98054a65 100644 --- a/component-catalog/src/Examples/Tabs.elm +++ b/component-catalog/src/Examples/Tabs.elm @@ -46,7 +46,7 @@ example : Example State Msg example = { name = moduleName , version = version - , categories = [ Layout ] + , categories = [ Layout, Tabs ] , keyboardSupport = [ { keys = [ KeyboardSupport.Tab ] , result = "Move focus to the currently-selected Tab's tab panel" diff --git a/component-catalog/src/Examples/TabsMinimal.elm b/component-catalog/src/Examples/TabsMinimal.elm index 6aa14c4b..46dfb490 100644 --- a/component-catalog/src/Examples/TabsMinimal.elm +++ b/component-catalog/src/Examples/TabsMinimal.elm @@ -43,7 +43,7 @@ example : Example State Msg example = { name = moduleName , version = version - , categories = [ Layout ] + , categories = [ Layout, Tabs ] , keyboardSupport = [ { keys = [ KeyboardSupport.Tab ] , result = "Move focus to the currently-selected Tab's tab panel"