Merge pull request #1230 from NoRedInk/bat/clickable-svg-right-icon

Re-implement ClickableSvg rightIcon

src/Nri/Ui/ClickableSvg/V2.elm

@@ -498,8 +498,7 @@ quizEngineMobileCss styles =
     css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
 
 
-{-| WARNING: Not implemented! This attribute is temporarily reverted due to <https://github.com/NoRedInk/NoRedInk/pull/41952#issuecomment-1372393691>.
--}
+{-| -}
 rightIcon : Svg -> Attribute msg
 rightIcon icon =
     set (\config -> { config | rightIcon = Just icon })
@@ -641,7 +640,7 @@ renderIcons config includeBorder =
 
         iconWidth =
             if config.hasBorder then
-                size
+                Maybe.withDefault size config.width
                     - bordersAndPadding.leftPadding
                     - bordersAndPadding.rightPadding
                     - bordersAndPadding.leftBorder
@@ -652,7 +651,7 @@ renderIcons config includeBorder =
 
         iconHeight =
             if config.hasBorder then
-                size
+                Maybe.withDefault size config.height
                     - bordersAndPadding.topPadding
                     - bordersAndPadding.bottomPadding
                     - bordersAndPadding.topBorder
@@ -662,12 +661,20 @@ renderIcons config includeBorder =
                 Maybe.withDefault size config.height
 
         iconStyles =
-            [ Css.displayFlex
-            , Css.maxWidth (Css.px iconWidth)
-            , Css.maxHeight (Css.px iconHeight)
-            , Css.height (Css.pct 100)
-            , Css.margin Css.auto
-            ]
+            case config.rightIcon of
+                Just _ ->
+                    [ Css.width (Css.px (iconWidth * 3 / 5 - 1))
+                    , Css.height (Css.px (iconWidth * 3 / 5 - 1))
+                    , Css.marginRight (Css.px 1)
+                    ]
+
+                Nothing ->
+                    [ Css.displayFlex
+                    , Css.maxWidth (Css.px iconWidth)
+                    , Css.maxHeight (Css.px iconHeight)
+                    , Css.height (Css.pct 100)
+                    , Css.margin Css.auto
+                    ]
 
         renderUnless breakpoints =
             Svg.withCss
@@ -677,6 +684,15 @@ renderIcons config includeBorder =
                     ]
                 ]
                 >> Svg.toHtml
+                >> Just
+
+        renderRightIcon =
+            Svg.withCss
+                [ Css.width (Css.px (iconWidth * 2 / 5 - 4))
+                , Css.height (Css.px (iconWidth * 2 / 5 - 4))
+                , Css.marginLeft (Css.px 4)
+                ]
+                >> Svg.toHtml
     in
     case ( config.iconForNarrowMobile, config.iconForQuizEngineMobile, config.iconForMobile ) of
         ( Just iconForNarrowMobile_, Just iconForQuizEngineMobile_, Nothing ) ->
@@ -684,7 +700,9 @@ renderIcons config includeBorder =
             , renderUnless [ MediaQuery.narrowMobile, MediaQuery.notQuizEngineMobile ]
                 iconForQuizEngineMobile_
             , renderUnless [ MediaQuery.notNarrowMobile ] iconForNarrowMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Just iconForNarrowMobile_, Just iconForQuizEngineMobile_, Just iconForMobile_ ) ->
             [ renderUnless [ MediaQuery.mobile ] config.icon
@@ -693,24 +711,32 @@ renderIcons config includeBorder =
             , renderUnless [ MediaQuery.narrowMobile, MediaQuery.notQuizEngineMobile ]
                 iconForQuizEngineMobile_
             , renderUnless [ MediaQuery.notNarrowMobile ] iconForNarrowMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Just iconForNarrowMobile_, Nothing, Just iconForMobile_ ) ->
             [ renderUnless [ MediaQuery.mobile ] config.icon
             , renderUnless [ MediaQuery.narrowMobile, MediaQuery.notMobile ] iconForMobile_
             , renderUnless [ MediaQuery.notNarrowMobile ] iconForNarrowMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Just iconForNarrowMobile_, Nothing, Nothing ) ->
             [ renderUnless [ MediaQuery.narrowMobile ] config.icon
             , renderUnless [ MediaQuery.notNarrowMobile ] iconForNarrowMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Nothing, Just iconForQuizEngineMobile_, Nothing ) ->
             [ renderUnless [ MediaQuery.quizEngineMobile ] config.icon
             , renderUnless [ MediaQuery.notQuizEngineMobile ]
                 iconForQuizEngineMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Nothing, Just iconForQuizEngineMobile_, Just iconForMobile_ ) ->
             [ renderUnless [ MediaQuery.mobile ] config.icon
@@ -718,18 +744,25 @@ renderIcons config includeBorder =
                 iconForMobile_
             , renderUnless [ MediaQuery.notQuizEngineMobile ]
                 iconForQuizEngineMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Nothing, Nothing, Just iconForMobile_ ) ->
             [ renderUnless [ MediaQuery.mobile ] config.icon
             , renderUnless [ MediaQuery.notMobile ] iconForMobile_
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
         ( Nothing, Nothing, Nothing ) ->
             [ config.icon
                 |> Svg.withCss iconStyles
                 |> Svg.toHtml
+                |> Just
+            , Maybe.map renderRightIcon config.rightIcon
             ]
+                |> List.filterMap identity
 
 
 buttonOrLinkStyles : ButtonOrLinkAttributes msg -> AppliedTheme -> List Style
@@ -797,10 +830,22 @@ buttonOrLinkStyles config { main_, mainHovered, background, backgroundHovered, b
             ]
 
     -- Sizing
-    , Css.display Css.inlineBlock
     , Css.boxSizing Css.borderBox
-    , Css.width (Css.px (Maybe.withDefault (getSize config.size) config.width))
-    , Css.height (Css.px (Maybe.withDefault (getSize config.size) config.height))
+    , Css.batch <|
+        case config.rightIcon of
+            Just _ ->
+                [ Css.display Css.inlineFlex
+                , Css.justifyContent Css.center
+                , Css.alignItems Css.center
+                , Css.minWidth (Css.px (Maybe.withDefault (getSize config.size) config.width))
+                , Css.minHeight (Css.px (Maybe.withDefault (getSize config.size) config.height))
+                ]
+
+            Nothing ->
+                [ Css.display Css.inlineBlock
+                , Css.width (Css.px (Maybe.withDefault (getSize config.size) config.width))
+                , Css.height (Css.px (Maybe.withDefault (getSize config.size) config.height))
+                ]
 
     -- Focus
     , Css.pseudoClass "focus-visible"

styleguide-app/CommonControls.elm

@@ -327,6 +327,7 @@ rightIcon moduleName f =
 uiIcons : List ( String, Svg )
 uiIcons =
     [ ( "arrowLeft", UiIcon.arrowLeft )
+    , ( "gear", UiIcon.gear )
     , ( "unarchive", UiIcon.unarchive )
     , ( "share", UiIcon.share )
     , ( "preview", UiIcon.preview )

styleguide-app/Examples/ClickableSvg.elm

@@ -283,6 +283,16 @@ initSettings =
                         (\v -> ( "ClickableSvg.exactSize " ++ String.fromInt v, ClickableSvg.exactSize v ))
                         (ControlExtra.int 36)
                     )
+                |> ControlExtra.optionalListItem "exactWidth"
+                    (Control.map
+                        (\v -> ( "ClickableSvg.exactWidth " ++ String.fromInt v, ClickableSvg.exactWidth v ))
+                        (ControlExtra.int 36)
+                    )
+                |> ControlExtra.optionalListItem "exactHeight"
+                    (Control.map
+                        (\v -> ( "ClickableSvg.exactHeight " ++ String.fromInt v, ClickableSvg.exactHeight v ))
+                        (ControlExtra.int 36)
+                    )
                 |> CommonControls.css
                     { moduleName = "ClickableSvg"
                     , use = ClickableSvg.css