From 9ed1aa4559b4f38aa5f74749b601d2fb004e827b Mon Sep 17 00:00:00 2001
From: Mike Iden <mike.iden@ithaka.org>
Date: Mon, 20 Nov 2023 14:35:16 -0500
Subject: [PATCH] fix(documentation): move overlay slot out of the link element
 since it can contain a clickable element

---
 .../image-card/pharos-image-card.scss         |  1 +
 .../image-card/pharos-image-card.ts           |  2 +-
 .../pharos-image-card.wc.stories.jsx          | 47 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.scss b/packages/pharos/src/components/image-card/pharos-image-card.scss
index de32a803c..c9c64afa6 100644
--- a/packages/pharos/src/components/image-card/pharos-image-card.scss
+++ b/packages/pharos/src/components/image-card/pharos-image-card.scss
@@ -14,6 +14,7 @@
 .card__link-container {
   display: flex;
   margin-bottom: var(--pharos-spacing-1-x);
+  position: relative;
 }
 
 .card__link--image {
diff --git a/packages/pharos/src/components/image-card/pharos-image-card.ts b/packages/pharos/src/components/image-card/pharos-image-card.ts
index 9fd51f370..6290e95ad 100644
--- a/packages/pharos/src/components/image-card/pharos-image-card.ts
+++ b/packages/pharos/src/components/image-card/pharos-image-card.ts
@@ -316,9 +316,9 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
         no-hover
       >
         ${this._renderLinkContent()}${this._renderHoverMetadata()}
-        <slot name="overlay"></slot>
       </pharos-link>
       ${this._showSubtleOverlay() ? nothing : this._renderCheckbox()}
+      <slot name="overlay"></slot>
     </div>`;
   }
 
diff --git a/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx b/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx
index 672b5cf36..0d0438b87 100644
--- a/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx
+++ b/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx
@@ -390,6 +390,53 @@ export const WithActionButtonSlot = {
     `,
 };
 
+export const WithOverlayButtonSlot = {
+  render: () =>
+    html`
+      <storybook-pharos-layout style="margin: 1rem 0">
+        <storybook-pharos-image-card
+          title="South Hall"
+          link="https://www.jstor.org/stable/10.2307/community.26220188"
+          style="grid-column: span 3"
+          variant="selectable"
+        >
+          <img id="image" src="${collection5}" alt="south hall" slot="image" />
+          <div id="creator" slot="metadata">Tubby, William Bunker (American architect,...</div>
+          <div id="item-date" slot="metadata">1889-1892 (creation)</div>
+          <div id="collection" slot="metadata">
+            Part of
+            <storybook-pharos-link href="https://www.jstor.org/site/pratt/buildings-image"
+              >Pratt Institute Buildings Image Collection</storybook-pharos-link
+            >
+          </div>
+          <storybook-pharos-button
+            slot="overlay"
+            data-dropdown-menu-id="saveDropdownId"
+            icon="save"
+            icon-condensed
+            variant="overlay"
+            style="position: absolute; bottom: 5px; right: 5px;"
+          ></storybook-pharos-button>
+          <storybook-pharos-button
+            slot="action-button"
+            data-dropdown-menu-id="dropdownId"
+            icon="ellipses-vertical"
+            icon-condensed
+            variant="subtle"
+          ></storybook-pharos-button>
+        </storybook-pharos-image-card>
+        <storybook-pharos-dropdown-menu id="saveDropdownId">
+          <storybook-pharos-dropdown-menu-item>Save</storybook-pharos-dropdown-menu-item>
+        </storybook-pharos-dropdown-menu>
+        <storybook-pharos-dropdown-menu id="dropdownId">
+          <storybook-pharos-dropdown-menu-item>Item 1</storybook-pharos-dropdown-menu-item>
+          <storybook-pharos-dropdown-menu-item>Item 2</storybook-pharos-dropdown-menu-item>
+          <storybook-pharos-dropdown-menu-item>Item 3</storybook-pharos-dropdown-menu-item>
+        </storybook-pharos-dropdown-menu>
+      </storybook-pharos-layout>
+    `,
+};
+
 export const SelectableCollection = {
   render: () =>
     html` <storybook-pharos-layout tag="ol" style="margin: 1rem 0">