diff --git a/styleguide-app/CommonControls.elm b/styleguide-app/CommonControls.elm index 8dba216b..2510825a 100644 --- a/styleguide-app/CommonControls.elm +++ b/styleguide-app/CommonControls.elm @@ -1,10 +1,12 @@ -module CommonControls exposing (exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation) +module CommonControls exposing (exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation, uiIcon) import Debug.Control as Control exposing (Control) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import Http import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) +import Nri.Ui.Svg.V1 exposing (Svg) +import Nri.Ui.UiIcon.V1 as UiIcon premiumLevel : Control ( String, PremiumLevel ) @@ -88,3 +90,23 @@ exampleHtml = [ 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." ] + + +uiIcon : Control ( String, Svg ) +uiIcon = + [ ( "arrowLeft", UiIcon.arrowLeft ) + , ( "unarchive", UiIcon.unarchive ) + , ( "share", UiIcon.share ) + , ( "preview", UiIcon.preview ) + , ( "skip", UiIcon.skip ) + , ( "copyToClipboard", UiIcon.copyToClipboard ) + , ( "gift", UiIcon.gift ) + , ( "home", UiIcon.home ) + , ( "library", UiIcon.library ) + , ( "searchInCicle", UiIcon.searchInCicle ) + ] + |> List.map + (\( name, value ) -> + ( name, Control.value ( "UiIcon." ++ name, value ) ) + ) + |> Control.choice diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm index 82217564..08df322b 100644 --- a/styleguide-app/Debug/Control/View.elm +++ b/styleguide-app/Debug/Control/View.elm @@ -32,7 +32,10 @@ viewExampleCode values = :: List.concatMap (\{ sectionName, code } -> [ Heading.h4 [] [ text sectionName ] - , Html.Styled.code [] [ text code ] + , Html.Styled.code + [ css [ whiteSpace preWrap ] + ] + [ text code ] ] ) values diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index f5bef407..0917eeca 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -8,6 +8,7 @@ module Examples.ClickableSvg exposing (Msg, State, example) import Accessibility.Styled.Key as Key import Category exposing (Category(..)) +import CommonControls import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra @@ -68,7 +69,8 @@ example = ++ fName ++ " \"" ++ label - ++ "\"" + ++ "\"\n\t" + ++ Tuple.first icon ++ ControlView.codeFromList attributes in [ { sectionName = "Button" @@ -151,14 +153,14 @@ viewExampleTable { label, icon, attributes } = buttonExample attributes_ = ClickableSvg.button label - icon + (Tuple.second icon) (ClickableSvg.onClick (ShowItWorked "You clicked the back button!") :: attributes_ ) linkExample attributes_ = ClickableSvg.link label - icon + (Tuple.second icon) (ClickableSvg.linkSpa "some_link" :: attributes_) in Html.table [] @@ -256,7 +258,7 @@ update msg state = type alias Settings msg = { label : String - , icon : Svg + , icon : ( String, Svg ) , attributes : List ( String, ClickableSvg.Attribute msg ) } @@ -265,20 +267,7 @@ initSettings : Control (Settings msg) initSettings = Control.record Settings |> Control.field "label" (Control.string "Back") - |> Control.field "icon" - (Control.choice - [ ( "arrowLeft", Control.value UiIcon.arrowLeft ) - , ( "unarchive", Control.value UiIcon.unarchive ) - , ( "share", Control.value UiIcon.share ) - , ( "preview", Control.value UiIcon.preview ) - , ( "skip", Control.value UiIcon.skip ) - , ( "copyToClipboard", Control.value UiIcon.copyToClipboard ) - , ( "gift", Control.value UiIcon.gift ) - , ( "home", Control.value UiIcon.home ) - , ( "library", Control.value UiIcon.library ) - , ( "searchInCicle", Control.value UiIcon.searchInCicle ) - ] - ) + |> Control.field "icon" CommonControls.uiIcon |> Control.field "attributes" (ControlExtra.list |> ControlExtra.listItem "disabled"