diff --git a/styleguide-app/CommonControls.elm b/styleguide-app/CommonControls.elm index 631e8e2f..0ed31e53 100644 --- a/styleguide-app/CommonControls.elm +++ b/styleguide-app/CommonControls.elm @@ -1,6 +1,8 @@ -module CommonControls exposing (httpError) +module CommonControls exposing (exampleHtml, httpError, quickBrownFox, romeoAndJulietQuotation) import Debug.Control as Control exposing (Control) +import Html.Styled as Html exposing (Html) +import Html.Styled.Attributes as Attributes import Http @@ -38,3 +40,42 @@ httpError = ) ) ] + + +quickBrownFox : String +quickBrownFox = + "The quick brown fox jumps over the lazy dog." + + +romeoAndJulietQuotation : String +romeoAndJulietQuotation = + """ + Two households, both alike in dignity, + In fair Verona, where we lay our scene, + From ancient grudge break to new mutiny, + Where civil blood makes civil hands unclean. + From forth the fatal loins of these two foes + A pair of star-cross’d lovers take their life; + Whose misadventured piteous overthrows + Do with their death bury their parents’ strife. + The fearful passage of their death-mark’d love, + And the continuance of their parents’ rage, + Which, but their children’s end, nought could remove, + Is now the two hours’ traffic of our stage; + The which if you with patient ears attend, + What here shall miss, our toil shall strive to mend. + """ + + +exampleHtml : List (Html msg) +exampleHtml = + [ Html.text "This is a " + , Html.strong [] [ Html.text "bolded phrase" ] + , Html.text ". " + , Html.a + [ Attributes.href "http://www.noredink.com" + , Attributes.target "_blank" + ] + [ Html.text quickBrownFox ] + , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home." + ] diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm index ed92f245..128dc1cc 100644 --- a/styleguide-app/Examples/Container.elm +++ b/styleguide-app/Examples/Container.elm @@ -7,6 +7,7 @@ module Examples.Container exposing (Msg, State, example) -} import Category exposing (Category(..)) +import CommonControls exposing (romeoAndJulietQuotation) import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra @@ -149,26 +150,6 @@ controlContent = ] -romeoAndJulietQuotation : String -romeoAndJulietQuotation = - """ - Two households, both alike in dignity, - In fair Verona, where we lay our scene, - From ancient grudge break to new mutiny, - Where civil blood makes civil hands unclean. - From forth the fatal loins of these two foes - A pair of star-cross’d lovers take their life; - Whose misadventured piteous overthrows - Do with their death bury their parents’ strife. - The fearful passage of their death-mark’d love, - And the continuance of their parents’ rage, - Which, but their children’s end, nought could remove, - Is now the two hours’ traffic of our stage; - The which if you with patient ears attend, - What here shall miss, our toil shall strive to mend. - """ - - {-| -} type Msg = UpdateControl (Control (List (Container.Attribute Msg))) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 5ee01bb1..18de4743 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -7,12 +7,13 @@ module Examples.Text exposing (example, State, Msg) -} import Category exposing (Category(..)) +import CommonControls exposing (exampleHtml, quickBrownFox, romeoAndJulietQuotation) import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Example exposing (Example) -import Html.Styled as Html -import Html.Styled.Attributes as Attributes +import Html.Styled as Html exposing (Html) +import Html.Styled.Attributes as Attributes exposing (css) import KeyboardSupport exposing (Direction(..), Key(..)) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V6 as Text @@ -31,25 +32,6 @@ example = , view = \state -> let - exampleHtml kind = - [ Html.text "This is a " - , Html.strong [] [ Html.text kind ] - , Html.text ". " - , Html.a - [ Attributes.href "http://www.noredink.com" - , Attributes.target "_blank" - ] - [ Html.text "The quick brown fox jumps over the lazy dog." ] - , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take." - ] - - exampleUGHtml kind = - [ Html.text "This is a " - , Html.strong [] [ Html.text kind ] - , Html.text ". The quick brown fox jumps over the lazy dog." - , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home." - ] - attributes = Control.currentValue state.control in @@ -57,13 +39,19 @@ example = , Control.view UpdateControl state.control |> Html.fromUnstyled , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ] - , Text.mediumBody [ Text.html (exampleHtml "mediumBody") ] - , Text.smallBody [ Text.html (exampleHtml "smallBody") ] - , Text.smallBodyGray [ Text.html (exampleHtml "smallBodyGray") ] - , Text.caption [ Text.html (exampleHtml "caption") ] + , viewExamples + [ ( "mediumBody", Text.mediumBody ) + , ( "smallBody", Text.smallBody ) + , ( "smallBodyGray", Text.smallBodyGray ) + , ( "caption", Text.caption ) + ] + attributes , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ] - , Text.ugMediumBody [ Text.html (exampleUGHtml "ugMediumBody") ] - , Text.ugSmallBody [ Text.html (exampleUGHtml "ugSmallBody") ] + , viewExamples + [ ( "ugMediumBody", Text.ugMediumBody ) + , ( "ugSmallBody", Text.ugSmallBody ) + ] + attributes , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "One-Off Styles" ] , Text.mediumBody [ Text.css [ Css.padding (Css.px 20) ] @@ -85,6 +73,21 @@ example = } +viewExamples : List ( String, List (Text.Attribute msg) -> Html msg ) -> List (Text.Attribute msg) -> Html msg +viewExamples examples attributes = + let + viewExample ( name, view ) = + Html.tr [] + [ Html.th [] [ Html.text name ] + , Html.td [] [ view attributes ] + ] + in + Html.table [ css [ Css.width (Css.pct 100) ] ] + [ Html.tbody [] <| + List.map viewExample examples + ] + + {-| -} type alias State = { control : Control (List (Text.Attribute Msg)) @@ -94,10 +97,33 @@ type alias State = {-| -} init : State init = - { control = ControlExtra.list + { control = + ControlExtra.list + |> ControlExtra.listItem "content" controlContent } +controlContent : Control (Text.Attribute msg) +controlContent = + Control.choice + [ ( "HTML" + , Control.value (Text.html exampleHtml) + ) + , ( "plain text (short)" + , Control.string quickBrownFox + |> Control.map Text.plaintext + ) + , ( "plain text (long)" + , Control.stringTextarea romeoAndJulietQuotation + |> Control.map Text.plaintext + ) + , ( "markdown" + , Control.string romeoAndJulietQuotation + |> Control.map Text.markdown + ) + ] + + {-| -} type Msg = UpdateControl (Control (List (Text.Attribute Msg)))