feat: warningbutton and warningdropdownbutton (#961)

This introduces new button styles to handle warning messaging.

Closes D2IQ-96852

packages/button/README.md

@@ -14,6 +14,8 @@ Each page will likely have one primary button. Any remaining calls-to-action are
 
 **Secondary**: Most buttons on a page are likely this style.
 
+**Warning**: Warning buttons are used to advise caution.
+
 **Danger**: Destructive buttons are used to highlight something dangerous that can't be undone e.g. "Delete".
 
 **Icon only**: Use when an icon is enough to represent the action e.g. "Create a Service". Should be accompanied by a tooltip.

packages/button/components/ButtonBase.tsx

@@ -29,7 +29,8 @@ export enum ButtonAppearances {
   Secondary = "secondary",
   Standard = "standard",
   Danger = "danger",
-  Success = "success"
+  Success = "success",
+  Warning = "warning"
 }
 
 export interface ButtonProps extends LinkProps {

packages/button/components/WarningButton.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import {
+  default as ButtonBase,
+  ButtonProps,
+  ButtonAppearances
+} from "./ButtonBase";
+
+const WarningButton = (props: ButtonProps) => (
+  <ButtonBase
+    appearance={ButtonAppearances.Warning}
+    data-cy={props["data-cy"] ?? "warningButton"}
+    {...props}
+  />
+);
+
+export default WarningButton;

packages/button/components/WarningDropdownButton.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import WarningButton from "./WarningButton";
+import { ButtonProps } from "./ButtonBase";
+import { SystemIcons } from "../../icons/dist/system-icons-enum";
+
+const WarningDropdownButton = (props: ButtonProps) => (
+  <WarningButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy={props["data-cy"] ?? "warningDropdownButton"}
+    {...props}
+  />
+);
+
+export default WarningDropdownButton;

packages/button/index.ts

@@ -3,11 +3,13 @@ export { default as SecondaryButton } from "./components/SecondaryButton";
 export { default as StandardButton } from "./components/StandardButton";
 export { default as SuccessButton } from "./components/SuccessButton";
 export { default as DangerButton } from "./components/DangerButton";
+export { default as WarningButton } from "./components/WarningButton";
 
 export { default as PrimaryDropdownButton } from "./components/PrimaryDropdownButton";
 export { default as SecondaryDropdownButton } from "./components/SecondaryDropdownButton";
 export { default as StandardDropdownButton } from "./components/StandardDropdownButton";
 export { default as SuccessDropdownButton } from "./components/SuccessDropdownButton";
+export { default as WarningDropdownButton } from "./components/WarningDropdownButton";
 export { default as DangerDropdownButton } from "./components/DangerDropdownButton";
 
 export { default as ResetButton } from "./components/ResetButton";

packages/button/stories/DefaultButton.stories.tsx

@@ -5,23 +5,22 @@ import {
   SecondaryButton,
   StandardButton,
   SuccessButton,
-  DangerButton
-} from "../../";
+  DangerButton,
+  WarningButton
+} from "../..";
 import { action } from "@storybook/addon-actions";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 import { ButtonProps } from "../components/ButtonBase";
-import {
-  systemIconLabels,
-  systemIcons
-} from "../../storybookHelpers/controlConstants";
+
 export default {
   title: "Actions/Button",
   component: StandardButton,
   subComponents: {
     PrimaryButton,
     SecondaryButton,
     SuccessButton,
-    DangerButton
+    DangerButton,
+    WarningButton
   },
   decorators: [Story => <div style={{ margin: "0 3em" }}>{Story()}</div>],
   argTypes: {
@@ -62,6 +61,10 @@ export const _SuccessButton = args => (
   <SuccessButton {...args}>{args.children}</SuccessButton>
 );
 
+export const _WarningButton = args => (
+  <WarningButton {...args}>{args.children}</WarningButton>
+);
+
 export const _DangerButton = args => (
   <DangerButton {...args}>{args.children}</DangerButton>
 );

packages/button/stories/DropdownButton.stories.tsx

@@ -5,9 +5,9 @@ import {
   SecondaryDropdownButton,
   StandardDropdownButton,
   SuccessDropdownButton,
+  WarningDropdownButton,
   DangerDropdownButton
 } from "../../index";
-import { SystemIcons } from "../../icons/dist/system-icons-enum";
 import {
   systemIconLabels,
   systemIcons
@@ -53,6 +53,10 @@ export const _SuccessDropdownButton = args => (
   <SuccessDropdownButton {...args}>{args.children}</SuccessDropdownButton>
 );
 
+export const _WarningDropdownButton = args => (
+  <WarningDropdownButton {...args}>{args.children}</WarningDropdownButton>
+);
+
 export const _DangerDropdownButton = args => (
   <DangerDropdownButton {...args}>{args.children}</DangerDropdownButton>
 );

packages/button/style.ts

@@ -16,7 +16,9 @@ import {
   themeBrandPrimaryInverted,
   themeSuccessInverted,
   themeErrorInverted,
-  themeTextColorDisabledInverted
+  themeTextColorDisabledInverted,
+  themeWarningInverted,
+  themeWarning
 } from "../design-tokens/build/js/designTokens";
 import { darken, pickReadableTextColor } from "../shared/styles/color";
 import { ButtonAppearances } from "./components/ButtonBase";
@@ -190,6 +192,10 @@ export const focusStyleByAppearance = (appearance, isInverse) => {
       return isInverse
         ? focusStyles(getHoverColor(getCSSVarValue(themeErrorInverted)))
         : focusStyles(getHoverColor(getCSSVarValue(themeError)));
+    case "warning":
+      return isInverse
+        ? focusStyles(getHoverColor(getCSSVarValue(themeWarningInverted)))
+        : focusStyles(getHoverColor(getCSSVarValue(themeWarning)));
     default:
       return "";
   }
@@ -239,6 +245,12 @@ export const button = appearance => {
         getHoverColor(getCSSVarValue(themeError)),
         getActiveColor(getCSSVarValue(themeError))
       );
+    case "warning":
+      return filledButton(
+        getCSSVarValue(themeWarning),
+        getHoverColor(getCSSVarValue(themeWarning)),
+        getActiveColor(getCSSVarValue(themeWarning))
+      );
     default:
       return "";
   }
@@ -288,6 +300,12 @@ export const buttonInverse = appearance => {
         getHoverColor(getCSSVarValue(themeErrorInverted)),
         getActiveColor(getCSSVarValue(themeErrorInverted))
       );
+    case "warning":
+      return filledButton(
+        getCSSVarValue(themeWarningInverted),
+        getHoverColor(getCSSVarValue(themeWarningInverted)),
+        getActiveColor(getCSSVarValue(themeWarningInverted))
+      );
     default:
       return "";
   }