@faststore/ui 2.0.37-alpha.0 → 2.0.41-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/index.d.ts +0 -4
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/base/tokens.scss +1 -1
- package/src/components/molecules/Accordion/styles.scss +70 -0
- package/src/components/molecules/Dropdown/styles.scss +93 -0
- package/src/index.ts +0 -26
- package/src/styles/components.scss +2 -0
- package/dist/components/molecules/Accordion/Accordion.d.ts +0 -26
- package/dist/components/molecules/Accordion/Accordion.js +0 -21
- package/dist/components/molecules/Accordion/Accordion.js.map +0 -1
- package/dist/components/molecules/Accordion/AccordionButton.d.ts +0 -10
- package/dist/components/molecules/Accordion/AccordionButton.js +0 -37
- package/dist/components/molecules/Accordion/AccordionButton.js.map +0 -1
- package/dist/components/molecules/Accordion/AccordionItem.d.ts +0 -31
- package/dist/components/molecules/Accordion/AccordionItem.js +0 -22
- package/dist/components/molecules/Accordion/AccordionItem.js.map +0 -1
- package/dist/components/molecules/Accordion/AccordionPanel.d.ts +0 -10
- package/dist/components/molecules/Accordion/AccordionPanel.js +0 -10
- package/dist/components/molecules/Accordion/AccordionPanel.js.map +0 -1
- package/dist/components/molecules/Accordion/index.d.ts +0 -8
- package/dist/components/molecules/Accordion/index.js +0 -5
- package/dist/components/molecules/Accordion/index.js.map +0 -1
- package/dist/components/molecules/Dropdown/Dropdown.d.ts +0 -9
- package/dist/components/molecules/Dropdown/Dropdown.js +0 -67
- package/dist/components/molecules/Dropdown/Dropdown.js.map +0 -1
- package/dist/components/molecules/Dropdown/DropdownButton.d.ts +0 -10
- package/dist/components/molecules/Dropdown/DropdownButton.js +0 -11
- package/dist/components/molecules/Dropdown/DropdownButton.js.map +0 -1
- package/dist/components/molecules/Dropdown/DropdownItem.d.ts +0 -10
- package/dist/components/molecules/Dropdown/DropdownItem.js +0 -26
- package/dist/components/molecules/Dropdown/DropdownItem.js.map +0 -1
- package/dist/components/molecules/Dropdown/DropdownMenu.d.ts +0 -22
- package/dist/components/molecules/Dropdown/DropdownMenu.js +0 -65
- package/dist/components/molecules/Dropdown/DropdownMenu.js.map +0 -1
- package/dist/components/molecules/Dropdown/contexts/DropdownContext.d.ts +0 -41
- package/dist/components/molecules/Dropdown/contexts/DropdownContext.js +0 -11
- package/dist/components/molecules/Dropdown/contexts/DropdownContext.js.map +0 -1
- package/dist/components/molecules/Dropdown/hooks/useDropdown.d.ts +0 -6
- package/dist/components/molecules/Dropdown/hooks/useDropdown.js +0 -14
- package/dist/components/molecules/Dropdown/hooks/useDropdown.js.map +0 -1
- package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.d.ts +0 -8
- package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.js +0 -25
- package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.js.map +0 -1
- package/dist/components/molecules/Dropdown/index.d.ts +0 -8
- package/dist/components/molecules/Dropdown/index.js +0 -5
- package/dist/components/molecules/Dropdown/index.js.map +0 -1
- package/src/components/molecules/Accordion/Accordion.tsx +0 -76
- package/src/components/molecules/Accordion/AccordionButton.tsx +0 -81
- package/src/components/molecules/Accordion/AccordionItem.tsx +0 -92
- package/src/components/molecules/Accordion/AccordionPanel.tsx +0 -40
- package/src/components/molecules/Accordion/index.ts +0 -11
- package/src/components/molecules/Dropdown/Dropdown.tsx +0 -102
- package/src/components/molecules/Dropdown/DropdownButton.tsx +0 -42
- package/src/components/molecules/Dropdown/DropdownItem.tsx +0 -69
- package/src/components/molecules/Dropdown/DropdownMenu.tsx +0 -139
- package/src/components/molecules/Dropdown/contexts/DropdownContext.ts +0 -53
- package/src/components/molecules/Dropdown/hooks/useDropdown.ts +0 -18
- package/src/components/molecules/Dropdown/hooks/useDropdownPosition.ts +0 -33
- package/src/components/molecules/Dropdown/index.ts +0 -11
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.41-alpha.0](https://github.com/vtex/faststore/compare/v2.0.40-alpha.0...v2.0.41-alpha.0) (2023-01-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Adds `Dropdown` component ([#1572](https://github.com/vtex/faststore/issues/1572)) ([edfe557](https://github.com/vtex/faststore/commit/edfe55797d51049b137c1d8c0d648f36d3ebf980))
|
|
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
|
|
package/dist/index.d.ts
CHANGED
|
@@ -47,16 +47,12 @@ export { default as PriceRange } from './components/molecules/PriceRange';
|
|
|
47
47
|
export type { PriceRangeProps } from './components/molecules/PriceRange';
|
|
48
48
|
export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
|
|
49
49
|
export type { RadioGroupProps, RadioOptionProps, } from './components/molecules/RadioGroup';
|
|
50
|
-
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './components/molecules/Accordion';
|
|
51
|
-
export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './components/molecules/Accordion';
|
|
52
50
|
export { default as Form } from './components/molecules/Form';
|
|
53
51
|
export type { FormProps } from './components/molecules/Form';
|
|
54
52
|
export { default as Alert } from './components/molecules/Alert';
|
|
55
53
|
export type { AlertProps } from './components/molecules/Alert';
|
|
56
54
|
export { default as QuantitySelector } from './components/molecules/QuantitySelector';
|
|
57
55
|
export type { QuantitySelectorProps } from './components/molecules/QuantitySelector';
|
|
58
|
-
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './components/molecules/Dropdown';
|
|
59
|
-
export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './components/molecules/Dropdown';
|
|
60
56
|
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
|
|
61
57
|
export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './components/organisms/OutOfStock';
|
|
62
58
|
export { Tiles, Tile } from './components/organisms/Tiles';
|
package/dist/index.js
CHANGED
|
@@ -25,11 +25,9 @@ export { default as Breadcrumb } from './components/molecules/Breadcrumb';
|
|
|
25
25
|
export { default as LoadingButton } from './components/molecules/LoadingButton';
|
|
26
26
|
export { default as PriceRange } from './components/molecules/PriceRange';
|
|
27
27
|
export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
|
|
28
|
-
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './components/molecules/Accordion';
|
|
29
28
|
export { default as Form } from './components/molecules/Form';
|
|
30
29
|
export { default as Alert } from './components/molecules/Alert';
|
|
31
30
|
export { default as QuantitySelector } from './components/molecules/QuantitySelector';
|
|
32
|
-
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './components/molecules/Dropdown';
|
|
33
31
|
// Organisms
|
|
34
32
|
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
|
|
35
33
|
export { Tiles, Tile } from './components/organisms/Tiles';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAA;AAG/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAA;AAG/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAGrF,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.41-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"node": "16.18.0",
|
|
60
60
|
"yarn": "1.19.1"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "e307ecc596c61e0da4b83cb76aeea0c677197e03"
|
|
63
63
|
}
|
package/src/base/tokens.scss
CHANGED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
[data-fs-accordion] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Accordion
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Item
|
|
7
|
+
--fs-accordion-item-border-bottom-width : var(--fs-border-width);
|
|
8
|
+
--fs-accordion-item-border-bottom-color : var(--fs-border-color-light);
|
|
9
|
+
|
|
10
|
+
// Button
|
|
11
|
+
--fs-accordion-button-padding : var(--fs-spacing-3) 0;
|
|
12
|
+
--fs-accordion-button-font-size : var(--fs-text-size-3);
|
|
13
|
+
--fs-accordion-button-font-weight : var(--fs-text-weight-bold);
|
|
14
|
+
--fs-accordion-button-line-height : 1.2;
|
|
15
|
+
--fs-accordion-button-color : var(--fs-color-text);
|
|
16
|
+
--fs-accordion-button-bkg-color : transparent;
|
|
17
|
+
|
|
18
|
+
// Panel
|
|
19
|
+
--fs-accordion-panel-padding-bottom : var(--fs-spacing-4);
|
|
20
|
+
|
|
21
|
+
// --------------------------------------------------------
|
|
22
|
+
// Structural Styles
|
|
23
|
+
// --------------------------------------------------------
|
|
24
|
+
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
justify-content: space-around;
|
|
28
|
+
width: 100%;
|
|
29
|
+
|
|
30
|
+
[data-fs-accordion-item] {
|
|
31
|
+
border-bottom: var(--fs-accordion-item-border-bottom-width) solid var(--fs-accordion-item-border-bottom-color);
|
|
32
|
+
|
|
33
|
+
@include media(">=notebook") {
|
|
34
|
+
&:last-child {
|
|
35
|
+
border-bottom: 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-fs-accordion-button] {
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: space-between;
|
|
44
|
+
width: 100%;
|
|
45
|
+
padding: var(--fs-accordion-button-padding);
|
|
46
|
+
font-size: var(--fs-accordion-button-font-size);
|
|
47
|
+
font-weight: var(--fs-accordion-button-font-weight);
|
|
48
|
+
line-height: var(--fs-accordion-button-line-height);
|
|
49
|
+
color: var(--fs-accordion-button-color);
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
background-color: var(--fs-accordion-button-bkg-color);
|
|
52
|
+
border: 0;
|
|
53
|
+
|
|
54
|
+
[data-fs-icon] {
|
|
55
|
+
display: flex;
|
|
56
|
+
|
|
57
|
+
[data-icon] {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[data-icon="expanded"], [data-icon="collapsed"] {
|
|
62
|
+
display: initial;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-fs-accordion-panel] {
|
|
68
|
+
padding-bottom: var(--fs-accordion-panel-padding-bottom);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
[data-fs-dropdown-menu] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Dropdown
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
|
|
8
|
+
--fs-dropdown-menu-bkg-color : var(--fs-color-tertiary-bkg);
|
|
9
|
+
--fs-dropdown-menu-border-radius : var(--fs-border-radius);
|
|
10
|
+
--fs-dropdown-menu-box-shadow : var(--fs-shadow-hover);
|
|
11
|
+
|
|
12
|
+
// Item
|
|
13
|
+
--fs-dropdown-item-min-height : 2.375rem;
|
|
14
|
+
--fs-dropdown-item-padding : var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1);
|
|
15
|
+
|
|
16
|
+
--fs-dropdown-item-text-size : var(--fs-text-size-base);
|
|
17
|
+
--fs-dropdown-item-text-weight : var(--fs-text-weight-regular);
|
|
18
|
+
|
|
19
|
+
--fs-dropdown-item-color : var(--fs-color-link);
|
|
20
|
+
--fs-dropdown-item-bkg-color : var(--fs-color-tertiary-bkg-light);
|
|
21
|
+
--fs-dropdown-item-bkg-color-hover : var(--fs-color-primary-bkg-light);
|
|
22
|
+
|
|
23
|
+
--fs-dropdown-item-border-bottom-color : var(--fs-border-color-light);
|
|
24
|
+
|
|
25
|
+
// Icon
|
|
26
|
+
--fs-dropdown-item-icon-min-width : 1.125rem;
|
|
27
|
+
--fs-dropdown-item-icon-margin-right : var(--fs-spacing-0);
|
|
28
|
+
--fs-dropdown-item-icon-margin-top : calc(-1 * var(--fs-spacing-1));
|
|
29
|
+
|
|
30
|
+
// Small
|
|
31
|
+
--fs-dropdown-item-small-min-height : 1.75rem;
|
|
32
|
+
--fs-dropdown-item-small-padding : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1);
|
|
33
|
+
--fs-dropdown-item-small-text-size : var(--fs-text-size-1);
|
|
34
|
+
|
|
35
|
+
// --------------------------------------------------------
|
|
36
|
+
// Structural Styles
|
|
37
|
+
// --------------------------------------------------------
|
|
38
|
+
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
align-items: flex-start;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
margin-top: var(--fs-spacing-0);
|
|
44
|
+
background: var(--fs-dropdown-menu-bkg-color);
|
|
45
|
+
border-radius: var(--fs-dropdown-menu-border-radius);
|
|
46
|
+
box-shadow: var(--fs-dropdown-menu-box-shadow);
|
|
47
|
+
|
|
48
|
+
[data-fs-dropdown-item] {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
width: 100%;
|
|
52
|
+
min-height: var(--fs-dropdown-item-min-height);
|
|
53
|
+
padding: var(--fs-dropdown-item-padding);
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
font-size: var(--fs-dropdown-item-text-size);
|
|
56
|
+
font-weight: var(--fs-dropdown-item-text-weight);
|
|
57
|
+
color: var(--fs-dropdown-item-color);
|
|
58
|
+
text-align: left;
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
white-space: nowrap;
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
background-color: var(--fs-dropdown-item-bkg-color);
|
|
63
|
+
border-width: 0;
|
|
64
|
+
|
|
65
|
+
&:not(:last-child) {
|
|
66
|
+
border-bottom: 1px solid var(--fs-dropdown-item-border-bottom-color);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:focus, &:hover {
|
|
70
|
+
text-decoration: none;
|
|
71
|
+
background-color: var(--fs-dropdown-item-bkg-color-hover);
|
|
72
|
+
outline: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[data-fs-dropdown-item-icon] {
|
|
76
|
+
display: flex;
|
|
77
|
+
min-width: var(--fs-dropdown-item-icon-min-width);
|
|
78
|
+
margin-right: var(--fs-dropdown-item-icon-margin-right);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// --------------------------------------------------------
|
|
83
|
+
// Variants Styles
|
|
84
|
+
// --------------------------------------------------------
|
|
85
|
+
|
|
86
|
+
&[data-fs-dropdown-menu-size="small"] {
|
|
87
|
+
[data-fs-dropdown-item] {
|
|
88
|
+
min-height: var(--fs-dropdown-item-small-min-height);
|
|
89
|
+
padding: var(--fs-dropdown-item-small-padding);
|
|
90
|
+
font-size: var(--fs-dropdown-item-small-text-size);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -137,19 +137,6 @@ export type {
|
|
|
137
137
|
RadioOptionProps,
|
|
138
138
|
} from './components/molecules/RadioGroup'
|
|
139
139
|
|
|
140
|
-
export {
|
|
141
|
-
default as Accordion,
|
|
142
|
-
AccordionItem,
|
|
143
|
-
AccordionButton,
|
|
144
|
-
AccordionPanel,
|
|
145
|
-
} from './components/molecules/Accordion'
|
|
146
|
-
export type {
|
|
147
|
-
AccordionProps,
|
|
148
|
-
AccordionItemProps,
|
|
149
|
-
AccordionButtonProps,
|
|
150
|
-
AccordionPanelProps,
|
|
151
|
-
} from './components/molecules/Accordion'
|
|
152
|
-
|
|
153
140
|
export { default as Form } from './components/molecules/Form'
|
|
154
141
|
export type { FormProps } from './components/molecules/Form'
|
|
155
142
|
|
|
@@ -159,19 +146,6 @@ export type { AlertProps } from './components/molecules/Alert'
|
|
|
159
146
|
export { default as QuantitySelector } from './components/molecules/QuantitySelector'
|
|
160
147
|
export type { QuantitySelectorProps } from './components/molecules/QuantitySelector'
|
|
161
148
|
|
|
162
|
-
export {
|
|
163
|
-
default as Dropdown,
|
|
164
|
-
DropdownButton,
|
|
165
|
-
DropdownItem,
|
|
166
|
-
DropdownMenu,
|
|
167
|
-
} from './components/molecules/Dropdown'
|
|
168
|
-
export type {
|
|
169
|
-
DropdownProps,
|
|
170
|
-
DropdownButtonProps,
|
|
171
|
-
DropdownItemProps,
|
|
172
|
-
DropdownMenuProps,
|
|
173
|
-
} from './components/molecules/Dropdown'
|
|
174
|
-
|
|
175
149
|
// Organisms
|
|
176
150
|
export {
|
|
177
151
|
default as OutOfStock,
|
|
@@ -13,9 +13,11 @@
|
|
|
13
13
|
@import "../components/atoms/SROnly/styles";
|
|
14
14
|
|
|
15
15
|
// Molecules
|
|
16
|
+
@import "../components/molecules/Accordion/styles";
|
|
16
17
|
@import "../components/molecules/BuyButton/styles";
|
|
17
18
|
@import "../components/molecules/CheckboxField/styles";
|
|
18
19
|
@import "../components/molecules/DiscountBadge/styles";
|
|
20
|
+
@import "../components/molecules/Dropdown/styles";
|
|
19
21
|
@import "../components/molecules/InputField/styles";
|
|
20
22
|
@import "../components/molecules/LinkButton/styles";
|
|
21
23
|
@import "../components/molecules/RadioField/styles";
|
|
@@ -1,26 +0,0 @@
|
|
|
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;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { useContext, cloneElement, forwardRef, createContext, } from 'react';
|
|
2
|
-
const AccordionContext = createContext(undefined);
|
|
3
|
-
const Accordion = forwardRef(function Accordion({ testId = 'store-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, "data-testid": testId, role: "region", ...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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/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,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1E,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,4CAEK,MAAM,EACnB,IAAI,EAAC,QAAQ,KACT,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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ButtonProps } from '@faststore/components';
|
|
3
|
-
export interface AccordionButtonProps extends ButtonProps {
|
|
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 AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
-
export default AccordionButton;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { useAccordion } from './Accordion';
|
|
3
|
-
import { useAccordionItem } from './AccordionItem';
|
|
4
|
-
import { Button } from '@faststore/components';
|
|
5
|
-
const AccordionButton = forwardRef(function AccordionButton({ testId = 'store-accordion-button', 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, "aria-expanded": indices.has(index), "aria-controls": panel, "data-accordion-button": true, "data-testid": testId, onKeyDown: onKeyDown, onClick: () => {
|
|
33
|
-
onChange(index);
|
|
34
|
-
}, ...otherProps }, children));
|
|
35
|
-
});
|
|
36
|
-
export default AccordionButton;
|
|
37
|
-
//# sourceMappingURL=AccordionButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionButton.js","sourceRoot":"","sources":["../../../../src/components/molecules/Accordion/AccordionButton.tsx"],"names":[],"mappings":"AAAA,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;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAU9C,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,MAAM,GAAG,wBAAwB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC9D,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,mBACK,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,mBAClB,KAAK,gDAEP,MAAM,EACnB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,KACG,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type { ElementType, HTMLAttributes, ReactElement } from 'react';
|
|
2
|
-
import React 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;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { createContext, forwardRef, useContext } from 'react';
|
|
2
|
-
const AccordionItemContext = createContext(undefined);
|
|
3
|
-
const AccordionItem = forwardRef(function AccordionItem({ testId = 'store-accordion-item', children, prefixId = '', index = 0, as: MaybeComponent, ...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-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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../../src/components/molecules/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAapE,MAAM,oBAAoB,GAAG,aAAa,CACxC,SAAS,CACV,CAAA;AA2BD,MAAM,aAAa,GAA2B,UAAU,CAAC,SAAS,aAAa,CAG7E,EACE,MAAM,GAAG,sBAAsB,EAC/B,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,KAAK,GAAG,CAAC,EACT,EAAE,EAAE,cAAc,EAClB,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,8CAEK,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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
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;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { useAccordion } from './Accordion';
|
|
3
|
-
import { useAccordionItem } from './AccordionItem';
|
|
4
|
-
const AccordionPanel = forwardRef(function AccordionPanel({ testId = 'store-accordion-panel', children, ...otherProps }, ref) {
|
|
5
|
-
const { indices } = useAccordion();
|
|
6
|
-
const { index, button, panel } = useAccordionItem();
|
|
7
|
-
return (React.createElement("div", { ref: ref, id: panel, "aria-labelledby": button, role: "region", "data-accordion-panel": true, "data-testid": testId, hidden: !indices.has(index), ...otherProps }, children));
|
|
8
|
-
});
|
|
9
|
-
export default AccordionPanel;
|
|
10
|
-
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../../src/components/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,uBAAuB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC7D,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,qBACQ,MAAM,EACvB,IAAI,EAAC,QAAQ,+CAEA,MAAM,EACnB,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KACvB,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,8 +0,0 @@
|
|
|
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';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/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,9 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
export type DropdownProps = {
|
|
3
|
-
children: ReactNode;
|
|
4
|
-
onDismiss?(): void;
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
id?: string;
|
|
7
|
-
};
|
|
8
|
-
declare const Dropdown: ({ children, isOpen: isOpenDefault, onDismiss, id, }: DropdownProps) => JSX.Element;
|
|
9
|
-
export default Dropdown;
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
|
|
2
|
-
import DropdownContext from './contexts/DropdownContext';
|
|
3
|
-
const Dropdown = ({ children, isOpen: isOpenDefault = false, onDismiss, id = 'store-dropdown', }) => {
|
|
4
|
-
const [isOpen, setIsOpen] = useState(isOpenDefault);
|
|
5
|
-
const dropdownItemsRef = useRef([]);
|
|
6
|
-
const selectedDropdownItemIndexRef = useRef(0);
|
|
7
|
-
const dropdownButtonRef = useRef(null);
|
|
8
|
-
const close = useCallback(() => {
|
|
9
|
-
setIsOpen(false);
|
|
10
|
-
onDismiss?.();
|
|
11
|
-
dropdownButtonRef.current?.focus();
|
|
12
|
-
}, [onDismiss]);
|
|
13
|
-
const open = () => {
|
|
14
|
-
setIsOpen(true);
|
|
15
|
-
};
|
|
16
|
-
const toggle = useCallback(() => {
|
|
17
|
-
setIsOpen((old) => {
|
|
18
|
-
if (old) {
|
|
19
|
-
onDismiss?.();
|
|
20
|
-
dropdownButtonRef.current?.focus();
|
|
21
|
-
}
|
|
22
|
-
return !old;
|
|
23
|
-
});
|
|
24
|
-
}, [onDismiss]);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
setIsOpen(isOpenDefault);
|
|
27
|
-
}, [isOpenDefault]);
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
isOpen && dropdownItemsRef?.current[0]?.focus();
|
|
30
|
-
}, [isOpen]);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
let firstClick = true;
|
|
33
|
-
const event = (e) => {
|
|
34
|
-
const someItemWasClicked = dropdownItemsRef?.current.some((item) => e.target === item);
|
|
35
|
-
if (firstClick) {
|
|
36
|
-
firstClick = false;
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
!someItemWasClicked && close();
|
|
40
|
-
};
|
|
41
|
-
if (isOpen) {
|
|
42
|
-
document.addEventListener('click', event);
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
document.removeEventListener('click', event);
|
|
46
|
-
}
|
|
47
|
-
return () => {
|
|
48
|
-
document.removeEventListener('click', event);
|
|
49
|
-
};
|
|
50
|
-
}, [close, isOpen]);
|
|
51
|
-
const value = useMemo(() => {
|
|
52
|
-
return {
|
|
53
|
-
isOpen,
|
|
54
|
-
close,
|
|
55
|
-
open,
|
|
56
|
-
toggle,
|
|
57
|
-
dropdownButtonRef,
|
|
58
|
-
onDismiss,
|
|
59
|
-
selectedDropdownItemIndexRef,
|
|
60
|
-
dropdownItemsRef,
|
|
61
|
-
id,
|
|
62
|
-
};
|
|
63
|
-
}, [close, id, isOpen, onDismiss, toggle]);
|
|
64
|
-
return (React.createElement(DropdownContext.Provider, { value: value }, children));
|
|
65
|
-
};
|
|
66
|
-
export default Dropdown;
|
|
67
|
-
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface DropdownButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
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 DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
-
export default DropdownButton;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
2
|
-
import { useDropdown } from './hooks/useDropdown';
|
|
3
|
-
const DropdownButton = forwardRef(function Button({ children, testId = 'store-dropdown-button', ...otherProps }, ref) {
|
|
4
|
-
const { toggle, dropdownButtonRef, isOpen, id } = useDropdown();
|
|
5
|
-
useImperativeHandle(ref, () => dropdownButtonRef.current, [
|
|
6
|
-
dropdownButtonRef,
|
|
7
|
-
]);
|
|
8
|
-
return (React.createElement("button", { "data-fs-dropdown-button": true, onClick: toggle, "data-testid": testId, ref: dropdownButtonRef, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-controls": id, ...otherProps }, children));
|
|
9
|
-
});
|
|
10
|
-
export default DropdownButton;
|
|
11
|
-
//# sourceMappingURL=DropdownButton.js.map
|