From 41c6d1e909258c248371be97cbfea3fbbe682e44 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 9 Mar 2020 11:05:28 -0700 Subject: [PATCH] Adds example of a more customized svg --- src/Nri/Ui/ClickableSvg/V1.elm | 1 + styleguide-app/Examples/ClickableSvg.elm | 27 +++++++++++++++++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/ClickableSvg/V1.elm b/src/Nri/Ui/ClickableSvg/V1.elm index ec0b22ca..4f5e072b 100644 --- a/src/Nri/Ui/ClickableSvg/V1.elm +++ b/src/Nri/Ui/ClickableSvg/V1.elm @@ -3,6 +3,7 @@ module Nri.Ui.ClickableSvg.V1 exposing , Attribute , onClick , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking + , width, height , custom, css ) diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index 67794c7c..4fabcc1d 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -45,7 +45,7 @@ example unnamedMessages state = [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] [ ClickableSvg.button "Back" UiIcon.arrowLeft - [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the button!") ] + [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ] , viewCode "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]" ] @@ -54,6 +54,31 @@ example unnamedMessages state = , viewCode "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]" ] + , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.button "Go to tutorial" + UiIcon.footsteps + [ ClickableSvg.width (Css.px 80) + , ClickableSvg.height (Css.px 80) + , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!") + , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ] + , ClickableSvg.css + [ Css.border3 (Css.px 3) Css.dashed Colors.purple + ] + ] + , viewCode + """ + ClickableSvg.button "Go to tutorial" + UiIcon.footsteps + [ ClickableSvg.width (Css.px 80) + , ClickableSvg.height (Css.px 80) + , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!") + , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ] + , ClickableSvg.css + [ Css.border3 (Css.px 3) Css.dashed Colors.purple + ] + ] + """ + ] ] }