react-image-accordion 1.1.4 → 1.1.8

package/README.md

@@ -73,6 +73,8 @@ function MyComponent() {
       AccordionWidth={AccordionWidth}
       AccordionHeight={AccordionHeight}
       ContentSize=[ContentSize]
+      onClick={}
+      ShowButton={true/false}
     />
   );
 }
@@ -93,7 +95,8 @@ function MyComponent() {
 | AccordionWidth   | css  /optional|  50rem     |    Accordion Width      |
 | AccordionHeight  | css  /optional|  30rem     |    Accordion Height     |
 | ContentSize      |Array /optional|[0,1,2,3,4]*|    Content font size    |
-
+| onClick          | onCLick       |            |    onClick ATC event    |
+| ShowButton       | boolean       |  false     |    show or hid button   |
 
 *[0,1,2,3,4]
 ```
@@ -124,7 +127,9 @@ export const test = () => {
       accordionData= {MockAccordion}
       AccordionWidth= "40rem"
       AccordionHeight= "30rem"
-      ContentSize= ["1rem", "1.2rem", "1.5rem", "1.8rem", "2rem"]
+      ContentSize={[".5rem", ".5rem", ".6rem", ".7rem", "1.1rem"]}
+      ShowButton= false,
+      onClick= (e) => console.log(e.id, e.title),
     />
   );
 };

package/dist/index.es.js

@@ -27,16 +27,19 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  color-scheme: dark;\n}\n\nbody {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n\n  margin: 0;\n  font-family: system-ui;\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n.wrapper {\n  /* max-width: 50rem; */\n  margin-inline: auto;\n  padding-inline: 1rem;\n}\n\n.accordion {\n  --_button-size: 3rem;\n  --_panel-padding: 0.75rem;\n  --_panel-gap: 1rem;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 45em) {\n  .accordion {\n    flex-direction: row;\n    height: 30rem;\n  }\n}\n\n.accordion * {\n  margin: 0;\n}\n\n.accordion-panel {\n  position: relative;\n  isolation: isolate;\n  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n  overflow: hidden;\n  padding: var(--_panel-padding);\n  padding-right: calc(var(--_panel-padding) * 4);\n  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel {\n    transition: flex-basis 500ms, flex-grow 500ms;\n  }\n}\n\n.accordion-panel:nth-child(1) {\n  --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n  --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n  --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n  --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n  --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n  --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n  --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n  --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n  --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n  --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n  flex-basis: clamp(15rem, 40vh, 20rem);\n  flex-grow: 1;\n}\n\n.accordion-trigger {\n  outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n  outline: 3px solid var(--_panel-color);\n  outline-offset: 4px;\n}\n\n.accordion-content > p {\n  transform: translateY(2rem);\n  opacity: 0;\n  margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n    transition: transform 500ms 500ms, opacity 500ms 500ms;\n  }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.accordion-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n  display: none;\n}\n\n@media (max-width: 44.999em) {\n  .accordion-title::after {\n    content: \"\";\n    position: absolute;\n\n    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n    width: calc(100% + (var(--_button-size) * 2));\n    height: var(--_button-size);\n    background: hsl(0 0% 0% /0.55);\n    z-index: -1;\n    border-radius: 100vw;\n  }\n}\n\n.accordion-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: -1;\n  transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n  filter: brightness(0.5);\n}\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--_panel-gap);\n  background: transparent;\n  border: 0;\n  padding: 0;\n}\n.accordion-icon {\n  fill: var(--_panel-color);\n  background: hsl(0 0% 0% /0.55);\n  width: var(--_button-size);\n  aspect-ratio: 1/1;\n  padding: 0.75rem;\n  border-radius: 50%;\n  z-index: 10;\n}\n";
+var css_248z = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  color-scheme: dark;\n}\n\nbody {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n\n  margin: 0;\n  font-family: system-ui;\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n.wrapper {\n  /* max-width: 50rem; */\n  margin-inline: auto;\n  padding-inline: 1rem;\n}\n\n.accordion {\n  --_button-size: 3rem;\n  --_panel-padding: 0.75rem;\n  --_panel-gap: 1rem;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 45em) {\n  .accordion {\n    flex-direction: row;\n    height: 30rem;\n  }\n}\n\n.accordion * {\n  margin: 0;\n}\n\n.accordion-panel {\n  position: relative;\n  isolation: isolate;\n  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n  overflow: hidden;\n  padding: var(--_panel-padding);\n  padding-right: calc(var(--_panel-padding) * 4);\n  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel {\n    transition: flex-basis 500ms, flex-grow 500ms;\n  }\n}\n\n.accordion-panel:nth-child(1) {\n  --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n  --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n  --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n  --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n  --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n  --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n  --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n  --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n  --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n  --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n  flex-basis: clamp(15rem, 40vh, 20rem);\n  flex-grow: 1;\n}\n\n.accordion-trigger {\n  outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n  outline: 3px solid var(--_panel-color);\n  outline-offset: 4px;\n}\n\n.accordion-content > p {\n  transform: translateY(2rem);\n  opacity: 0;\n  margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n    transition: transform 500ms 500ms, opacity 500ms 500ms;\n  }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.accordion-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-Link,\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n  display: none;\n}\n\n@media (max-width: 44.999em) {\n  .accordion-title::after {\n    content: \"\";\n    position: absolute;\n\n    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n    width: calc(100% + (var(--_button-size) * 2));\n    height: var(--_button-size);\n    background: hsl(0 0% 0% /0.55);\n    z-index: -1;\n    border-radius: 100vw;\n  }\n}\n\n.accordion-Link {\n  all:revert;\n  display: block;\n  position: relative;\n  left: -0.1rem;\n  /* bottom: 1rem; */\n  width: 10rem;\n  height: var(--_button-size);\n  background: hsl(0 0% 0% /0.55);\n  border-radius: 100vw;\n  padding: 0.75rem;\n  font-weight: bolder;\n}\n\n.accordion-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: -1;\n  transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n  filter: brightness(0.5);\n}\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--_panel-gap);\n  background: transparent;\n  border: 0;\n  padding: 0;\n}\n.accordion-icon {\n  fill: var(--_panel-color);\n  background: hsl(0 0% 0% /0.55);\n  width: var(--_button-size);\n  aspect-ratio: 1/1;\n  padding: 0.75rem;\n  border-radius: 50%;\n  z-index: 10;\n}\n";
 styleInject(css_248z);
 
 function UseImageAccordion({
   accordionData,
   AccordionWidth,
   AccordionHeight,
-  ContentSize
+  ContentSize,
+  onClick,
+  ShowButton
 }) {
   const [activePanel, setActivePanel] = useState(null);
+  const ContentSizeFont = ContentSize || [];
   function toggleAccordion(panelToActivate) {
     setActivePanel(prevPanel => {
       if (prevPanel === panelToActivate) {
@@ -46,28 +49,38 @@ function UseImageAccordion({
       }
     });
   }
-  const HeightStyle = {
-    "@media (max-width: 480px)": {
-      height: AccordionHeight
+  const HeightStyle = `
+     @media (min-width: 768px) {
+      .AccHeight {
+        height: ${AccordionHeight};
+      }
+    }`;
+  const css = `
+    @media (max-width: 480px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[0] || "0.65rem"};
+      }
     }
-  };
-  const ContentStyle = {
-    "@media (max-width: 480px)": {
-      fontSize: ContentSize[0] || "0.65rem"
-    },
-    "@media (min-width: 481px) and (max-width: 768px)": {
-      fontSize: ContentSize[1] || "0.8rem"
-    },
-    "@media (min-width: 769px) and (max-width: 1024px)": {
-      fontSize: ContentSize[2] || "1rem"
-    },
-    "@media (min-width: 1025px) and (max-width: 1200px)": {
-      fontSize: ContentSize[3] || "1.2rem"
-    },
-    "@media (min-width: 1201px)": {
-      fontSize: ContentSize[4] || "1.5rem"
+    @media (min-width: 481px) and (max-width: 768px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[1] || "0.8rem"};
+      }
+    }
+    @media (min-width: 769px) and (max-width: 1024px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[2] || "1rem"};
+      }
     }
-  };
+    @media (min-width: 1025px) and (max-width: 1200px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[3] || "1.2rem"};
+      }
+    }
+    @media (min-width: 1201px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[4] || "1.5rem"};
+      }
+    }`;
   useEffect(() => {
     setActivePanel(accordionData[0].id);
   }, []);
@@ -77,9 +90,10 @@ function UseImageAccordion({
     style: {
       width: AccordionWidth
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "accordion",
-    style: HeightStyle
+  }, /*#__PURE__*/React.createElement("style", {
+    scoped: true
+  }, HeightStyle), /*#__PURE__*/React.createElement("div", {
+    className: "accordion AccHeight"
   }, accordionData.map(item => /*#__PURE__*/React.createElement("div", {
     key: item.id,
     className: "accordion-panel",
@@ -100,16 +114,32 @@ function UseImageAccordion({
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("image", {
     href: item.svg
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "accordion-content",
+  })))), /*#__PURE__*/React.createElement("style", {
+    scoped: true
+  }, css), /*#__PURE__*/React.createElement("div", {
+    className: "accordion-content ContentSize",
+    style: {
+      height: `calc(${AccordionHeight} - 5rem)`
+    },
     id: item.id,
     "aria-labelledby": item.id,
     "aria-hidden": activePanel !== item.id,
-    role: "region",
-    style: ContentStyle
-  }, /*#__PURE__*/React.createElement("p", {
-    style: ContentStyle
-  }, item.content), /*#__PURE__*/React.createElement("img", {
+    role: "region"
+  }, /*#__PURE__*/React.createElement("p", null, item.content), ShowButton && /*#__PURE__*/React.createElement("button", {
+    className: "accordion-Link",
+    style: {
+      bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
+      zIndex: "100",
+      isolation: "isolate"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      onClick({
+        id: item.id,
+        title: item.title
+      });
+    }
+  }, item.title), /*#__PURE__*/React.createElement("img", {
     className: "accordion-image",
     src: item.image,
     alt: item.alt
@@ -120,13 +150,17 @@ const ReactImageAccordion = ({
   accordionData,
   AccordionWidth,
   AccordionHeight,
-  ContentSize
+  ContentSize,
+  onClick,
+  ShowButton
 }) => {
   return /*#__PURE__*/React.createElement(UseImageAccordion, {
     accordionData: accordionData,
     AccordionWidth: AccordionWidth,
     AccordionHeight: AccordionHeight,
-    ContentSize: ContentSize
+    ContentSize: ContentSize,
+    onClick: onClick,
+    ShowButton: ShowButton
   });
 };
 

package/dist/index.js

@@ -35,16 +35,19 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  color-scheme: dark;\n}\n\nbody {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n\n  margin: 0;\n  font-family: system-ui;\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n.wrapper {\n  /* max-width: 50rem; */\n  margin-inline: auto;\n  padding-inline: 1rem;\n}\n\n.accordion {\n  --_button-size: 3rem;\n  --_panel-padding: 0.75rem;\n  --_panel-gap: 1rem;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 45em) {\n  .accordion {\n    flex-direction: row;\n    height: 30rem;\n  }\n}\n\n.accordion * {\n  margin: 0;\n}\n\n.accordion-panel {\n  position: relative;\n  isolation: isolate;\n  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n  overflow: hidden;\n  padding: var(--_panel-padding);\n  padding-right: calc(var(--_panel-padding) * 4);\n  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel {\n    transition: flex-basis 500ms, flex-grow 500ms;\n  }\n}\n\n.accordion-panel:nth-child(1) {\n  --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n  --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n  --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n  --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n  --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n  --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n  --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n  --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n  --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n  --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n  flex-basis: clamp(15rem, 40vh, 20rem);\n  flex-grow: 1;\n}\n\n.accordion-trigger {\n  outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n  outline: 3px solid var(--_panel-color);\n  outline-offset: 4px;\n}\n\n.accordion-content > p {\n  transform: translateY(2rem);\n  opacity: 0;\n  margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n    transition: transform 500ms 500ms, opacity 500ms 500ms;\n  }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.accordion-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n  display: none;\n}\n\n@media (max-width: 44.999em) {\n  .accordion-title::after {\n    content: \"\";\n    position: absolute;\n\n    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n    width: calc(100% + (var(--_button-size) * 2));\n    height: var(--_button-size);\n    background: hsl(0 0% 0% /0.55);\n    z-index: -1;\n    border-radius: 100vw;\n  }\n}\n\n.accordion-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: -1;\n  transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n  filter: brightness(0.5);\n}\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--_panel-gap);\n  background: transparent;\n  border: 0;\n  padding: 0;\n}\n.accordion-icon {\n  fill: var(--_panel-color);\n  background: hsl(0 0% 0% /0.55);\n  width: var(--_button-size);\n  aspect-ratio: 1/1;\n  padding: 0.75rem;\n  border-radius: 50%;\n  z-index: 10;\n}\n";
+var css_248z = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  color-scheme: dark;\n}\n\nbody {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n\n  margin: 0;\n  font-family: system-ui;\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n.wrapper {\n  /* max-width: 50rem; */\n  margin-inline: auto;\n  padding-inline: 1rem;\n}\n\n.accordion {\n  --_button-size: 3rem;\n  --_panel-padding: 0.75rem;\n  --_panel-gap: 1rem;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 45em) {\n  .accordion {\n    flex-direction: row;\n    height: 30rem;\n  }\n}\n\n.accordion * {\n  margin: 0;\n}\n\n.accordion-panel {\n  position: relative;\n  isolation: isolate;\n  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n  overflow: hidden;\n  padding: var(--_panel-padding);\n  padding-right: calc(var(--_panel-padding) * 4);\n  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel {\n    transition: flex-basis 500ms, flex-grow 500ms;\n  }\n}\n\n.accordion-panel:nth-child(1) {\n  --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n  --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n  --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n  --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n  --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n  --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n  --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n  --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n  --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n  --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n  flex-basis: clamp(15rem, 40vh, 20rem);\n  flex-grow: 1;\n}\n\n.accordion-trigger {\n  outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n  outline: 3px solid var(--_panel-color);\n  outline-offset: 4px;\n}\n\n.accordion-content > p {\n  transform: translateY(2rem);\n  opacity: 0;\n  margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n    transition: transform 500ms 500ms, opacity 500ms 500ms;\n  }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.accordion-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-Link,\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n  display: none;\n}\n\n@media (max-width: 44.999em) {\n  .accordion-title::after {\n    content: \"\";\n    position: absolute;\n\n    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n    width: calc(100% + (var(--_button-size) * 2));\n    height: var(--_button-size);\n    background: hsl(0 0% 0% /0.55);\n    z-index: -1;\n    border-radius: 100vw;\n  }\n}\n\n.accordion-Link {\n  all:revert;\n  display: block;\n  position: relative;\n  left: -0.1rem;\n  /* bottom: 1rem; */\n  width: 10rem;\n  height: var(--_button-size);\n  background: hsl(0 0% 0% /0.55);\n  border-radius: 100vw;\n  padding: 0.75rem;\n  font-weight: bolder;\n}\n\n.accordion-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: -1;\n  transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n  filter: brightness(0.5);\n}\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--_panel-gap);\n  background: transparent;\n  border: 0;\n  padding: 0;\n}\n.accordion-icon {\n  fill: var(--_panel-color);\n  background: hsl(0 0% 0% /0.55);\n  width: var(--_button-size);\n  aspect-ratio: 1/1;\n  padding: 0.75rem;\n  border-radius: 50%;\n  z-index: 10;\n}\n";
 styleInject(css_248z);
 
 function UseImageAccordion({
   accordionData,
   AccordionWidth,
   AccordionHeight,
-  ContentSize
+  ContentSize,
+  onClick,
+  ShowButton
 }) {
   const [activePanel, setActivePanel] = React.useState(null);
+  const ContentSizeFont = ContentSize || [];
   function toggleAccordion(panelToActivate) {
     setActivePanel(prevPanel => {
       if (prevPanel === panelToActivate) {
@@ -54,28 +57,38 @@ function UseImageAccordion({
       }
     });
   }
-  const HeightStyle = {
-    "@media (max-width: 480px)": {
-      height: AccordionHeight
+  const HeightStyle = `
+     @media (min-width: 768px) {
+      .AccHeight {
+        height: ${AccordionHeight};
+      }
+    }`;
+  const css = `
+    @media (max-width: 480px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[0] || "0.65rem"};
+      }
     }
-  };
-  const ContentStyle = {
-    "@media (max-width: 480px)": {
-      fontSize: ContentSize[0] || "0.65rem"
-    },
-    "@media (min-width: 481px) and (max-width: 768px)": {
-      fontSize: ContentSize[1] || "0.8rem"
-    },
-    "@media (min-width: 769px) and (max-width: 1024px)": {
-      fontSize: ContentSize[2] || "1rem"
-    },
-    "@media (min-width: 1025px) and (max-width: 1200px)": {
-      fontSize: ContentSize[3] || "1.2rem"
-    },
-    "@media (min-width: 1201px)": {
-      fontSize: ContentSize[4] || "1.5rem"
+    @media (min-width: 481px) and (max-width: 768px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[1] || "0.8rem"};
+      }
+    }
+    @media (min-width: 769px) and (max-width: 1024px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[2] || "1rem"};
+      }
     }
-  };
+    @media (min-width: 1025px) and (max-width: 1200px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[3] || "1.2rem"};
+      }
+    }
+    @media (min-width: 1201px) {
+      .ContentSize {
+        font-size: ${ContentSizeFont[4] || "1.5rem"};
+      }
+    }`;
   React.useEffect(() => {
     setActivePanel(accordionData[0].id);
   }, []);
@@ -85,9 +98,10 @@ function UseImageAccordion({
     style: {
       width: AccordionWidth
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "accordion",
-    style: HeightStyle
+  }, /*#__PURE__*/React__default["default"].createElement("style", {
+    scoped: true
+  }, HeightStyle), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion AccHeight"
   }, accordionData.map(item => /*#__PURE__*/React__default["default"].createElement("div", {
     key: item.id,
     className: "accordion-panel",
@@ -108,16 +122,32 @@ function UseImageAccordion({
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default["default"].createElement("image", {
     href: item.svg
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "accordion-content",
+  })))), /*#__PURE__*/React__default["default"].createElement("style", {
+    scoped: true
+  }, css), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion-content ContentSize",
+    style: {
+      height: `calc(${AccordionHeight} - 5rem)`
+    },
     id: item.id,
     "aria-labelledby": item.id,
     "aria-hidden": activePanel !== item.id,
-    role: "region",
-    style: ContentStyle
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    style: ContentStyle
-  }, item.content), /*#__PURE__*/React__default["default"].createElement("img", {
+    role: "region"
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), ShowButton && /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "accordion-Link",
+    style: {
+      bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
+      zIndex: "100",
+      isolation: "isolate"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      onClick({
+        id: item.id,
+        title: item.title
+      });
+    }
+  }, item.title), /*#__PURE__*/React__default["default"].createElement("img", {
     className: "accordion-image",
     src: item.image,
     alt: item.alt
@@ -128,13 +158,17 @@ const ReactImageAccordion = ({
   accordionData,
   AccordionWidth,
   AccordionHeight,
-  ContentSize
+  ContentSize,
+  onClick,
+  ShowButton
 }) => {
   return /*#__PURE__*/React__default["default"].createElement(UseImageAccordion, {
     accordionData: accordionData,
     AccordionWidth: AccordionWidth,
     AccordionHeight: AccordionHeight,
-    ContentSize: ContentSize
+    ContentSize: ContentSize,
+    onClick: onClick,
+    ShowButton: ShowButton
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-accordion",
-  "version": "1.1.4",
+  "version": "1.1.8",
   "description": "Accordion component for React",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@rollup/plugin-terser": "^0.4.1",
-    "react-image-accordion": "^1.0.8",
+    "react-image-accordion": "^1.1.6",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-terser": "^7.0.2"
   }

package/src/components/Accordion/App.css

@@ -140,6 +140,7 @@ img {
   align-items: center;
 }
 
+.accordion-panel:has([aria-expanded="false"]) .accordion-Link,
 .accordion-panel:has([aria-expanded="false"]) .accordion-title {
   display: none;
 }
@@ -158,6 +159,20 @@ img {
   }
 }
 
+.accordion-Link {
+  all:revert;
+  display: block;
+  position: relative;
+  left: -0.1rem;
+  /* bottom: 1rem; */
+  width: 10rem;
+  height: var(--_button-size);
+  background: hsl(0 0% 0% /0.55);
+  border-radius: 100vw;
+  padding: 0.75rem;
+  font-weight: bolder;
+}
+
 .accordion-image {
   position: absolute;
   inset: 0;

package/src/components/Accordion/React-image-accordion.js

@@ -6,6 +6,8 @@ export const ReactImageAccordion = ({
   AccordionWidth,
   AccordionHeight,
   ContentSize,
+  onClick,
+  ShowButton,
 }) => {
   return (
     <UseImageAccordion
@@ -13,6 +15,8 @@ export const ReactImageAccordion = ({
       AccordionWidth={AccordionWidth}
       AccordionHeight={AccordionHeight}
       ContentSize={ContentSize}
+      onClick={onClick}
+      ShowButton={ShowButton}
     />
   );
 };

package/src/components/Accordion/UseImageAccordion.js

@@ -6,6 +6,8 @@ function UseImageAccordion({
   AccordionWidth,
   AccordionHeight,
   ContentSize,
+  onClick,
+  ShowButton,
 }) {
   const [activePanel, setActivePanel] = useState(null);
   const ContentSizeFont = ContentSize || [];
@@ -21,7 +23,7 @@ function UseImageAccordion({
   }
 
   const HeightStyle = `
-     @media (min-width: 480px) {
+     @media (min-width: 768px) {
       .AccHeight {
         height: ${AccordionHeight};
       }
@@ -92,12 +94,31 @@ function UseImageAccordion({
               <style scoped>{css}</style>
               <div
                 className="accordion-content ContentSize"
+                style={{ height: `calc(${AccordionHeight} - 5rem)` }}
                 id={item.id}
                 aria-labelledby={item.id}
                 aria-hidden={activePanel !== item.id}
                 role="region"
               >
                 <p>{item.content}</p>
+
+                {ShowButton && (
+                  <button
+                    className="accordion-Link"
+                    style={{
+                      bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
+                      zIndex: "100",
+                      isolation: "isolate",
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onClick({ id: item.id, title: item.title });
+                    }}
+                  >
+                    {item.title}
+                  </button>
+                )}
+
                 <img
                   className="accordion-image"
                   src={item.image}

package/src/stories/MockAccordion.json

@@ -40,7 +40,7 @@
     "svg": "../svg/image-svgrepo-com.svg"
   },
   {
-    "title": "Scuba diving",
+    "title": "sleep",
     "id": 6,
     "image": "https://picsum.photos/401/602",
     "alt": "fifth panel image",
@@ -48,7 +48,7 @@
     "svg": "../svg/bitcoin-svgrepo-com.svg"
   },
   {
-    "title": "Scuba diving",
+    "title": "running",
     "id": 7,
     "image": "https://picsum.photos/402/602",
     "alt": "fifth panel image",
@@ -56,7 +56,7 @@
     "svg": "../svg/chrome-svgrepo-com.svg"
   },
   {
-    "title": "Scuba diving",
+    "title": "Cooking",
     "id": 8,
     "image": "https://picsum.photos/399/599",
     "alt": "fifth panel image",

package/src/stories/UseImageAccordion.stories.js

@@ -15,4 +15,6 @@ App.args = {
   AccordionWidth: "100%",
   AccordionHeight: "30rem",
   ContentSize: ["0.5rem", "0.8rem", "1rem", "1.2rem", "1.5rem"],
+  onClick: (e) => console.log(e.id, e.title),
+  ShowButton: false,
 };