react-image-accordion 1.2.0 → 1.3.0

package/rollup.config.js

@@ -1,39 +1,39 @@
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
-import localResolve from 'rollup-plugin-local-resolve';
-// import { terser } from "rollup-plugin-terser";
-
-export default [
-    {
-        input: 'src/index.js',
-        output: [
-            {
-            file: 'dist/index.js',
-            format: 'cjs',
-            },
-            {
-            file: 'dist/index.es.js',
-            format: 'es',
-            exports: 'named',
-            },
-        ],
-        plugins: [
-            postcss({
-                plugins: []
-            }),
-            babel({
-                exclude: 'node_modules/**',
-                presets: ['@babel/preset-react'],
-            }),
-            external(),
-            resolve(),
-            localResolve(),
-            // terser(),
-        ],
-         watch: {
-    include: "src/**",
-  },
-}
+import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import localResolve from 'rollup-plugin-local-resolve';
+// import { terser } from "rollup-plugin-terser";
+
+export default [
+    {
+        input: 'src/index.js',
+        output: [
+            {
+            file: 'dist/index.js',
+            format: 'cjs',
+            },
+            {
+            file: 'dist/index.es.js',
+            format: 'es',
+            exports: 'named',
+            },
+        ],
+        plugins: [
+            postcss({
+                plugins: []
+            }),
+            babel({
+                exclude: 'node_modules/**',
+                presets: ['@babel/preset-react'],
+            }),
+            external(),
+            resolve(),
+            localResolve(),
+            // terser(),
+        ],
+         watch: {
+    include: "src/**",
+  },
+}
 ];

package/src/components/Accordion/App.css

@@ -1,207 +1,222 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  color-scheme: dark;
-}
-
-body {
-  display: grid;
-  justify-content: center;
-  align-content: center;
-  min-height: 100vh;
-
-  margin: 0;
-  font-family: system-ui;
-  font-size: 1.125rem;
-  line-height: 1.6;
-}
-
-img {
-  max-width: 100%;
-  display: block;
-}
-
-.wrapper {
-  /* max-width: 50rem; */
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-
-.accordion {
-  --_button-size: 3rem;
-  --_panel-padding: 0.75rem;
-  --_panel-gap: 1rem;
-
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-@media (min-width: 45em) {
-  .accordion {
-    flex-direction: row;
-    height: 30rem;
-  }
-}
-
-.accordion * {
-  margin: 0;
-}
-
-.accordion-panel {
-  position: relative;
-  isolation: isolate;
-  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));
-  overflow: hidden;
-  padding: var(--_panel-padding);
-  padding-right: calc(var(--_panel-padding) * 4);
-  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);
-  cursor: pointer;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .accordion-panel {
-    transition: flex-basis 500ms, flex-grow 500ms;
-  }
-}
-
-.accordion-panel:nth-child(1) {
-  --_panel-color: red;
-}
-.accordion-panel:nth-child(2) {
-  --_panel-color: blue;
-}
-.accordion-panel:nth-child(3) {
-  --_panel-color: green;
-}
-.accordion-panel:nth-child(4) {
-  --_panel-color: yellow;
-}
-.accordion-panel:nth-child(5) {
-  --_panel-color: orange;
-}
-.accordion-panel:nth-child(6) {
-  --_panel-color: purple;
-}
-.accordion-panel:nth-child(7) {
-  --_panel-color: pink;
-}
-.accordion-panel:nth-child(8) {
-  --_panel-color: brown;
-}
-.accordion-panel:nth-child(9) {
-  --_panel-color: cyan;
-}
-.accordion-panel:nth-child(10) {
-  --_panel-color: magenta;
-}
-
-.accordion-panel:has([aria-expanded="true"]) {
-  flex-basis: clamp(15rem, 40vh, 20rem);
-  flex-grow: 1;
-}
-
-.accordion-trigger {
-  outline: 0 !important;
-}
-
-.accordion-panel:focus-within {
-  outline: 3px solid var(--_panel-color);
-  outline-offset: 4px;
-}
-
-.accordion-content > p {
-  transform: translateY(2rem);
-  opacity: 0;
-  margin-left: calc(var(--_button-size) + var(--_panel-gap));
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .accordion-panel:has([aria-expanded="true"]) .accordion-content > p {
-    transition: transform 500ms 500ms, opacity 500ms 500ms;
-  }
-}
-
-.accordion-panel:has([aria-expanded="true"]) .accordion-content > p {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.accordion-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  position: relative;
-  isolation: isolate;
-  display: grid;
-  align-items: center;
-}
-
-.accordion-panel:has([aria-expanded="false"]) .accordion-Link,
-.accordion-panel:has([aria-expanded="false"]) .accordion-title {
-  display: none;
-}
-
-@media (max-width: 44.999em) {
-  .accordion-title::after {
-    content: "";
-    position: absolute;
-
-    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);
-    width: calc(100% + (var(--_button-size) * 2));
-    height: var(--_button-size);
-    background: hsl(0 0% 0% /0.55);
-    z-index: -1;
-    border-radius: 100vw;
-  }
-}
-
-.accordion-Link {
-  all: revert;
-  display: block;
-  position: absolute;
-  left: -0.1rem;
-  bottom: 0;
-  margin: 0.75rem;
-  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;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -1;
-  transition: filer 500ms;
-}
-
-.accordion-panel:has([aria-expanded="true"]) .accordion-image {
-  filter: brightness(0.5);
-}
-.accordion-trigger {
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  gap: var(--_panel-gap);
-  background: transparent;
-  border: 0;
-  padding: 0;
-}
-.accordion-icon {
-  fill: var(--_panel-color);
-  background: hsl(0 0% 0% /0.55);
-  width: var(--_button-size);
-  aspect-ratio: 1/1;
-  padding: 0.75rem;
-  border-radius: 50%;
-  z-index: 10;
-}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: dark;
+}
+
+body {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  min-height: 100vh;
+
+  margin: 0;
+  font-family: system-ui;
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+.wrapper {
+  /* max-width: 50rem; */
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+.accordionImage {
+  --_button-size: 3rem;
+  --_panel-padding: 0.75rem;
+  --_panel-gap: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (min-width: 45em) {
+  .accordionImage {
+    flex-direction: row;
+    height: 30rem;
+  }
+}
+
+.accordionImage * {
+  margin: 0;
+}
+
+.accordion-panel {
+  position: relative;
+  isolation: isolate;
+  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));
+  overflow: hidden;
+  padding: var(--_panel-padding);
+  padding-right: calc(var(--_panel-padding) * 4);
+  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .accordion-panel {
+    transition: flex-basis 500ms, flex-grow 500ms;
+  }
+}
+
+.accordion-panel:nth-child(1) {
+  --_panel-color: red;
+}
+.accordion-panel:nth-child(2) {
+  --_panel-color: blue;
+}
+.accordion-panel:nth-child(3) {
+  --_panel-color: green;
+}
+.accordion-panel:nth-child(4) {
+  --_panel-color: yellow;
+}
+.accordion-panel:nth-child(5) {
+  --_panel-color: orange;
+}
+.accordion-panel:nth-child(6) {
+  --_panel-color: purple;
+}
+.accordion-panel:nth-child(7) {
+  --_panel-color: pink;
+}
+.accordion-panel:nth-child(8) {
+  --_panel-color: brown;
+}
+.accordion-panel:nth-child(9) {
+  --_panel-color: cyan;
+}
+.accordion-panel:nth-child(10) {
+  --_panel-color: magenta;
+}
+
+.accordion-panel:has([aria-expanded="true"]) {
+  flex-basis: clamp(15rem, 40vh, 20rem);
+  flex-grow: 1;
+}
+
+.accordion-trigger {
+  outline: 0 !important;
+}
+
+.accordion-panel:focus-within {
+  outline: 3px solid var(--_panel-color);
+  outline-offset: 4px;
+}
+
+.accordion-content > p {
+  transform: translateY(2rem);
+  opacity: 0;
+  margin-left: calc(var(--_button-size) + var(--_panel-gap));
+  color: rgb(255, 255, 255) !important;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .accordion-panel:has([aria-expanded="true"]) .accordion-content > p {
+    transition: transform 500ms 500ms, opacity 500ms 500ms;
+  }
+}
+
+.accordion-panel:has([aria-expanded="true"]) .accordion-content > p {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.accordion-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  align-items: center;
+  color: rgb(255, 255, 255) !important;
+}
+
+.accordion-panel:has([aria-expanded="false"]) .accordion-Link {
+  display: none;
+}
+
+@media (max-width: 44.999em) {
+  .accordion-panel {
+    width: 100%;
+  }
+
+  .accordion-trigger {
+    width: 100%;
+    height: var(--_button-size);
+  }
+
+  .accordion-title {
+    font-size: small;
+    width: 100%;
+    text-align: left;
+  }
+  .accordion-title::after {
+    content: "";
+    position: absolute;
+
+    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);
+    width: calc(100% + (var(--_button-size) * 2));
+    height: var(--_button-size);
+    background: hsl(0 0% 0% /0.55);
+    z-index: -1;
+    border-radius: 100vw;
+  }
+}
+
+.accordion-Link {
+  all: revert;
+  display: block;
+  position: absolute;
+  left: -0.1rem;
+  bottom: 0;
+  margin: 0.75rem;
+  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;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  transition: filer 500ms;
+}
+
+.accordion-panel:has([aria-expanded="true"]) .accordion-image {
+  filter: brightness(0.5);
+}
+.accordion-trigger {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: var(--_panel-gap);
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+.accordion-icon {
+  fill: var(--_panel-color);
+  background: hsl(0 0% 0% /0.55);
+  width: var(--_button-size);
+  aspect-ratio: 1/1;
+  padding: 0.75rem;
+  border-radius: 50%;
+  z-index: 10;
+}

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

@@ -1,22 +1,22 @@
-import React from "react";
-import UseImageAccordion from "./UseImageAccordion";
-
-export const ReactImageAccordion = ({
-  accordionData,
-  AccordionWidth,
-  AccordionHeight,
-  ContentSize,
-  onClick,
-  ShowButton,
-}) => {
-  return (
-    <UseImageAccordion
-      accordionData={accordionData}
-      AccordionWidth={AccordionWidth}
-      AccordionHeight={AccordionHeight}
-      ContentSize={ContentSize}
-      onClick={onClick}
-      ShowButton={ShowButton}
-    />
-  );
-};
+import React from "react";
+import UseImageAccordion from "./UseImageAccordion";
+
+export const ReactImageAccordion = ({
+  accordionData,
+  AccordionWidth,
+  AccordionHeight,
+  ContentSize,
+  onClick,
+  ShowButton,
+}) => {
+  return (
+    <UseImageAccordion
+      accordionData={accordionData}
+      AccordionWidth={AccordionWidth}
+      AccordionHeight={AccordionHeight}
+      ContentSize={ContentSize}
+      onClick={onClick}
+      ShowButton={ShowButton}
+    />
+  );
+};