From ad308592fb94624e4a255e16d88b65340a23141a Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Tue, 12 Nov 2019 13:39:43 +0100
Subject: [PATCH 1/2] fix(Notification): removed 'visible', 'isChild' and
 'isLastChild' prop, renamed 'showCloseButton' and 'hideShowMoreButton'

---
 .../Notification/Notification.test.tsx        | 10 ++----
 .../__snapshots__/Notification.test.tsx.snap  |  2 --
 .../components/Notification/demo.stories.tsx  |  5 ++-
 .../src/components/Notification/index.tsx     | 34 +++++++------------
 .../NotificationGroup/Notification.test.tsx   | 20 +++++------
 .../NotificationGroup/demo.stories.tsx        | 10 ++----
 .../components/NotificationGroup/index.tsx    |  4 +--
 7 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/packages/main/src/components/Notification/Notification.test.tsx b/packages/main/src/components/Notification/Notification.test.tsx
index 0ad2c6bc6c9..7b6c1c8f6ad 100644
--- a/packages/main/src/components/Notification/Notification.test.tsx
+++ b/packages/main/src/components/Notification/Notification.test.tsx
@@ -38,20 +38,14 @@ describe('Notification', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        visible
-        hideShowMoreButton={false}
-        showCloseButton
+        noShowMoreButton={false}
+        noCloseButton={false}
         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} />} />
diff --git a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
index e507efef423..e9c33899561 100644
--- a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
+++ b/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"
diff --git a/packages/main/src/components/Notification/demo.stories.tsx b/packages/main/src/components/Notification/demo.stories.tsx
index 2c29e4d7934..b0d4d4e006e 100644
--- a/packages/main/src/components/Notification/demo.stories.tsx
+++ b/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')}
   />
 );
diff --git a/packages/main/src/components/Notification/index.tsx b/packages/main/src/components/Notification/index.tsx
index 6857a776db6..554d19d9436 100644
--- a/packages/main/src/components/Notification/index.tsx
+++ b/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';
diff --git a/packages/main/src/components/NotificationGroup/Notification.test.tsx b/packages/main/src/components/NotificationGroup/Notification.test.tsx
index b1d09035437..ad06a5e357e 100644
--- a/packages/main/src/components/NotificationGroup/Notification.test.tsx
+++ b/packages/main/src/components/NotificationGroup/Notification.test.tsx
@@ -34,9 +34,8 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
+          noShowMoreButton={false}
+          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -76,9 +75,8 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
+          noShowMoreButton={false}
+          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -104,9 +102,8 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          visible
-          hideShowMoreButton={false}
-          showCloseButton
+          noShowMoreButton={false}
+          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -132,9 +129,8 @@ describe('NotificationGroup', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        visible
-        hideShowMoreButton={false}
-        showCloseButton
+        noShowMoreButton={false}
+        noCloseButton={false}
         truncate
       >
         <Notification description="description" title="title" />
diff --git a/packages/main/src/components/NotificationGroup/demo.stories.tsx b/packages/main/src/components/NotificationGroup/demo.stories.tsx
index 5a4244d82aa..e39b526d1f5 100644
--- a/packages/main/src/components/NotificationGroup/demo.stories.tsx
+++ b/packages/main/src/components/NotificationGroup/demo.stories.tsx
@@ -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,8 +46,6 @@ export const defaultStory = () => (
       authorName="Author"
       avatar="LH"
       priority={Priority.Medium}
-      visible={true}
-      showCloseButton={false}
       truncate={boolean('truncate', true)}
     />
     <Notification
@@ -56,9 +53,8 @@ export const defaultStory = () => (
       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>
diff --git a/packages/main/src/components/NotificationGroup/index.tsx b/packages/main/src/components/NotificationGroup/index.tsx
index 4e6865d09c8..f1a31154e94 100644
--- a/packages/main/src/components/NotificationGroup/index.tsx
+++ b/packages/main/src/components/NotificationGroup/index.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';

From 66b7066e9527d1453046f7f2e494d4c2bb2b4697 Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Tue, 12 Nov 2019 14:15:57 +0100
Subject: [PATCH 2/2] requested changes

---
 .../src/components/Notification/Notification.test.tsx     | 2 --
 .../{Notification.test.tsx => NotificationGroup.test.tsx} | 8 --------
 ...tion.test.tsx.snap => NotificationGroup.test.tsx.snap} | 0
 3 files changed, 10 deletions(-)
 rename packages/main/src/components/NotificationGroup/{Notification.test.tsx => NotificationGroup.test.tsx} (99%)
 rename packages/main/src/components/NotificationGroup/__snapshots__/{Notification.test.tsx.snap => NotificationGroup.test.tsx.snap} (100%)

diff --git a/packages/main/src/components/Notification/Notification.test.tsx b/packages/main/src/components/Notification/Notification.test.tsx
index 7b6c1c8f6ad..39d47bc766a 100644
--- a/packages/main/src/components/Notification/Notification.test.tsx
+++ b/packages/main/src/components/Notification/Notification.test.tsx
@@ -38,8 +38,6 @@ describe('Notification', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        noShowMoreButton={false}
-        noCloseButton={false}
         truncate
       />
     );
diff --git a/packages/main/src/components/NotificationGroup/Notification.test.tsx b/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx
similarity index 99%
rename from packages/main/src/components/NotificationGroup/Notification.test.tsx
rename to packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx
index ad06a5e357e..6b5ace37824 100644
--- a/packages/main/src/components/NotificationGroup/Notification.test.tsx
+++ b/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx
@@ -34,8 +34,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          noShowMoreButton={false}
-          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -75,8 +73,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          noShowMoreButton={false}
-          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -102,8 +98,6 @@ describe('NotificationGroup', () => {
           datetime="1337 Minutes ago"
           avatar="ME"
           priority={Priority.High}
-          noShowMoreButton={false}
-          noCloseButton={false}
           truncate
         />
         <Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -129,8 +123,6 @@ describe('NotificationGroup', () => {
         datetime="1337 Minutes ago"
         avatar="ME"
         priority={Priority.High}
-        noShowMoreButton={false}
-        noCloseButton={false}
         truncate
       >
         <Notification description="description" title="title" />
diff --git a/packages/main/src/components/NotificationGroup/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
similarity index 100%
rename from packages/main/src/components/NotificationGroup/__snapshots__/Notification.test.tsx.snap
rename to packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap