@faststore/components 2.0.101-alpha.0 → 2.0.102-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/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/molecules/OrderSummary/OrderSummary.d.ts +35 -0
- package/dist/molecules/OrderSummary/OrderSummary.js +16 -0
- package/dist/molecules/OrderSummary/OrderSummary.js.map +1 -0
- package/dist/molecules/OrderSummary/index.d.ts +2 -0
- package/dist/molecules/OrderSummary/index.js +2 -0
- package/dist/molecules/OrderSummary/index.js.map +1 -0
- package/dist/organisms/CartSidebar/CartSidebar.d.ts +40 -0
- package/dist/organisms/CartSidebar/CartSidebar.js +18 -0
- package/dist/organisms/CartSidebar/CartSidebar.js.map +1 -0
- package/dist/organisms/CartSidebar/CartSidebarFooter.d.ts +5 -0
- package/dist/organisms/CartSidebar/CartSidebarFooter.js +6 -0
- package/dist/organisms/CartSidebar/CartSidebarFooter.js.map +1 -0
- package/dist/organisms/CartSidebar/CartSidebarList.d.ts +5 -0
- package/dist/organisms/CartSidebar/CartSidebarList.js +7 -0
- package/dist/organisms/CartSidebar/CartSidebarList.js.map +1 -0
- package/dist/organisms/CartSidebar/index.d.ts +4 -0
- package/dist/organisms/CartSidebar/index.js +4 -0
- package/dist/organisms/CartSidebar/index.js.map +1 -0
- package/dist/organisms/SlideOver/SlideOver.js +1 -1
- package/dist/organisms/SlideOver/SlideOver.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +9 -0
- package/src/molecules/OrderSummary/OrderSummary.tsx +110 -0
- package/src/molecules/OrderSummary/index.tsx +2 -0
- package/src/organisms/CartSidebar/CartSidebar.tsx +95 -0
- package/src/organisms/CartSidebar/CartSidebarFooter.tsx +7 -0
- package/src/organisms/CartSidebar/CartSidebarList.tsx +9 -0
- package/src/organisms/CartSidebar/index.ts +4 -0
- package/src/organisms/SlideOver/SlideOver.tsx +1 -0
package/dist/index.d.ts
CHANGED
|
@@ -55,6 +55,8 @@ export { default as LinkButton } from './molecules/LinkButton';
|
|
|
55
55
|
export type { LinkButtonProps } from './molecules/LinkButton';
|
|
56
56
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
|
|
57
57
|
export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
|
|
58
|
+
export { default as OrderSummary } from './molecules/OrderSummary';
|
|
59
|
+
export type { OrderSummaryProps } from './molecules/OrderSummary';
|
|
58
60
|
export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
|
|
59
61
|
export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, } from './molecules/ProductCard';
|
|
60
62
|
export { default as ProductTitle } from './molecules/ProductTitle';
|
|
@@ -95,6 +97,8 @@ export { default as ToggleField } from './molecules/ToggleField';
|
|
|
95
97
|
export type { ToggleFieldProps } from './molecules/ToggleField';
|
|
96
98
|
export { default as QuantitySelector } from './molecules/QuantitySelector';
|
|
97
99
|
export type { QuantitySelectorProps } from './molecules/QuantitySelector';
|
|
100
|
+
export { default as CartSidebar, CartSidebarList, CartSidebarFooter, } from './organisms/CartSidebar';
|
|
101
|
+
export type { CartSidebarProps } from './organisms/CartSidebar';
|
|
98
102
|
export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider, } from './organisms/Filter';
|
|
99
103
|
export type { FilterFacetBooleanItemProps, FilterFacetRangeProps, FilterFacetsProps, FilterProps, FilterSliderProps, } from './organisms/Filter';
|
|
100
104
|
export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
|
package/dist/index.js
CHANGED
|
@@ -31,6 +31,7 @@ export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
|
|
|
31
31
|
export { default as InputField } from './molecules/InputField';
|
|
32
32
|
export { default as LinkButton } from './molecules/LinkButton';
|
|
33
33
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
|
|
34
|
+
export { default as OrderSummary } from './molecules/OrderSummary';
|
|
34
35
|
export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
|
|
35
36
|
export { default as ProductTitle } from './molecules/ProductTitle';
|
|
36
37
|
export { default as RadioField } from './molecules/RadioField';
|
|
@@ -53,6 +54,7 @@ export { default as Toggle } from './molecules/Toggle';
|
|
|
53
54
|
export { default as ToggleField } from './molecules/ToggleField';
|
|
54
55
|
export { default as QuantitySelector } from './molecules/QuantitySelector';
|
|
55
56
|
// Organisms
|
|
57
|
+
export { default as CartSidebar, CartSidebarList, CartSidebarFooter, } from './organisms/CartSidebar';
|
|
56
58
|
export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider, } from './organisms/Filter';
|
|
57
59
|
export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
|
|
58
60
|
export { default as OutOfStock } from './organisms/OutOfStock';
|
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":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
6
|
+
* testing-library, and jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Label for the subtotal value of the order. Will only show if subtotalValue is provided.
|
|
11
|
+
*/
|
|
12
|
+
subtotalLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Subtotal value of the order. If provided, subtotal label and value will be shown.
|
|
15
|
+
*/
|
|
16
|
+
subtotalValue?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Label for the discount value for the order. Will only show if discountValue is provided.
|
|
19
|
+
*/
|
|
20
|
+
discountLabel?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Discount value for the order. If provided, discount label and value will be shown.
|
|
23
|
+
*/
|
|
24
|
+
discountValue?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Label for the total value of the order.
|
|
27
|
+
*/
|
|
28
|
+
totalLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Total value of the order.
|
|
31
|
+
*/
|
|
32
|
+
totalValue?: string;
|
|
33
|
+
}
|
|
34
|
+
declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps & React.RefAttributes<HTMLUListElement>>;
|
|
35
|
+
export default OrderSummary;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { List } from '../../';
|
|
3
|
+
const OrderSummary = forwardRef(function OrderSummary({ testId = 'fs-order-summary', subtotalLabel, subtotalValue, discountLabel = 'Discount', discountValue, totalLabel = 'Total', totalValue, ...otherProps }, ref) {
|
|
4
|
+
return (React.createElement(List, { ref: ref, "data-fs-order-summary": true, "data-testid": testId, ...otherProps },
|
|
5
|
+
subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
|
|
6
|
+
React.createElement("span", { "data-fs-order-summary-subtotal-label": true, "data-testid": `${testId}-subtotal-label` }, subtotalLabel),
|
|
7
|
+
React.createElement("span", { "data-fs-order-summary-subtotal-value": true, "data-testid": `${testId}-subtotal-value` }, subtotalValue))) : null,
|
|
8
|
+
discountValue ? (React.createElement("li", { "data-fs-order-summary-discount": true },
|
|
9
|
+
React.createElement("span", { "data-fs-order-summary-discount-label": true, "data-testid": `${testId}-discount-label` }, discountLabel),
|
|
10
|
+
React.createElement("span", { "data-fs-order-summary-discount-value": true, "data-testid": `${testId}-discount-value` }, discountValue))) : null,
|
|
11
|
+
React.createElement("li", { "data-fs-order-summary-total": true },
|
|
12
|
+
React.createElement("span", { "data-fs-order-summary-total-label": true, "data-testid": `${testId}-total-label` }, totalLabel),
|
|
13
|
+
React.createElement("span", { "data-fs-order-summary-total-value": true, "data-testid": `${testId}-total-value` }, totalValue))));
|
|
14
|
+
});
|
|
15
|
+
export default OrderSummary;
|
|
16
|
+
//# sourceMappingURL=OrderSummary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkC7B,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,kBAAkB,EAC3B,aAAa,EACb,aAAa,EACb,aAAa,GAAG,UAAU,EAC1B,aAAa,EACb,UAAU,GAAG,OAAO,EACpB,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,gDAEK,MAAM,KACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver';
|
|
4
|
+
export interface CartSidebarProps {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
7
|
+
* testing-library, and jest).
|
|
8
|
+
*/
|
|
9
|
+
testId?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Title for the CartSidebar component.
|
|
12
|
+
*/
|
|
13
|
+
title?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Represents the side that the CartSidebar comes from.
|
|
16
|
+
*/
|
|
17
|
+
direction?: SlideOverDirection;
|
|
18
|
+
/**
|
|
19
|
+
* Represents the size of the CartSidebar.
|
|
20
|
+
*/
|
|
21
|
+
size?: SlideOverWidthSize;
|
|
22
|
+
/**
|
|
23
|
+
* Total of item in the Cart.
|
|
24
|
+
*/
|
|
25
|
+
totalItems: number;
|
|
26
|
+
/**
|
|
27
|
+
* A React component that will be rendered as an icon on the Alert component.
|
|
28
|
+
*/
|
|
29
|
+
alertIcon?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* The content for Alert component.
|
|
32
|
+
*/
|
|
33
|
+
alertText?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Function called when Close Button is clicked.
|
|
36
|
+
*/
|
|
37
|
+
onClose: () => void;
|
|
38
|
+
}
|
|
39
|
+
declare function CartSidebar({ testId, title, size, direction, totalItems, children, alertIcon, alertText, onClose, }: PropsWithChildren<CartSidebarProps>): JSX.Element;
|
|
40
|
+
export default CartSidebar;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Alert, Badge, SlideOver, SlideOverHeader, useFadeEffect, useUI, } from '../../';
|
|
3
|
+
function CartSidebar({ testId = 'fs-cart-sidebar', title = 'Your Cart', size = 'partial', direction = 'rightSide', totalItems, children, alertIcon, alertText, onClose, }) {
|
|
4
|
+
const { fade, fadeOut } = useFadeEffect();
|
|
5
|
+
const { closeCart } = useUI();
|
|
6
|
+
return (React.createElement(SlideOver, { "data-fs-cart-sidebar": true, isOpen: true, fade: fade, onDismiss: fadeOut, size: size, direction: direction, onTransitionEnd: () => fade === 'out' && closeCart(), testId: testId },
|
|
7
|
+
React.createElement(SlideOverHeader, { closeBtnProps: { testId: 'fs-cart-sidebar-button-close' }, onClose: () => {
|
|
8
|
+
onClose();
|
|
9
|
+
fadeOut();
|
|
10
|
+
} },
|
|
11
|
+
React.createElement("h2", { "data-fs-cart-sidebar-title": true },
|
|
12
|
+
title,
|
|
13
|
+
React.createElement(Badge, { variant: "info" }, totalItems))),
|
|
14
|
+
alertText && React.createElement(Alert, { icon: alertIcon }, alertText),
|
|
15
|
+
children));
|
|
16
|
+
}
|
|
17
|
+
export default CartSidebar;
|
|
18
|
+
//# sourceMappingURL=CartSidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartSidebar.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,eAAe,EACf,aAAa,EACb,KAAK,GACN,MAAM,QAAQ,CAAA;AAwCf,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,WAAW,EACvB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,GAC6B;IACpC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,SAAS,kCAER,MAAM,QACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,SAAS,EAAE,EACpD,MAAM,EAAE,MAAM;QAEd,oBAAC,eAAe,IACd,aAAa,EAAE,EAAE,MAAM,EAAE,8BAA8B,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,CAAA;YACX,CAAC;YAED;gBACG,KAAK;gBACN,oBAAC,KAAK,IAAC,OAAO,EAAC,MAAM,IAAE,UAAU,CAAS,CACvC,CACW;QAEjB,SAAS,IAAI,oBAAC,KAAK,IAAC,IAAI,EAAE,SAAS,IAAG,SAAS,CAAS;QACxD,QAAQ,CACC,CACb,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartSidebarFooter.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebarFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAA2B;IAC9D,OAAO,uEAAqC,QAAQ,CAAU,CAAA;AAChE,CAAC;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { List } from '../../';
|
|
3
|
+
function CartSidebarList({ children }) {
|
|
4
|
+
return React.createElement(List, { "data-fs-cart-sidebar-list": true }, children);
|
|
5
|
+
}
|
|
6
|
+
export default CartSidebarList;
|
|
7
|
+
//# sourceMappingURL=CartSidebarList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartSidebarList.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,SAAS,eAAe,CAAC,EAAE,QAAQ,EAA2B;IAC5D,OAAO,oBAAC,IAAI,yCAA4B,QAAQ,CAAQ,CAAA;AAC1D,CAAC;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Modal } from '../../';
|
|
3
3
|
function SlideOver({ isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, onDismiss, testId = 'fs-slide-over', ...otherProps }) {
|
|
4
|
-
return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, ...otherProps }, children));
|
|
4
|
+
return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, testId: testId, ...otherProps }, children));
|
|
5
5
|
}
|
|
6
6
|
export default SlideOver;
|
|
7
7
|
//# sourceMappingURL=SlideOver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.102-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": "c9841c86822020c65161193647edf280cd765efa"
|
|
34
34
|
}
|
package/src/index.ts
CHANGED
|
@@ -95,6 +95,8 @@ export { default as LinkButton } from './molecules/LinkButton'
|
|
|
95
95
|
export type { LinkButtonProps } from './molecules/LinkButton'
|
|
96
96
|
export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
|
|
97
97
|
export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
|
|
98
|
+
export { default as OrderSummary } from './molecules/OrderSummary'
|
|
99
|
+
export type { OrderSummaryProps } from './molecules/OrderSummary'
|
|
98
100
|
export {
|
|
99
101
|
default as ProductCard,
|
|
100
102
|
ProductCardImage,
|
|
@@ -189,6 +191,13 @@ export { default as QuantitySelector } from './molecules/QuantitySelector'
|
|
|
189
191
|
export type { QuantitySelectorProps } from './molecules/QuantitySelector'
|
|
190
192
|
|
|
191
193
|
// Organisms
|
|
194
|
+
export {
|
|
195
|
+
default as CartSidebar,
|
|
196
|
+
CartSidebarList,
|
|
197
|
+
CartSidebarFooter,
|
|
198
|
+
} from './organisms/CartSidebar'
|
|
199
|
+
export type { CartSidebarProps } from './organisms/CartSidebar'
|
|
200
|
+
|
|
192
201
|
export {
|
|
193
202
|
default as Filter,
|
|
194
203
|
FilterFacetBoolean,
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
import { List } from '../../'
|
|
5
|
+
|
|
6
|
+
export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
|
|
7
|
+
/**
|
|
8
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
9
|
+
* testing-library, and jest).
|
|
10
|
+
*/
|
|
11
|
+
testId?: string
|
|
12
|
+
/**
|
|
13
|
+
* Label for the subtotal value of the order. Will only show if subtotalValue is provided.
|
|
14
|
+
*/
|
|
15
|
+
subtotalLabel?: string
|
|
16
|
+
/**
|
|
17
|
+
* Subtotal value of the order. If provided, subtotal label and value will be shown.
|
|
18
|
+
*/
|
|
19
|
+
subtotalValue?: string
|
|
20
|
+
/**
|
|
21
|
+
* Label for the discount value for the order. Will only show if discountValue is provided.
|
|
22
|
+
*/
|
|
23
|
+
discountLabel?: string
|
|
24
|
+
/**
|
|
25
|
+
* Discount value for the order. If provided, discount label and value will be shown.
|
|
26
|
+
*/
|
|
27
|
+
discountValue?: string
|
|
28
|
+
/**
|
|
29
|
+
* Label for the total value of the order.
|
|
30
|
+
*/
|
|
31
|
+
totalLabel?: string
|
|
32
|
+
/**
|
|
33
|
+
* Total value of the order.
|
|
34
|
+
*/
|
|
35
|
+
totalValue?: string
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
|
|
39
|
+
function OrderSummary(
|
|
40
|
+
{
|
|
41
|
+
testId = 'fs-order-summary',
|
|
42
|
+
subtotalLabel,
|
|
43
|
+
subtotalValue,
|
|
44
|
+
discountLabel = 'Discount',
|
|
45
|
+
discountValue,
|
|
46
|
+
totalLabel = 'Total',
|
|
47
|
+
totalValue,
|
|
48
|
+
...otherProps
|
|
49
|
+
},
|
|
50
|
+
ref
|
|
51
|
+
) {
|
|
52
|
+
return (
|
|
53
|
+
<List
|
|
54
|
+
ref={ref}
|
|
55
|
+
data-fs-order-summary
|
|
56
|
+
data-testid={testId}
|
|
57
|
+
{...otherProps}
|
|
58
|
+
>
|
|
59
|
+
{subtotalValue ? (
|
|
60
|
+
<li data-fs-order-summary-subtotal>
|
|
61
|
+
<span
|
|
62
|
+
data-fs-order-summary-subtotal-label
|
|
63
|
+
data-testid={`${testId}-subtotal-label`}
|
|
64
|
+
>
|
|
65
|
+
{subtotalLabel}
|
|
66
|
+
</span>
|
|
67
|
+
<span
|
|
68
|
+
data-fs-order-summary-subtotal-value
|
|
69
|
+
data-testid={`${testId}-subtotal-value`}
|
|
70
|
+
>
|
|
71
|
+
{subtotalValue}
|
|
72
|
+
</span>
|
|
73
|
+
</li>
|
|
74
|
+
) : null}
|
|
75
|
+
{discountValue ? (
|
|
76
|
+
<li data-fs-order-summary-discount>
|
|
77
|
+
<span
|
|
78
|
+
data-fs-order-summary-discount-label
|
|
79
|
+
data-testid={`${testId}-discount-label`}
|
|
80
|
+
>
|
|
81
|
+
{discountLabel}
|
|
82
|
+
</span>
|
|
83
|
+
<span
|
|
84
|
+
data-fs-order-summary-discount-value
|
|
85
|
+
data-testid={`${testId}-discount-value`}
|
|
86
|
+
>
|
|
87
|
+
{discountValue}
|
|
88
|
+
</span>
|
|
89
|
+
</li>
|
|
90
|
+
) : null}
|
|
91
|
+
<li data-fs-order-summary-total>
|
|
92
|
+
<span
|
|
93
|
+
data-fs-order-summary-total-label
|
|
94
|
+
data-testid={`${testId}-total-label`}
|
|
95
|
+
>
|
|
96
|
+
{totalLabel}
|
|
97
|
+
</span>
|
|
98
|
+
<span
|
|
99
|
+
data-fs-order-summary-total-value
|
|
100
|
+
data-testid={`${testId}-total-value`}
|
|
101
|
+
>
|
|
102
|
+
{totalValue}
|
|
103
|
+
</span>
|
|
104
|
+
</li>
|
|
105
|
+
</List>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
|
|
110
|
+
export default OrderSummary
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React, { PropsWithChildren } from 'react'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
Alert,
|
|
6
|
+
Badge,
|
|
7
|
+
SlideOver,
|
|
8
|
+
SlideOverHeader,
|
|
9
|
+
useFadeEffect,
|
|
10
|
+
useUI,
|
|
11
|
+
} from '../../'
|
|
12
|
+
|
|
13
|
+
import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
|
|
14
|
+
|
|
15
|
+
export interface CartSidebarProps {
|
|
16
|
+
/**
|
|
17
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
18
|
+
* testing-library, and jest).
|
|
19
|
+
*/
|
|
20
|
+
testId?: string
|
|
21
|
+
/**
|
|
22
|
+
* Title for the CartSidebar component.
|
|
23
|
+
*/
|
|
24
|
+
title?: string
|
|
25
|
+
/**
|
|
26
|
+
* Represents the side that the CartSidebar comes from.
|
|
27
|
+
*/
|
|
28
|
+
direction?: SlideOverDirection
|
|
29
|
+
/**
|
|
30
|
+
* Represents the size of the CartSidebar.
|
|
31
|
+
*/
|
|
32
|
+
size?: SlideOverWidthSize
|
|
33
|
+
/**
|
|
34
|
+
* Total of item in the Cart.
|
|
35
|
+
*/
|
|
36
|
+
totalItems: number
|
|
37
|
+
/**
|
|
38
|
+
* A React component that will be rendered as an icon on the Alert component.
|
|
39
|
+
*/
|
|
40
|
+
alertIcon?: ReactNode
|
|
41
|
+
/**
|
|
42
|
+
* The content for Alert component.
|
|
43
|
+
*/
|
|
44
|
+
alertText?: string
|
|
45
|
+
/**
|
|
46
|
+
* Function called when Close Button is clicked.
|
|
47
|
+
*/
|
|
48
|
+
onClose: () => void
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function CartSidebar({
|
|
52
|
+
testId = 'fs-cart-sidebar',
|
|
53
|
+
title = 'Your Cart',
|
|
54
|
+
size = 'partial',
|
|
55
|
+
direction = 'rightSide',
|
|
56
|
+
totalItems,
|
|
57
|
+
children,
|
|
58
|
+
alertIcon,
|
|
59
|
+
alertText,
|
|
60
|
+
onClose,
|
|
61
|
+
}: PropsWithChildren<CartSidebarProps>) {
|
|
62
|
+
const { fade, fadeOut } = useFadeEffect()
|
|
63
|
+
const { closeCart } = useUI()
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<SlideOver
|
|
67
|
+
data-fs-cart-sidebar
|
|
68
|
+
isOpen
|
|
69
|
+
fade={fade}
|
|
70
|
+
onDismiss={fadeOut}
|
|
71
|
+
size={size}
|
|
72
|
+
direction={direction}
|
|
73
|
+
onTransitionEnd={() => fade === 'out' && closeCart()}
|
|
74
|
+
testId={testId}
|
|
75
|
+
>
|
|
76
|
+
<SlideOverHeader
|
|
77
|
+
closeBtnProps={{ testId: 'fs-cart-sidebar-button-close' }}
|
|
78
|
+
onClose={() => {
|
|
79
|
+
onClose()
|
|
80
|
+
fadeOut()
|
|
81
|
+
}}
|
|
82
|
+
>
|
|
83
|
+
<h2 data-fs-cart-sidebar-title>
|
|
84
|
+
{title}
|
|
85
|
+
<Badge variant="info">{totalItems}</Badge>
|
|
86
|
+
</h2>
|
|
87
|
+
</SlideOverHeader>
|
|
88
|
+
|
|
89
|
+
{alertText && <Alert icon={alertIcon}>{alertText}</Alert>}
|
|
90
|
+
{children}
|
|
91
|
+
</SlideOver>
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default CartSidebar
|