@faststore/components 2.0.56-alpha.0 → 2.0.59-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/dist/atoms/Button/Button.js +1 -1
- package/dist/atoms/Button/Button.js.map +1 -1
- package/dist/atoms/Skeleton/Skeleton.d.ts +37 -0
- package/dist/atoms/Skeleton/Skeleton.js +10 -0
- package/dist/atoms/Skeleton/Skeleton.js.map +1 -0
- package/dist/atoms/Skeleton/index.d.ts +2 -0
- package/dist/atoms/Skeleton/index.js +2 -0
- package/dist/atoms/Skeleton/index.js.map +1 -0
- package/dist/index.d.ts +7 -3
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/molecules/Alert/Alert.d.ts +1 -1
- package/dist/molecules/Alert/Alert.js +2 -2
- package/dist/molecules/Alert/Alert.js.map +1 -1
- package/dist/molecules/BuyButton/BuyButton.d.ts +1 -1
- package/dist/molecules/BuyButton/BuyButton.js +1 -1
- package/dist/molecules/BuyButton/BuyButton.js.map +1 -1
- package/dist/molecules/IconButton/IconButton.d.ts +1 -1
- package/dist/molecules/IconButton/IconButton.js +1 -1
- package/dist/molecules/IconButton/IconButton.js.map +1 -1
- package/dist/molecules/InputField/InputField.d.ts +1 -1
- package/dist/molecules/InputField/InputField.js +1 -1
- package/dist/molecules/InputField/InputField.js.map +1 -1
- package/dist/molecules/ProductTitle/ProductTitle.d.ts +56 -0
- package/dist/molecules/ProductTitle/ProductTitle.js +16 -0
- package/dist/molecules/ProductTitle/ProductTitle.js.map +1 -0
- package/dist/molecules/ProductTitle/index.d.ts +2 -0
- package/dist/molecules/ProductTitle/index.js +2 -0
- package/dist/molecules/ProductTitle/index.js.map +1 -0
- package/dist/molecules/QuantitySelector/QuantitySelector.js +1 -1
- package/dist/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
- package/dist/molecules/Rating/Rating.d.ts +2 -2
- package/dist/molecules/Rating/Rating.js +5 -4
- package/dist/molecules/Rating/Rating.js.map +1 -1
- package/dist/organisms/PriceRange/PriceRange.d.ts +1 -1
- package/dist/organisms/PriceRange/PriceRange.js +1 -1
- package/dist/organisms/PriceRange/PriceRange.js.map +1 -1
- package/package.json +2 -2
- package/src/atoms/Button/Button.tsx +4 -3
- package/src/atoms/Skeleton/Skeleton.tsx +76 -0
- package/src/atoms/Skeleton/index.ts +2 -0
- package/src/index.ts +7 -13
- package/src/molecules/Alert/Alert.tsx +14 -15
- package/src/molecules/BuyButton/BuyButton.tsx +2 -2
- package/src/molecules/IconButton/IconButton.tsx +2 -2
- package/src/molecules/InputField/InputField.tsx +2 -2
- package/src/molecules/ProductTitle/ProductTitle.tsx +74 -0
- package/src/molecules/ProductTitle/index.tsx +2 -0
- package/src/molecules/QuantitySelector/QuantitySelector.tsx +1 -1
- package/src/molecules/Rating/Rating.tsx +7 -6
- package/src/organisms/PriceRange/PriceRange.tsx +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import { Icon, Loader } from '../../
|
|
2
|
+
import { Icon, Loader } from '../../';
|
|
3
3
|
const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', loading, loadingLabel, icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
|
|
4
4
|
return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-loading": loading, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
|
|
5
5
|
loading && (React.createElement("p", { "data-fs-button-loading-label": true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6CrC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAC7D,CACA,CACL;QACA,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC7D,kCAAO,QAAQ,CAAQ;QACtB,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
interface Size {
|
|
4
|
+
width: string;
|
|
5
|
+
height: string;
|
|
6
|
+
}
|
|
7
|
+
export type BorderStyle = 'regular' | 'pill' | 'circle';
|
|
8
|
+
export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
/**
|
|
10
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
11
|
+
*/
|
|
12
|
+
testId?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Control whether skeleton should be visible or not.
|
|
15
|
+
*/
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Control whether the shimmer effect should be displayed or not.
|
|
19
|
+
*/
|
|
20
|
+
shimmer?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Specifies the skeleton element size (width, height).
|
|
23
|
+
*/
|
|
24
|
+
size: Size;
|
|
25
|
+
/**
|
|
26
|
+
* Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
|
|
27
|
+
*/
|
|
28
|
+
border?: BorderStyle;
|
|
29
|
+
/**
|
|
30
|
+
* Custom border radius for skeleton elements.
|
|
31
|
+
*/
|
|
32
|
+
borderRadius?: string;
|
|
33
|
+
}
|
|
34
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & {
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
export default Skeleton;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const Skeleton = forwardRef(function Skeleton({ testId = 'fs-skeleton', loading = true, shimmer = true, children, size, border, borderRadius, ...otherProps }, ref) {
|
|
3
|
+
const styles = {
|
|
4
|
+
width: size.width,
|
|
5
|
+
height: size.height,
|
|
6
|
+
};
|
|
7
|
+
return loading ? (React.createElement("div", { ref: ref, "data-fs-skeleton": true, "data-testid": testId, "data-fs-skeleton-border": border ? border : null, style: borderRadius ? { ...styles, borderRadius: borderRadius } : styles, ...otherProps }, shimmer && React.createElement("div", { "data-fs-skeleton-shimmer": true }))) : (React.createElement(React.Fragment, null, children));
|
|
8
|
+
});
|
|
9
|
+
export default Skeleton;
|
|
10
|
+
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAqCzC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EACE,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,MAAM,GAAG;QACb,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;KACpB,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,2CAEK,MAAM,6BACM,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,EACH,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,KAE/D,UAAU,IAEb,OAAO,IAAI,gEAAgC,CACxC,CACP,CAAC,CAAC,CAAC,CACF,0CAAG,QAAQ,CAAI,CAChB,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ export { default as Price } from './atoms/Price';
|
|
|
24
24
|
export type { PriceProps } from './atoms/Price';
|
|
25
25
|
export { default as Radio } from './atoms/Radio';
|
|
26
26
|
export type { RadioProps } from './atoms/Radio';
|
|
27
|
+
export { default as Skeleton } from './atoms/Skeleton';
|
|
28
|
+
export type { SkeletonProps } from './atoms/Skeleton';
|
|
27
29
|
export { default as Select } from './atoms/Select';
|
|
28
30
|
export type { SelectProps } from './atoms/Select';
|
|
29
31
|
export { default as Slider } from './atoms/Slider';
|
|
@@ -42,7 +44,7 @@ export { default as DiscountBadge } from './molecules/DiscountBadge';
|
|
|
42
44
|
export type { DiscountBadgeProps } from './molecules/DiscountBadge';
|
|
43
45
|
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
|
|
44
46
|
export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
|
|
45
|
-
export { default as Gift, GiftContent, GiftImage
|
|
47
|
+
export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
|
|
46
48
|
export type { GiftProps, GiftContentProps, GiftImageProps, } from './molecules/Gift';
|
|
47
49
|
export { default as InputField } from './molecules/InputField';
|
|
48
50
|
export type { InputFieldProps } from './molecules/InputField';
|
|
@@ -50,10 +52,12 @@ export { default as LinkButton } from './molecules/LinkButton';
|
|
|
50
52
|
export type { LinkButtonProps } from './molecules/LinkButton';
|
|
51
53
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
|
|
52
54
|
export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
|
|
55
|
+
export { default as ProductTitle } from './molecules/ProductTitle';
|
|
56
|
+
export type { ProductTitleProps } from './molecules/ProductTitle';
|
|
53
57
|
export { default as RadioField } from './molecules/RadioField';
|
|
54
58
|
export type { RadioFieldProps } from './molecules/RadioField';
|
|
55
|
-
export { default as RadioGroup, RadioOption
|
|
56
|
-
export type { RadioGroupProps, RadioOptionProps
|
|
59
|
+
export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
|
|
60
|
+
export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup';
|
|
57
61
|
export { default as Rating } from './molecules/Rating';
|
|
58
62
|
export type { RatingProps } from './molecules/Rating';
|
|
59
63
|
export { default as SelectField } from './molecules/SelectField';
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { default as List } from './atoms/List';
|
|
|
15
15
|
export { default as Overlay } from './atoms/Overlay';
|
|
16
16
|
export { default as Price } from './atoms/Price';
|
|
17
17
|
export { default as Radio } from './atoms/Radio';
|
|
18
|
+
export { default as Skeleton } from './atoms/Skeleton';
|
|
18
19
|
export { default as Select } from './atoms/Select';
|
|
19
20
|
export { default as Slider } from './atoms/Slider';
|
|
20
21
|
export { default as SROnly } from './atoms/SROnly';
|
|
@@ -26,12 +27,13 @@ export { default as CheckboxField } from './molecules/CheckboxField';
|
|
|
26
27
|
export { default as IconButton } from './molecules/IconButton';
|
|
27
28
|
export { default as DiscountBadge } from './molecules/DiscountBadge';
|
|
28
29
|
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
|
|
29
|
-
export { default as Gift, GiftContent, GiftImage
|
|
30
|
+
export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
|
|
30
31
|
export { default as InputField } from './molecules/InputField';
|
|
31
32
|
export { default as LinkButton } from './molecules/LinkButton';
|
|
32
33
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
|
|
34
|
+
export { default as ProductTitle } from './molecules/ProductTitle';
|
|
33
35
|
export { default as RadioField } from './molecules/RadioField';
|
|
34
|
-
export { default as RadioGroup, RadioOption
|
|
36
|
+
export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
|
|
35
37
|
export { default as Rating } from './molecules/Rating';
|
|
36
38
|
export { default as SelectField } from './molecules/SelectField';
|
|
37
39
|
export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,cAAc,SAAS,CAAA;AAEvB,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,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,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,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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { LinkProps } from '../../
|
|
3
|
+
import { LinkProps } from '../../';
|
|
4
4
|
import type { ReactNode, MouseEvent } from 'react';
|
|
5
5
|
export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
6
6
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { Button, Link, Icon } from '../../
|
|
3
|
+
import { Button, Link, Icon } from '../../';
|
|
4
4
|
import { X } from '../../assets';
|
|
5
5
|
const Alert = forwardRef(function Alert({ testId = 'fs-alert', children, icon, dismissible, link, onClose, ...otherProps }, ref) {
|
|
6
6
|
const handleClose = useCallback((event) => {
|
|
@@ -12,7 +12,7 @@ const Alert = forwardRef(function Alert({ testId = 'fs-alert', children, icon, d
|
|
|
12
12
|
return (React.createElement("div", { ref: ref, role: "alert", "data-fs-alert": true, "data-testid": testId, "data-fs-alert-dismissible": dismissible, ...otherProps },
|
|
13
13
|
icon && React.createElement(Icon, { component: icon }),
|
|
14
14
|
React.createElement("p", { "data-fs-alert-content": true }, children),
|
|
15
|
-
link &&
|
|
15
|
+
link && React.createElement(Link, { "data-fs-alert-link": true, variant: "inline", ...link }),
|
|
16
16
|
dismissible && (React.createElement(Button, { "data-fs-alert-button": true, "aria-label": "Close", onClick: handleClose },
|
|
17
17
|
React.createElement("span", null,
|
|
18
18
|
React.createElement(Icon, { component: React.createElement(X, null) }))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/molecules/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/molecules/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AA6BhC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACjE,EACE,MAAM,GAAG,UAAU,EACnB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA8B,EAAE,EAAE;QACjC,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,wCAEC,MAAM,+BACQ,WAAW,KAClC,UAAU;QAEb,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAElC,4DAA0B,QAAQ,CAAK;QAEtC,IAAI,IAAI,oBAAC,IAAI,gCAAoB,OAAO,EAAC,QAAQ,KAAK,IAAI,GAAI;QAE9D,WAAW,IAAI,CACd,oBAAC,MAAM,gDAAiC,OAAO,EAAC,OAAO,EAAE,WAAW;YAClE;gBACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,CAAC,OAAG,GAAI,CACrB,CACA,CACV,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { ButtonProps } from '../../
|
|
2
|
+
import type { ButtonProps } from '../../';
|
|
3
3
|
type BuyButtonProps = ButtonProps;
|
|
4
4
|
declare function BuyButton({ testId, icon, children, ...otherProps }: BuyButtonProps): JSX.Element;
|
|
5
5
|
export default BuyButton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Button } from '../../
|
|
2
|
+
import { Button } from '../../';
|
|
3
3
|
import { ShoppingCart } from '../../assets';
|
|
4
4
|
function BuyButton({ testId = 'fs-buy-button', icon, children, ...otherProps }) {
|
|
5
5
|
return (React.createElement(Button, { "data-fs-buy-button": true, icon: React.createElement(ShoppingCart, null), iconPosition: "left", "data-testid": testId, ...otherProps }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,gCAEL,IAAI,EAAE,oBAAC,YAAY,OAAG,EACtB,YAAY,EAAC,MAAM,iBACN,MAAM,KACf,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactNode, AriaAttributes } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { ButtonProps } from '../../
|
|
3
|
+
import type { ButtonProps } from '../../';
|
|
4
4
|
export interface IconButtonProps extends Omit<ButtonProps, 'aria-label'> {
|
|
5
5
|
/**
|
|
6
6
|
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import { Icon, Button } from '../../
|
|
2
|
+
import { Icon, Button } from '../../';
|
|
3
3
|
const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, variant, ...otherProps }, ref) {
|
|
4
4
|
return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', "aria-label": ariaLabel, testId: testId, ...otherProps },
|
|
5
5
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAkBrC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,gBAClB,SAAS,EACrB,MAAM,EAAE,MAAM,KACV,UAAU;QAEb,QAAQ;QACT,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CAClB,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Input, Label, IconButton, Button } from '../../
|
|
2
|
+
import { Input, Label, IconButton, Button } from '../../';
|
|
3
3
|
import { XCircle } from '../../assets';
|
|
4
4
|
const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
|
|
5
5
|
inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAgEtC,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,MAAM,EACb,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GAAG,OAAO,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EAAE,iFAAiF;AACpG,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,MAAM,kBAAkB,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,CAAA;IAC7D,MAAM,mBAAmB,GAAG,UAAU,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,EAAE,CAAA;IAEnE,OAAO,CACL,4FAEkC,UAAU,+BACf,KAAK,IAAI,KAAK,KAAK,EAAE,iBACnC,MAAM;QAEnB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAElC,mBAAmB;YAClB,CAAC,kBAAkB,IAAI,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,UAAU,2BACW,OAAO,gBAChB,aAAa,EACxB,IAAI,EAAE,oBAAC,OAAO,OAAG,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,EAAE,CAAA;oBACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBAC5B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,IACtD,gBAAgB,CACV,CACV,CAAC;QACH,kBAAkB,IAAI,CACrB,2EAAyC,KAAK,CAAQ,CACvD,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { RatingProps } from '../../';
|
|
4
|
+
export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
|
|
5
|
+
/**
|
|
6
|
+
* A react component to be used as the product title, e.g. a `h1`
|
|
7
|
+
*/
|
|
8
|
+
title: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* A react component to be used as the product label, e.g. a `DiscountBadge`
|
|
11
|
+
*/
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Label for reference.
|
|
15
|
+
*/
|
|
16
|
+
refTag?: string;
|
|
17
|
+
/**
|
|
18
|
+
* A text to be used below the title and the label, such as the product's reference number.
|
|
19
|
+
*/
|
|
20
|
+
refNumber?: string;
|
|
21
|
+
/**
|
|
22
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
23
|
+
*/
|
|
24
|
+
testId?: string;
|
|
25
|
+
/**
|
|
26
|
+
* The current value of the rating, a number from 0 to 5.
|
|
27
|
+
*/
|
|
28
|
+
ratingValue?: number;
|
|
29
|
+
} & Omit<RatingProps, 'testId' | 'onChange' | 'value' | 'title'>;
|
|
30
|
+
declare const ProductTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
|
|
31
|
+
/**
|
|
32
|
+
* A react component to be used as the product title, e.g. a `h1`
|
|
33
|
+
*/
|
|
34
|
+
title: ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* A react component to be used as the product label, e.g. a `DiscountBadge`
|
|
37
|
+
*/
|
|
38
|
+
label?: ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* Label for reference.
|
|
41
|
+
*/
|
|
42
|
+
refTag?: string | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* A text to be used below the title and the label, such as the product's reference number.
|
|
45
|
+
*/
|
|
46
|
+
refNumber?: string | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
49
|
+
*/
|
|
50
|
+
testId?: string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* The current value of the rating, a number from 0 to 5.
|
|
53
|
+
*/
|
|
54
|
+
ratingValue?: number | undefined;
|
|
55
|
+
} & Omit<RatingProps, "title" | "value" | "testId" | "onChange"> & React.RefAttributes<HTMLElement>>;
|
|
56
|
+
export default ProductTitle;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { Rating } from '../../';
|
|
3
|
+
const ProductTitle = forwardRef(function ProductTitle({ title, label, refTag = 'Ref.: ', refNumber, testId = 'fs-product-title', ratingValue, ...otherProps }, ref) {
|
|
4
|
+
return (React.createElement("header", { ref: ref, "data-fs-product-title": true, "data-testid": testId, ...otherProps },
|
|
5
|
+
React.createElement("div", { "data-fs-product-title-header": true },
|
|
6
|
+
title,
|
|
7
|
+
!!label && label),
|
|
8
|
+
(refNumber || ratingValue) && (React.createElement("p", { "data-fs-product-title-addendum": true },
|
|
9
|
+
ratingValue && React.createElement(Rating, { value: ratingValue }),
|
|
10
|
+
refNumber && (React.createElement(React.Fragment, null,
|
|
11
|
+
refTag,
|
|
12
|
+
" ",
|
|
13
|
+
refNumber))))));
|
|
14
|
+
});
|
|
15
|
+
export default ProductTitle;
|
|
16
|
+
//# sourceMappingURL=ProductTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA8B/B,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,KAAK,EACL,KAAK,EACL,MAAM,GAAG,QAAQ,EACjB,SAAS,EACT,MAAM,GAAG,kBAAkB,EAC3B,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,gDAEK,MAAM,KACf,UAAU;QAEd;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,CAAC,SAAS,IAAI,WAAW,CAAC,IAAI,CAC7B;YACG,WAAW,IAAI,oBAAC,MAAM,IAAC,KAAK,EAAE,WAAW,GAAI;YAC7C,SAAS,IAAI,CACZ;gBACG,MAAM;;gBAAG,SAAS,CAClB,CACJ,CACC,CACL,CACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import { IconButton, Input } from '../../
|
|
2
|
+
import { IconButton, Input } from '../../';
|
|
3
3
|
import { Minus, Plus } from '../../assets';
|
|
4
4
|
const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
|
|
5
5
|
const [quantity, setQuantity] = useState(initial ?? min);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,9 +11,9 @@ export interface RatingProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onC
|
|
|
11
11
|
*/
|
|
12
12
|
value: number;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Icon to represent the rating score unit (e.g.: a <Star /> component)
|
|
15
15
|
*/
|
|
16
|
-
icon
|
|
16
|
+
icon?: ReactNode;
|
|
17
17
|
/**
|
|
18
18
|
* Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
|
|
19
19
|
*/
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { forwardRef, useState } from 'react';
|
|
2
2
|
import List from '../../atoms/List';
|
|
3
|
-
import { Icon, IconButton } from '../..';
|
|
3
|
+
import { Icon, IconButton, Star } from '../..';
|
|
4
4
|
const Rating = forwardRef(function Rating({ children, testId = 'fs-rating', length = 5, value = 0, icon, onChange, ...otherProps }, ref) {
|
|
5
5
|
const [hover, setHover] = useState(0);
|
|
6
|
+
const ratingIcon = icon ? icon : React.createElement(Star, null);
|
|
6
7
|
return (React.createElement(List, { ref: ref, "data-fs-rating": true, "data-fs-rating-actionable": typeof onChange === 'function', "data-testid": testId, ...otherProps }, Array.from({ length }).map((_, index) => {
|
|
7
8
|
const tempIndex = index + 1;
|
|
8
9
|
const fillCheck = () => {
|
|
@@ -14,12 +15,12 @@ const Rating = forwardRef(function Rating({ children, testId = 'fs-rating', leng
|
|
|
14
15
|
}
|
|
15
16
|
return 'empty';
|
|
16
17
|
};
|
|
17
|
-
return (React.createElement("li", { key: `rating-${index}`, "data-fs-rating-item": fillCheck(), "data-testid": `${testId}-item` }, onChange ? (React.createElement(IconButton, { "data-fs-rating-button": true, icon:
|
|
18
|
+
return (React.createElement("li", { key: `rating-${index}`, "data-fs-rating-item": fillCheck(), "data-testid": `${testId}-item` }, onChange ? (React.createElement(IconButton, { "data-fs-rating-button": true, icon: ratingIcon, size: "small", "aria-label": "rate", onClick: () => {
|
|
18
19
|
onChange(tempIndex);
|
|
19
20
|
}, onMouseEnter: () => setHover(tempIndex), onMouseLeave: () => setHover(value) })) : (React.createElement(React.Fragment, null,
|
|
20
21
|
React.createElement("div", { "data-fs-rating-icon-wrapper": true },
|
|
21
|
-
React.createElement(Icon, { component:
|
|
22
|
-
React.createElement(Icon, { "data-fs-rating-icon-outline": true, component:
|
|
22
|
+
React.createElement(Icon, { component: ratingIcon })),
|
|
23
|
+
React.createElement(Icon, { "data-fs-rating-icon-outline": true, component: ratingIcon })))));
|
|
23
24
|
})));
|
|
24
25
|
});
|
|
25
26
|
export default Rating;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/molecules/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAInD,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA+
|
|
1
|
+
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/molecules/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAInD,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AA+B9C,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,QAAQ,EACR,MAAM,GAAG,WAAW,EACpB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,OAAG,CAAA;IAEzC,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,uDAEmB,OAAO,QAAQ,KAAK,UAAU,iBAC5C,MAAM,KACf,UAAU,IAEb,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAa,EAAE,EAAE;QAC/C,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAA;QAE3B,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,IAAI,SAAS,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE;gBACjC,OAAO,MAAM,CAAA;aACd;YAED,IAAI,SAAS,GAAG,KAAK,GAAG,CAAC,IAAI,SAAS,GAAG,KAAK,GAAG,CAAC,EAAE;gBAClD,OAAO,SAAS,CAAA;aACjB;YAED,OAAO,OAAO,CAAA;QAChB,CAAC,CAAA;QAED,OAAO,CACL,4BACE,GAAG,EAAE,UAAU,KAAK,EAAE,yBACD,SAAS,EAAE,iBACnB,GAAG,MAAM,OAAO,IAE5B,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,UAAU,mCAET,IAAI,EAAE,UAAU,EAChB,IAAI,EAAC,OAAO,gBACD,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GACnC,CACH,CAAC,CAAC,CAAC,CACF;YACE;gBACE,oBAAC,IAAI,IAAC,SAAS,EAAE,UAAU,GAAI,CAC3B;YACN,oBAAC,IAAI,yCAA6B,SAAS,EAAE,UAAU,GAAI,CAC1D,CACJ,CACE,CACN,CAAA;IACH,CAAC,CAAC,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { AriaAttributes } from 'react';
|
|
3
|
-
import type { PriceProps, SliderProps } from '../../
|
|
3
|
+
import type { PriceProps, SliderProps } from '../../';
|
|
4
4
|
export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
|
|
5
5
|
/**
|
|
6
6
|
* The current use case variant for prices.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react';
|
|
2
|
-
import { Price, Slider, InputField } from '../../
|
|
2
|
+
import { Price, Slider, InputField } from '../../';
|
|
3
3
|
const PriceRange = forwardRef(function PriceRange({ formatter, max, min, step = 1, onChange, onEnd, testId = 'fs-price-range', variant, 'aria-label': ariaLabel, ...otherProps }, ref) {
|
|
4
4
|
const sliderRef = useRef();
|
|
5
5
|
useImperativeHandle(ref, () => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/organisms/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGhF,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/organisms/PriceRange/PriceRange.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.59-alpha.0",
|
|
4
4
|
"module": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
6
6
|
"author": "Emerson Laurentino @emersonlaurentino",
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"node": "16.18.0",
|
|
31
31
|
"yarn": "1.19.1"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "c77d8db1934c7d2c6f7ae9cc8a166477edbfae01"
|
|
34
34
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactNode, ButtonHTMLAttributes } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
|
-
import { Icon, Loader } from '../../
|
|
3
|
+
import { Icon, Loader } from '../../'
|
|
4
4
|
|
|
5
5
|
export type Variant = 'primary' | 'secondary' | 'tertiary'
|
|
6
6
|
export type Size = 'small' | 'regular'
|
|
@@ -61,7 +61,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
|
|
|
61
61
|
},
|
|
62
62
|
ref
|
|
63
63
|
) {
|
|
64
|
-
|
|
65
64
|
return (
|
|
66
65
|
<button
|
|
67
66
|
ref={ref}
|
|
@@ -77,7 +76,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
|
|
|
77
76
|
{loading && (
|
|
78
77
|
<p data-fs-button-loading-label>
|
|
79
78
|
{loadingLabel}
|
|
80
|
-
<Loader
|
|
79
|
+
<Loader
|
|
80
|
+
variant={variant === 'primary' && !inverse ? 'light' : 'dark'}
|
|
81
|
+
/>
|
|
81
82
|
</p>
|
|
82
83
|
)}
|
|
83
84
|
{icon && iconPosition === 'left' && <Icon component={icon} />}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes, PropsWithChildren } from 'react'
|
|
3
|
+
|
|
4
|
+
interface Size {
|
|
5
|
+
width: string
|
|
6
|
+
height: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export type BorderStyle = 'regular' | 'pill' | 'circle'
|
|
10
|
+
|
|
11
|
+
export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
/**
|
|
13
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
14
|
+
*/
|
|
15
|
+
testId?: string
|
|
16
|
+
/**
|
|
17
|
+
* Control whether skeleton should be visible or not.
|
|
18
|
+
*/
|
|
19
|
+
loading?: boolean
|
|
20
|
+
/**
|
|
21
|
+
* Control whether the shimmer effect should be displayed or not.
|
|
22
|
+
*/
|
|
23
|
+
shimmer?: boolean
|
|
24
|
+
/**
|
|
25
|
+
* Specifies the skeleton element size (width, height).
|
|
26
|
+
*/
|
|
27
|
+
size: Size
|
|
28
|
+
/**
|
|
29
|
+
* Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
|
|
30
|
+
*/
|
|
31
|
+
border?: BorderStyle
|
|
32
|
+
/**
|
|
33
|
+
* Custom border radius for skeleton elements.
|
|
34
|
+
*/
|
|
35
|
+
borderRadius?: string
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonProps>>(
|
|
39
|
+
function Skeleton(
|
|
40
|
+
{
|
|
41
|
+
testId = 'fs-skeleton',
|
|
42
|
+
loading = true,
|
|
43
|
+
shimmer = true,
|
|
44
|
+
children,
|
|
45
|
+
size,
|
|
46
|
+
border,
|
|
47
|
+
borderRadius,
|
|
48
|
+
...otherProps
|
|
49
|
+
},
|
|
50
|
+
ref
|
|
51
|
+
) {
|
|
52
|
+
const styles = {
|
|
53
|
+
width: size.width,
|
|
54
|
+
height: size.height,
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return loading ? (
|
|
58
|
+
<div
|
|
59
|
+
ref={ref}
|
|
60
|
+
data-fs-skeleton
|
|
61
|
+
data-testid={testId}
|
|
62
|
+
data-fs-skeleton-border={border ? border : null}
|
|
63
|
+
style={
|
|
64
|
+
borderRadius ? { ...styles, borderRadius: borderRadius } : styles
|
|
65
|
+
}
|
|
66
|
+
{...otherProps}
|
|
67
|
+
>
|
|
68
|
+
{shimmer && <div data-fs-skeleton-shimmer />}
|
|
69
|
+
</div>
|
|
70
|
+
) : (
|
|
71
|
+
<>{children}</>
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
export default Skeleton
|
package/src/index.ts
CHANGED
|
@@ -29,6 +29,8 @@ export { default as Price } from './atoms/Price'
|
|
|
29
29
|
export type { PriceProps } from './atoms/Price'
|
|
30
30
|
export { default as Radio } from './atoms/Radio'
|
|
31
31
|
export type { RadioProps } from './atoms/Radio'
|
|
32
|
+
export { default as Skeleton } from './atoms/Skeleton'
|
|
33
|
+
export type { SkeletonProps } from './atoms/Skeleton'
|
|
32
34
|
export { default as Select } from './atoms/Select'
|
|
33
35
|
export type { SelectProps } from './atoms/Select'
|
|
34
36
|
export { default as Slider } from './atoms/Slider'
|
|
@@ -69,11 +71,7 @@ export type {
|
|
|
69
71
|
DropdownItemProps,
|
|
70
72
|
DropdownMenuProps,
|
|
71
73
|
} from './molecules/Dropdown'
|
|
72
|
-
export {
|
|
73
|
-
default as Gift,
|
|
74
|
-
GiftContent,
|
|
75
|
-
GiftImage,
|
|
76
|
-
} from './molecules/Gift'
|
|
74
|
+
export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
|
|
77
75
|
export type {
|
|
78
76
|
GiftProps,
|
|
79
77
|
GiftContentProps,
|
|
@@ -85,16 +83,12 @@ export { default as LinkButton } from './molecules/LinkButton'
|
|
|
85
83
|
export type { LinkButtonProps } from './molecules/LinkButton'
|
|
86
84
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
|
|
87
85
|
export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
|
|
86
|
+
export { default as ProductTitle } from './molecules/ProductTitle'
|
|
87
|
+
export type { ProductTitleProps } from './molecules/ProductTitle'
|
|
88
88
|
export { default as RadioField } from './molecules/RadioField'
|
|
89
89
|
export type { RadioFieldProps } from './molecules/RadioField'
|
|
90
|
-
export {
|
|
91
|
-
|
|
92
|
-
RadioOption,
|
|
93
|
-
} from './molecules/RadioGroup'
|
|
94
|
-
export type {
|
|
95
|
-
RadioGroupProps,
|
|
96
|
-
RadioOptionProps,
|
|
97
|
-
} from './molecules/RadioGroup'
|
|
90
|
+
export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
|
|
91
|
+
export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
|
|
98
92
|
export { default as Rating } from './molecules/Rating'
|
|
99
93
|
export type { RatingProps } from './molecules/Rating'
|
|
100
94
|
export { default as SelectField } from './molecules/SelectField'
|
|
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react'
|
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
import { useCallback } from 'react'
|
|
4
4
|
|
|
5
|
-
import { Button, Link, Icon, LinkProps } from '../../
|
|
5
|
+
import { Button, Link, Icon, LinkProps } from '../../'
|
|
6
6
|
|
|
7
7
|
import { X } from '../../assets'
|
|
8
8
|
|
|
@@ -33,16 +33,18 @@ export interface AlertProps
|
|
|
33
33
|
onClose?: (event: MouseEvent<HTMLElement>) => void
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
|
37
|
+
{
|
|
38
|
+
testId = 'fs-alert',
|
|
39
|
+
children,
|
|
40
|
+
icon,
|
|
41
|
+
dismissible,
|
|
42
|
+
link,
|
|
43
|
+
onClose,
|
|
44
|
+
...otherProps
|
|
45
|
+
},
|
|
46
|
+
ref
|
|
47
|
+
) {
|
|
46
48
|
const handleClose = useCallback(
|
|
47
49
|
(event: MouseEvent<HTMLElement>) => {
|
|
48
50
|
if (event.defaultPrevented) {
|
|
@@ -62,14 +64,11 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
|
|
|
62
64
|
data-fs-alert-dismissible={dismissible}
|
|
63
65
|
{...otherProps}
|
|
64
66
|
>
|
|
65
|
-
|
|
66
67
|
{icon && <Icon component={icon} />}
|
|
67
68
|
|
|
68
69
|
<p data-fs-alert-content>{children}</p>
|
|
69
70
|
|
|
70
|
-
{link &&
|
|
71
|
-
<Link data-fs-alert-link variant="inline" {...link} />
|
|
72
|
-
)}
|
|
71
|
+
{link && <Link data-fs-alert-link variant="inline" {...link} />}
|
|
73
72
|
|
|
74
73
|
{dismissible && (
|
|
75
74
|
<Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
|
-
import { Button } from '../../
|
|
4
|
-
import type { ButtonProps } from '../../
|
|
3
|
+
import { Button } from '../../'
|
|
4
|
+
import type { ButtonProps } from '../../'
|
|
5
5
|
import { ShoppingCart } from '../../assets'
|
|
6
6
|
|
|
7
7
|
type BuyButtonProps = ButtonProps
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ReactNode, AriaAttributes } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
|
|
4
|
-
import { Icon, Button } from '../../
|
|
5
|
-
import type { ButtonProps } from '../../
|
|
4
|
+
import { Icon, Button } from '../../'
|
|
5
|
+
import type { ButtonProps } from '../../'
|
|
6
6
|
|
|
7
7
|
export interface IconButtonProps extends Omit<ButtonProps, 'aria-label'> {
|
|
8
8
|
/**
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import type { MutableRefObject } from 'react'
|
|
3
3
|
|
|
4
|
-
import { Input, Label, IconButton, Button } from '../../
|
|
5
|
-
import type { InputProps } from '../../
|
|
4
|
+
import { Input, Label, IconButton, Button } from '../../'
|
|
5
|
+
import type { InputProps } from '../../'
|
|
6
6
|
import { XCircle } from '../../assets'
|
|
7
7
|
|
|
8
8
|
type DefaultProps = {
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { forwardRef, HTMLAttributes } from 'react'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
|
|
4
|
+
import { Rating } from '../../'
|
|
5
|
+
import type { RatingProps } from '../../'
|
|
6
|
+
|
|
7
|
+
export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
|
|
8
|
+
/**
|
|
9
|
+
* A react component to be used as the product title, e.g. a `h1`
|
|
10
|
+
*/
|
|
11
|
+
title: ReactNode
|
|
12
|
+
/**
|
|
13
|
+
* A react component to be used as the product label, e.g. a `DiscountBadge`
|
|
14
|
+
*/
|
|
15
|
+
label?: ReactNode
|
|
16
|
+
/**
|
|
17
|
+
* Label for reference.
|
|
18
|
+
*/
|
|
19
|
+
refTag?: string
|
|
20
|
+
/**
|
|
21
|
+
* A text to be used below the title and the label, such as the product's reference number.
|
|
22
|
+
*/
|
|
23
|
+
refNumber?: string
|
|
24
|
+
/**
|
|
25
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
26
|
+
*/
|
|
27
|
+
testId?: string
|
|
28
|
+
/**
|
|
29
|
+
* The current value of the rating, a number from 0 to 5.
|
|
30
|
+
*/
|
|
31
|
+
ratingValue?: number
|
|
32
|
+
} & Omit<RatingProps, 'testId' | 'onChange' | 'value' | 'title'>
|
|
33
|
+
|
|
34
|
+
const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
|
|
35
|
+
function ProductTitle(
|
|
36
|
+
{
|
|
37
|
+
title,
|
|
38
|
+
label,
|
|
39
|
+
refTag = 'Ref.: ',
|
|
40
|
+
refNumber,
|
|
41
|
+
testId = 'fs-product-title',
|
|
42
|
+
ratingValue,
|
|
43
|
+
...otherProps
|
|
44
|
+
},
|
|
45
|
+
ref
|
|
46
|
+
) {
|
|
47
|
+
return (
|
|
48
|
+
<header
|
|
49
|
+
ref={ref}
|
|
50
|
+
data-fs-product-title
|
|
51
|
+
data-testid={testId}
|
|
52
|
+
{...otherProps}
|
|
53
|
+
>
|
|
54
|
+
<div data-fs-product-title-header>
|
|
55
|
+
{title}
|
|
56
|
+
{!!label && label}
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
{(refNumber || ratingValue) && (
|
|
60
|
+
<p data-fs-product-title-addendum>
|
|
61
|
+
{ratingValue && <Rating value={ratingValue} />}
|
|
62
|
+
{refNumber && (
|
|
63
|
+
<>
|
|
64
|
+
{refTag} {refNumber}
|
|
65
|
+
</>
|
|
66
|
+
)}
|
|
67
|
+
</p>
|
|
68
|
+
)}
|
|
69
|
+
</header>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
|
|
74
|
+
export default ProductTitle
|
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
|
|
|
3
3
|
import { HTMLAttributes } from 'react'
|
|
4
4
|
|
|
5
5
|
import List from '../../atoms/List'
|
|
6
|
-
import { Icon, IconButton } from '../..'
|
|
6
|
+
import { Icon, IconButton, Star } from '../..'
|
|
7
7
|
|
|
8
8
|
export interface RatingProps
|
|
9
9
|
extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
|
|
@@ -16,9 +16,9 @@ export interface RatingProps
|
|
|
16
16
|
*/
|
|
17
17
|
value: number
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* Icon to represent the rating score unit (e.g.: a <Star /> component)
|
|
20
20
|
*/
|
|
21
|
-
icon
|
|
21
|
+
icon?: ReactNode
|
|
22
22
|
/**
|
|
23
23
|
* Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
|
|
24
24
|
*/
|
|
@@ -47,6 +47,7 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
|
|
|
47
47
|
ref
|
|
48
48
|
) {
|
|
49
49
|
const [hover, setHover] = useState(0)
|
|
50
|
+
const ratingIcon = icon ? icon : <Star />
|
|
50
51
|
|
|
51
52
|
return (
|
|
52
53
|
<List
|
|
@@ -80,7 +81,7 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
|
|
|
80
81
|
{onChange ? (
|
|
81
82
|
<IconButton
|
|
82
83
|
data-fs-rating-button
|
|
83
|
-
icon={
|
|
84
|
+
icon={ratingIcon}
|
|
84
85
|
size="small"
|
|
85
86
|
aria-label="rate"
|
|
86
87
|
onClick={() => {
|
|
@@ -92,9 +93,9 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
|
|
|
92
93
|
) : (
|
|
93
94
|
<>
|
|
94
95
|
<div data-fs-rating-icon-wrapper>
|
|
95
|
-
<Icon component={
|
|
96
|
+
<Icon component={ratingIcon} />
|
|
96
97
|
</div>
|
|
97
|
-
<Icon data-fs-rating-icon-outline component={
|
|
98
|
+
<Icon data-fs-rating-icon-outline component={ratingIcon} />
|
|
98
99
|
</>
|
|
99
100
|
)}
|
|
100
101
|
</li>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react'
|
|
2
2
|
import type { AriaAttributes } from 'react'
|
|
3
3
|
|
|
4
|
-
import { Price, Slider, InputField } from '../../
|
|
5
|
-
import type { PriceProps, SliderProps } from '../../
|
|
4
|
+
import { Price, Slider, InputField } from '../../'
|
|
5
|
+
import type { PriceProps, SliderProps } from '../../'
|
|
6
6
|
|
|
7
7
|
export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
|
|
8
8
|
/**
|