feat: callout implementation (#17815)

* feat: callout implementation * feat: removed stories that arent supported by carbon * refactor: changed from console.warn to warning * feat: added tests for callout checks * feat: changing the implementation way * feat: refactored to use internal tool for deprecation * test: fix * fix: changed the deprecated values * refactor: made changes according to specs * refactor: callout story changes * refactor: changed default to kind * docs: update playground story --------- Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Nov 7, 2024 · d70431f · d70431f
1 parent 62877c2
commit d70431f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 64 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -583,19 +583,7 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "kind": Object {
-        "args": Array [
-          Array [
-            "error",
-            "info",
-            "info-square",
-            "success",
-            "warning",
-            "warning-alt",
-          ],
-        ],
-        "type": "oneOf",
-      },
+      "kind": [Function],
       "lowContrast": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -43,6 +43,7 @@ import { noopFn } from '../../internal/noopFn';
 import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus';
 import { useFeatureFlag } from '../FeatureFlags';
 import { warning } from '../../internal/warning';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin';
 
 /**
  * Conditionally call a callback when the escape key is pressed
@@ -1203,6 +1204,30 @@ ActionableNotification.propTypes = {
  * ==================
  */
 
+/**
+ * Deprecated callout kind values.
+ * @deprecated Use NewKindProps instead.
+ */
+export type DeprecatedKindProps =
+  | 'error'
+  | 'info'
+  | 'info-square'
+  | 'success'
+  | 'warning'
+  | 'warning-alt';
+
+export type NewKindProps = 'warning' | 'info';
+
+export type KindProps = DeprecatedKindProps | NewKindProps;
+
+const propMappingFunction = (deprecatedValue) => {
+  const mapping = {
+    error: 'warning', // only redirect error -> warning
+    success: 'info', // only redirect success -> info
+  };
+  return mapping[deprecatedValue];
+};
+
 export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
@@ -1222,13 +1247,7 @@ export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Specify what state the notification represents
    */
-  kind?:
-    | 'error'
-    | 'info'
-    | 'info-square'
-    | 'success'
-    | 'warning'
-    | 'warning-alt';
+  kind?: KindProps;
 
   /**
    * Specify whether you are using the low contrast variant of the Callout.
@@ -1270,11 +1289,12 @@ export function Callout({
   subtitle,
   statusIconDescription,
   className,
-  kind = 'error',
+  kind = 'info',
   lowContrast,
   ...rest
 }: CalloutProps) {
   const prefix = usePrefix();
+
   const containerClassName = cx(className, {
     [`${prefix}--actionable-notification`]: true,
     [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
@@ -1348,14 +1368,18 @@ Callout.propTypes = {
   /**
    * Specify what state the notification represents
    */
-  kind: PropTypes.oneOf([
-    'error',
-    'info',
-    'info-square',
-    'success',
-    'warning',
-    'warning-alt',
-  ]),
+  kind: deprecateValuesWithin(
+    PropTypes.oneOf([
+      'error',
+      'info',
+      'info-square',
+      'success',
+      'warning',
+      'warning-alt',
+    ]),
+    ['warning', 'info'],
+    propMappingFunction
+  ),
 
   /**
    * Specify whether you are using the low contrast variant of the Callout.

diff --git a/packages/react/src/components/Notification/stories/Callout.stories.js b/packages/react/src/components/Notification/stories/Callout.stories.js
@@ -19,7 +19,7 @@ export default {
     },
   },
   args: {
-    kind: 'error',
+    kind: 'info',
     lowContrast: false,
     statusIconDescription: 'notification',
   },
@@ -44,40 +44,6 @@ export const WithInteractiveElements = () => (
   </Callout>
 );
 
-export const WithActionButtonOnly = () => (
-  <Callout
-    title="Notification title"
-    titleId="notif-1"
-    kind="info"
-    lowContrast
-    actionButtonLabel="Learn More">
-    <div className="cds--inline-notification__subtitle">
-      Here is some important info you might want to know.{' '}
-    </div>
-  </Callout>
-);
-
-export const WithActionButtonAndLinks = () => (
-  <Callout
-    title="Notification title"
-    titleId="notif-1"
-    kind="info"
-    lowContrast
-    actionButtonLabel="Learn More">
-    <div className="cds--inline-notification__subtitle">
-      <Link inline href="#" aria-describedby="notif-1">
-        Create
-      </Link>{' '}
-      or{' '}
-      <Link inline href="#" aria-describedby="notif-1">
-        register
-      </Link>{' '}
-      a cluster before creating a Configuration. Some additional info could go
-      here to show that this notification subtitle goes below the title.
-    </div>
-  </Callout>
-);
-
 export const Playground = (args) => <Callout {...args} />;
 
 Playground.argTypes = {
@@ -91,6 +57,10 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  kind: {
+    options: ['info', 'warning'],
+    control: { type: 'select' },
+  },
 };
 Playground.args = {
   title: 'Notification title',