@true-engineering/true-react-common-ui-kit 3.30.0 → 3.32.0

package/src/components/Notification/Notification.stories.tsx

@@ -1,6 +1,14 @@
 import { Meta, Story } from '@storybook/react';
+import { iconsList, IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
 import { INotificationProps, Notification } from './Notification';
 
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
 const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
 
 interface IStory extends INotificationProps {
@@ -20,9 +28,10 @@ export default {
   },
   argTypes: {
     size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
+    icon: { options: iconTypes, control: 'select' },
     type: {
       control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok'],
+      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
     },
   },
 } as Meta<IStory>;

package/src/components/Notification/Notification.styles.ts

@@ -1,55 +1,57 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Notification', {
-  root: {
-    display: 'flex',
-  },
-
-  inline: {
-    width: 'fit-content',
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-    marginRight: 16,
-    flexShrink: 0,
-  },
-
-  body: {
-    flexGrow: 1,
-  },
-
-  title: {
-    display: 'block',
-    fontWeight: 'bold',
-  },
-
-  text: {
-    display: 'block',
-  },
-
-  content: {},
-
-  s: {},
-
-  m: {},
-
-  l: {},
-
-  withText: {},
-
-  withTitle: {},
-
-  error: {},
-
-  info: {},
-
-  warning: {},
-
-  ok: {},
-
-  'not-ok': {},
-});
-
-export type INotificationStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Notification', {
+  root: {
+    display: 'flex',
+  },
+
+  inline: {
+    width: 'fit-content',
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 16,
+    flexShrink: 0,
+  },
+
+  body: {
+    flexGrow: 1,
+  },
+
+  title: {
+    display: 'block',
+    fontWeight: 'bold',
+  },
+
+  text: {
+    display: 'block',
+  },
+
+  content: {},
+
+  s: {},
+
+  m: {},
+
+  l: {},
+
+  withText: {},
+
+  withTitle: {},
+
+  error: {},
+
+  info: {},
+
+  warning: {},
+
+  ok: {},
+
+  'not-ok': {},
+
+  custom: {},
+});
+
+export type INotificationStyles = ITweakStyles<typeof useStyles>;

package/src/components/Notification/Notification.tsx

@@ -7,7 +7,7 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
+import { Icon, IIcon, renderIcon } from '../Icon';
 import { INotificationType } from './types';
 import { useStyles, INotificationStyles } from './Notification.styles';
 
@@ -19,6 +19,7 @@ export interface INotificationProps extends ICommonProps<INotificationStyles> {
   title?: string;
   /** @default 's' */
   size?: 's' | 'm' | 'l';
+  icon?: IIcon;
   children?: ReactNode;
 }
 
@@ -31,12 +32,15 @@ export const Notification: FC<INotificationProps> = ({
   testId,
   size = 's',
   data,
+  icon,
   tweakStyles,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
   const hasText = isStringNotEmpty(text);
   const hasTitle = isStringNotEmpty(title);
+  const isDefaultType = type !== 'custom';
+  const hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
 
   return (
     <div
@@ -48,9 +52,13 @@ export const Notification: FC<INotificationProps> = ({
       {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
-      <div className={classes.icon}>
-        <Icon type={`status-${type}`} />
-      </div>
+      {hasIcon && (
+        <div className={classes.icon}>
+          {isReactNodeNotEmpty(icon)
+            ? renderIcon(icon)
+            : isDefaultType && <Icon type={`status-${type}`} />}
+        </div>
+      )}
       <div className={classes.body}>
         {hasTitle && (
           <span className={classes.title} {...addDataTestId(testId, 'title')}>

package/src/components/Notification/types.ts

@@ -1 +1 @@
-export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok' | 'custom';