Skip to content

Commit f498802

Browse files
joaltorocjoaltoroc
authored
feature/CC 10 accordion (#21)
* Accordion * Update version
1 parent bcf2c36 commit f498802

12 files changed

Lines changed: 1693 additions & 1700 deletions

File tree

‎package-lock.json‎

Lines changed: 1269 additions & 1675 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"framework design",
1111
"design system"
1212
],
13-
"version": "0.4.2",
13+
"version": "0.5.0",
1414
"homepage": "https://github.com/creativecodeco/ui",
1515
"author": {
1616
"name": "John Toro",
@@ -20,7 +20,7 @@
2020
"main": "lib/index.js",
2121
"source": "src/index.ts",
2222
"scripts": {
23-
"dev": "npm run storybook",
23+
"dev": "npm run build; npm run storybook",
2424
"dev:css": "postcss src/theme/main.css -o lib/theme/main.css --watch",
2525
"build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
2626
"build:alias": "tsc-alias -p tsconfig.build.json",
@@ -48,42 +48,42 @@
4848
"usehooks-ts": "2.9.1"
4949
},
5050
"dependencies": {
51-
"postcss": "8.4.34",
52-
"postcss-import": "16.0.0",
51+
"postcss": "8.4.35",
52+
"postcss-import": "16.0.1",
5353
"react": "18.2.0",
5454
"react-hook-form": "7.50.1",
5555
"tailwindcss": "3.4.1",
56-
"usehooks-ts": "2.13.0"
56+
"usehooks-ts": "2.15.1"
5757
},
5858
"devDependencies": {
59-
"@babel/core": "7.23.9",
60-
"@babel/preset-env": "7.23.9",
59+
"@babel/core": "7.24.0",
60+
"@babel/preset-env": "7.24.0",
6161
"@babel/preset-react": "7.23.3",
6262
"@babel/preset-typescript": "7.23.3",
6363
"@jest/globals": "29.7.0",
64-
"@storybook/addon-essentials": "7.6.12",
65-
"@storybook/addon-interactions": "7.6.12",
66-
"@storybook/addon-links": "7.6.12",
67-
"@storybook/addon-mdx-gfm": "7.6.12",
68-
"@storybook/blocks": "7.6.12",
69-
"@storybook/react": "7.6.12",
70-
"@storybook/react-webpack5": "7.6.12",
71-
"@storybook/test": "7.6.12",
64+
"@storybook/addon-essentials": "7.6.17",
65+
"@storybook/addon-interactions": "7.6.17",
66+
"@storybook/addon-links": "7.6.17",
67+
"@storybook/addon-mdx-gfm": "7.6.17",
68+
"@storybook/blocks": "7.6.17",
69+
"@storybook/react": "7.6.17",
70+
"@storybook/react-webpack5": "7.6.17",
71+
"@storybook/test": "7.6.17",
7272
"@testing-library/dom": "9.3.4",
7373
"@testing-library/jest-dom": "6.4.2",
7474
"@testing-library/react": "14.2.1",
7575
"@testing-library/user-event": "14.5.2",
7676
"@types/jest": "29.5.12",
77-
"@types/node": "20.11.16",
78-
"@types/react": "18.2.55",
79-
"@types/react-dom": "18.2.18",
77+
"@types/node": "20.11.21",
78+
"@types/react": "18.2.60",
79+
"@types/react-dom": "18.2.19",
8080
"@typescript-eslint/eslint-plugin": "6.21.0",
8181
"autoprefixer": "10.4.17",
82-
"chromatic": "10.7.1",
82+
"chromatic": "11.0.0",
8383
"classnames": "2.5.1",
8484
"cpx2": "7.0.1",
85-
"daisyui": "4.6.1",
86-
"eslint": "8.56.0",
85+
"daisyui": "4.7.2",
86+
"eslint": "8.57.0",
8787
"eslint-config-prettier": "9.1.0",
8888
"eslint-config-standard": "17.1.0",
8989
"eslint-config-standard-react": "13.0.0",
@@ -96,9 +96,9 @@
9696
"eslint-plugin-promise": "6.1.1",
9797
"eslint-plugin-react": "7.33.2",
9898
"eslint-plugin-standard": "5.0.0",
99-
"eslint-plugin-storybook": "0.6.15",
100-
"eslint-plugin-unused-imports": "3.0.0",
101-
"husky": "9.0.10",
99+
"eslint-plugin-storybook": "0.8.0",
100+
"eslint-plugin-unused-imports": "3.1.0",
101+
"husky": "9.0.11",
102102
"jest": "29.7.0",
103103
"jest-environment-jsdom": "29.7.0",
104104
"jest-junit": "16.0.0",
@@ -108,7 +108,7 @@
108108
"prop-types": "15.8.1",
109109
"react-dom": "18.2.0",
110110
"react-icons": "5.0.1",
111-
"storybook": "7.6.12",
111+
"storybook": "7.6.17",
112112
"storybook-addon-themes": "6.1.0",
113113
"string-width": "7.1.0",
114114
"ts-jest": "29.1.2",

‎src/theme/accordion.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.accordion-type {
2+
&-arrow {
3+
@apply collapse-arrow;
4+
}
5+
6+
&-plus {
7+
@apply collapse-plus;
8+
}
9+
}

‎src/theme/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
44

5+
@import './accordion.css';
56
@import './avatar.css';
67
@import './button.css';
78
@import './checkbox.css';

‎src/types/ui/components/accordion.types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export interface AccordionType {
2+
name: string;
3+
iconType?: 'arrow' | 'plus';
4+
join?: boolean;
5+
multiple?: boolean;
6+
7+
options: AccordionOption[];
8+
}
9+
10+
export interface AccordionOption {
11+
header: React.ReactElement;
12+
body: React.ReactElement;
13+
}

‎src/types/ui/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export type * from './accordion.types';
12
export type * from './avatar.types';
23
export type * from './button.types';

‎src/ui/components/accordion/__snapshots__/accordion.test.tsx.snap‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Accordion /> snapshot 1`] = `
4+
<div>
5+
<div
6+
class="flex flex-wrap gap-2"
7+
>
8+
<div
9+
class="collapse bg-base-200 accordion-type-arrow"
10+
>
11+
<input
12+
name="test"
13+
type="radio"
14+
/>
15+
<div
16+
class="collapse-title text-xl font-medium"
17+
>
18+
Header
19+
0
20+
</div>
21+
<div
22+
class="collapse-content"
23+
>
24+
<p>
25+
Body
26+
</p>
27+
</div>
28+
</div>
29+
<div
30+
class="collapse bg-base-200 accordion-type-arrow"
31+
>
32+
<input
33+
name="test"
34+
type="radio"
35+
/>
36+
<div
37+
class="collapse-title text-xl font-medium"
38+
>
39+
Header
40+
1
41+
</div>
42+
<div
43+
class="collapse-content"
44+
>
45+
<p>
46+
Body
47+
</p>
48+
</div>
49+
</div>
50+
<div
51+
class="collapse bg-base-200 accordion-type-arrow"
52+
>
53+
<input
54+
name="test"
55+
type="radio"
56+
/>
57+
<div
58+
class="collapse-title text-xl font-medium"
59+
>
60+
Header
61+
2
62+
</div>
63+
<div
64+
class="collapse-content"
65+
>
66+
<p>
67+
Body
68+
</p>
69+
</div>
70+
</div>
71+
<div
72+
class="collapse bg-base-200 accordion-type-arrow"
73+
>
74+
<input
75+
name="test"
76+
type="radio"
77+
/>
78+
<div
79+
class="collapse-title text-xl font-medium"
80+
>
81+
Header
82+
3
83+
</div>
84+
<div
85+
class="collapse-content"
86+
>
87+
<p>
88+
Body
89+
</p>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
`;
95+
96+
exports[`<Accordion /> snapshot all props 1`] = `
97+
<div>
98+
<div
99+
class="flex flex-wrap join join-vertical w-full"
100+
>
101+
<div
102+
class="collapse bg-base-200 accordion-type-plus join-item border border-base-300"
103+
>
104+
<input
105+
name="test"
106+
type="checkbox"
107+
/>
108+
<div
109+
class="collapse-title text-xl font-medium"
110+
>
111+
Header
112+
0
113+
</div>
114+
<div
115+
class="collapse-content"
116+
>
117+
<p>
118+
Body
119+
</p>
120+
</div>
121+
</div>
122+
<div
123+
class="collapse bg-base-200 accordion-type-plus join-item border border-base-300"
124+
>
125+
<input
126+
name="test"
127+
type="checkbox"
128+
/>
129+
<div
130+
class="collapse-title text-xl font-medium"
131+
>
132+
Header
133+
1
134+
</div>
135+
<div
136+
class="collapse-content"
137+
>
138+
<p>
139+
Body
140+
</p>
141+
</div>
142+
</div>
143+
<div
144+
class="collapse bg-base-200 accordion-type-plus join-item border border-base-300"
145+
>
146+
<input
147+
name="test"
148+
type="checkbox"
149+
/>
150+
<div
151+
class="collapse-title text-xl font-medium"
152+
>
153+
Header
154+
2
155+
</div>
156+
<div
157+
class="collapse-content"
158+
>
159+
<p>
160+
Body
161+
</p>
162+
</div>
163+
</div>
164+
<div
165+
class="collapse bg-base-200 accordion-type-plus join-item border border-base-300"
166+
>
167+
<input
168+
name="test"
169+
type="checkbox"
170+
/>
171+
<div
172+
class="collapse-title text-xl font-medium"
173+
>
174+
Header
175+
3
176+
</div>
177+
<div
178+
class="collapse-content"
179+
>
180+
<p>
181+
Body
182+
</p>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
`;

‎src/ui/components/accordion/accordion.component.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import cls from 'classnames';
3+
4+
import type { AccordionType } from '@/types';
5+
6+
const Accordion = ({
7+
name,
8+
join,
9+
options,
10+
iconType = 'arrow',
11+
multiple
12+
}: AccordionType) => {
13+
return (
14+
<div
15+
className={cls('flex flex-wrap', {
16+
'join join-vertical w-full': join,
17+
'gap-2': !join
18+
})}
19+
>
20+
{options.map(({ header, body }, index) => (
21+
<div
22+
key={index}
23+
className={cls('collapse bg-base-200', {
24+
[`accordion-type-${iconType}`]: iconType,
25+
'join-item border border-base-300': join
26+
})}
27+
>
28+
<input type={multiple ? 'checkbox' : 'radio'} name={name} />
29+
<div className='collapse-title text-xl font-medium'>{header}</div>
30+
<div className='collapse-content'>{body}</div>
31+
</div>
32+
))}
33+
</div>
34+
);
35+
};
36+
37+
export default Accordion;

0 commit comments

Comments
 (0)