allow card columns to omit the link (#2076)

The landing-page-plugin is using the CardColumnSmall component from ui-components to display event as tiles. Most events have a link, but some, like the RepositoryDeletedEvent do not. For a better UX it is therefore necessary, to have a CardColumnSmall that is not internally wrapped in a link.

gradle/changelog/linkless_card_column.yaml

@@ -0,0 +1,2 @@
+- type: added
+  description: Developers can omit the link prop of the CardColumnSmall component ([#2076](https://github.com/scm-manager/scm-manager/pull/2076))

scm-ui/ui-components/src/CardColumnSmall.stories.tsx

@@ -53,4 +53,12 @@ storiesOf("CardColumnSmall", module)
       contentRight={<small>over 42 years ago</small>}
       footer="New: scmadmin/spaceship"
     />
+  ))
+  .add("Linkless", () => (
+    <CardColumnSmall
+      avatar={<Icon name="eraser" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
+      contentLeft={<strong>Repository deleted</strong>}
+      contentRight={<small>over 1337 minutes ago</small>}
+      footer="Deleted: scmadmin/spaceship"
+    />
   ));

scm-ui/ui-components/src/CardColumnSmall.tsx

@@ -28,7 +28,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 type Props = {
-  link: string;
+  link?: string;
   avatar?: ReactNode;
   contentLeft: ReactNode;
   contentRight: ReactNode;
@@ -42,30 +42,31 @@ const StyledLink = styled(Link)`
 const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, footer }) => {
   const renderAvatar = avatar ? <figure className="media-left mr-2 mt-1">{avatar}</figure> : null;
   const renderFooter = footer ? <small>{footer}</small> : null;
-
-  return (
-    <StyledLink to={link}>
-      <div className="p-2 media has-hover-background-blue">
-        {renderAvatar}
-        <div
-          className={classNames(
-            "media-content",
-            "text-box",
-            "is-flex",
-            "is-flex-direction-column",
-            "is-justify-content-space-around",
-            "is-align-self-stretch"
-          )}
-        >
-          <div className="is-flex is-flex-direction-column is-flex-align-items-start">
-            <div className="is-clipped">{contentLeft}</div>
-            <div>{contentRight}</div>
-          </div>
-          {renderFooter}
+  const content = (
+    <div className="p-2 media has-hover-background-blue">
+      {renderAvatar}
+      <div
+        className={classNames(
+          "media-content",
+          "text-box",
+          "is-flex",
+          "is-flex-direction-column",
+          "is-justify-content-space-around",
+          "is-align-self-stretch"
+        )}
+      >
+        <div className="is-flex is-flex-direction-column is-flex-align-items-start">
+          <div className="is-clipped">{contentLeft}</div>
+          <div>{contentRight}</div>
         </div>
+        {renderFooter}
       </div>
-    </StyledLink>
+    </div>
   );
+  if (!link) {
+    return content;
+  }
+  return <StyledLink to={link}>{content}</StyledLink>;
 };
 
 export default CardColumnSmall;

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -1282,6 +1282,49 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots CardColumnSmall Linkless 1`] = `
+<div
+  className="CardColumnSmallstories__Wrapper-sc-ofr817-0 jjqVte"
+>
+  <div
+    className="p-2 media has-hover-background-blue"
+  >
+    <figure
+      className="media-left mr-2 mt-1"
+    >
+      <i
+        aria-label="avatar"
+        className="fas fa-fw fa-eraser has-text-inherit fa-fw fa-lg"
+        onKeyPress={[Function]}
+      />
+    </figure>
+    <div
+      className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
+    >
+      <div
+        className="is-flex is-flex-direction-column is-flex-align-items-start"
+      >
+        <div
+          className="is-clipped"
+        >
+          <strong>
+            Repository deleted
+          </strong>
+        </div>
+        <div>
+          <small>
+            over 1337 minutes ago
+          </small>
+        </div>
+      </div>
+      <small>
+        Deleted: scmadmin/spaceship
+      </small>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots CardColumnSmall Minimal 1`] = `
 <div
   className="CardColumnSmallstories__Wrapper-sc-ofr817-0 jjqVte"