[CL-925] add filled danger button (#17633)

* add dangerPrimary button variant

* add dangerPrimary to small story

libs/components/src/button/button.component.ts

@@ -54,6 +54,14 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "hover:!tw-text-contrast",
     ...focusRing,
   ],
+  dangerPrimary: [
+    "tw-border-danger-600",
+    "tw-bg-danger-600",
+    "!tw-text-contrast",
+    "hover:tw-bg-danger-700",
+    "hover:tw-border-danger-700",
+    ...focusRing,
+  ],
   unstyled: [],
 };
 

libs/components/src/button/button.stories.ts

@@ -62,6 +62,13 @@ export const Primary: Story = {
   },
 };
 
+export const DangerPrimary: Story = {
+  ...Default,
+  args: {
+    buttonType: "dangerPrimary",
+  },
+};
+
 export const Danger: Story = {
   ...Default,
   args: {
@@ -77,6 +84,7 @@ export const Small: Story = {
       <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
       <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
       <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'dangerPrimary'" [size]="size" [block]="block">Danger Primary small</button>
     </div>
     `,
   }),

libs/components/src/shared/button-like.abstraction.ts

@@ -1,6 +1,6 @@
 import { ModelSignal } from "@angular/core";
 
-export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
+export type ButtonType = "primary" | "secondary" | "danger" | "dangerPrimary" | "unstyled";
 
 export type ButtonSize = "default" | "small";