Skip to content

Commit

Permalink
Merge pull request #1414 from NoRedInk/tessa/minimal-tab-suggestions
Browse files Browse the repository at this point in the history 
Tessa/minimal tab suggestions
  • Loading branch information
@ap-nri
ap-nri authored Jun 23, 2023
2 parents 8e7f41d + 9b5884b commit 0db8878
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 93 deletions.
20 changes: 16 additions & 4 deletions component-catalog/src/Code.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ module Code exposing
, commentInline
, list, listMultiline
, tuple
, pipelineMultiline
, record, recordMultiline
, newlineWithIndent, newlines
, withParens
, withParens, withParensMultiline
, anonymousFunction, always
, caseExpression
, browserElement, unstyledView
Expand All @@ -25,9 +26,10 @@ module Code exposing
@docs commentInline
@docs list, listMultiline
@docs tuple
@docs pipelineMultiline
@docs record, recordMultiline
@docs newlineWithIndent, newlines
@docs withParens
@docs withParens, withParensMultiline
@docs anonymousFunction, always
@docs caseExpression
@docs browserElement, unstyledView
Expand Down Expand Up @@ -156,7 +158,7 @@ pipelineMultiline pipedWith indent =
indents =
newlineWithIndent (indent + 1)
in
newlineWithIndent indent ++ String.join (indents ++ "|> ") pipedWith
String.join (indents ++ "|> ") pipedWith


newlines : String
Expand All @@ -175,6 +177,16 @@ withParens val =
"(" ++ val ++ ")"


{-| -}
withParensMultiline : String -> Int -> String
withParensMultiline val indent =
newlineWithIndent indent
++ "("
++ val
++ newlineWithIndent indent
++ ")"


{-| -}
anonymousFunction : String -> String -> String
anonymousFunction vars body =
Expand Down Expand Up @@ -222,7 +234,7 @@ browserElement { init, view, update, subscriptions } =
{-| -}
unstyledView : String -> String
unstyledView view =
pipelineMultiline [ view, "toUnstyled" ] 1
pipelineMultiline [ newlineWithIndent 1 ++ view, "toUnstyled" ] 1


{-| -}
Expand Down
177 changes: 88 additions & 89 deletions component-catalog/src/Examples/MinimalTabs.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.View as ControlView
import Example exposing (Example)
import Html.Styled as Html
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes exposing (css)
import KeyboardSupport exposing (Key(..))
import List.Extra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.MinimalTabs.V1 as MinimalTabs exposing (Tab)
import Nri.Ui.Panel.V1 as Panel
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
import Task


Expand Down Expand Up @@ -86,26 +86,30 @@ example =
]
, view =
\ellieLinkConfig model ->
let
( allTabsCode, allTabsView ) =
List.unzip (allTabs (Control.currentValue model.settings))
in
[ ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetSettings
, settings = model.settings
, mainType = Just "RootHtml.Html { select : Int, focus : Maybe String }"
, extraCode = []
, extraCode = [ "import Nri.Ui.Text.V6 as Text" ]
, renderExample = Code.unstyledView
, toExampleCode =
\_ ->
let
code =
[ moduleName ++ ".view"
, " { focusAndSelect = identity"
, " , selected = " ++ String.fromInt model.selected
, " }"
, Code.listMultiline (List.map Tuple.first allTabs) 1
]
|> String.join "\n"
Code.fromModule moduleName "view"
++ Code.recordMultiline
[ ( "focusAndSelect", "identity" )
, ( "selected", String.fromInt model.selected )
]
1
++ Code.listMultiline allTabsCode 1
in
[ { sectionName = "Example"
, code = code
Expand All @@ -116,46 +120,18 @@ example =
{ focusAndSelect = FocusAndSelectTab
, selected = model.selected
}
(List.map Tuple.second allTabs)
allTabsView
]
}


allTabs : List ( String, Tab Int Msg )
allTabs =
[ buildTab 0
, let
id =
1

idString =
String.fromInt (id + 1)

tabIdString =
"tab-" ++ idString

panelName =
"Panel " ++ idString
in
( String.join ""
[ "MinimalTabs.build { id = " ++ String.fromInt id ++ ", idString = " ++ Code.string tabIdString ++ " }"
, "\n\t [ MinimalTabs.tabHtml (Html.span [] [ Html.text " ++ Code.string "Tab " ++ ", Html.strong [] [ Html.text " ++ Code.string "Two" ++ " ] ])"
, "\n\t , MinimalTabs.panelHtml (text " ++ Code.string "Panel Two" ++ ")"
, "\n\t ]"
]
, MinimalTabs.build { id = id, idString = idString }
[ MinimalTabs.tabHtml (Html.span [] [ Html.text "Tab ", Html.strong [] [ Html.text "Two" ] ])
, MinimalTabs.panelHtml (panelContent id panelName)
]
)
]
++ List.map buildTab [ 2, 3 ]
allTabs : Settings -> List ( String, Tab Int Msg )
allTabs settings =
List.map (buildTab settings) (List.range 0 3)


buildTab :
Int
-> ( String, Tab Int Msg )
buildTab id =
buildTab : Settings -> Int -> ( String, Tab Int Msg )
buildTab settings id =
let
idString =
String.fromInt (id + 1)
Expand All @@ -168,55 +144,71 @@ buildTab id =

panelName =
"Panel " ++ idString

( tabContentCode, tabContentView ) =
if settings.htmlTab && id == 3 then
( Code.fromModule moduleName "tabHtml "
++ Code.withParensMultiline (tabHtmlCode tabName) 3
, MinimalTabs.tabHtml (tabHtmlContent tabName)
)

else
( Code.fromModule moduleName "tabString " ++ Code.string tabName
, MinimalTabs.tabString tabName
)
in
( String.join ""
[ "MinimalTabs.build { id = " ++ String.fromInt id ++ ", idString = " ++ Code.string tabIdString ++ " }"
, "\n\t [ MinimalTabs.tabString " ++ Code.string tabName
, "\n\t , MinimalTabs.panelHtml (text " ++ Code.string panelName ++ ")"
, "\n\t ]"
]
( Code.fromModule moduleName "build "
++ Code.record [ ( "id", String.fromInt id ), ( "idString", Code.string tabIdString ) ]
++ Code.listMultiline
[ tabContentCode
, Code.fromModule moduleName "panelHtml "
++ Code.withParens ("Text.smallBody [ Text.plaintext " ++ Code.string panelName ++ "]")
]
2
, MinimalTabs.build { id = id, idString = tabIdString }
[ MinimalTabs.tabString tabName
, MinimalTabs.panelHtml (panelContent id panelName)
[ tabContentView
, MinimalTabs.panelHtml (Text.smallBody [ Text.plaintext panelName ])
]
)


panelContent : Int -> String -> Html.Html msg
panelContent id panelName =
let
pangrams =
-- cycle panels so that panel contents change when changing tabs
-- without getting too creative :-D
[ ( "The one about the fox"
, "The quick brown fox jumps over the lazy dog."
)
, ( "The one about the wizards"
, "The five boxing wizards jump quickly."
)
, ( "The one about the zebras"
, "How quickly daft jumping zebras vex!"
)
, ( "The one about the sphinxes"
, "Sphinx of black quartz, judge my vow."
)
]
|> List.Extra.splitAt id
|> (\( beforeSplit, afterSplit ) -> afterSplit ++ beforeSplit)
in
Html.div []
(List.concat
[ List.map
(\( title, content ) ->
Panel.view
[ Panel.header title
, Panel.paragraph content
, Panel.containerCss [ Css.margin2 (Css.px 10) Css.zero ]
]
)
pangrams
tabHtmlCode : String -> String
tabHtmlCode tabName =
"span"
++ Code.newlineWithIndent 4
++ "[]"
++ Code.listMultiline
[ "text " ++ Code.string tabName
, Code.pipelineMultiline
[ "UiIcon.exclamation"
, "Svg.withWidth (Css.px 15)"
, "Svg.withHeight (Css.px 15)"
, "Svg.withLabel " ++ Code.string "Notification"
, "Svg.withCss [ Css.verticalAlign Css.textTop, Css.marginLeft (Css.px 5) ]"
, "Svg.withColor Colors.red"
, "Svg.toHtml"
]
5
]
)
4


tabHtmlContent : String -> Html msg
tabHtmlContent tabName =
span
[]
[ text tabName
, UiIcon.exclamation
|> Svg.withWidth (Css.px 15)
|> Svg.withHeight (Css.px 15)
|> Svg.withLabel "Notification"
|> Svg.withCss
[ Css.verticalAlign Css.textTop
, Css.marginLeft (Css.px 5)
]
|> Svg.withColor Colors.red
|> Svg.toHtml
]


type alias State =
Expand All @@ -228,12 +220,19 @@ type alias State =
init : State
init =
{ selected = 0
, settings = Control.record ()
, settings = initSettings
}


type alias Settings =
()
{ htmlTab : Bool
}


initSettings : Control Settings
initSettings =
Control.record Settings
|> Control.field "Show an HTML tab" (Control.bool False)


type Msg
Expand Down

0 comments on commit 0db8878

Please sign in to comment.