mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 19:21:29 +03:00
Merge pull request #882 from NoRedInk/bat/text-and-heading
Bat/text and heading
This commit is contained in:
Tessa
GitHub
commit
443ade9484
8
package-lock.json
generated
8
package-lock.json
generated
@ -2469,13 +2469,13 @@
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -2484,7 +2484,7 @@
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
}
|
||||
@ -2933,7 +2933,7 @@
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.6",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
||||
@ -7,33 +7,35 @@ module Examples.Heading exposing (example, State, Msg)
|
||||
-}
|
||||
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import CommonControls
|
||||
import Debug.Control as Control exposing (Control)
|
||||
import Debug.Control.Extra as ControlExtra
|
||||
import Debug.Control.View as ControlView
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import ViewHelpers exposing (viewExamples)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias State =
|
||||
()
|
||||
moduleName : String
|
||||
moduleName =
|
||||
"Heading"
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Msg =
|
||||
()
|
||||
version : Int
|
||||
version =
|
||||
2
|
||||
|
||||
|
||||
{-| -}
|
||||
example : Example State Msg
|
||||
example =
|
||||
{ name = "Heading"
|
||||
, version = 2
|
||||
{ name = moduleName
|
||||
, version = version
|
||||
, categories = [ Text, Layout ]
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
, state = init
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
[ Heading.h1 [] [ Html.text "h1" ]
|
||||
@ -42,16 +44,97 @@ example =
|
||||
, Heading.h4 [] [ Html.text "h4" ]
|
||||
]
|
||||
, view =
|
||||
\_ ->
|
||||
[ viewExamples
|
||||
[ ( "h1", Heading.h1 [] [ Html.text "This is the main page heading." ] )
|
||||
, ( "h2", Heading.h2 [] [ Html.text "This is a tagline" ] )
|
||||
, ( "h3", Heading.h3 [] [ Html.text "This is a subHeading" ] )
|
||||
, ( "h4", Heading.h4 [] [ Html.text "This is a smallHeading" ] )
|
||||
]
|
||||
, Heading.h2 [ Heading.style Heading.Top ]
|
||||
[ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ]
|
||||
, Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]
|
||||
[ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ]
|
||||
\state ->
|
||||
let
|
||||
examples =
|
||||
[ ( "h1", Heading.h1, "This is the main page heading." )
|
||||
, ( "h2", Heading.h2, "This is a tagline" )
|
||||
, ( "h3", Heading.h3, "This is a subHeading" )
|
||||
, ( "h4", Heading.h4, "This is a smallHeading" )
|
||||
, ( "h5", Heading.h5, "This is also a smallHeading" )
|
||||
]
|
||||
|
||||
attributes =
|
||||
List.map Tuple.second (Control.currentValue state.control)
|
||||
in
|
||||
[ ControlView.view
|
||||
{ name = moduleName
|
||||
, version = version
|
||||
, update = UpdateControl
|
||||
, settings = state.control
|
||||
, toExampleCode =
|
||||
\settings ->
|
||||
let
|
||||
toExampleCode ( name, _, content ) =
|
||||
{ sectionName = name
|
||||
, code =
|
||||
moduleName
|
||||
++ "."
|
||||
++ name
|
||||
++ "\n [ "
|
||||
++ String.join "\n , " (List.map Tuple.first settings)
|
||||
++ "\n ]"
|
||||
++ ("\n [ Html.text \"" ++ content ++ "\" ]")
|
||||
}
|
||||
in
|
||||
List.map toExampleCode examples
|
||||
}
|
||||
, examples
|
||||
|> List.map
|
||||
(\( name, view, content ) ->
|
||||
( name, view attributes [ Html.text content ] )
|
||||
)
|
||||
|> viewExamples
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias State =
|
||||
{ control : Control Settings
|
||||
}
|
||||
|
||||
|
||||
init : State
|
||||
init =
|
||||
{ control =
|
||||
ControlExtra.list
|
||||
|> CommonControls.css { moduleName = moduleName, use = Heading.css }
|
||||
|> ControlExtra.optionalBoolListItem "error" ( "Heading.error", Heading.error )
|
||||
|> ControlExtra.optionalListItem "style" controlStyle
|
||||
}
|
||||
|
||||
|
||||
controlStyle : Control ( String, Heading.Attribute msg )
|
||||
controlStyle =
|
||||
[ ( "Top", Heading.Top )
|
||||
, ( "Tagline", Heading.Tagline )
|
||||
, ( "Subhead", Heading.Subhead )
|
||||
, ( "Small", Heading.Small )
|
||||
]
|
||||
|> List.map
|
||||
(\( name, val ) ->
|
||||
( name
|
||||
, Control.value
|
||||
( "Heading.style Heading." ++ name
|
||||
, Heading.style val
|
||||
)
|
||||
)
|
||||
)
|
||||
|> Control.choice
|
||||
|
||||
|
||||
type alias Settings =
|
||||
List ( String, Heading.Attribute Msg )
|
||||
|
||||
|
||||
{-| -}
|
||||
type Msg
|
||||
= UpdateControl (Control Settings)
|
||||
|
||||
|
||||
update : Msg -> State -> ( State, Cmd Msg )
|
||||
update msg state =
|
||||
case msg of
|
||||
UpdateControl settings ->
|
||||
( { state | control = settings }, Cmd.none )
|
||||
|
||||
@ -11,41 +11,76 @@ import CommonControls
|
||||
import Css
|
||||
import Debug.Control as Control exposing (Control)
|
||||
import Debug.Control.Extra as ControlExtra
|
||||
import Debug.Control.View as ControlView
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html exposing (Html)
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import Nri.Ui.Text.V6 as Text
|
||||
|
||||
|
||||
moduleName : String
|
||||
moduleName =
|
||||
"Text"
|
||||
|
||||
|
||||
version : Int
|
||||
version =
|
||||
6
|
||||
|
||||
|
||||
{-| -}
|
||||
example : Example State Msg
|
||||
example =
|
||||
{ name = "Text"
|
||||
, version = 6
|
||||
{ name = moduleName
|
||||
, version = version
|
||||
, categories = [ Text ]
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
[ ( "caption", Text.caption )
|
||||
, ( "smallBody", Text.smallBody )
|
||||
, ( "mediumBody", Text.mediumBody )
|
||||
, ( "ugMediumBody", Text.ugMediumBody )
|
||||
[ Text.caption [ Text.plaintext "caption" ]
|
||||
, Text.smallBody [ Text.plaintext "smallBody" ]
|
||||
, Text.mediumBody [ Text.plaintext "mediumBody" ]
|
||||
, Text.ugMediumBody [ Text.plaintext "ugMediumBody" ]
|
||||
]
|
||||
|> List.map viewPreview
|
||||
, view =
|
||||
\state ->
|
||||
let
|
||||
attributes =
|
||||
Control.currentValue state.control
|
||||
List.map Tuple.second (Control.currentValue state.control)
|
||||
in
|
||||
[ Text.caption [ Text.plaintext "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
|
||||
, Control.view UpdateControl state.control
|
||||
|> Html.fromUnstyled
|
||||
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ]
|
||||
, ControlView.view
|
||||
{ name = moduleName
|
||||
, version = version
|
||||
, update = UpdateControl
|
||||
, settings = state.control
|
||||
, toExampleCode =
|
||||
\settings ->
|
||||
let
|
||||
toExampleCode name =
|
||||
{ sectionName = name
|
||||
, code =
|
||||
moduleName
|
||||
++ "."
|
||||
++ name
|
||||
++ "\n [ "
|
||||
++ String.join "\n , " (List.map Tuple.first settings)
|
||||
++ "\n ]"
|
||||
}
|
||||
in
|
||||
[ toExampleCode "mediumBody"
|
||||
, toExampleCode "smallBody"
|
||||
, toExampleCode "smallBodyGray"
|
||||
, toExampleCode "caption"
|
||||
, toExampleCode "ugMediumBody"
|
||||
, toExampleCode "ugSmallBody"
|
||||
]
|
||||
}
|
||||
, Heading.h2 [] [ Html.text "Examples" ]
|
||||
, Heading.h3 [] [ Html.text "Paragraph styles" ]
|
||||
, viewExamples
|
||||
[ ( "mediumBody", Text.mediumBody )
|
||||
, ( "smallBody", Text.smallBody )
|
||||
@ -53,7 +88,7 @@ example =
|
||||
, ( "caption", Text.caption )
|
||||
]
|
||||
attributes
|
||||
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
|
||||
, Heading.h3 [] [ Html.text "Paragraph styles for user-authored content" ]
|
||||
, viewExamples
|
||||
[ ( "ugMediumBody", Text.ugMediumBody )
|
||||
, ( "ugSmallBody", Text.ugSmallBody )
|
||||
@ -63,11 +98,6 @@ example =
|
||||
}
|
||||
|
||||
|
||||
viewPreview : ( String, List (Text.Attribute msg) -> Html msg ) -> Html msg
|
||||
viewPreview ( name, view ) =
|
||||
view [ Text.plaintext name ]
|
||||
|
||||
|
||||
viewExamples : List ( String, List (Text.Attribute msg) -> Html msg ) -> List (Text.Attribute msg) -> Html msg
|
||||
viewExamples examples attributes =
|
||||
let
|
||||
@ -85,7 +115,7 @@ viewExamples examples attributes =
|
||||
|
||||
{-| -}
|
||||
type alias State =
|
||||
{ control : Control (List (Text.Attribute Msg))
|
||||
{ control : Control (List ( String, Text.Attribute Msg ))
|
||||
}
|
||||
|
||||
|
||||
@ -95,20 +125,13 @@ init =
|
||||
{ control =
|
||||
ControlExtra.list
|
||||
|> ControlExtra.listItem "content" controlContent
|
||||
|> ControlExtra.listItem "noBreak"
|
||||
(Control.map Text.noBreak (Control.bool False))
|
||||
|> ControlExtra.optionalListItem "css"
|
||||
(Control.value
|
||||
(Text.css
|
||||
[ Css.border3 (Css.px 1) Css.solid Colors.aqua
|
||||
, Css.color Colors.aquaDark
|
||||
]
|
||||
)
|
||||
)
|
||||
|> ControlExtra.optionalBoolListItem "noBreak"
|
||||
( "Text.noBreak True", Text.noBreak True )
|
||||
|> CommonControls.css { moduleName = "Text", use = Text.css }
|
||||
}
|
||||
|
||||
|
||||
controlContent : Control (Text.Attribute msg)
|
||||
controlContent : Control ( String, Text.Attribute msg )
|
||||
controlContent =
|
||||
CommonControls.content
|
||||
{ moduleName = "Text"
|
||||
@ -117,12 +140,11 @@ controlContent =
|
||||
, html = Text.html
|
||||
, httpError = Nothing
|
||||
}
|
||||
|> Control.map Tuple.second
|
||||
|
||||
|
||||
{-| -}
|
||||
type Msg
|
||||
= UpdateControl (Control (List (Text.Attribute Msg)))
|
||||
= UpdateControl (Control (List ( String, Text.Attribute Msg )))
|
||||
|
||||
|
||||
{-| -}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user