feat: Update Upstream info Icon in break state

Author: ChrisChV

src/generic/upstream-info-icon/UpstreamInfoIcon.scss

@@ -1,21 +1,31 @@
 .upstream-info-icon {
-  &.size-md {
+  &.size-one-md {
     width: 32px;
     height: 26px;
   }
 
-  &.size-sm {
+  &.size-one-sm {
     width: 28px;
     height: 22px;
   }
 
-  &.size-xs {
+  &.size-one-xs {
     width: 24px;
     height: 18px;
   }
 
-  .pgn__icon {
-    // Removes the right margin
-    margin-right: 0 !important;
+  &.size-two-md {
+    width: 60px;
+    height: 26px;
+  }
+
+  &.size-two-sm {
+    width: 46px;
+    height: 22px;
+  }
+
+  &.size-two-xs {
+    width: 36px;
+    height: 18px;
   }
-};
+}

src/generic/upstream-info-icon/UpstreamInfoIcon.test.tsx

@@ -16,10 +16,12 @@ describe('<UpstreamInfoIcon>', () => {
   it('should render with link', () => {
     renderComponent({ upstreamRef: 'some-ref', errorMessage: null });
     expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
+    expect(screen.queryByTitle('The link to the library item is broken.')).not.toBeInTheDocument();
   });
 
   it('should render with broken link', () => {
     renderComponent({ upstreamRef: 'some-ref', errorMessage: 'upstream error' });
+    expect(screen.getByTitle('This item is linked to a library item.')).toBeInTheDocument();
     expect(screen.getByTitle('The link to the library item is broken.')).toBeInTheDocument();
   });
 

src/generic/upstream-info-icon/index.tsx

@@ -19,25 +19,27 @@ export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps> = ({ upstreamInfo
     return null;
   }
 
-  const iconProps = !upstreamInfo?.errorMessage
-    ? {
-      title: intl.formatMessage(messages.upstreamLinkOk),
-      ariaLabel: intl.formatMessage(messages.upstreamLinkOk),
-      src: Newsstand,
-    }
-    : {
-      title: intl.formatMessage(messages.upstreamLinkError),
-      ariaLabel: intl.formatMessage(messages.upstreamLinkError),
-      src: LinkOff,
-    };
+  let hasTwoIcons = false;
+  if (upstreamInfo?.errorMessage) {
+    hasTwoIcons = true;
+  }
 
   return (
-    <div className={`upstream-info-icon size-${size} box-shadow-centered-1 d-flex justify-content-center`}>
+    <div className={`upstream-info-icon size-${hasTwoIcons ? 'two' : 'one'}-${size} box-shadow-centered-1 d-flex justify-content-center`}>
       <Icon
-        {...iconProps}
+        title={intl.formatMessage(messages.upstreamLinkOk)}
+        aria-label={intl.formatMessage(messages.upstreamLinkOk)}
+        src={Newsstand}
         size={size}
-        className="mr-1"
       />
+      {upstreamInfo?.errorMessage && (
+        <Icon
+          title={intl.formatMessage(messages.upstreamLinkError)}
+          aria-label={intl.formatMessage(messages.upstreamLinkError)}
+          src={LinkOff}
+          size={size}
+        />
+      )}
     </div>
   );
 };