react-image-accordion 1.1.8 → 1.2.0

package/README.md

@@ -128,8 +128,8 @@ export const test = () => {
       AccordionWidth= "40rem"
       AccordionHeight= "30rem"
       ContentSize={[".5rem", ".5rem", ".6rem", ".7rem", "1.1rem"]}
-      ShowButton= false,
-      onClick= (e) => console.log(e.id, e.title),
+      ShowButton= {false},
+      onClick= {(e) => console.log(e.id, e.title)},
     />
   );
 };

package/dist/index.es.js

@@ -27,7 +27,7 @@ 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-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";
+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: absolute;\n  left: -0.1rem;\n  bottom: 0;\n  margin: 0.75rem;\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({
@@ -127,11 +127,6 @@ function UseImageAccordion({
     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({

package/dist/index.js

@@ -35,7 +35,7 @@ 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-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";
+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: absolute;\n  left: -0.1rem;\n  bottom: 0;\n  margin: 0.75rem;\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({
@@ -135,11 +135,6 @@ function UseImageAccordion({
     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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-accordion",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Accordion component for React",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/Accordion/App.css

@@ -160,11 +160,12 @@ img {
 }
 
 .accordion-Link {
-  all:revert;
+  all: revert;
   display: block;
-  position: relative;
+  position: absolute;
   left: -0.1rem;
-  /* bottom: 1rem; */
+  bottom: 0;
+  margin: 0.75rem;
   width: 10rem;
   height: var(--_button-size);
   background: hsl(0 0% 0% /0.55);

package/src/components/Accordion/UseImageAccordion.js

@@ -105,11 +105,6 @@ function UseImageAccordion({
                 {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 });