Merge pull request #1326 from NoRedInk/adm/danger-secondary-button

Adds `dangerSecondary` to button themes

component-catalog-app/Examples/Button.elm

@@ -211,6 +211,7 @@ initDebugControls =
                         , ( "secondary", Button.secondary )
                         , ( "tertiary", Button.tertiary )
                         , ( "danger", Button.danger )
+                        , ( "dangerSecondary", Button.dangerSecondary )
                         , ( "premium", Button.premium )
                         ]
                     )
@@ -334,6 +335,7 @@ buttonsTable =
             , ( Button.secondary, "secondary" )
             , ( Button.tertiary, "tertiary" )
             , ( Button.danger, "danger" )
+            , ( Button.dangerSecondary, "dangerSecondary" )
             , ( Button.premium, "premium" )
             ]
 

src/Nri/Ui/Button/V10.elm

@@ -8,7 +8,7 @@ module Nri.Ui.Button.V10 exposing
     , exactWidthForMobile, boundedWidthForMobile, unboundedWidthForMobile, fillContainerWidthForMobile
     , exactWidthForQuizEngineMobile, boundedWidthForQuizEngineMobile, unboundedWidthForQuizEngineMobile, fillContainerWidthForQuizEngineMobile
     , exactWidthForNarrowMobile, boundedWidthForNarrowMobile, unboundedWidthForNarrowMobile, fillContainerWidthForNarrowMobile
-    , primary, secondary, tertiary, danger, premium
+    , primary, secondary, tertiary, danger, dangerSecondary, premium
     , enabled, unfulfilled, disabled, error, loading, success
     , icon, rightIcon
     , hideIconForMobile, hideIconFor
@@ -36,6 +36,7 @@ adding a span around the text could potentially lead to regressions.
   - support 'disabled' links according to [Scott O'Hara's disabled links](https://www.scottohara.me/blog/2021/05/28/disabled-links.html) article
   - adds `tertiary` style
   - adds `submit` and `opensModal`
+  - adds `secondaryDanger` style
 
 
 # Changes from V9:
@@ -67,7 +68,7 @@ adding a span around the text could potentially lead to regressions.
 
 ## Change the color scheme
 
-@docs primary, secondary, tertiary, danger, premium
+@docs primary, secondary, tertiary, danger, dangerSecondary, premium
 
 
 ## Change the state (buttons only)
@@ -575,6 +576,15 @@ danger =
         )
 
 
+{-| -}
+dangerSecondary : Attribute msg
+dangerSecondary =
+    set
+        (\attributes ->
+            { attributes | style = dangerSecondaryColors }
+        )
+
+
 {-| -}
 premium : Attribute msg
 premium =
@@ -1067,6 +1077,17 @@ tertiaryColors =
     }
 
 
+dangerSecondaryColors : ColorPalette
+dangerSecondaryColors =
+    { background = Colors.white
+    , hoverBackground = Colors.redLight
+    , text = Colors.red
+    , hoverText = Colors.redDark
+    , border = Just <| Colors.red
+    , shadow = Colors.red
+    }
+
+
 dangerColors : ColorPalette
 dangerColors =
     { background = Colors.red