Make entire Collection card clickable (#321)

* Wrap the Collection card in a Link tag

* Updates to yarn.lock

packages/frontend/src/components/CollectionCard/CollectionCard.jsx

@@ -21,7 +21,10 @@ export default function CollectionCard({ collection }) {
 
  const onDismissModal = () => setShowDeleteConfirmModal(false);
 
- const onRequestDelete = () => {
+ const onRequestDelete = event => {
+ // Prevent the Card's link from triggering when Delete is clicked
+ event.preventDefault();
+ event.stopPropagation();
  setShowDeleteConfirmModal(true);
  };
 
@@ -51,43 +54,43 @@ export default function CollectionCard({ collection }) {
  };
 
  return (
- <div className="collection-card" css="position: relative">
- <div className="custom-column left">
- <h3>
- <Link to={`/collection/${collection.id}`}>{collection.name}</Link>
- </h3>
- <div className="collection-stats">
- <span>
- {pluralize('dataset', collection.datasetIds?.length ?? 0, true)}
- </span>
+ <>
+ <Link to={`/collection/${collection.id}`} className="collection-card">
+ <div className="custom-column left">
+ <h3>{collection.name}</h3>
+  <div className="collection-stats">
+  <span>
+  {pluralize('dataset', collection.datasetIds?.length ?? 0, true)}
+ </span>
+ </div>
  </div>
- </div>
- <div className="custom-column right">
- <button
- css={`
- background: none;
- position: absolute;
- right: 4px;
- top: -6px;
- width: auto;
- `}
- onClick={onRequestDelete}
- type="button"
- >
- <FontAwesomeIcon
+ <div className="custom-column right">
+ <button
  css={`
- color: #8eacd1;
- font-size: 15px;
- transition: all 250ms;
- &:hover {
- color: #657790;
- }
+ background: none;
+ position: absolute;
+ right: 4px;
+ top: -6px;
+ width: auto;
  `}
- size="1x"
- icon={faTrash}
- />
- </button>
- </div>
+ onClick={onRequestDelete}
+ type="button"
+ >
+ <FontAwesomeIcon
+ css={`
+ color: #8eacd1;
+ font-size: 15px;
+ transition: all 250ms;
+ &:hover {
+ color: #657790;
+ }
+ `}
+ size="1x"
+ icon={faTrash}
+ />
+ </button>
+ </div>
+ </Link>
  {showDeleteConfirmModal ? (
  <Modal isOpen onDismiss={onDismissModal}>
  <p css="font-size: 1.4rem">
@@ -114,6 +117,6 @@ export default function CollectionCard({ collection }) {
  </div>
  </Modal>
  ) : null}
- </div>
+ </>
  );
 }

packages/frontend/src/components/CollectionCard/CollectionCard.scss

@@ -1,14 +1,26 @@
 .collection-card {
  background-color: white;
- padding: 12px 20px 12px 20px;
- box-sizing: border-box;
- display: table;
- width: 100%;
- flex-direction: column;
  border-radius: 1px;
  border: 1px solid #c5cede;
+ box-sizing: border-box;
  box-shadow: 1px 1px 2px rgba(90, 117, 152, 0.3);
+ display: table;
+ flex-direction: column;
+ position: relative;
+ padding: 12px 20px 12px 20px;
+ transition: all 200ms;
+ width: 100%;
+
+ &:hover {
+ box-shadow: 1px 3px 10px rgba(90, 117, 152, 0.4);
+ }
+
+ &:focus-visible {
+ border: 2px solid blue;
+ }
+
  .collection-stats {
+ color: #152935;
  font-weight: 700;
  display: flex;
  flex-direction: row;
@@ -25,10 +37,13 @@
  }
 
  h3 {
- color: #152935;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
+ transition: color 200ms;
+ &:hover {
+ color: #40a9ff;
+ }
  }
  button {
  display: block;

yarn.lock

@@ -13399,7 +13399,7 @@ moment-timezone@^0.5.x:
  dependencies:
  moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.19.3, moment@^2.24.0, moment@^2.25.3, moment@^2.29.2:
+"moment@>= 2.9.0", moment@^2.19.3, moment@^2.24.0, moment@^2.25.3, moment@^2.29.4:
  version "2.29.4"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==