[PLAY-1630] Add Red "Danger" Button Variant for Delete Actions (#3949)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PLAY-1630](https://runway.powerhrg.com/backlog_items/PLAY-1630)

As a Playbook Web developer,
I want to add a red “Danger” button variant,
So that delete actions across the web platform are styled consistently
and clearly indicate destructive actions.

**Screenshots:** Screenshots to visualize your addition/change
<img width="1661" alt="Screenshot 2024-11-25 at 1 28 43 PM"
src="https://github.com/user-attachments/assets/6faf27d5-3e84-4cec-a6a1-a72a38a021a9">

#### Checklist:
- [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [X] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [X] **TESTS** I have added test coverage to my code.

playbook/app/pb_kits/playbook/pb_button/_button.scss

@@ -77,6 +77,12 @@ $pb_button_sizes: (
   &[class*=_loading]  {
     @include pb_button_loading(true);
   }
+
+  // Danger ===================
+  &[class*=_danger] {
+    @include pb_button_danger;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

playbook/app/pb_kits/playbook/pb_button/_button.tsx

@@ -37,7 +37,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
+  variant?: 'primary' | 'secondary' | 'link'| 'danger' | 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -206,8 +206,6 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
               <Icon icon={icon ? icon : "face-smile-plus"} />
             )
           }
-
-
         </button>
       );
     } else {

playbook/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -167,6 +167,21 @@ $pb_button_border_width: 0px;
   }
 }
 
+// Danger ======================
+@mixin pb_button_danger {
+  @include pb_button_variant($error, $text_dk_default, transparent);
+
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($error, $pb_button_hover_darken));
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($error);
+    }
+  }
+}
+
 // Dark Primary =================
 @mixin pb_button_primary_dark{
   @include pb_button_variant($primary_action);

playbook/app/pb_kits/playbook/pb_button/button.rb

@@ -16,7 +16,7 @@ class Button < Playbook::KitBase
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link reaction],
+                     values: %w[primary secondary link danger reaction],
                      default: "primary"
       prop :count, type: Playbook::Props::Number
       prop :highlight, type: Playbook::Props::Boolean,

playbook/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -2,4 +2,5 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Danger", variant: "danger", margin_right: "lg" }) %>
 

playbook/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -34,6 +34,14 @@ const ButtonDefault = (props) => (
         text='Button Disabled'
         {...props}
     />
+    <Button
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        tabIndex={0}
+        text='Button Danger'
+        variant='danger'
+        {...props}
+    />
   </div>
 )
 

playbook/app/pb_kits/playbook/pb_button/docs/_button_default.md

@@ -1 +1 @@
-The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.
+The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button. Danger buttons are used to indicate destructive actions such as deleting.

playbook/spec/pb_kits/playbook/kits/button_spec.rb

@@ -8,7 +8,7 @@
   it {
     is_expected.to define_enum_prop(:variant)
       .with_default("primary")
-      .with_values("primary", "secondary", "link", "reaction")
+      .with_values("primary", "secondary", "link", "danger", "reaction")
   }
   it {
     is_expected.to define_enum_prop(:size)