@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.
Files changed (62) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/index.d.ts +0 -4
  3. package/dist/index.js +0 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/base/tokens.scss +1 -1
  7. package/src/components/molecules/Accordion/styles.scss +70 -0
  8. package/src/components/molecules/Dropdown/styles.scss +93 -0
  9. package/src/index.ts +0 -26
  10. package/src/styles/components.scss +2 -0
  11. package/dist/components/molecules/Accordion/Accordion.d.ts +0 -26
  12. package/dist/components/molecules/Accordion/Accordion.js +0 -21
  13. package/dist/components/molecules/Accordion/Accordion.js.map +0 -1
  14. package/dist/components/molecules/Accordion/AccordionButton.d.ts +0 -10
  15. package/dist/components/molecules/Accordion/AccordionButton.js +0 -37
  16. package/dist/components/molecules/Accordion/AccordionButton.js.map +0 -1
  17. package/dist/components/molecules/Accordion/AccordionItem.d.ts +0 -31
  18. package/dist/components/molecules/Accordion/AccordionItem.js +0 -22
  19. package/dist/components/molecules/Accordion/AccordionItem.js.map +0 -1
  20. package/dist/components/molecules/Accordion/AccordionPanel.d.ts +0 -10
  21. package/dist/components/molecules/Accordion/AccordionPanel.js +0 -10
  22. package/dist/components/molecules/Accordion/AccordionPanel.js.map +0 -1
  23. package/dist/components/molecules/Accordion/index.d.ts +0 -8
  24. package/dist/components/molecules/Accordion/index.js +0 -5
  25. package/dist/components/molecules/Accordion/index.js.map +0 -1
  26. package/dist/components/molecules/Dropdown/Dropdown.d.ts +0 -9
  27. package/dist/components/molecules/Dropdown/Dropdown.js +0 -67
  28. package/dist/components/molecules/Dropdown/Dropdown.js.map +0 -1
  29. package/dist/components/molecules/Dropdown/DropdownButton.d.ts +0 -10
  30. package/dist/components/molecules/Dropdown/DropdownButton.js +0 -11
  31. package/dist/components/molecules/Dropdown/DropdownButton.js.map +0 -1
  32. package/dist/components/molecules/Dropdown/DropdownItem.d.ts +0 -10
  33. package/dist/components/molecules/Dropdown/DropdownItem.js +0 -26
  34. package/dist/components/molecules/Dropdown/DropdownItem.js.map +0 -1
  35. package/dist/components/molecules/Dropdown/DropdownMenu.d.ts +0 -22
  36. package/dist/components/molecules/Dropdown/DropdownMenu.js +0 -65
  37. package/dist/components/molecules/Dropdown/DropdownMenu.js.map +0 -1
  38. package/dist/components/molecules/Dropdown/contexts/DropdownContext.d.ts +0 -41
  39. package/dist/components/molecules/Dropdown/contexts/DropdownContext.js +0 -11
  40. package/dist/components/molecules/Dropdown/contexts/DropdownContext.js.map +0 -1
  41. package/dist/components/molecules/Dropdown/hooks/useDropdown.d.ts +0 -6
  42. package/dist/components/molecules/Dropdown/hooks/useDropdown.js +0 -14
  43. package/dist/components/molecules/Dropdown/hooks/useDropdown.js.map +0 -1
  44. package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.d.ts +0 -8
  45. package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.js +0 -25
  46. package/dist/components/molecules/Dropdown/hooks/useDropdownPosition.js.map +0 -1
  47. package/dist/components/molecules/Dropdown/index.d.ts +0 -8
  48. package/dist/components/molecules/Dropdown/index.js +0 -5
  49. package/dist/components/molecules/Dropdown/index.js.map +0 -1
  50. package/src/components/molecules/Accordion/Accordion.tsx +0 -76
  51. package/src/components/molecules/Accordion/AccordionButton.tsx +0 -81
  52. package/src/components/molecules/Accordion/AccordionItem.tsx +0 -92
  53. package/src/components/molecules/Accordion/AccordionPanel.tsx +0 -40
  54. package/src/components/molecules/Accordion/index.ts +0 -11
  55. package/src/components/molecules/Dropdown/Dropdown.tsx +0 -102
  56. package/src/components/molecules/Dropdown/DropdownButton.tsx +0 -42
  57. package/src/components/molecules/Dropdown/DropdownItem.tsx +0 -69
  58. package/src/components/molecules/Dropdown/DropdownMenu.tsx +0 -139
  59. package/src/components/molecules/Dropdown/contexts/DropdownContext.ts +0 -53
  60. package/src/components/molecules/Dropdown/hooks/useDropdown.ts +0 -18
  61. package/src/components/molecules/Dropdown/hooks/useDropdownPosition.ts +0 -33
  62. 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":"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"}
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.37-alpha.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": "dac60f1c06a9df8faf33752ec8f8c9737fed677d"
62
+ "gitHead": "e307ecc596c61e0da4b83cb76aeea0c677197e03"
63
63
  }
@@ -270,5 +270,5 @@ body {
270
270
  // SHADOW
271
271
  --fs-shadow : none;
272
272
  --fs-shadow-darker : 0 0 10px rgb(0 0 0 / 20%);
273
- --fs-shadow-hover : 0 0 0 1px var(--fs-color-main-4);
273
+ --fs-shadow-hover : 0 2px 3px rgba(0,0,0,.1);
274
274
  }
@@ -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,5 +0,0 @@
1
- export { default } from './Accordion';
2
- export { default as AccordionItem } from './AccordionItem';
3
- export { default as AccordionButton } from './AccordionButton';
4
- export { default as AccordionPanel } from './AccordionPanel';
5
- //# sourceMappingURL=index.js.map
@@ -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