fix(Notification): Removed/renamed props to adopt to UI5-Webcomponents conventions (#223)

Author: Lukas742

packages/main/src/components/Notification/Notification.test.tsx

@@ -38,20 +38,12 @@ describe('Notification', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        visible
-        hideShowMoreButton={false}
-        showCloseButton
         truncate
       />
     );
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Hidden', () => {
-    const wrapper = renderThemedComponent(<Notification visible={false} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
   test('w/ custom Avatar', () => {
     const wrapper = renderThemedComponent(
       <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />

packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap

@@ -70,8 +70,6 @@ exports[`Notification Default 1`] = `
 </div>
 `;
 
-exports[`Notification Hidden 1`] = `null`;
-
 exports[`Notification Long Title and Description 1`] = `
 <div
   class="Notification--notificationContainer- undefined"

packages/main/src/components/Notification/demo.stories.tsx

@@ -30,11 +30,10 @@ export const defaultStory = () => (
     datetime={text('datetime', 'Datetime')}
     avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />}
     priority={select('priority', Priority, Priority.None)}
-    visible={boolean('visible', true)}
     onClick={action('Notification clicked')}
-    hideShowMoreButton={boolean('hideShowMoreButton', false)}
+    noShowMoreButton={boolean('noShowMoreButton', false)}
     truncate={boolean('truncate', true)}
-    showCloseButton={boolean('showCloseButton', true)}
+    noCloseButton={boolean('noCloseButton', false)}
     onClose={action('Closed')}
   />
 );

packages/main/src/components/Notification/index.tsx

@@ -27,19 +27,15 @@ export interface NotificationProptypes extends CommonProps {
   loading?: boolean;
   datetime?: string;
   priority?: Priority;
-  showCloseButton?: boolean;
-  visible?: boolean;
+  noCloseButton?: boolean;
   onClick?: (e: any) => any;
-  hideShowMoreButton?: boolean;
+  noShowMoreButton?: boolean;
   truncate?: boolean;
   onClose?: (event: Event) => void;
 
   children?: React.ReactElement<NotificationProptypes> | React.ReactElement<NotificationProptypes>[];
   collapsed?: boolean;
   autoPriority?: boolean;
-
-  isChild?: boolean;
-  isLastChild?: boolean;
 }
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Notification' });
@@ -56,31 +52,24 @@ const Notification: FC<NotificationProptypes> = forwardRef(
       datetime,
       avatar,
       priority,
-      visible,
       onClick,
       children,
       collapsed,
       className,
       tooltip,
       style,
-      isChild,
-      isLastChild,
       autoPriority,
-      hideShowMoreButton,
+      noShowMoreButton,
       truncate,
-      showCloseButton,
+      noCloseButton,
       onClose
     } = props;
 
     const classes = useStyles(props);
-    const [visibleState, toggleVisible] = useState(visible);
+    const [visibleState, toggleVisible] = useState(true);
     const [showChildren, toggleChildrenVisible] = useState(!collapsed);
     const [showMore, toggleShowMore] = useState(!truncate);
 
-    useEffect(() => {
-      toggleVisible(visible);
-    }, [visible]);
-
     useEffect(() => {
       toggleChildrenVisible(!collapsed);
     }, [collapsed]);
@@ -129,6 +118,9 @@ const Notification: FC<NotificationProptypes> = forwardRef(
       toggleShowMore(!showMore);
     }, [showMore]);
 
+    const isLastChild = props['isLastChild'];
+    const isChild = props['isChild'];
+
     const notificationContainerStyles = useMemo(() => {
       const borderRadius = () => {
         if (isChild) {
@@ -211,11 +203,13 @@ const Notification: FC<NotificationProptypes> = forwardRef(
       return React.Children.map(children, (item, index) => {
         if (React.Children.count(children) === index + 1) {
           return React.cloneElement(item, {
+            // @ts-ignore
             isLastChild: true,
             className: `${item.props.className} ${classes.notificationContainerChild}`
           });
         }
         return React.cloneElement(item, {
+          // @ts-ignore
           isChild: true,
           className: `${item.props.className} ${classes.notificationContainerChild}`
         });
@@ -256,7 +250,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
                 <div className={classes.semanticIcon}>{renderSemanticIcon}</div>
               )}
               <div className={`${classes.title} ${truncate ? classes.titleEllipsised : ''}`}>{title}</div>
-              {showCloseButton && (
+              {!noCloseButton && (
                 <Button
                   className={classes.closeButton}
                   design={ButtonDesign.Transparent}
@@ -284,7 +278,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
               </div>
               <div className={classes.footer}>
                 <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
-                  {!hideShowMoreButton && (
+                  {!noShowMoreButton && (
                     <Button design={ButtonDesign.Transparent} onClick={handleShowMore}>
                       {showMore ? 'Show Less' : 'Show More'}
                     </Button>
@@ -311,9 +305,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
 );
 
 Notification.defaultProps = {
-  visible: true,
-  truncate: true,
-  showCloseButton: true
+  truncate: true
 };
 
 Notification.displayName = 'Notification';

packages/main/src/components/NotificationGroup/Notification.test.tsx renamed to packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx

@@ -34,9 +34,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -76,9 +73,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -104,9 +98,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -132,9 +123,6 @@ describe('NotificationGroup', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        visible
-        hideShowMoreButton={false}
-        showCloseButton
         truncate
       >
         <Notification description="description" title="title" />

packages/main/src/components/NotificationGroup/__snapshots__/Notification.test.tsx.snap renamed to packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap

@@ -31,12 +31,11 @@ export const defaultStory = () => (
     datetime={text('datetime', 'Datetime')}
     avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />}
     priority={select('priority', Priority, Priority.None)}
-    visible={boolean('visible', true)}
     onClick={action('Notification clicked')}
-    hideShowMoreButton={boolean('hideShowMoreButton', false)}
+    noShowMoreButton={boolean('noShowMoreButton', false)}
     autoPriority={boolean('autoPriority', true)}
     collapsed={boolean('collapsed', false)}
-    showCloseButton={boolean('showCloseButton', true)}
+    noCloseButton={boolean('noCloseButton', false)}
     truncate={boolean('truncate', true)}
     onClose={action('Group closed')}
   >
@@ -47,18 +46,15 @@ export const defaultStory = () => (
       authorName="Author"
       avatar="LH"
       priority={Priority.Medium}
-      visible={true}
-      showCloseButton={false}
       truncate={boolean('truncate', true)}
     />
     <Notification
       description="Short description"
       title="Very long Title. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
       authorName="Author"
       priority={Priority.Low}
-      visible={true}
       onClick={action('Child Notification clicked')}
-      showCloseButton={false}
+      noCloseButton={true}
       truncate={boolean('truncate', true)}
     />
   </NotificationGroup>

packages/main/src/components/NotificationGroup/demo.stories.tsx

@@ -11,10 +11,8 @@ const NotificationGroup: FC<NotificationProptypes> = forwardRef(
 );
 
 NotificationGroup.defaultProps = {
-  visible: true,
   autoPriority: true,
-  truncate: true,
-  showCloseButton: true
+  truncate: true
 };
 
 NotificationGroup.displayName = 'Notification Group';