fix(Button): allow as prop on button (#1994)

- also clean up getIconNameFromStatus for use in buttons, etc.

src/components/Button/Button.tsx

@@ -10,6 +10,12 @@ type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonProps<ExtendedElement = unknown> = ButtonHTMLElementProps & {
   // Component API
+  /**
+   * Component used to render the element. Meant to support interaction with framework navigation libraries.
+   *
+   * **Default is `"button"`**.
+   */
+  as?: string | React.ElementType;
   /**
    * `Button` contents or label.
    */
@@ -91,6 +97,7 @@ export type ButtonProps<ExtendedElement = unknown> = ButtonHTMLElementProps & {
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
+      as: Component = 'button',
       children,
       className,
       context,
@@ -126,7 +133,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     return (
-      <button
+      <Component
         className={componentClassName}
         disabled={isDisabled}
         ref={ref}
@@ -160,7 +167,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading && (
           <LoadingIndicator className={styles['button__loader']} size="xs" />
         )}
-      </button>
+      </Component>
     );
   },
 );

src/components/InlineNotification/InlineNotification.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
+import getIconNameFromStatus from '../../util/getIconNameFromStatus';
 import type { Status } from '../../util/variant-types';
 
 import Icon from '../Icon';

src/components/Link/Link.stories.tsx

@@ -185,7 +185,7 @@ function ExtendedLink(args: ExtendArgs) {
  * ```tsx
  * type CustomLinkProps = React.ComponentProps<typeof CustomLink>;
  * type ExtendedProps = LinkProps<CustomLinkProps>;
- * *
+ *
  * export default function Link({children, ...other}: ExtendedProps) {
  *   return (
  *    <Link as={CustomLink} {...other}>

src/components/PageNotification/PageNotification.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
-import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
+import getIconNameFromStatus from '../../util/getIconNameFromStatus';
 import type { Status } from '../../util/variant-types';
 
 import Button from '../Button';

src/components/ToastNotification/ToastNotification.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 
-import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
+import getIconNameFromStatus from '../../util/getIconNameFromStatus';
 import type { Status } from '../../util/variant-types';
 import Button from '../Button';
 import Icon from '../Icon';

src/util/getIconNameFromStatus.ts

@@ -9,10 +9,10 @@ import type { IconName } from '../icons/spritemap';
  */
 export default function getIconNameFromStatus(status: Status): IconName {
   const map: Record<Status, IconName> = {
-    informational: 'info',
+    informational: 'info-encircled-filled',
     critical: 'dangerous',
-    warning: 'warning',
-    favorable: 'check-circle',
+    warning: 'warning-filled',
+    favorable: 'checkmark-encircled-filled',
   };
   return map[status];
 }