@faststore/components 2.0.43-alpha.0 → 2.0.47-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.47-alpha.0](https://github.com/vtex/faststore/compare/v2.0.46-alpha.0...v2.0.47-alpha.0) (2023-01-13)
+
+
+### Features
+
+* Adds `QuantitySelector` component ([#1597](https://github.com/vtex/faststore/issues/1597)) ([a587155](https://github.com/vtex/faststore/commit/a5871559a4a28754dd9868b7f85c92a5bde52917))
+
+
+
+## [2.0.44-alpha.0](https://github.com/vtex/faststore/compare/v2.0.43-alpha.0...v2.0.44-alpha.0) (2023-01-11)
+
+**Note:** Version bump only for package @faststore/components
+
+
+
+
+
 ## [2.0.43-alpha.0](https://github.com/vtex/faststore/compare/v2.0.42-alpha.0...v2.0.43-alpha.0) (2023-01-11)
 
 

package/dist/assets/Minus.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const Minus: FC;
+export default Minus;

package/dist/assets/Minus.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Minus = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "24", width: 16, height: 16 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("line", { x1: "40", y1: "128", x2: "216", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Minus;
+//# sourceMappingURL=Minus.js.map

package/dist/assets/Minus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minus.js","sourceRoot":"","sources":["../../src/assets/Minus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/assets/Plus.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const Plus: FC;
+export default Plus;

package/dist/assets/Plus.js

@@ -0,0 +1,8 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Plus = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "24", width: 16, height: 16 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("line", { x1: "40", y1: "128", x2: "216", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("line", { x1: "128", y1: "40", x2: "128", y2: "216", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Plus;
+//# sourceMappingURL=Plus.js.map

package/dist/assets/Plus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plus.js","sourceRoot":"","sources":["../../src/assets/Plus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,IAAI,GAAO,GAAG,EAAE,CAAC,CACrB,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/assets/index.d.ts

@@ -3,6 +3,8 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
 export { default as House } from './House';
+export { default as Minus } from './Minus';
+export { default as Plus } from './Plus';
 export { default as MinusCircle } from './MinusCircle';
 export { default as PlusCircle } from './PlusCircle';
 export { default as Ruler } from './Ruler';

package/dist/assets/index.js

@@ -3,6 +3,8 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
 export { default as House } from './House';
+export { default as Minus } from './Minus';
+export { default as Plus } from './Plus';
 export { default as MinusCircle } from './MinusCircle';
 export { default as PlusCircle } from './PlusCircle';
 export { default as Ruler } from './Ruler';

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.d.ts

@@ -51,5 +51,7 @@ export { default as Toggle } from './molecules/Toggle';
 export type { ToggleProps } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
 export type { ToggleFieldProps } from './molecules/ToggleField';
+export { default as QuantitySelector } from './molecules/QuantitySelector';
+export type { QuantitySelectorProps } from './molecules/QuantitySelector';
 export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeadingProps, } from './organisms/Hero';

package/dist/index.js

@@ -29,6 +29,7 @@ export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from '
 export { default as Tag } from './molecules/Tag';
 export { default as Toggle } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
+export { default as QuantitySelector } from './molecules/QuantitySelector';
 // Organisms
 export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/QuantitySelector/QuantitySelector.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export interface QuantitySelectorProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     *
+     * @default 'fs-quantity-selector'
+     */
+    testId?: string;
+    /**
+     * The maximum value the quantity selector can receive
+     */
+    max?: number;
+    /**
+     * The minimum value the quantity selector can receive
+     */
+    min?: number;
+    /**
+     * The initial value for quantity selector
+     */
+    initial?: number;
+    /**
+     * Specifies that the whole quantity selector component should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Event emitted when value is changed
+     */
+    onChange?: (value: number) => void;
+}
+declare const QuantitySelector: ({ max, min, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => JSX.Element;
+export default QuantitySelector;

package/dist/molecules/QuantitySelector/QuantitySelector.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { IconButton, Input } from '../../index';
+import { Minus, Plus } from '../../assets';
+const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
+    const [quantity, setQuantity] = useState(initial ?? min);
+    const isLeftDisabled = quantity === min;
+    const isRightDisabled = quantity === max;
+    const changeQuantity = (increaseValue) => {
+        const quantityValue = validateQuantityBounds(quantity + increaseValue);
+        onChange?.(quantityValue);
+        setQuantity(quantityValue);
+    };
+    const increase = () => changeQuantity(1);
+    const decrease = () => changeQuantity(-1);
+    function validateQuantityBounds(n) {
+        const maxValue = min ? Math.max(n, min) : n;
+        return max ? Math.min(maxValue, max) : maxValue;
+    }
+    function validateInput(e) {
+        const val = e.currentTarget.value;
+        if (!Number.isNaN(Number(val))) {
+            setQuantity(() => {
+                const quantityValue = validateQuantityBounds(Number(val));
+                onChange?.(quantityValue);
+                return quantityValue;
+            });
+        }
+    }
+    useEffect(() => {
+        initial && setQuantity(initial);
+    }, [initial]);
+    return (React.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
+        React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Minus, null), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button` }),
+        React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: quantity, onChange: validateInput, disabled: disabled }),
+        React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Plus, null), onClick: increase, testId: `${testId}-right-button` })));
+};
+export default QuantitySelector;
+//# sourceMappingURL=QuantitySelector.js.map

package/dist/molecules/QuantitySelector/QuantitySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}

package/dist/molecules/QuantitySelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './QuantitySelector';
+export type { QuantitySelectorProps } from './QuantitySelector';

package/dist/molecules/QuantitySelector/index.js

@@ -0,0 +1,2 @@
+export { default } from './QuantitySelector';
+//# sourceMappingURL=index.js.map

package/dist/molecules/QuantitySelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.43-alpha.0",
+  "version": "2.0.47-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -22,7 +22,7 @@
   ],
   "devDependencies": {
     "@faststore/eslint-config": "^2.0.37-alpha.0",
-    "@faststore/shared": "^2.0.37-alpha.0",
+    "@faststore/shared": "^2.0.44-alpha.0",
     "eslint": "7.32.0",
     "typescript": "^4.8.4"
   },
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "40e830f6cae1423c5a9296fe123b0c5df1e1f42c"
+  "gitHead": "3e7e16180416349dc8471b69ad9e305fd2f4d424"
 }

package/src/assets/Minus.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Minus: FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="24"
+    width={16}
+    height={16}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <line
+      x1="40"
+      y1="128"
+      x2="216"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default Minus

package/src/assets/Plus.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Plus: FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="24"
+    width={16}
+    height={16}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <line
+      x1="40"
+      y1="128"
+      x2="216"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+    <line
+      x1="128"
+      y1="40"
+      x2="128"
+      y2="216"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default Plus

package/src/assets/index.ts

@@ -3,6 +3,8 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
 export { default as House } from './House'
+export { default as Minus } from './Minus'
+export { default as Plus } from './Plus'
 export { default as MinusCircle } from './MinusCircle'
 export { default as PlusCircle } from './PlusCircle'
 export { default as Ruler } from './Ruler'

package/src/index.ts

@@ -90,6 +90,8 @@ export { default as Toggle } from './molecules/Toggle'
 export type { ToggleProps } from './molecules/Toggle'
 export { default as ToggleField } from './molecules/ToggleField'
 export type { ToggleFieldProps } from './molecules/ToggleField'
+export { default as QuantitySelector } from './molecules/QuantitySelector'
+export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 
 // Organisms
 export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero'

package/src/molecules/QuantitySelector/QuantitySelector.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react'
+
+import { IconButton, Input } from '../../index'
+import { Minus, Plus } from '../../assets'
+
+export interface QuantitySelectorProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   *
+   * @default 'fs-quantity-selector'
+   */
+  testId?: string
+  /**
+   * The maximum value the quantity selector can receive
+   */
+  max?: number
+  /**
+   * The minimum value the quantity selector can receive
+   */
+  min?: number
+  /**
+   * The initial value for quantity selector
+   */
+  initial?: number
+  /**
+   * Specifies that the whole quantity selector component should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Event emitted when value is changed
+   */
+  onChange?: (value: number) => void
+}
+
+const QuantitySelector = ({
+  max,
+  min = 1,
+  initial,
+  disabled = false,
+  onChange,
+  testId = 'fs-quantity-selector',
+  ...otherProps
+}: QuantitySelectorProps) => {
+  const [quantity, setQuantity] = useState<number>(initial ?? min)
+
+  const isLeftDisabled = quantity === min
+  const isRightDisabled = quantity === max
+
+  const changeQuantity = (increaseValue: number) => {
+    const quantityValue = validateQuantityBounds(quantity + increaseValue)
+
+    onChange?.(quantityValue)
+    setQuantity(quantityValue)
+  }
+
+  const increase = () => changeQuantity(1)
+
+  const decrease = () => changeQuantity(-1)
+
+  function validateQuantityBounds(n: number): number {
+    const maxValue = min ? Math.max(n, min) : n
+
+    return max ? Math.min(maxValue, max) : maxValue
+  }
+
+  function validateInput(e: React.FormEvent<HTMLInputElement>) {
+    const val = e.currentTarget.value
+
+    if (!Number.isNaN(Number(val))) {
+      setQuantity(() => {
+        const quantityValue = validateQuantityBounds(Number(val))
+
+        onChange?.(quantityValue)
+
+        return quantityValue
+      })
+    }
+  }
+
+  useEffect(() => {
+    initial && setQuantity(initial)
+  }, [initial])
+
+  return (
+    <div
+      data-fs-quantity-selector={disabled ? 'disabled' : 'true'}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <IconButton
+        data-quantity-selector-button="left"
+        icon={<Minus />}
+        aria-label="Decrement Quantity"
+        aria-controls="quantity-selector-input"
+        disabled={isLeftDisabled || disabled}
+        onClick={decrease}
+        testId={`${testId}-left-button`}
+      />
+      <Input
+        data-quantity-selector-input
+        id="quantity-selector-input"
+        aria-label="Quantity"
+        value={quantity}
+        onChange={validateInput}
+        disabled={disabled}
+      />
+      <IconButton
+        data-quantity-selector-button="right"
+        aria-controls="quantity-selector-input"
+        aria-label="Increment Quantity"
+        disabled={isRightDisabled || disabled}
+        icon={<Plus />}
+        onClick={increase}
+        testId={`${testId}-right-button`}
+      />
+    </div>
+  )
+}
+
+export default QuantitySelector

package/src/molecules/QuantitySelector/index.ts

@@ -0,0 +1,2 @@
+export { default } from './QuantitySelector'
+export type { QuantitySelectorProps } from './QuantitySelector'