react-image-accordion 1.3.0 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -99
- package/dist/index.css +1 -0
- package/dist/index.es.css +1 -0
- package/dist/index.es.js +118 -123
- package/dist/index.js +118 -123
- package/package.json +14 -9
- package/.babelrc.json +0 -15
- package/.storybook/main.js +0 -11
- package/.storybook/preview.js +0 -9
- package/rollup.config.js +0 -39
- package/src/.prettierrc +0 -1
- package/src/components/Accordion/App.css +0 -222
- package/src/components/Accordion/React-image-accordion.js +0 -22
- package/src/components/Accordion/UseImageAccordion.js +0 -131
- package/src/components/Accordion/index.js +0 -2
- package/src/index.js +0 -2
- package/src/stories/MockAccordion.json +0 -66
- package/src/stories/UseImageAccordion.stories.js +0 -20
- package/src/stories/sprite.svg +0 -49
package/README.md
CHANGED
|
@@ -1,27 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# React Image Accordion
|
|
2
5
|
|
|
3
|
-
A
|
|
4
|
-
|
|
5
|
-
The image accordion is a modern design pattern that can be used to display images and accompanying information in an interactive and engaging way. This component makes it easy to incorporate this pattern into your React projects.
|
|
6
|
-
|
|
6
|
+
A customizable and responsive React image accordion component with smooth animations.
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
10
|
-
Use the package manager [npm](https://www.npmjs.com/) to install react-image-accordion.
|
|
11
|
-
|
|
12
10
|
```bash
|
|
13
|
-
npm
|
|
11
|
+
npm install react-image-accordion
|
|
14
12
|
```
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
---
|
|
18
15
|
|
|
19
16
|
## Usage
|
|
20
17
|
|
|
21
|
-
To use the component in your React application, import it and pass the necessary props:
|
|
22
|
-
|
|
23
18
|
```jsx
|
|
24
|
-
import {ReactImageAccordion} from
|
|
19
|
+
import { ReactImageAccordion } from "react-image-accordion";
|
|
25
20
|
|
|
26
21
|
function MyComponent() {
|
|
27
22
|
const accordionData = [
|
|
@@ -29,123 +24,104 @@ function MyComponent() {
|
|
|
29
24
|
id: 1,
|
|
30
25
|
title: "Boating",
|
|
31
26
|
image: "https://picsum.photos/400/600",
|
|
32
|
-
alt: "
|
|
33
|
-
content: "Lorem ipsum dolor sit amet
|
|
34
|
-
svg: "
|
|
27
|
+
alt: "Boating",
|
|
28
|
+
content: "Lorem ipsum dolor sit amet.",
|
|
29
|
+
svg: "/icons/boat.svg",
|
|
35
30
|
},
|
|
36
31
|
{
|
|
37
32
|
id: 2,
|
|
38
33
|
title: "Fishing",
|
|
39
34
|
image: "https://picsum.photos/400/600",
|
|
40
|
-
alt: "
|
|
41
|
-
content: "Lorem ipsum dolor sit amet
|
|
42
|
-
svg: "
|
|
43
|
-
}
|
|
44
|
-
{
|
|
45
|
-
id: 3,
|
|
46
|
-
title: "Swimming",
|
|
47
|
-
image: "https://picsum.photos/400/600",
|
|
48
|
-
alt: "third panel image",
|
|
49
|
-
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
|
|
50
|
-
svg: "aa (3).svg",
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
id: 4,
|
|
54
|
-
title: "Kayaking",
|
|
55
|
-
image: "https://picsum.photos/400/600",
|
|
56
|
-
alt: "fourth panel image",
|
|
57
|
-
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
|
|
58
|
-
svg: "aa (4).svg",
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
id: 5,
|
|
62
|
-
title: "Scuba diving",
|
|
63
|
-
image: "https://picsum.photos/400/600",
|
|
64
|
-
alt: "fifth panel image",
|
|
65
|
-
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
|
|
66
|
-
svg: "aa (5).svg",
|
|
67
|
-
},
|
|
35
|
+
alt: "Fishing",
|
|
36
|
+
content: "Lorem ipsum dolor sit amet.",
|
|
37
|
+
svg: "/icons/fishing.svg",
|
|
38
|
+
}
|
|
68
39
|
];
|
|
69
40
|
|
|
70
41
|
return (
|
|
71
|
-
|
|
42
|
+
<ReactImageAccordion
|
|
72
43
|
accordionData={accordionData}
|
|
73
|
-
AccordionWidth=
|
|
74
|
-
AccordionHeight=
|
|
75
|
-
ContentSize=[
|
|
76
|
-
|
|
77
|
-
|
|
44
|
+
AccordionWidth="50rem"
|
|
45
|
+
AccordionHeight="30rem"
|
|
46
|
+
ContentSize={[
|
|
47
|
+
"0.65rem",
|
|
48
|
+
"0.8rem",
|
|
49
|
+
"1rem",
|
|
50
|
+
"1.2rem",
|
|
51
|
+
"1.5rem"
|
|
52
|
+
]}
|
|
53
|
+
ShowButton={false}
|
|
54
|
+
onClick={(item) => console.log(item)}
|
|
78
55
|
/>
|
|
79
56
|
);
|
|
80
57
|
}
|
|
81
58
|
|
|
59
|
+
export default MyComponent;
|
|
82
60
|
```
|
|
61
|
+
|
|
83
62
|
---
|
|
84
63
|
|
|
85
|
-
|
|
64
|
+
## Props
|
|
86
65
|
|
|
87
|
-
|
|
88
|
-
|
|
66
|
+
| Prop | Type | Default | Description |
|
|
67
|
+
|------|------|---------|-------------|
|
|
68
|
+
| accordionData | Array | Required | Accordion data |
|
|
69
|
+
| AccordionWidth | string | 50rem | Accordion width |
|
|
70
|
+
| AccordionHeight | string | 30rem | Accordion height |
|
|
71
|
+
| ContentSize | string[] | Responsive defaults | Font size for different breakpoints |
|
|
72
|
+
| ShowButton | boolean | false | Show or hide action button |
|
|
73
|
+
| onClick | function | - | Callback when an item is clicked |
|
|
89
74
|
|
|
90
75
|
---
|
|
91
76
|
|
|
92
|
-
|
|
93
|
-
| ---------------- |:-------------:|:----------:|:-----------------------:|
|
|
94
|
-
| accordionData | json data | json file | Source File json |
|
|
95
|
-
| AccordionWidth | css /optional| 50rem | Accordion Width |
|
|
96
|
-
| AccordionHeight | css /optional| 30rem | Accordion Height |
|
|
97
|
-
| ContentSize |Array /optional|[0,1,2,3,4]*| Content font size |
|
|
98
|
-
| onClick | onCLick | | onClick ATC event |
|
|
99
|
-
| ShowButton | boolean | false | show or hid button |
|
|
77
|
+
## Responsive ContentSize
|
|
100
78
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
"
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
"@media (min-width: 769px) and (max-width: 1024px)": {
|
|
110
|
-
fontSize: ContentSize[2] || "1rem",
|
|
111
|
-
},
|
|
112
|
-
"@media (min-width: 1025px) and (max-width: 1200px)": {
|
|
113
|
-
fontSize: ContentSize[3] || "1.2rem",
|
|
114
|
-
},
|
|
115
|
-
"@media (min-width: 1201px)": {
|
|
116
|
-
fontSize: ContentSize[4] || "1.5rem",
|
|
117
|
-
},
|
|
79
|
+
```jsx
|
|
80
|
+
[
|
|
81
|
+
"0.65rem", // Mobile
|
|
82
|
+
"0.8rem", // Tablet
|
|
83
|
+
"1rem", // Small Desktop
|
|
84
|
+
"1.2rem", // Desktop
|
|
85
|
+
"1.5rem" // Large Desktop
|
|
86
|
+
]
|
|
118
87
|
```
|
|
119
88
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## Example
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
import accordionData from "./accordionData.json";
|
|
95
|
+
import { ReactImageAccordion } from "react-image-accordion";
|
|
96
|
+
|
|
97
|
+
export default function App() {
|
|
125
98
|
return (
|
|
126
|
-
|
|
127
|
-
accordionData=
|
|
128
|
-
AccordionWidth=
|
|
129
|
-
AccordionHeight=
|
|
130
|
-
ContentSize={[
|
|
131
|
-
|
|
132
|
-
|
|
99
|
+
<ReactImageAccordion
|
|
100
|
+
accordionData={accordionData}
|
|
101
|
+
AccordionWidth="40rem"
|
|
102
|
+
AccordionHeight="30rem"
|
|
103
|
+
ContentSize={[
|
|
104
|
+
".5rem",
|
|
105
|
+
".5rem",
|
|
106
|
+
".6rem",
|
|
107
|
+
".7rem",
|
|
108
|
+
"1.1rem"
|
|
109
|
+
]}
|
|
110
|
+
ShowButton={false}
|
|
111
|
+
onClick={(item) => console.log(item)}
|
|
133
112
|
/>
|
|
134
113
|
);
|
|
135
|
-
}
|
|
114
|
+
}
|
|
136
115
|
```
|
|
137
116
|
|
|
117
|
+
---
|
|
138
118
|
|
|
139
|
-
|
|
140
|
-
## StoryBook Sample
|
|
141
|
-
[StoryBook]https://react-image-accordion.netlify.app/
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
## Contributing
|
|
145
|
-
For major changes, please open an issue first to discuss what you would like to change.
|
|
119
|
+
## Storybook
|
|
146
120
|
|
|
147
|
-
|
|
121
|
+
https://react-image-accordion.netlify.app/
|
|
148
122
|
|
|
123
|
+
---
|
|
149
124
|
|
|
150
125
|
## License
|
|
151
|
-
|
|
126
|
+
|
|
127
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:after,:before{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{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/2 + var(--_button-size)/2);cursor:pointer}@media (prefers-reduced-motion:no-preference){.accordion-panel{transition:flex-basis .5s,flex-grow .5s}}.accordion-panel:first-child{--_panel-color:red}.accordion-panel:nth-child(2){--_panel-color:#00f}.accordion-panel:nth-child(3){--_panel-color:green}.accordion-panel:nth-child(4){--_panel-color:#ff0}.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:#0ff}.accordion-panel:nth-child(10){--_panel-color:#f0f}.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:#fff!important}@media (prefers-reduced-motion:no-preference){.accordion-panel:has([aria-expanded=true]) .accordion-content>p{transition:transform .5s .5s,opacity .5s .5s}}.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:#fff!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)*-1 + var(--_button-size)*-1);width:calc(100% + var(--_button-size)*2);height:var(--_button-size);background:rgba(0,0,0,.55);z-index:-1;border-radius:100vw}}.accordion-Link{all:revert;display:block;position:absolute;left:-.1rem;bottom:0;margin:.75rem;width:10rem;height:var(--_button-size);background:rgba(0,0,0,.55);border-radius:100vw;padding:.75rem;font-weight:bolder}.accordion-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:filer .5s}.accordion-panel:has([aria-expanded=true]) .accordion-image{filter:brightness(.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:rgba(0,0,0,.55);width:var(--_button-size);aspect-ratio:1/1;padding:.75rem;border-radius:50%;z-index:10}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:after,:before{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{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/2 + var(--_button-size)/2);cursor:pointer}@media (prefers-reduced-motion:no-preference){.accordion-panel{transition:flex-basis .5s,flex-grow .5s}}.accordion-panel:first-child{--_panel-color:red}.accordion-panel:nth-child(2){--_panel-color:#00f}.accordion-panel:nth-child(3){--_panel-color:green}.accordion-panel:nth-child(4){--_panel-color:#ff0}.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:#0ff}.accordion-panel:nth-child(10){--_panel-color:#f0f}.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:#fff!important}@media (prefers-reduced-motion:no-preference){.accordion-panel:has([aria-expanded=true]) .accordion-content>p{transition:transform .5s .5s,opacity .5s .5s}}.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:#fff!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)*-1 + var(--_button-size)*-1);width:calc(100% + var(--_button-size)*2);height:var(--_button-size);background:rgba(0,0,0,.55);z-index:-1;border-radius:100vw}}.accordion-Link{all:revert;display:block;position:absolute;left:-.1rem;bottom:0;margin:.75rem;width:10rem;height:var(--_button-size);background:rgba(0,0,0,.55);border-radius:100vw;padding:.75rem;font-weight:bolder}.accordion-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:filer .5s}.accordion-panel:has([aria-expanded=true]) .accordion-image{filter:brightness(.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:rgba(0,0,0,.55);width:var(--_button-size);aspect-ratio:1/1;padding:.75rem;border-radius:50%;z-index:10}
|
package/dist/index.es.js
CHANGED
|
@@ -1,47 +1,69 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
function _iterableToArrayLimit(arr, i) {
|
|
4
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
5
|
+
if (null != _i) {
|
|
6
|
+
var _s,
|
|
7
|
+
_e,
|
|
8
|
+
_x,
|
|
9
|
+
_r,
|
|
10
|
+
_arr = [],
|
|
11
|
+
_n = !0,
|
|
12
|
+
_d = !1;
|
|
13
|
+
try {
|
|
14
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) {
|
|
15
|
+
if (Object(_i) !== _i) return;
|
|
16
|
+
_n = !1;
|
|
17
|
+
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
|
|
18
|
+
} catch (err) {
|
|
19
|
+
_d = !0, _e = err;
|
|
20
|
+
} finally {
|
|
21
|
+
try {
|
|
22
|
+
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
|
|
23
|
+
} finally {
|
|
24
|
+
if (_d) throw _e;
|
|
25
|
+
}
|
|
18
26
|
}
|
|
19
|
-
|
|
20
|
-
head.appendChild(style);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if (style.styleSheet) {
|
|
24
|
-
style.styleSheet.cssText = css;
|
|
25
|
-
} else {
|
|
26
|
-
style.appendChild(document.createTextNode(css));
|
|
27
|
+
return _arr;
|
|
27
28
|
}
|
|
28
29
|
}
|
|
30
|
+
function _slicedToArray(arr, i) {
|
|
31
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
32
|
+
}
|
|
33
|
+
function _arrayWithHoles(arr) {
|
|
34
|
+
if (Array.isArray(arr)) return arr;
|
|
35
|
+
}
|
|
36
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
37
|
+
if (!o) return;
|
|
38
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
39
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
40
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
41
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
42
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
43
|
+
}
|
|
44
|
+
function _arrayLikeToArray(arr, len) {
|
|
45
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
46
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
47
|
+
return arr2;
|
|
48
|
+
}
|
|
49
|
+
function _nonIterableRest() {
|
|
50
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
51
|
+
}
|
|
29
52
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const ContentSizeFont = ContentSize || [];
|
|
53
|
+
function UseImageAccordion(_ref) {
|
|
54
|
+
var accordionData = _ref.accordionData,
|
|
55
|
+
AccordionWidth = _ref.AccordionWidth,
|
|
56
|
+
AccordionHeight = _ref.AccordionHeight,
|
|
57
|
+
ContentSize = _ref.ContentSize,
|
|
58
|
+
_onClick = _ref.onClick,
|
|
59
|
+
ShowButton = _ref.ShowButton;
|
|
60
|
+
var _useState = useState(null),
|
|
61
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
62
|
+
activePanel = _useState2[0],
|
|
63
|
+
setActivePanel = _useState2[1];
|
|
64
|
+
var ContentSizeFont = ContentSize || [];
|
|
43
65
|
function toggleAccordion(panelToActivate) {
|
|
44
|
-
setActivePanel(prevPanel
|
|
66
|
+
setActivePanel(function (prevPanel) {
|
|
45
67
|
if (prevPanel === panelToActivate) {
|
|
46
68
|
return prevPanel;
|
|
47
69
|
} else {
|
|
@@ -49,39 +71,9 @@ function UseImageAccordion({
|
|
|
49
71
|
}
|
|
50
72
|
});
|
|
51
73
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
height: ${AccordionHeight};
|
|
56
|
-
}
|
|
57
|
-
}`;
|
|
58
|
-
const css = `
|
|
59
|
-
@media (max-width: 480px) {
|
|
60
|
-
.ContentSize {
|
|
61
|
-
font-size: ${ContentSizeFont[0] || "0.65rem"};
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
@media (min-width: 481px) and (max-width: 768px) {
|
|
65
|
-
.ContentSize {
|
|
66
|
-
font-size: ${ContentSizeFont[1] || "0.8rem"};
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
@media (min-width: 769px) and (max-width: 1024px) {
|
|
70
|
-
.ContentSize {
|
|
71
|
-
font-size: ${ContentSizeFont[2] || "1rem"};
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
@media (min-width: 1025px) and (max-width: 1200px) {
|
|
75
|
-
.ContentSize {
|
|
76
|
-
font-size: ${ContentSizeFont[3] || "1.2rem"};
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
@media (min-width: 1201px) {
|
|
80
|
-
.ContentSize {
|
|
81
|
-
font-size: ${ContentSizeFont[4] || "1.5rem"};
|
|
82
|
-
}
|
|
83
|
-
}`;
|
|
84
|
-
useEffect(() => {
|
|
74
|
+
var HeightStyle = "\n @media (min-width: 768px) {\n .AccHeight {\n height: ".concat(AccordionHeight, ";\n }\n }");
|
|
75
|
+
var css = "\n @media (max-width: 480px) {\n .ContentSize {\n font-size: ".concat(ContentSizeFont[0] || "0.65rem", ";\n }\n }\n @media (min-width: 481px) and (max-width: 768px) {\n .ContentSize {\n font-size: ").concat(ContentSizeFont[1] || "0.8rem", ";\n }\n }\n @media (min-width: 769px) and (max-width: 1024px) {\n .ContentSize {\n font-size: ").concat(ContentSizeFont[2] || "1rem", ";\n }\n }\n @media (min-width: 1025px) and (max-width: 1200px) {\n .ContentSize {\n font-size: ").concat(ContentSizeFont[3] || "1.2rem", ";\n }\n }\n @media (min-width: 1201px) {\n .ContentSize {\n font-size: ").concat(ContentSizeFont[4] || "1.5rem", ";\n }\n }");
|
|
76
|
+
useEffect(function () {
|
|
85
77
|
setActivePanel(accordionData[0].id);
|
|
86
78
|
}, []);
|
|
87
79
|
if (!accordionData) return null;
|
|
@@ -94,61 +86,64 @@ function UseImageAccordion({
|
|
|
94
86
|
scoped: true
|
|
95
87
|
}, HeightStyle), /*#__PURE__*/React.createElement("div", {
|
|
96
88
|
className: "accordionImage AccHeight"
|
|
97
|
-
}, accordionData.map(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
89
|
+
}, accordionData.map(function (item) {
|
|
90
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
key: item.id,
|
|
92
|
+
className: "accordion-panel",
|
|
93
|
+
onClick: function onClick() {
|
|
94
|
+
return toggleAccordion(item.id);
|
|
95
|
+
}
|
|
96
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
97
|
+
id: item.id
|
|
98
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
99
|
+
type: "button",
|
|
100
|
+
className: "accordion-trigger",
|
|
101
|
+
"aria-controls": "panel1-content",
|
|
102
|
+
"aria-expanded": activePanel === item.id
|
|
103
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
104
|
+
className: "accordion-title",
|
|
105
|
+
id: item.id
|
|
106
|
+
}, item.title), /*#__PURE__*/React.createElement("svg", {
|
|
107
|
+
"aria-hidden": "true",
|
|
108
|
+
className: "accordion-icon",
|
|
109
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
110
|
+
}, /*#__PURE__*/React.createElement("image", {
|
|
111
|
+
href: item.svg
|
|
112
|
+
})))), /*#__PURE__*/React.createElement("style", {
|
|
113
|
+
scoped: true
|
|
114
|
+
}, css), /*#__PURE__*/React.createElement("div", {
|
|
115
|
+
className: "accordion-content ContentSize",
|
|
116
|
+
style: {
|
|
117
|
+
height: "calc(".concat(AccordionHeight, " - 5rem)")
|
|
118
|
+
},
|
|
119
|
+
id: item.id,
|
|
120
|
+
"aria-labelledby": item.id,
|
|
121
|
+
"aria-hidden": activePanel !== item.id,
|
|
122
|
+
role: "region"
|
|
123
|
+
}, /*#__PURE__*/React.createElement("p", null, item.content), ShowButton && /*#__PURE__*/React.createElement("button", {
|
|
124
|
+
className: "accordion-Link",
|
|
125
|
+
onClick: function onClick(e) {
|
|
126
|
+
e.stopPropagation();
|
|
127
|
+
_onClick({
|
|
128
|
+
id: item.id,
|
|
129
|
+
title: item.title
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}, item.title), /*#__PURE__*/React.createElement("img", {
|
|
133
|
+
className: "accordion-image",
|
|
134
|
+
src: item.image,
|
|
135
|
+
alt: item.alt
|
|
136
|
+
})));
|
|
137
|
+
}))));
|
|
142
138
|
}
|
|
143
139
|
|
|
144
|
-
|
|
145
|
-
accordionData,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}) => {
|
|
140
|
+
var ReactImageAccordion = function ReactImageAccordion(_ref) {
|
|
141
|
+
var accordionData = _ref.accordionData,
|
|
142
|
+
AccordionWidth = _ref.AccordionWidth,
|
|
143
|
+
AccordionHeight = _ref.AccordionHeight,
|
|
144
|
+
ContentSize = _ref.ContentSize,
|
|
145
|
+
onClick = _ref.onClick,
|
|
146
|
+
ShowButton = _ref.ShowButton;
|
|
152
147
|
return /*#__PURE__*/React.createElement(UseImageAccordion, {
|
|
153
148
|
accordionData: accordionData,
|
|
154
149
|
AccordionWidth: AccordionWidth,
|