@faststore/ui 2.0.41-alpha.0 → 2.0.47-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 (16) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.d.ts +0 -2
  3. package/dist/index.js +0 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/molecules/QuantitySelector/styles.scss +154 -0
  7. package/src/index.ts +0 -3
  8. package/src/styles/components.scss +1 -0
  9. package/dist/components/molecules/QuantitySelector/QuantitySelector.d.ts +0 -29
  10. package/dist/components/molecules/QuantitySelector/QuantitySelector.js +0 -10
  11. package/dist/components/molecules/QuantitySelector/QuantitySelector.js.map +0 -1
  12. package/dist/components/molecules/QuantitySelector/index.d.ts +0 -2
  13. package/dist/components/molecules/QuantitySelector/index.js +0 -2
  14. package/dist/components/molecules/QuantitySelector/index.js.map +0 -1
  15. package/src/components/molecules/QuantitySelector/QuantitySelector.tsx +0 -80
  16. package/src/components/molecules/QuantitySelector/index.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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.47-alpha.0](https://github.com/vtex/faststore/compare/v2.0.46-alpha.0...v2.0.47-alpha.0) (2023-01-13)
7
+
8
+
9
+ ### Features
10
+
11
+ * Adds `QuantitySelector` component ([#1597](https://github.com/vtex/faststore/issues/1597)) ([a587155](https://github.com/vtex/faststore/commit/a5871559a4a28754dd9868b7f85c92a5bde52917))
12
+
13
+
14
+
15
+ ## [2.0.44-alpha.0](https://github.com/vtex/faststore/compare/v2.0.43-alpha.0...v2.0.44-alpha.0) (2023-01-11)
16
+
17
+ **Note:** Version bump only for package @faststore/ui
18
+
19
+
20
+
21
+
22
+
6
23
  ## [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
24
 
8
25
 
package/dist/index.d.ts CHANGED
@@ -51,8 +51,6 @@ export { default as Form } from './components/molecules/Form';
51
51
  export type { FormProps } from './components/molecules/Form';
52
52
  export { default as Alert } from './components/molecules/Alert';
53
53
  export type { AlertProps } from './components/molecules/Alert';
54
- export { default as QuantitySelector } from './components/molecules/QuantitySelector';
55
- export type { QuantitySelectorProps } from './components/molecules/QuantitySelector';
56
54
  export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
57
55
  export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './components/organisms/OutOfStock';
58
56
  export { Tiles, Tile } from './components/organisms/Tiles';
package/dist/index.js CHANGED
@@ -27,7 +27,6 @@ export { default as PriceRange } from './components/molecules/PriceRange';
27
27
  export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
28
28
  export { default as Form } from './components/molecules/Form';
29
29
  export { default as Alert } from './components/molecules/Alert';
30
- export { default as QuantitySelector } from './components/molecules/QuantitySelector';
31
30
  // Organisms
32
31
  export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
33
32
  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,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"}
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,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.41-alpha.0",
3
+ "version": "2.0.47-alpha.0",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -47,7 +47,7 @@
47
47
  },
48
48
  "devDependencies": {
49
49
  "@faststore/eslint-config": "^2.0.37-alpha.0",
50
- "@faststore/shared": "^2.0.37-alpha.0",
50
+ "@faststore/shared": "^2.0.44-alpha.0",
51
51
  "@size-limit/preset-small-lib": "^7.0.8",
52
52
  "@types/tabbable": "^3.1.1",
53
53
  "babel-loader": "^8.2.5",
@@ -59,5 +59,5 @@
59
59
  "node": "16.18.0",
60
60
  "yarn": "1.19.1"
61
61
  },
62
- "gitHead": "e307ecc596c61e0da4b83cb76aeea0c677197e03"
62
+ "gitHead": "3e7e16180416349dc8471b69ad9e305fd2f4d424"
63
63
  }
package/src/components/molecules/QuantitySelector/styles.scss ADDED
@@ -0,0 +1,154 @@
1
+ [data-fs-quantity-selector] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Quantity Selector
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-qty-selector-width : calc(var(--fs-control-tap-size) * 2.7);
8
+ --fs-qty-selector-height : calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2));
9
+
10
+ --fs-qty-selector-shadow : none;
11
+ --fs-qty-selector-shadow-hover : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
12
+
13
+ --fs-qty-selector-bkg-color : var(--fs-color-body-bkg);
14
+ --fs-qty-selector-bkg-color-hover : var(--fs-qty-selector-bkg-color);
15
+
16
+ --fs-qty-selector-border-radius : var(--fs-border-radius);
17
+ --fs-qty-selector-border-width : var(--fs-border-width);
18
+ --fs-qty-selector-border-width-hover : var(--fs-border-width);
19
+ --fs-qty-selector-border-color : var(--fs-border-color);
20
+ --fs-qty-selector-border-color-hover : var(--fs-border-color-active);
21
+
22
+ // Text
23
+ --fs-qty-selector-text-size : var(--fs-text-size-base);
24
+ --fs-qty-selector-text-color : var(--fs-color-text);
25
+ --fs-qty-selector-text-color-hover : var(--fs-qty-selector-text-color);
26
+
27
+ // Icon
28
+ --fs-qty-selector-icon-color : var(--fs-color-link);
29
+
30
+ // Button
31
+ --fs-qty-selector-button-shadow : none;
32
+ --fs-qty-selector-button-shadow-hover : none;
33
+ --fs-qty-selector-button-bkg-color : transparent;
34
+ --fs-qty-selector-button-bkg-color-hover : var(--fs-color-primary-bkg-light);
35
+ --fs-qty-selector-button-bkg-color-focus : var(--fs-qty-selector-button-bkg-color-hover);
36
+ --fs-qty-selector-button-border-radius : var(--fs-qty-selector-border-radius);
37
+
38
+ // Disabled
39
+ --fs-qty-selector-disabled-bkg-color : var(--fs-color-disabled-bkg);
40
+ --fs-qty-selector-disabled-text-color : var(--fs-color-disabled-text);
41
+ --fs-qty-selector-disabled-icon-color : var(--fs-border-color-light-disabled);
42
+ --fs-qty-selector-disabled-border-color : var(--fs-qty-selector-disabled-bkg-color);
43
+ --fs-qty-selector-disabled-button-bkg-color : var(--fs-qty-selector-button-bkg-color-hover);
44
+
45
+ // --------------------------------------------------------
46
+ // Structural Styles
47
+ // --------------------------------------------------------
48
+
49
+ position: relative;
50
+ display: flex;
51
+ flex-direction: row;
52
+ align-items: center;
53
+ justify-content: center;
54
+ width: var(--fs-qty-selector-width);
55
+ height: var(--fs-qty-selector-height);
56
+ border-radius: var(--fs-qty-selector-border-radius);
57
+ box-shadow: var(--fs-qty-selector-shadow);
58
+
59
+ [data-fs-icon] {
60
+ margin: 0;
61
+ line-height: 0;
62
+ color: var(--fs-qty-selector-icon-color);
63
+ }
64
+
65
+ [data-quantity-selector-input] {
66
+ width: 100%;
67
+ height: 100%;
68
+ padding: 0;
69
+ font-size: var(--fs-qty-selector-text-size);
70
+ color: var(--fs-qty-selector-text-color);
71
+ text-align: center;
72
+ }
73
+
74
+ [data-quantity-selector-button] {
75
+ position: absolute;
76
+ background-color: var(--fs-qty-selector-button-bkg-color);
77
+
78
+ [data-fs-icon] {
79
+ width: 100%;
80
+ height: 100%;
81
+ border-radius: var(--fs-qty-selector-button-border-radius);
82
+ box-shadow: var(--fs-qty-selector-button-shadow);
83
+ }
84
+
85
+ &[data-fs-icon-button] {
86
+ padding: var(--fs-spacing-1);
87
+ }
88
+
89
+ &:first-of-type { left: 0; }
90
+
91
+ &:last-of-type { right: 0; }
92
+
93
+ &:hover:not(:disabled) [data-fs-icon] {
94
+ background-color: var(--fs-qty-selector-button-bkg-color-hover);
95
+ box-shadow: var(--fs-qty-selector-button-shadow-hover);
96
+ }
97
+
98
+ &:disabled {
99
+ cursor: not-allowed;
100
+ background-color: var(--fs-qty-selector-button-bkg-color);
101
+
102
+ &:hover, &:focus-visible {
103
+ background-color: var(--fs-qty-selector-button-bkg-color);
104
+ }
105
+
106
+ [data-fs-icon] {
107
+ color: var(--fs-qty-selector-disabled-icon-color);
108
+ }
109
+ }
110
+
111
+ &:hover:not(:disabled) {
112
+ background-color: transparent;
113
+ box-shadow: none;
114
+ }
115
+
116
+ &:focus:not(:disabled) {
117
+ background-color: transparent;
118
+ box-shadow: none;
119
+ }
120
+
121
+ &:focus-visible {
122
+ background-color: var(--fs-qty-selector-button-bkg-color);
123
+ outline: none;
124
+ box-shadow: none;
125
+
126
+ [data-fs-icon] {
127
+ @include focus-ring;
128
+
129
+ background-color: var(--fs-qty-selector-button-bkg-color-focus);
130
+ }
131
+ }
132
+ }
133
+
134
+ &:hover {
135
+ [data-quantity-selector-input]:not(:disabled):not(:focus) {
136
+ color: var(--fs-qty-selector-text-color-hover);
137
+ background-color: var(--fs-qty-selector-bkg-color-hover);
138
+ border-color: var(--fs-qty-selector-border-color-hover);
139
+ border-width: var(--fs-qty-selector-border-width-hover);
140
+ box-shadow: var(--fs-qty-selector-shadow-hover);
141
+ }
142
+ }
143
+
144
+ // --------------------------------------------------------
145
+ // Variants Styles
146
+ // --------------------------------------------------------
147
+
148
+ &[data-fs-quantity-selector="disabled"] {
149
+ [data-quantity-selector-input] {
150
+ border-color: var(--fs-qty-selector-disabled-border-color);
151
+ }
152
+ [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
153
+ }
154
+ }
package/src/index.ts CHANGED
@@ -143,9 +143,6 @@ export type { FormProps } from './components/molecules/Form'
143
143
  export { default as Alert } from './components/molecules/Alert'
144
144
  export type { AlertProps } from './components/molecules/Alert'
145
145
 
146
- export { default as QuantitySelector } from './components/molecules/QuantitySelector'
147
- export type { QuantitySelectorProps } from './components/molecules/QuantitySelector'
148
-
149
146
  // Organisms
150
147
  export {
151
148
  default as OutOfStock,
package/src/styles/components.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  @import "../components/molecules/Dropdown/styles";
21
21
  @import "../components/molecules/InputField/styles";
22
22
  @import "../components/molecules/LinkButton/styles";
23
+ @import "../components/molecules/QuantitySelector/styles";
23
24
  @import "../components/molecules/RadioField/styles";
24
25
  @import "../components/molecules/SelectField/styles";
25
26
  @import "../components/molecules/Table/styles";
package/dist/components/molecules/QuantitySelector/QuantitySelector.d.ts DELETED
@@ -1,29 +0,0 @@
1
- import type { InputHTMLAttributes } from 'react';
2
- import React from 'react';
3
- import type { IconButtonProps, InputProps } from '@faststore/components';
4
- export interface QuantitySelectorProps extends InputHTMLAttributes<HTMLDivElement> {
5
- /**
6
- * Sets the current value that should be displayed on the input at the center of the quantity selector.
7
- */
8
- quantity: number | string;
9
- /**
10
- * Object with properties that will be passed forward the inner IconButton atom at the left of the input.
11
- */
12
- leftButtonProps: Omit<IconButtonProps, 'aria-label'>;
13
- /**
14
- * Object with properties that will be passed forward the inner Input atom between the two buttons.
15
- */
16
- inputProps: InputProps;
17
- /**
18
- * Object with properties that will be passed forward the inner IconButton atom at the right of the input.
19
- */
20
- rightButtonProps: Omit<IconButtonProps, 'aria-label'>;
21
- /**
22
- * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
23
- *
24
- * @default 'store-quantity-selector'
25
- */
26
- testId?: string;
27
- }
28
- declare const QuantitySelector: React.ForwardRefExoticComponent<QuantitySelectorProps & React.RefAttributes<HTMLDivElement>>;
29
- export default QuantitySelector;
package/dist/components/molecules/QuantitySelector/QuantitySelector.js DELETED
@@ -1,10 +0,0 @@
1
- import React, { forwardRef } from 'react';
2
- import { IconButton, Input } from '@faststore/components';
3
- const QuantitySelector = forwardRef(function QuantitySelector({ quantity, testId = 'store-quantity-selector', leftButtonProps, inputProps, rightButtonProps, ...otherProps }, ref) {
4
- return (React.createElement("div", { "data-fs-quantity-selector": true, "data-testid": testId, ref: ref, ...otherProps },
5
- React.createElement(IconButton, { "aria-controls": "quantity-selector-input", "aria-label": "Decrement Quantity", "data-quantity-selector-button": "left", ...leftButtonProps }),
6
- React.createElement(Input, { "aria-label": "Quantity", "data-quantity-selector-input": true, id: "quantity-selector-input", value: quantity, ...inputProps }),
7
- React.createElement(IconButton, { "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", "data-quantity-selector-button": "right", ...rightButtonProps })));
8
- });
9
- export default QuantitySelector;
10
- //# sourceMappingURL=QuantitySelector.js.map
package/dist/components/molecules/QuantitySelector/QuantitySelector.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/components/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAgCzD,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,MAAM,GAAG,yBAAyB,EAClC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,GAAG,UAAU,EACS,EACxB,GAAG;IAEH,OAAO,CACL,+EAEe,MAAM,EACnB,GAAG,EAAE,GAAG,KACJ,UAAU;QAEd,oBAAC,UAAU,qBACK,yBAAyB,gBAC5B,oBAAoB,mCACD,MAAM,KAChC,eAAe,GACnB;QACF,oBAAC,KAAK,kBACO,UAAU,wCAErB,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,QAAQ,KACX,UAAU,GACd;QACF,oBAAC,UAAU,qBACK,yBAAyB,gBAC5B,oBAAoB,mCACD,OAAO,KACjC,gBAAgB,GACpB,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}
package/dist/components/molecules/QuantitySelector/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './QuantitySelector';
2
- export type { QuantitySelectorProps } from './QuantitySelector';
package/dist/components/molecules/QuantitySelector/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './QuantitySelector';
2
- //# sourceMappingURL=index.js.map
package/dist/components/molecules/QuantitySelector/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/QuantitySelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}
package/src/components/molecules/QuantitySelector/QuantitySelector.tsx DELETED
@@ -1,80 +0,0 @@
1
- import type { InputHTMLAttributes } from 'react'
2
- import React, { forwardRef } from 'react'
3
-
4
- import type { IconButtonProps, InputProps } from '@faststore/components'
5
- import { IconButton, Input } from '@faststore/components'
6
-
7
- export interface QuantitySelectorProps
8
- extends InputHTMLAttributes<HTMLDivElement> {
9
- /**
10
- * Sets the current value that should be displayed on the input at the center of the quantity selector.
11
- */
12
- quantity: number | string
13
-
14
- /**
15
- * Object with properties that will be passed forward the inner IconButton atom at the left of the input.
16
- */
17
- leftButtonProps: Omit<IconButtonProps, 'aria-label'>
18
-
19
- /**
20
- * Object with properties that will be passed forward the inner Input atom between the two buttons.
21
- */
22
- inputProps: InputProps
23
-
24
- /**
25
- * Object with properties that will be passed forward the inner IconButton atom at the right of the input.
26
- */
27
- rightButtonProps: Omit<IconButtonProps, 'aria-label'>
28
-
29
- /**
30
- * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
31
- *
32
- * @default 'store-quantity-selector'
33
- */
34
- testId?: string
35
- }
36
-
37
- const QuantitySelector = forwardRef<HTMLDivElement, QuantitySelectorProps>(
38
- function QuantitySelector(
39
- {
40
- quantity,
41
- testId = 'store-quantity-selector',
42
- leftButtonProps,
43
- inputProps,
44
- rightButtonProps,
45
- ...otherProps
46
- }: QuantitySelectorProps,
47
- ref
48
- ) {
49
- return (
50
- <div
51
- data-fs-quantity-selector
52
- data-testid={testId}
53
- ref={ref}
54
- {...otherProps}
55
- >
56
- <IconButton
57
- aria-controls="quantity-selector-input"
58
- aria-label="Decrement Quantity"
59
- data-quantity-selector-button="left"
60
- {...leftButtonProps}
61
- />
62
- <Input
63
- aria-label="Quantity"
64
- data-quantity-selector-input
65
- id="quantity-selector-input"
66
- value={quantity}
67
- {...inputProps}
68
- />
69
- <IconButton
70
- aria-controls="quantity-selector-input"
71
- aria-label="Increment Quantity"
72
- data-quantity-selector-button="right"
73
- {...rightButtonProps}
74
- />
75
- </div>
76
- )
77
- }
78
- )
79
-
80
- export default QuantitySelector
package/src/components/molecules/QuantitySelector/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './QuantitySelector'
2
- export type { QuantitySelectorProps } from './QuantitySelector'