Begin adding small, medium, large styles

src/Nri/Ui/ClickableSvg/V2.elm

@@ -3,6 +3,7 @@ module Nri.Ui.ClickableSvg.V2 exposing
     , Attribute
     , onClick
     , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
+    , small, medium, large
     , disabled
     , withBorder
     , primary, secondary, danger, dangerSecondary
@@ -26,6 +27,8 @@ module Nri.Ui.ClickableSvg.V2 exposing
 
 ## Sizing
 
+@docs small, medium, large
+
 
 ## State
 
@@ -135,6 +138,35 @@ linkExternalWithTracking config =
 
 
 
+-- SIZING
+
+
+type Size
+    = Small
+    | Medium
+    | Large
+
+
+{-| This is the default.
+-}
+small : Attribute msg
+small =
+    set (\attributes -> { attributes | size = Small })
+
+
+{-| -}
+medium : Attribute msg
+medium =
+    set (\attributes -> { attributes | size = Medium })
+
+
+{-| -}
+large : Attribute msg
+large =
+    set (\attributes -> { attributes | size = Large })
+
+
+
 -- STATE
 
 
@@ -286,6 +318,7 @@ build label icon =
         , label = label
         , icon = icon
         , disabled = False
+        , size = Small
         , customAttributes = []
         , customStyles = []
         , hasBorder = False
@@ -302,6 +335,7 @@ type alias ButtonOrLinkAttributes msg =
     , label : String
     , icon : Svg
     , disabled : Bool
+    , size : Size
     , customAttributes : List (Html.Attribute msg)
     , customStyles : List Style
     , hasBorder : Bool
@@ -360,14 +394,26 @@ renderLink ((ButtonOrLink config) as link_) =
 
 renderIcon : ButtonOrLinkAttributes msg -> Html msg
 renderIcon config =
+    let
+        ( iconWidth, iconHeight ) =
+            case config.size of
+                Small ->
+                    ( Css.px 17, Css.px 17 )
+
+                Medium ->
+                    ( Css.px 30, Css.px 30 )
+
+                Large ->
+                    ( Css.px 30, Css.px 30 )
+    in
     config.icon
         |> Svg.withCss
-            (if config.hasBorder then
-                []
-
-             else
-                []
-            )
+            [ Css.displayFlex
+            , Css.alignItems Css.center
+            , Css.justifyContent Css.center
+            , Css.maxWidth iconWidth
+            , Css.height iconHeight
+            ]
         |> Svg.toHtml
 
 

styleguide-app/Examples/ClickableSvg.elm

@@ -220,16 +220,17 @@ update msg state =
 type alias Settings msg =
     { icon : Svg
     , disabled : ClickableSvg.Attribute msg
+    , size : ClickableSvg.Attribute msg
     }
 
 
 applySettings : Control (Settings msg) -> ( Svg, List (ClickableSvg.Attribute msg) )
 applySettings settings =
     let
-        { icon, disabled } =
+        { icon, disabled, size } =
             Control.currentValue settings
     in
-    ( icon, [ disabled ] )
+    ( icon, [ disabled, size ] )
 
 
 initSettings : Control (Settings msg)
@@ -251,6 +252,13 @@ initSettings =
             )
         |> Control.field "disabled"
             (Control.map ClickableSvg.disabled (Control.bool False))
+        |> Control.field "size"
+            (Control.choice
+                [ ( "small", Control.value ClickableSvg.small )
+                , ( "medium", Control.value ClickableSvg.medium )
+                , ( "large", Control.value ClickableSvg.large )
+                ]
+            )
 
 
 controlNumber : Float -> Control Float