Remove deprecated variants (#1213)

Removes the following which have been marked as deprecated for a while now

1. Alert announcement type
2. Button danger and warning variants
3. DropdownToggle overrides of the above Button variants

Author: gabescarbrough

scss/buttons.scss

@@ -21,8 +21,6 @@
 $synthesis-primary: $synth-primary-cta-blue;
 
 $primary: $ux-emerald-600;
-$danger: $ux-red;
-$warning: $ux-yellow-400;
 
 @mixin btn-focus-outline {
   box-shadow: none !important;
@@ -229,152 +227,6 @@ $warning: $ux-yellow-400;
   }
 }
 
-@mixin btn-danger {
-  $btn-danger-background: $danger;
-  $btn-danger-border: $danger;
-  $btn-danger-color: $ux-white;
-
-  $btn-danger-hover-background: $ux-red-600;
-  $btn-danger-hover-border: $ux-red-600;
-  $btn-danger-hover-color: $ux-white;
-
-  $btn-danger-active-background: $ux-red-700;
-  $btn-danger-active-border: $ux-red-700;
-  $btn-danger-active-color: $ux-white;
-
-  @include button-variant(
-    $btn-danger-background,
-    $btn-danger-border,
-    $btn-danger-color,
-
-    $btn-danger-hover-background,
-    $btn-danger-hover-border,
-    $btn-danger-hover-color,
-
-    $btn-danger-active-background,
-    $btn-danger-active-border,
-    $btn-danger-active-color,
-  );
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-outline-danger {
-  $btn-outline-danger-color: $danger;
-  $btn-outline-danger-color-hover: $ux-white;
-
-  $btn-outline-danger-hover-background: $ux-red-600;
-  $btn-outline-danger-hover-border: $ux-red-600;
-  $btn-outline-danger-hover-color: $ux-white;
-
-  $btn-outline-danger-border: $danger;
-
-  $btn-outline-danger-active-background: $ux-red-700;
-  $btn-outline-danger-active-border-color: $ux-red-700;
-
-  @include button-outline-variant(
-    $btn-outline-danger-color,
-    $btn-outline-danger-color-hover,
-
-    $btn-outline-danger-hover-background,
-    $btn-outline-danger-hover-border,
-    $btn-outline-danger-hover-color,
-  );
-  border-color: var(--btn-outline-danger-border);
-
-  &:active {
-    background-color: var(--btn-outline-danger-active-background);
-    border-color: var(--btn-outline-danger-active-border-color);
-  }
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-warning {
-  $btn-warning-background: $warning;
-  $btn-warning-border: $warning;
-  $btn-warning-color: $ux-yellow-900;
-
-  $btn-warning-hover-background: $ux-yellow-500;
-  $btn-warning-hover-border: $ux-yellow-500;
-  $btn-warning-hover-color: $ux-yellow-900;
-
-  $btn-warning-active-background: $ux-yellow-600;
-  $btn-warning-active-border: $ux-yellow-600;
-  $btn-warning-active-color: $ux-yellow-900;
-
-  @include button-variant(
-    $btn-warning-background,
-    $btn-warning-border,
-    $btn-warning-color,
-
-    $btn-warning-hover-background,
-    $btn-warning-hover-border,
-    $btn-warning-hover-color,
-
-    $btn-warning-active-background,
-    $btn-warning-active-border,
-    $btn-warning-active-color,
-  );
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
-@mixin btn-outline-warning {
-  $btn-outline-warning-color: $ux-yellow-900;
-  $btn-outline-warning-color-hover: $ux-yellow-900;
-
-  $btn-outline-warning-hover-background: $warning;
-  $btn-outline-warning-hover-border: $warning;
-  $btn-outline-warning-hover-color: $ux-yellow-900;
-
-  $btn-outline-warning-border: $ux-yellow-500;
-
-  $btn-outline-warning-active-background: $ux-yellow-500;
-  $btn-outline-warning-active-border-color: $ux-yellow-500;
-
-  @include button-outline-variant(
-    $btn-outline-warning-color,
-    $btn-outline-warning-color-hover,
-
-    $btn-outline-warning-hover-background,
-    $btn-outline-warning-hover-border,
-    $btn-outline-warning-hover-color,
-  );
-  border-color: var(--btn-outline-warning-border);
-
-  &:active {
-    background-color: var(--btn-outline-warning-active-background);
-    border-color: var(--btn-outline-warning-active-border-color);
-  }
-
-  &:focus-visible {
-    @include btn-focus-outline;
-  }
-
-  &:active, &:focus {
-    @include btn-remove-bootstrap-focus-outline;
-  }
-}
-
 @mixin btn-transparent {
   $btn-transparent-background: transparent;
   $btn-transparent-border: transparent;

src/Alert/Alert.jsx

@@ -17,7 +17,6 @@ import classNames from 'classnames';
 export const MessageTypes = {
   SUCCESS: 'success',
   INFO: 'info',
-  ANNOUNCEMENT: 'announcement',
   FEATURE: 'feature',
   WARNING: 'warning',
   ERROR: 'error',
@@ -39,8 +38,6 @@ const getAlertIcon = (type) => {
           <FontAwesomeIcon icon={faInfo} transform="shrink-4" />
         </span>
       );
-    case MessageTypes.ANNOUNCEMENT:
-      return (<FontAwesomeIcon icon={faBullhorn} transform="grow-2" />);
     case MessageTypes.FEATURE:
       return (<FontAwesomeIcon icon={faBullhorn} transform="grow-2" />);
     case MessageTypes.WARNING:

src/Alert/Alert.mdx

@@ -36,7 +36,6 @@ page and are not affected by an event.
 ### Feature
 
 - Use when showcasing a new feature to a user.
-- NOTE: use this variant instead of the Announcement variant (this will be deprecated soon)
 
 <Canvas of={ComponentStories.Feature} />
 

src/Alert/Alert.scss

@@ -129,18 +129,6 @@
     }
   }
 
-  .Alert-announcement {
-    border-left: 8px solid var(--synth-hyperlink-color);
-  
-    .close {
-      @include close-action;
-    }
-  
-    .primary-action {
-      @include primary-action;
-    }
-  }
-  
   .Alert-feature {
     border: 2px solid var(--ux-teal-600);
 
@@ -294,20 +282,6 @@
   }
 }
 
-.Alert-announcement {
-  background-color: var(--ux-blue-100);
-  color: var(--ux-blue-700);
-  border-left: 8px solid var(--ux-blue-300);
-
-  .close {
-    @include close-action;
-  }
-
-  .primary-action {
-    @include primary-action;
-  }
-}
-
 .Alert-feature {
   background-color: var(--ux-teal-100);
   color: var(--ux-teal-800);

src/Button/Button.mdx

@@ -44,10 +44,6 @@ import * as ComponentStories from './Button.stories';
 	- Space is limited (e.g. too small for text alone)
 	- The icon is standardized or represents an object with a strong physical analog or visual attribute (e.g. floppy disk (Save), pencil (Edit))
 
-### Deprecated variants
-
-- The `danger` and `warning` variants are deprecated and will be removed in the next major version.
-
 ## Button vs. Link distinction
 
 - Buttons are used for actions that affect the application. Clicking them causes changes on the frontend or backend.

src/Button/Button.scss

@@ -54,22 +54,6 @@
     @include btn-tertiary;
   }
 
-  &.btn-danger {
-    @include btn-danger;
-  }
-
-  &.btn-outline-danger {
-    @include btn-outline-danger;
-  }
-
-  &.btn-warning {
-    @include btn-warning;
-  }
-
-  &.btn-outline-warning {
-    @include btn-outline-warning;
-  }
-
   &.btn-transparent {
     @include btn-transparent;
   }