@faststore/components 2.0.37-alpha.0 → 2.0.39-alpha.0
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/CHANGELOG.md +18 -0
- package/dist/assets/MinusCircle.d.ts +3 -0
- package/dist/assets/MinusCircle.js +8 -0
- package/dist/assets/MinusCircle.js.map +1 -0
- package/dist/assets/PlusCircle.d.ts +3 -0
- package/dist/assets/PlusCircle.js +9 -0
- package/dist/assets/PlusCircle.js.map +1 -0
- package/dist/assets/Ruler.js +1 -1
- package/dist/assets/Ruler.js.map +1 -1
- package/dist/assets/index.d.ts +2 -0
- package/dist/assets/index.js +2 -0
- package/dist/assets/index.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/molecules/Accordion/Accordion.d.ts +26 -0
- package/dist/molecules/Accordion/Accordion.js +21 -0
- package/dist/molecules/Accordion/Accordion.js.map +1 -0
- package/dist/molecules/Accordion/AccordionButton.d.ts +19 -0
- package/dist/molecules/Accordion/AccordionButton.js +37 -0
- package/dist/molecules/Accordion/AccordionButton.js.map +1 -0
- package/dist/molecules/Accordion/AccordionItem.d.ts +31 -0
- package/dist/molecules/Accordion/AccordionItem.js +22 -0
- package/dist/molecules/Accordion/AccordionItem.js.map +1 -0
- package/dist/molecules/Accordion/AccordionPanel.d.ts +10 -0
- package/dist/molecules/Accordion/AccordionPanel.js +10 -0
- package/dist/molecules/Accordion/AccordionPanel.js.map +1 -0
- package/dist/molecules/Accordion/index.d.ts +8 -0
- package/dist/molecules/Accordion/index.js +5 -0
- package/dist/molecules/Accordion/index.js.map +1 -0
- package/dist/molecules/Table/Table.d.ts +3 -3
- package/package.json +2 -2
- package/src/assets/MinusCircle.tsx +36 -0
- package/src/assets/PlusCircle.tsx +46 -0
- package/src/assets/Ruler.tsx +46 -5
- package/src/assets/index.ts +2 -0
- package/src/index.ts +13 -5
- package/src/molecules/Accordion/Accordion.tsx +76 -0
- package/src/molecules/Accordion/AccordionButton.tsx +98 -0
- package/src/molecules/Accordion/AccordionItem.tsx +91 -0
- package/src/molecules/Accordion/AccordionPanel.tsx +40 -0
- package/src/molecules/Accordion/index.ts +11 -0
- package/src/molecules/Table/Table.tsx +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.39-alpha.0](https://github.com/vtex/faststore/compare/v2.0.38-alpha.0...v2.0.39-alpha.0) (2023-01-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* Edit TableProps ([#1594](https://github.com/vtex/faststore/issues/1594)) ([dcf7970](https://github.com/vtex/faststore/commit/dcf797001c09d1abc685fcbd7ec8aa4bdc7a7bcc))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.38-alpha.0](https://github.com/vtex/faststore/compare/v2.0.37-alpha.0...v2.0.38-alpha.0) (2023-01-09)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* Adds `Accordion` component ([#1567](https://github.com/vtex/faststore/issues/1567)) ([0173e20](https://github.com/vtex/faststore/commit/0173e20b162d53d8faae0791e08110f335c6d6f6))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## 2.0.37-alpha.0 (2023-01-06)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
// Icon from Phosphor Icons
|
|
3
|
+
const MinusCircle = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
|
|
4
|
+
React.createElement("rect", { width: "256", height: "256", fill: "none" }),
|
|
5
|
+
React.createElement("circle", { cx: "128", cy: "128", r: "96", fill: "none", stroke: "currentColor", strokeMiterlimit: "10" }),
|
|
6
|
+
React.createElement("line", { x1: "88", y1: "128", x2: "168", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
7
|
+
export default MinusCircle;
|
|
8
|
+
//# sourceMappingURL=MinusCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MinusCircle.js","sourceRoot":"","sources":["../../src/assets/MinusCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,WAAW,GAAO,GAAG,EAAE,CAAC,CAC5B,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,gBAAgB,EAAC,IAAI,GACb;IACV,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
// Icon from Phosphor Icons
|
|
3
|
+
const PlusCircle = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
|
|
4
|
+
React.createElement("rect", { width: "256", height: "256", fill: "none" }),
|
|
5
|
+
React.createElement("circle", { cx: "128", cy: "128", r: "96", fill: "none", stroke: "currentColor", strokeMiterlimit: "10" }),
|
|
6
|
+
React.createElement("line", { x1: "88", y1: "128", x2: "168", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
7
|
+
React.createElement("line", { x1: "128", y1: "88", x2: "128", y2: "168", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
8
|
+
export default PlusCircle;
|
|
9
|
+
//# sourceMappingURL=PlusCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlusCircle.js","sourceRoot":"","sources":["../../src/assets/PlusCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,UAAU,GAAO,GAAG,EAAE,CAAC,CAC3B,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,gBAAgB,EAAC,IAAI,GACb;IACV,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,UAAU,CAAA"}
|
package/dist/assets/Ruler.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
// Icon from Phosphor Icons
|
|
3
|
-
const Ruler = () => (React.createElement("svg", {
|
|
3
|
+
const Ruler = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
|
|
4
4
|
React.createElement("rect", { width: "256", height: "256", fill: "none" }),
|
|
5
5
|
React.createElement("rect", { x: "26.2", y: "82.7", width: "203.6", height: "90.51", rx: "8", transform: "translate(-53 128) rotate(-45)", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
|
|
6
6
|
React.createElement("line", { x1: "132", y1: "60", x2: "164", y2: "92", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
|
package/dist/assets/Ruler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ruler.js","sourceRoot":"","sources":["../../src/assets/Ruler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,
|
|
1
|
+
{"version":3,"file":"Ruler.js","sourceRoot":"","sources":["../../src/assets/Ruler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,EACd,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,gCAAgC,EAC1C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV,CACJ,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/assets/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ export { default as ArrowRight } from './ArrowRight';
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown';
|
|
3
3
|
export { default as Checked } from './Checked';
|
|
4
4
|
export { default as House } from './House';
|
|
5
|
+
export { default as MinusCircle } from './MinusCircle';
|
|
6
|
+
export { default as PlusCircle } from './PlusCircle';
|
|
5
7
|
export { default as Ruler } from './Ruler';
|
|
6
8
|
export { default as ShoppingCart } from './ShoppingCart';
|
|
7
9
|
export { default as X } from './X';
|
package/dist/assets/index.js
CHANGED
|
@@ -2,6 +2,8 @@ export { default as ArrowRight } from './ArrowRight';
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown';
|
|
3
3
|
export { default as Checked } from './Checked';
|
|
4
4
|
export { default as House } from './House';
|
|
5
|
+
export { default as MinusCircle } from './MinusCircle';
|
|
6
|
+
export { default as PlusCircle } from './PlusCircle';
|
|
5
7
|
export { default as Ruler } from './Ruler';
|
|
6
8
|
export { default as ShoppingCart } from './ShoppingCart';
|
|
7
9
|
export { default as X } from './X';
|
package/dist/assets/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ export type { RadioProps } from './atoms/Radio';
|
|
|
24
24
|
export { default as Select } from './atoms/Select';
|
|
25
25
|
export type { SelectProps } from './atoms/Select';
|
|
26
26
|
export { default as SROnly } from './atoms/SROnly';
|
|
27
|
+
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
|
|
28
|
+
export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './molecules/Accordion';
|
|
27
29
|
export { default as BuyButton } from './molecules/BuyButton';
|
|
28
30
|
export { default as CheckboxField } from './molecules/CheckboxField';
|
|
29
31
|
export type { CheckboxFieldProps } from './molecules/CheckboxField';
|
|
@@ -47,5 +49,5 @@ export { default as Toggle } from './molecules/Toggle';
|
|
|
47
49
|
export type { ToggleProps } from './molecules/Toggle';
|
|
48
50
|
export { default as ToggleField } from './molecules/ToggleField';
|
|
49
51
|
export type { ToggleFieldProps } from './molecules/ToggleField';
|
|
50
|
-
export { default as Hero, HeroImage, HeroHeading
|
|
52
|
+
export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
|
|
51
53
|
export type { HeroProps, HeroImageProps, HeroHeadingProps, } from './organisms/Hero';
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { default as Radio } from './atoms/Radio';
|
|
|
15
15
|
export { default as Select } from './atoms/Select';
|
|
16
16
|
export { default as SROnly } from './atoms/SROnly';
|
|
17
17
|
// Molecules
|
|
18
|
+
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
|
|
18
19
|
export { default as BuyButton } from './molecules/BuyButton';
|
|
19
20
|
export { default as CheckboxField } from './molecules/CheckboxField';
|
|
20
21
|
export { default as IconButton } from './molecules/IconButton';
|
|
@@ -28,5 +29,5 @@ export { default as Tag } from './molecules/Tag';
|
|
|
28
29
|
export { default as Toggle } from './molecules/Toggle';
|
|
29
30
|
export { default as ToggleField } from './molecules/ToggleField';
|
|
30
31
|
// Organisms
|
|
31
|
-
export { default as Hero, HeroImage, HeroHeading
|
|
32
|
+
export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
|
|
32
33
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface AccordionContext {
|
|
4
|
+
indices: Set<number>;
|
|
5
|
+
onChange: (index: number) => void;
|
|
6
|
+
numberOfItems: number;
|
|
7
|
+
}
|
|
8
|
+
declare const AccordionContext: React.Context<AccordionContext | undefined>;
|
|
9
|
+
export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
10
|
+
/**
|
|
11
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
12
|
+
* testing-library, and jest).
|
|
13
|
+
*/
|
|
14
|
+
testId?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Indices that indicate which accordion items are opened.
|
|
17
|
+
*/
|
|
18
|
+
indices: Iterable<number>;
|
|
19
|
+
/**
|
|
20
|
+
* Function that is triggered when an accordion item is opened/closed.
|
|
21
|
+
*/
|
|
22
|
+
onChange: (index: number) => void;
|
|
23
|
+
}
|
|
24
|
+
declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export declare function useAccordion(): AccordionContext;
|
|
26
|
+
export default Accordion;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { useContext, cloneElement, forwardRef, createContext, } from 'react';
|
|
2
|
+
const AccordionContext = createContext(undefined);
|
|
3
|
+
const Accordion = forwardRef(function Accordion({ testId = 'fs-accordion', indices, onChange, children, ...otherProps }, ref) {
|
|
4
|
+
const childrenWithIndex = React.Children.map(children, (child, index) => cloneElement(child, { index: child.props.index ?? index }));
|
|
5
|
+
const context = {
|
|
6
|
+
indices: new Set(indices),
|
|
7
|
+
onChange,
|
|
8
|
+
numberOfItems: childrenWithIndex.length,
|
|
9
|
+
};
|
|
10
|
+
return (React.createElement(AccordionContext.Provider, { value: context },
|
|
11
|
+
React.createElement("div", { ref: ref, "data-fs-accordion": true, role: "region", "data-testid": testId, ...otherProps }, childrenWithIndex)));
|
|
12
|
+
});
|
|
13
|
+
export function useAccordion() {
|
|
14
|
+
const context = useContext(AccordionContext);
|
|
15
|
+
if (context === undefined) {
|
|
16
|
+
throw new Error('Do not use Accordion components outside the Accordion context.');
|
|
17
|
+
}
|
|
18
|
+
return context;
|
|
19
|
+
}
|
|
20
|
+
export default Accordion;
|
|
21
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,GACd,MAAM,OAAO,CAAA;AAQd,MAAM,gBAAgB,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAA;AAmB/E,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvE,GAAG;IAEH,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAC1C,QAAwB,EACxB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,CAC7E,CAAA;IAED,MAAM,OAAO,GAAG;QACd,OAAO,EAAE,IAAI,GAAG,CAAC,OAAO,CAAC;QACzB,QAAQ;QACR,aAAa,EAAE,iBAAiB,CAAC,MAAM;KACxC,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QACvC,6BACE,GAAG,EAAE,GAAG,6BAER,IAAI,EAAC,QAAQ,iBACA,MAAM,KACf,UAAU,IAEb,iBAAiB,CACd,CACoB,CAC7B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAE5C,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { ButtonProps } from '../..';
|
|
4
|
+
export interface AccordionButtonProps extends ButtonProps {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string;
|
|
9
|
+
/**
|
|
10
|
+
* A React component is rendered as an icon when the accordion is expanded.
|
|
11
|
+
*/
|
|
12
|
+
expandedIcon?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* A React component is rendered as an icon when the accordion is collapsed.
|
|
15
|
+
*/
|
|
16
|
+
collapsedIcon?: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
declare const AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
export default AccordionButton;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { useAccordion } from './Accordion';
|
|
3
|
+
import { useAccordionItem } from './AccordionItem';
|
|
4
|
+
import { Button, MinusCircle, PlusCircle } from '../..';
|
|
5
|
+
const AccordionButton = forwardRef(function AccordionButton({ testId = 'fs-accordion-button', expandedIcon = React.createElement(MinusCircle, { "data-icon": "expanded" }), collapsedIcon = React.createElement(PlusCircle, { "data-icon": "collapsed" }), children, ...otherProps }, ref) {
|
|
6
|
+
const { indices, onChange, numberOfItems } = useAccordion();
|
|
7
|
+
const { index, panel, button, prefixId } = useAccordionItem();
|
|
8
|
+
const onKeyDown = (event) => {
|
|
9
|
+
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
const getNext = () => {
|
|
13
|
+
const next = Number(index) + 1 === numberOfItems ? 0 : Number(index) + 1;
|
|
14
|
+
return document.getElementById(`${prefixId && `${prefixId}-`}button--${next}`);
|
|
15
|
+
};
|
|
16
|
+
const getPrevious = () => {
|
|
17
|
+
const previous = Number(index) - 1 < 0 ? numberOfItems - 1 : Number(index) - 1;
|
|
18
|
+
return document.getElementById(`${prefixId && `${prefixId}-`}button--${previous}`);
|
|
19
|
+
};
|
|
20
|
+
switch (event.key) {
|
|
21
|
+
case 'ArrowDown':
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
getNext()?.focus();
|
|
24
|
+
break;
|
|
25
|
+
case 'ArrowUp':
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
getPrevious()?.focus();
|
|
28
|
+
break;
|
|
29
|
+
default:
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
return (React.createElement(Button, { ref: ref, id: button, "data-fs-accordion-button": true, "aria-expanded": indices.has(index), icon: indices.has(index) ? expandedIcon : collapsedIcon, iconPosition: "right", "aria-controls": panel, onKeyDown: onKeyDown, onClick: () => {
|
|
33
|
+
onChange(index);
|
|
34
|
+
}, "data-testid": testId, ...otherProps }, children));
|
|
35
|
+
});
|
|
36
|
+
export default AccordionButton;
|
|
37
|
+
//# sourceMappingURL=AccordionButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionButton.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkBvD,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EACE,MAAM,GAAG,qBAAqB,EAC9B,YAAY,GAAG,oBAAC,WAAW,iBAAW,UAAU,GAAG,EACnD,aAAa,GAAG,oBAAC,UAAU,iBAAW,WAAW,GAAG,EACpD,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,YAAY,EAAE,CAAA;IAC3D,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE7D,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC/C,IAAI,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjD,OAAM;SACP;QAED,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAExE,OAAO,QAAQ,CAAC,cAAc,CAC5B,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,IAAI,EAAE,CAC/C,CAAA;QACH,CAAC,CAAA;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,QAAQ,GACZ,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE/D,OAAO,QAAQ,CAAC,cAAc,CAC5B,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,QAAQ,EAAE,CACnD,CAAA;QACH,CAAC,CAAA;QAED,QAAQ,KAAK,CAAC,GAAG,EAAE;YACjB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,OAAO,EAAE,EAAE,KAAK,EAAE,CAAA;gBAClB,MAAK;YAEP,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,WAAW,EAAE,EAAE,KAAK,EAAE,CAAA;gBACtB,MAAK;YAEP,QAAQ;SACT;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,MAAM,qDAEK,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EACjC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACvD,YAAY,EAAC,OAAO,mBACL,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,iBACY,MAAM,KACf,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ElementType, HTMLAttributes, ReactElement } from 'react';
|
|
3
|
+
import type { PolymorphicComponentPropsWithRef } from '../../typings';
|
|
4
|
+
interface AccordionItemContext {
|
|
5
|
+
index: number;
|
|
6
|
+
panel: string;
|
|
7
|
+
button: string;
|
|
8
|
+
prefixId: string;
|
|
9
|
+
}
|
|
10
|
+
declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
|
|
11
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
/**
|
|
13
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
14
|
+
* testing-library, and jest).
|
|
15
|
+
*/
|
|
16
|
+
testId?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Index of the current accordion item within the accordion.
|
|
19
|
+
*/
|
|
20
|
+
index?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Namespace ID prefix for the current Accordion item's panel and button
|
|
23
|
+
* to avoid ID duplication when multiple instances are on the same page.
|
|
24
|
+
*/
|
|
25
|
+
prefixId?: string;
|
|
26
|
+
}
|
|
27
|
+
export type AccordionItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, Props>;
|
|
28
|
+
type AccordionItemComponent = <C extends ElementType = 'div'>(props: AccordionItemProps<C>) => ReactElement | null;
|
|
29
|
+
declare const AccordionItem: AccordionItemComponent;
|
|
30
|
+
export declare function useAccordionItem(): AccordionItemContext;
|
|
31
|
+
export default AccordionItem;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { useContext, forwardRef, createContext } from 'react';
|
|
2
|
+
const AccordionItemContext = createContext(undefined);
|
|
3
|
+
const AccordionItem = forwardRef(function AccordionItem({ prefixId = '', index = 0, as: MaybeComponent, children, testId = 'fs-accordion-item', ...otherProps }, ref) {
|
|
4
|
+
const Component = MaybeComponent ?? 'div';
|
|
5
|
+
const context = {
|
|
6
|
+
index,
|
|
7
|
+
prefixId,
|
|
8
|
+
panel: `${prefixId && `${prefixId}-`}panel--${index}`,
|
|
9
|
+
button: `${prefixId && `${prefixId}-`}button--${index}`,
|
|
10
|
+
};
|
|
11
|
+
return (React.createElement(AccordionItemContext.Provider, { value: context },
|
|
12
|
+
React.createElement(Component, { ref: ref, "data-fs-accordion-item": true, "data-testid": testId, ...otherProps }, children)));
|
|
13
|
+
});
|
|
14
|
+
export function useAccordionItem() {
|
|
15
|
+
const context = useContext(AccordionItemContext);
|
|
16
|
+
if (context === undefined) {
|
|
17
|
+
throw new Error('Do not use AccordionItem components outside the AccordionItem context.');
|
|
18
|
+
}
|
|
19
|
+
return context;
|
|
20
|
+
}
|
|
21
|
+
export default AccordionItem;
|
|
22
|
+
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAcpE,MAAM,oBAAoB,GAAG,aAAa,CACxC,SAAS,CACV,CAAA;AA0BD,MAAM,aAAa,GAA2B,UAAU,CAAC,SAAS,aAAa,CAG7E,EACE,QAAQ,GAAG,EAAE,EACb,KAAK,GAAG,CAAC,EACT,EAAE,EAAE,cAAc,EAClB,QAAQ,EACR,MAAM,GAAG,mBAAmB,EAC5B,GAAG,UAAU,EACS,EACxB,GAAsB;IAEtB,MAAM,SAAS,GAAG,cAAc,IAAI,KAAK,CAAA;IAEzC,MAAM,OAAO,GAAG;QACd,KAAK;QACL,QAAQ;QACR,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,UAAU,KAAK,EAAE;QACrD,MAAM,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,KAAK,EAAE;KACxD,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAC3C,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,iDAEK,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACkB,CACjC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,wEAAwE,CACzE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface AccordionPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const AccordionPanel: React.ForwardRefExoticComponent<AccordionPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default AccordionPanel;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { useAccordion } from './Accordion';
|
|
3
|
+
import { useAccordionItem } from './AccordionItem';
|
|
4
|
+
const AccordionPanel = forwardRef(function AccordionPanel({ testId = 'fs-accordion-panel', children, ...otherProps }, ref) {
|
|
5
|
+
const { indices } = useAccordion();
|
|
6
|
+
const { index, button, panel } = useAccordionItem();
|
|
7
|
+
return (React.createElement("div", { ref: ref, id: panel, "data-fs-accordion-panel": true, "aria-labelledby": button, role: "region", hidden: !indices.has(index), "data-testid": testId, ...otherProps }, children));
|
|
8
|
+
});
|
|
9
|
+
export default AccordionPanel;
|
|
10
|
+
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAUlD,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAA;IAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAEnD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,sDAEQ,MAAM,EACvB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,iBACd,MAAM,KACf,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default } from './Accordion';
|
|
2
|
+
export type { AccordionProps } from './Accordion';
|
|
3
|
+
export { default as AccordionItem } from './AccordionItem';
|
|
4
|
+
export type { AccordionItemProps } from './AccordionItem';
|
|
5
|
+
export { default as AccordionButton } from './AccordionButton';
|
|
6
|
+
export type { AccordionButtonProps } from './AccordionButton';
|
|
7
|
+
export { default as AccordionPanel } from './AccordionPanel';
|
|
8
|
+
export type { AccordionPanelProps } from './AccordionPanel';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { TableHTMLAttributes } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export interface TableProps extends
|
|
3
|
+
export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
4
4
|
/**
|
|
5
5
|
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
6
|
*/
|
|
@@ -14,5 +14,5 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
|
|
|
14
14
|
*/
|
|
15
15
|
variant?: 'colored' | 'bordered';
|
|
16
16
|
}
|
|
17
|
-
declare const Table: React.ForwardRefExoticComponent<
|
|
17
|
+
declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
18
18
|
export default Table;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.39-alpha.0",
|
|
4
4
|
"module": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
6
6
|
"author": "Emerson Laurentino @emersonlaurentino",
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"node": "16.18.0",
|
|
31
31
|
"yarn": "1.19.1"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "37b0633963fb020169849932535505cad22f8fd6"
|
|
34
34
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import type { FC } from 'react'
|
|
3
|
+
|
|
4
|
+
// Icon from Phosphor Icons
|
|
5
|
+
const MinusCircle: FC = () => (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
fill="currentColor"
|
|
9
|
+
viewBox="0 0 256 256"
|
|
10
|
+
strokeWidth="16"
|
|
11
|
+
width={24}
|
|
12
|
+
height={24}
|
|
13
|
+
>
|
|
14
|
+
<rect width="256" height="256" fill="none"></rect>
|
|
15
|
+
<circle
|
|
16
|
+
cx="128"
|
|
17
|
+
cy="128"
|
|
18
|
+
r="96"
|
|
19
|
+
fill="none"
|
|
20
|
+
stroke="currentColor"
|
|
21
|
+
strokeMiterlimit="10"
|
|
22
|
+
></circle>
|
|
23
|
+
<line
|
|
24
|
+
x1="88"
|
|
25
|
+
y1="128"
|
|
26
|
+
x2="168"
|
|
27
|
+
y2="128"
|
|
28
|
+
fill="none"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
></line>
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
|
|
36
|
+
export default MinusCircle
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import type { FC } from 'react'
|
|
3
|
+
|
|
4
|
+
// Icon from Phosphor Icons
|
|
5
|
+
const PlusCircle: FC = () => (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
fill="currentColor"
|
|
9
|
+
viewBox="0 0 256 256"
|
|
10
|
+
strokeWidth="16"
|
|
11
|
+
width={24}
|
|
12
|
+
height={24}
|
|
13
|
+
>
|
|
14
|
+
<rect width="256" height="256" fill="none"></rect>
|
|
15
|
+
<circle
|
|
16
|
+
cx="128"
|
|
17
|
+
cy="128"
|
|
18
|
+
r="96"
|
|
19
|
+
fill="none"
|
|
20
|
+
stroke="currentColor"
|
|
21
|
+
strokeMiterlimit="10"
|
|
22
|
+
></circle>
|
|
23
|
+
<line
|
|
24
|
+
x1="88"
|
|
25
|
+
y1="128"
|
|
26
|
+
x2="168"
|
|
27
|
+
y2="128"
|
|
28
|
+
fill="none"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
></line>
|
|
33
|
+
<line
|
|
34
|
+
x1="128"
|
|
35
|
+
y1="88"
|
|
36
|
+
x2="128"
|
|
37
|
+
y2="168"
|
|
38
|
+
fill="none"
|
|
39
|
+
stroke="currentColor"
|
|
40
|
+
strokeLinecap="round"
|
|
41
|
+
strokeLinejoin="round"
|
|
42
|
+
></line>
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
export default PlusCircle
|
package/src/assets/Ruler.tsx
CHANGED
|
@@ -4,7 +4,6 @@ import type { FC } from 'react'
|
|
|
4
4
|
// Icon from Phosphor Icons
|
|
5
5
|
const Ruler: FC = () => (
|
|
6
6
|
<svg
|
|
7
|
-
id="Ruler"
|
|
8
7
|
xmlns="http://www.w3.org/2000/svg"
|
|
9
8
|
fill="currentColor"
|
|
10
9
|
viewBox="0 0 256 256"
|
|
@@ -13,10 +12,52 @@ const Ruler: FC = () => (
|
|
|
13
12
|
height={24}
|
|
14
13
|
>
|
|
15
14
|
<rect width="256" height="256" fill="none"></rect>
|
|
16
|
-
<rect
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
<rect
|
|
16
|
+
x="26.2"
|
|
17
|
+
y="82.7"
|
|
18
|
+
width="203.6"
|
|
19
|
+
height="90.51"
|
|
20
|
+
rx="8"
|
|
21
|
+
transform="translate(-53 128) rotate(-45)"
|
|
22
|
+
fill="none"
|
|
23
|
+
stroke="currentColor"
|
|
24
|
+
strokeLinecap="round"
|
|
25
|
+
strokeLinejoin="round"
|
|
26
|
+
strokeWidth="24"
|
|
27
|
+
></rect>
|
|
28
|
+
<line
|
|
29
|
+
x1="132"
|
|
30
|
+
y1="60"
|
|
31
|
+
x2="164"
|
|
32
|
+
y2="92"
|
|
33
|
+
fill="none"
|
|
34
|
+
stroke="currentColor"
|
|
35
|
+
strokeLinecap="round"
|
|
36
|
+
strokeLinejoin="round"
|
|
37
|
+
strokeWidth="24"
|
|
38
|
+
></line>
|
|
39
|
+
<line
|
|
40
|
+
x1="96"
|
|
41
|
+
y1="96"
|
|
42
|
+
x2="128"
|
|
43
|
+
y2="128"
|
|
44
|
+
fill="none"
|
|
45
|
+
stroke="currentColor"
|
|
46
|
+
strokeLinecap="round"
|
|
47
|
+
strokeLinejoin="round"
|
|
48
|
+
strokeWidth="24"
|
|
49
|
+
></line>
|
|
50
|
+
<line
|
|
51
|
+
x1="60"
|
|
52
|
+
y1="132"
|
|
53
|
+
x2="92"
|
|
54
|
+
y2="164"
|
|
55
|
+
fill="none"
|
|
56
|
+
stroke="currentColor"
|
|
57
|
+
strokeLinecap="round"
|
|
58
|
+
strokeLinejoin="round"
|
|
59
|
+
strokeWidth="24"
|
|
60
|
+
></line>
|
|
20
61
|
</svg>
|
|
21
62
|
)
|
|
22
63
|
|
package/src/assets/index.ts
CHANGED
|
@@ -2,6 +2,8 @@ export { default as ArrowRight } from './ArrowRight'
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown'
|
|
3
3
|
export { default as Checked } from './Checked'
|
|
4
4
|
export { default as House } from './House'
|
|
5
|
+
export { default as MinusCircle } from './MinusCircle'
|
|
6
|
+
export { default as PlusCircle } from './PlusCircle'
|
|
5
7
|
export { default as Ruler } from './Ruler'
|
|
6
8
|
export { default as ShoppingCart } from './ShoppingCart'
|
|
7
9
|
export { default as X } from './X'
|
package/src/index.ts
CHANGED
|
@@ -29,6 +29,18 @@ export type { SelectProps } from './atoms/Select'
|
|
|
29
29
|
export { default as SROnly } from './atoms/SROnly'
|
|
30
30
|
|
|
31
31
|
// Molecules
|
|
32
|
+
export {
|
|
33
|
+
default as Accordion,
|
|
34
|
+
AccordionItem,
|
|
35
|
+
AccordionButton,
|
|
36
|
+
AccordionPanel,
|
|
37
|
+
} from './molecules/Accordion'
|
|
38
|
+
export type {
|
|
39
|
+
AccordionProps,
|
|
40
|
+
AccordionItemProps,
|
|
41
|
+
AccordionButtonProps,
|
|
42
|
+
AccordionPanelProps,
|
|
43
|
+
} from './molecules/Accordion'
|
|
32
44
|
export { default as BuyButton } from './molecules/BuyButton'
|
|
33
45
|
export { default as CheckboxField } from './molecules/CheckboxField'
|
|
34
46
|
export type { CheckboxFieldProps } from './molecules/CheckboxField'
|
|
@@ -68,11 +80,7 @@ export { default as ToggleField } from './molecules/ToggleField'
|
|
|
68
80
|
export type { ToggleFieldProps } from './molecules/ToggleField'
|
|
69
81
|
|
|
70
82
|
// Organisms
|
|
71
|
-
export {
|
|
72
|
-
default as Hero,
|
|
73
|
-
HeroImage,
|
|
74
|
-
HeroHeading,
|
|
75
|
-
} from './organisms/Hero'
|
|
83
|
+
export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero'
|
|
76
84
|
export type {
|
|
77
85
|
HeroProps,
|
|
78
86
|
HeroImageProps,
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactElement } from 'react'
|
|
2
|
+
import React, {
|
|
3
|
+
useContext,
|
|
4
|
+
cloneElement,
|
|
5
|
+
forwardRef,
|
|
6
|
+
createContext,
|
|
7
|
+
} from 'react'
|
|
8
|
+
|
|
9
|
+
interface AccordionContext {
|
|
10
|
+
indices: Set<number>
|
|
11
|
+
onChange: (index: number) => void
|
|
12
|
+
numberOfItems: number
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const AccordionContext = createContext<AccordionContext | undefined>(undefined)
|
|
16
|
+
|
|
17
|
+
export interface AccordionProps
|
|
18
|
+
extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
19
|
+
/**
|
|
20
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
21
|
+
* testing-library, and jest).
|
|
22
|
+
*/
|
|
23
|
+
testId?: string
|
|
24
|
+
/**
|
|
25
|
+
* Indices that indicate which accordion items are opened.
|
|
26
|
+
*/
|
|
27
|
+
indices: Iterable<number>
|
|
28
|
+
/**
|
|
29
|
+
* Function that is triggered when an accordion item is opened/closed.
|
|
30
|
+
*/
|
|
31
|
+
onChange: (index: number) => void
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
|
|
35
|
+
{ testId = 'fs-accordion', indices, onChange, children, ...otherProps },
|
|
36
|
+
ref
|
|
37
|
+
) {
|
|
38
|
+
const childrenWithIndex = React.Children.map(
|
|
39
|
+
children as ReactElement,
|
|
40
|
+
(child, index) => cloneElement(child, { index: child.props.index ?? index })
|
|
41
|
+
)
|
|
42
|
+
|
|
43
|
+
const context = {
|
|
44
|
+
indices: new Set(indices),
|
|
45
|
+
onChange,
|
|
46
|
+
numberOfItems: childrenWithIndex.length,
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<AccordionContext.Provider value={context}>
|
|
51
|
+
<div
|
|
52
|
+
ref={ref}
|
|
53
|
+
data-fs-accordion
|
|
54
|
+
role="region"
|
|
55
|
+
data-testid={testId}
|
|
56
|
+
{...otherProps}
|
|
57
|
+
>
|
|
58
|
+
{childrenWithIndex}
|
|
59
|
+
</div>
|
|
60
|
+
</AccordionContext.Provider>
|
|
61
|
+
)
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
export function useAccordion() {
|
|
65
|
+
const context = useContext(AccordionContext)
|
|
66
|
+
|
|
67
|
+
if (context === undefined) {
|
|
68
|
+
throw new Error(
|
|
69
|
+
'Do not use Accordion components outside the Accordion context.'
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return context
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default Accordion
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
|
|
4
|
+
import { useAccordion } from './Accordion'
|
|
5
|
+
import { useAccordionItem } from './AccordionItem'
|
|
6
|
+
|
|
7
|
+
import { Button, MinusCircle, PlusCircle } from '../..'
|
|
8
|
+
import type { ButtonProps } from '../..'
|
|
9
|
+
|
|
10
|
+
export interface AccordionButtonProps extends ButtonProps {
|
|
11
|
+
/**
|
|
12
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
13
|
+
*/
|
|
14
|
+
testId?: string
|
|
15
|
+
/**
|
|
16
|
+
* A React component is rendered as an icon when the accordion is expanded.
|
|
17
|
+
*/
|
|
18
|
+
expandedIcon?: ReactNode
|
|
19
|
+
/**
|
|
20
|
+
* A React component is rendered as an icon when the accordion is collapsed.
|
|
21
|
+
*/
|
|
22
|
+
collapsedIcon?: ReactNode
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const AccordionButton = forwardRef<HTMLButtonElement, AccordionButtonProps>(
|
|
26
|
+
function AccordionButton(
|
|
27
|
+
{
|
|
28
|
+
testId = 'fs-accordion-button',
|
|
29
|
+
expandedIcon = <MinusCircle data-icon="expanded" />,
|
|
30
|
+
collapsedIcon = <PlusCircle data-icon="collapsed" />,
|
|
31
|
+
children,
|
|
32
|
+
...otherProps
|
|
33
|
+
},
|
|
34
|
+
ref
|
|
35
|
+
) {
|
|
36
|
+
const { indices, onChange, numberOfItems } = useAccordion()
|
|
37
|
+
const { index, panel, button, prefixId } = useAccordionItem()
|
|
38
|
+
|
|
39
|
+
const onKeyDown = (event: React.KeyboardEvent) => {
|
|
40
|
+
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
41
|
+
return
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const getNext = () => {
|
|
45
|
+
const next = Number(index) + 1 === numberOfItems ? 0 : Number(index) + 1
|
|
46
|
+
|
|
47
|
+
return document.getElementById(
|
|
48
|
+
`${prefixId && `${prefixId}-`}button--${next}`
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const getPrevious = () => {
|
|
53
|
+
const previous =
|
|
54
|
+
Number(index) - 1 < 0 ? numberOfItems - 1 : Number(index) - 1
|
|
55
|
+
|
|
56
|
+
return document.getElementById(
|
|
57
|
+
`${prefixId && `${prefixId}-`}button--${previous}`
|
|
58
|
+
)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
switch (event.key) {
|
|
62
|
+
case 'ArrowDown':
|
|
63
|
+
event.preventDefault()
|
|
64
|
+
getNext()?.focus()
|
|
65
|
+
break
|
|
66
|
+
|
|
67
|
+
case 'ArrowUp':
|
|
68
|
+
event.preventDefault()
|
|
69
|
+
getPrevious()?.focus()
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<Button
|
|
78
|
+
ref={ref}
|
|
79
|
+
id={button}
|
|
80
|
+
data-fs-accordion-button
|
|
81
|
+
aria-expanded={indices.has(index)}
|
|
82
|
+
icon={indices.has(index) ? expandedIcon : collapsedIcon}
|
|
83
|
+
iconPosition="right"
|
|
84
|
+
aria-controls={panel}
|
|
85
|
+
onKeyDown={onKeyDown}
|
|
86
|
+
onClick={() => {
|
|
87
|
+
onChange(index)
|
|
88
|
+
}}
|
|
89
|
+
data-testid={testId}
|
|
90
|
+
{...otherProps}
|
|
91
|
+
>
|
|
92
|
+
{children}
|
|
93
|
+
</Button>
|
|
94
|
+
)
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
|
|
98
|
+
export default AccordionButton
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React, { useContext, forwardRef, createContext } from 'react'
|
|
2
|
+
import type { ElementType, HTMLAttributes, ReactElement } from 'react'
|
|
3
|
+
import type {
|
|
4
|
+
PolymorphicComponentPropsWithRef,
|
|
5
|
+
PolymorphicRef,
|
|
6
|
+
} from '../../typings'
|
|
7
|
+
|
|
8
|
+
interface AccordionItemContext {
|
|
9
|
+
index: number
|
|
10
|
+
panel: string
|
|
11
|
+
button: string
|
|
12
|
+
prefixId: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const AccordionItemContext = createContext<AccordionItemContext | undefined>(
|
|
16
|
+
undefined
|
|
17
|
+
)
|
|
18
|
+
|
|
19
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
20
|
+
/**
|
|
21
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
22
|
+
* testing-library, and jest).
|
|
23
|
+
*/
|
|
24
|
+
testId?: string
|
|
25
|
+
/**
|
|
26
|
+
* Index of the current accordion item within the accordion.
|
|
27
|
+
*/
|
|
28
|
+
index?: number
|
|
29
|
+
/**
|
|
30
|
+
* Namespace ID prefix for the current Accordion item's panel and button
|
|
31
|
+
* to avoid ID duplication when multiple instances are on the same page.
|
|
32
|
+
*/
|
|
33
|
+
prefixId?: string
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export type AccordionItemProps<C extends ElementType> =
|
|
37
|
+
PolymorphicComponentPropsWithRef<C, Props>
|
|
38
|
+
|
|
39
|
+
type AccordionItemComponent = <C extends ElementType = 'div'>(
|
|
40
|
+
props: AccordionItemProps<C>
|
|
41
|
+
) => ReactElement | null
|
|
42
|
+
|
|
43
|
+
const AccordionItem: AccordionItemComponent = forwardRef(function AccordionItem<
|
|
44
|
+
C extends ElementType = 'div'
|
|
45
|
+
>(
|
|
46
|
+
{
|
|
47
|
+
prefixId = '',
|
|
48
|
+
index = 0,
|
|
49
|
+
as: MaybeComponent,
|
|
50
|
+
children,
|
|
51
|
+
testId = 'fs-accordion-item',
|
|
52
|
+
...otherProps
|
|
53
|
+
}: AccordionItemProps<C>,
|
|
54
|
+
ref: PolymorphicRef<C>
|
|
55
|
+
) {
|
|
56
|
+
const Component = MaybeComponent ?? 'div'
|
|
57
|
+
|
|
58
|
+
const context = {
|
|
59
|
+
index,
|
|
60
|
+
prefixId,
|
|
61
|
+
panel: `${prefixId && `${prefixId}-`}panel--${index}`,
|
|
62
|
+
button: `${prefixId && `${prefixId}-`}button--${index}`,
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<AccordionItemContext.Provider value={context}>
|
|
67
|
+
<Component
|
|
68
|
+
ref={ref}
|
|
69
|
+
data-fs-accordion-item
|
|
70
|
+
data-testid={testId}
|
|
71
|
+
{...otherProps}
|
|
72
|
+
>
|
|
73
|
+
{children}
|
|
74
|
+
</Component>
|
|
75
|
+
</AccordionItemContext.Provider>
|
|
76
|
+
)
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
export function useAccordionItem() {
|
|
80
|
+
const context = useContext(AccordionItemContext)
|
|
81
|
+
|
|
82
|
+
if (context === undefined) {
|
|
83
|
+
throw new Error(
|
|
84
|
+
'Do not use AccordionItem components outside the AccordionItem context.'
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return context
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default AccordionItem
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react'
|
|
2
|
+
import React, { forwardRef } from 'react'
|
|
3
|
+
|
|
4
|
+
import { useAccordion } from './Accordion'
|
|
5
|
+
import { useAccordionItem } from './AccordionItem'
|
|
6
|
+
|
|
7
|
+
export interface AccordionPanelProps
|
|
8
|
+
extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
9
|
+
/**
|
|
10
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
11
|
+
*/
|
|
12
|
+
testId?: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
|
|
16
|
+
function AccordionPanel(
|
|
17
|
+
{ testId = 'fs-accordion-panel', children, ...otherProps },
|
|
18
|
+
ref
|
|
19
|
+
) {
|
|
20
|
+
const { indices } = useAccordion()
|
|
21
|
+
const { index, button, panel } = useAccordionItem()
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div
|
|
25
|
+
ref={ref}
|
|
26
|
+
id={panel}
|
|
27
|
+
data-fs-accordion-panel
|
|
28
|
+
aria-labelledby={button}
|
|
29
|
+
role="region"
|
|
30
|
+
hidden={!indices.has(index)}
|
|
31
|
+
data-testid={testId}
|
|
32
|
+
{...otherProps}
|
|
33
|
+
>
|
|
34
|
+
{children}
|
|
35
|
+
</div>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
|
|
40
|
+
export default AccordionPanel
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { default } from './Accordion'
|
|
2
|
+
export type { AccordionProps } from './Accordion'
|
|
3
|
+
|
|
4
|
+
export { default as AccordionItem } from './AccordionItem'
|
|
5
|
+
export type { AccordionItemProps } from './AccordionItem'
|
|
6
|
+
|
|
7
|
+
export { default as AccordionButton } from './AccordionButton'
|
|
8
|
+
export type { AccordionButtonProps } from './AccordionButton'
|
|
9
|
+
|
|
10
|
+
export { default as AccordionPanel } from './AccordionPanel'
|
|
11
|
+
export type { AccordionPanelProps } from './AccordionPanel'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { TableHTMLAttributes } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
|
|
4
|
-
export interface TableProps extends
|
|
4
|
+
export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
5
5
|
/**
|
|
6
6
|
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
7
|
*/
|