@faststore/ui 1.11.19 → 1.11.20
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/CHANGELOG.md +9 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/molecules/CartItem/CartItem.d.ts +10 -0
- package/dist/molecules/CartItem/CartItem.js +6 -0
- package/dist/molecules/CartItem/CartItem.js.map +1 -0
- package/dist/molecules/CartItem/CartItemActions.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemActions.js +6 -0
- package/dist/molecules/CartItem/CartItemActions.js.map +1 -0
- package/dist/molecules/CartItem/CartItemContent.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemContent.js +6 -0
- package/dist/molecules/CartItem/CartItemContent.js.map +1 -0
- package/dist/molecules/CartItem/CartItemImage.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemImage.js +6 -0
- package/dist/molecules/CartItem/CartItemImage.js.map +1 -0
- package/dist/molecules/CartItem/CartItemPrices.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemPrices.js +6 -0
- package/dist/molecules/CartItem/CartItemPrices.js.map +1 -0
- package/dist/molecules/CartItem/CartItemSummary.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemSummary.js +6 -0
- package/dist/molecules/CartItem/CartItemSummary.js.map +1 -0
- package/dist/molecules/CartItem/CartItemTitle.d.ts +10 -0
- package/dist/molecules/CartItem/CartItemTitle.js +6 -0
- package/dist/molecules/CartItem/CartItemTitle.js.map +1 -0
- package/dist/molecules/CartItem/index.d.ts +14 -0
- package/dist/molecules/CartItem/index.js +8 -0
- package/dist/molecules/CartItem/index.js.map +1 -0
- package/package.json +3 -3
- package/src/index.ts +19 -0
- package/src/molecules/CartItem/CartItem.test.tsx +79 -0
- package/src/molecules/CartItem/CartItem.tsx +22 -0
- package/src/molecules/CartItem/CartItemActions.tsx +24 -0
- package/src/molecules/CartItem/CartItemContent.tsx +24 -0
- package/src/molecules/CartItem/CartItemImage.tsx +22 -0
- package/src/molecules/CartItem/CartItemPrices.tsx +24 -0
- package/src/molecules/CartItem/CartItemSummary.tsx +24 -0
- package/src/molecules/CartItem/CartItemTitle.tsx +22 -0
- package/src/molecules/CartItem/index.tsx +20 -0
- package/src/molecules/CartItem/stories/CartItem.mdx +79 -0
- package/src/molecules/CartItem/stories/CartItem.stories.tsx +70 -0
- package/src/molecules/QuantitySelector/stories/QuantitySelector.mdx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.11.20](https://github.com/vtex/faststore/compare/v1.11.19...v1.11.20) (2022-09-12)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Refactoring
|
|
10
|
+
|
|
11
|
+
* Extract `CartItem` component from the starter ([#1461](https://github.com/vtex/faststore/issues/1461)) ([ff70925](https://github.com/vtex/faststore/commit/ff70925abc123a9b6c66de248cdaf3541da66d41))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [1.11.19](https://github.com/vtex/faststore/compare/v1.11.18...v1.11.19) (2022-09-12)
|
|
7
16
|
|
|
8
17
|
|
package/dist/index.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCa
|
|
|
48
48
|
export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, ProductCardActionsProps, } from './molecules/ProductCard';
|
|
49
49
|
export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
|
|
50
50
|
export type { CardProps, CardImageProps, CardContentProps, CardActionsProps, } from './molecules/Card';
|
|
51
|
+
export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, CartItemPrices, CartItemSummary, CartItemTitle, } from './molecules/CartItem';
|
|
52
|
+
export type { CartItemProps, CartItemActionsProps, CartItemContentProps, CartItemImageProps, CartItemPricesProps, CartItemSummaryProps, CartItemTitleProps, } from './molecules/CartItem';
|
|
51
53
|
export { default as Bullets } from './molecules/Bullets';
|
|
52
54
|
export type { BulletsProps } from './molecules/Bullets';
|
|
53
55
|
export { default as SearchInput } from './molecules/SearchInput';
|
package/dist/index.js
CHANGED
|
@@ -25,6 +25,7 @@ export { default as OrderSummary } from './molecules/OrderSummary';
|
|
|
25
25
|
export { default as AggregateRating } from './molecules/AggregateRating';
|
|
26
26
|
export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
|
|
27
27
|
export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
|
|
28
|
+
export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, CartItemPrices, CartItemSummary, CartItemTitle, } from './molecules/CartItem';
|
|
28
29
|
export { default as Bullets } from './molecules/Bullets';
|
|
29
30
|
export { default as SearchInput } from './molecules/SearchInput';
|
|
30
31
|
export { default as Carousel } from './molecules/Carousel';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAGxD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAO1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGlE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGlE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAGxE,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,yBAAyB,CAAA;AAQhC,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,kBAAkB,CAAA;AAQzB,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAA;AAW7B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAGxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGpD,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,oBAAoB,CAAA;AAQ3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAGtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAGpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAG3E,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAU1B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAQ7B,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,wBAAwB,CAAA;AAO/B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAO1E,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItem: React.ForwardRefExoticComponent<CartItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CartItem;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItem = forwardRef(function CartItem({ testId = 'store-cart-item', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("article", Object.assign({ ref: ref, "data-fs-cart-item": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItem;
|
|
6
|
+
//# sourceMappingURL=CartItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItem.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CAC1E,EAAE,MAAM,GAAG,iBAAiB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,+CAAS,GAAG,EAAE,GAAG,4CAAiC,MAAM,IAAM,UAAU,GACrE,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface CartItemActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemActions: React.ForwardRefExoticComponent<CartItemActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CartItemActions;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemActions = forwardRef(function CartItemActions({ testId = 'store-cart-item-actions', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("div", Object.assign({ ref: ref, "data-fs-cart-item-actions": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemActions;
|
|
6
|
+
//# sourceMappingURL=CartItemActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemActions.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,MAAM,GAAG,yBAAyB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC/D,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,oDAAyC,MAAM,IAAM,UAAU,GACzE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CartItemContentProps extends HTMLAttributes<HTMLElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemContent: React.ForwardRefExoticComponent<CartItemContentProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
export default CartItemContent;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemContent = forwardRef(function CartItemContent({ testId = 'store-cart-item-content', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("section", Object.assign({ ref: ref, "data-fs-cart-item-content": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemContent;
|
|
6
|
+
//# sourceMappingURL=CartItemContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemContent.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,MAAM,GAAG,yBAAyB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC/D,GAAG;IAEH,OAAO,CACL,+CAAS,GAAG,EAAE,GAAG,oDAAyC,MAAM,IAAM,UAAU,GAC7E,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CartItemImageProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemImage: React.ForwardRefExoticComponent<CartItemImageProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CartItemImage;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemImage = forwardRef(function CartItemImage({ testId = 'store-cart-item-image', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("div", Object.assign({ ref: ref, "data-fs-cart-item-image": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemImage;
|
|
6
|
+
//# sourceMappingURL=CartItemImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemImage.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,aAAa,GAAG,UAAU,CAAqC,SAAS,aAAa,CACzF,EAAE,MAAM,GAAG,uBAAuB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC7D,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,kDAAuC,MAAM,IAAM,UAAU,GACvE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface CartItemPricesProps extends HTMLAttributes<HTMLSpanElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemPrices: React.ForwardRefExoticComponent<CartItemPricesProps & React.RefAttributes<HTMLSpanElement>>;
|
|
10
|
+
export default CartItemPrices;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemPrices = forwardRef(function CartItemPrices({ testId = 'store-cart-item-prices', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("span", Object.assign({ ref: ref, "data-fs-cart-item-prices": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemPrices;
|
|
6
|
+
//# sourceMappingURL=CartItemPrices.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemPrices.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemPrices.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EAAE,MAAM,GAAG,wBAAwB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC9D,GAAG;IAEH,OAAO,CACL,4CAAM,GAAG,EAAE,GAAG,mDAAwC,MAAM,IAAM,UAAU,GACzE,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemSummary: React.ForwardRefExoticComponent<CartItemSummaryProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CartItemSummary;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemSummary = forwardRef(function CartItemSummary({ testId = 'store-cart-item-summary', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("div", Object.assign({ ref: ref, "data-fs-cart-item-summary": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemSummary;
|
|
6
|
+
//# sourceMappingURL=CartItemSummary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemSummary.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,MAAM,GAAG,yBAAyB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC/D,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,oDAAyC,MAAM,IAAM,UAAU,GACzE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CartItemTitleProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
6
|
+
*/
|
|
7
|
+
testId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CartItemTitle: React.ForwardRefExoticComponent<CartItemTitleProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CartItemTitle;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const CartItemTitle = forwardRef(function CartItemTitle({ testId = 'store-cart-item-title', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("div", Object.assign({ ref: ref, "data-fs-cart-item-title": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default CartItemTitle;
|
|
6
|
+
//# sourceMappingURL=CartItemTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartItemTitle.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/CartItemTitle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,aAAa,GAAG,UAAU,CAAqC,SAAS,aAAa,CACzF,EAAE,MAAM,GAAG,uBAAuB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC7D,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,kDAAuC,MAAM,IAAM,UAAU,GACvE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { default } from './CartItem';
|
|
2
|
+
export type { CartItemProps } from './CartItem';
|
|
3
|
+
export { default as CartItemActions } from './CartItemActions';
|
|
4
|
+
export type { CartItemActionsProps } from './CartItemActions';
|
|
5
|
+
export { default as CartItemContent } from './CartItemContent';
|
|
6
|
+
export type { CartItemContentProps } from './CartItemContent';
|
|
7
|
+
export { default as CartItemImage } from './CartItemImage';
|
|
8
|
+
export type { CartItemImageProps } from './CartItemImage';
|
|
9
|
+
export { default as CartItemPrices } from './CartItemPrices';
|
|
10
|
+
export type { CartItemPricesProps } from './CartItemPrices';
|
|
11
|
+
export { default as CartItemSummary } from './CartItemSummary';
|
|
12
|
+
export type { CartItemSummaryProps } from './CartItemSummary';
|
|
13
|
+
export { default as CartItemTitle } from './CartItemTitle';
|
|
14
|
+
export type { CartItemTitleProps } from './CartItemTitle';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default } from './CartItem';
|
|
2
|
+
export { default as CartItemActions } from './CartItemActions';
|
|
3
|
+
export { default as CartItemContent } from './CartItemContent';
|
|
4
|
+
export { default as CartItemImage } from './CartItemImage';
|
|
5
|
+
export { default as CartItemPrices } from './CartItemPrices';
|
|
6
|
+
export { default as CartItemSummary } from './CartItemSummary';
|
|
7
|
+
export { default as CartItemTitle } from './CartItemTitle';
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/CartItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAGpC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.20",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-dom": "^17.0.2"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@faststore/styles": "^1.11.
|
|
60
|
+
"@faststore/styles": "^1.11.20",
|
|
61
61
|
"@size-limit/preset-small-lib": "^7.0.8",
|
|
62
62
|
"@storybook/addon-actions": "^6.4.4",
|
|
63
63
|
"@storybook/addon-docs": "^6.4.4",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"tsdx": "^0.14.1",
|
|
86
86
|
"typescript": "^4.2.4"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "1d30ccc8dbd63167961cf4e5c68599decfd77c10"
|
|
89
89
|
}
|
package/src/index.ts
CHANGED
|
@@ -99,6 +99,25 @@ export type {
|
|
|
99
99
|
CardActionsProps,
|
|
100
100
|
} from './molecules/Card'
|
|
101
101
|
|
|
102
|
+
export {
|
|
103
|
+
default as CartItem,
|
|
104
|
+
CartItemActions,
|
|
105
|
+
CartItemContent,
|
|
106
|
+
CartItemImage,
|
|
107
|
+
CartItemPrices,
|
|
108
|
+
CartItemSummary,
|
|
109
|
+
CartItemTitle,
|
|
110
|
+
} from './molecules/CartItem'
|
|
111
|
+
export type {
|
|
112
|
+
CartItemProps,
|
|
113
|
+
CartItemActionsProps,
|
|
114
|
+
CartItemContentProps,
|
|
115
|
+
CartItemImageProps,
|
|
116
|
+
CartItemPricesProps,
|
|
117
|
+
CartItemSummaryProps,
|
|
118
|
+
CartItemTitleProps,
|
|
119
|
+
} from './molecules/CartItem'
|
|
120
|
+
|
|
102
121
|
export { default as Bullets } from './molecules/Bullets'
|
|
103
122
|
export type { BulletsProps } from './molecules/Bullets'
|
|
104
123
|
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { render } from '@testing-library/react'
|
|
2
|
+
import { axe } from 'jest-axe'
|
|
3
|
+
import React from 'react'
|
|
4
|
+
|
|
5
|
+
import CartItem, {
|
|
6
|
+
CartItemActions,
|
|
7
|
+
CartItemContent,
|
|
8
|
+
CartItemImage,
|
|
9
|
+
CartItemPrices,
|
|
10
|
+
CartItemSummary,
|
|
11
|
+
CartItemTitle,
|
|
12
|
+
} from './'
|
|
13
|
+
|
|
14
|
+
const product = {
|
|
15
|
+
name: 'Apple Magic Mouse',
|
|
16
|
+
imageUrl:
|
|
17
|
+
'https://assets.vtex.app/unsafe/216x216/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190902%2Funsplash-magic-mouse.jpg%3Fv%3D637800136963870000',
|
|
18
|
+
price: {
|
|
19
|
+
listing: 999,
|
|
20
|
+
spot: 950,
|
|
21
|
+
},
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const CartItemTest = () => {
|
|
25
|
+
return (
|
|
26
|
+
<CartItem>
|
|
27
|
+
<CartItemContent>
|
|
28
|
+
<CartItemImage>
|
|
29
|
+
<img alt={product.name} src={product.imageUrl} />
|
|
30
|
+
</CartItemImage>
|
|
31
|
+
|
|
32
|
+
<CartItemSummary>
|
|
33
|
+
<CartItemTitle>{product.name}</CartItemTitle>
|
|
34
|
+
|
|
35
|
+
<CartItemPrices>
|
|
36
|
+
<span>{product.price.listing}</span>
|
|
37
|
+
<span>{product.price.spot}</span>
|
|
38
|
+
</CartItemPrices>
|
|
39
|
+
</CartItemSummary>
|
|
40
|
+
</CartItemContent>
|
|
41
|
+
|
|
42
|
+
<CartItemActions>
|
|
43
|
+
<button>Remove</button>
|
|
44
|
+
|
|
45
|
+
<span>Quantity Selector</span>
|
|
46
|
+
</CartItemActions>
|
|
47
|
+
</CartItem>
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
describe('`CartItem`', () => {
|
|
52
|
+
describe('Data attributes', () => {
|
|
53
|
+
it(`should have the correct format`, () => {
|
|
54
|
+
const testIdToDataAttributeMap = {
|
|
55
|
+
'store-cart-item': 'data-fs-cart-item',
|
|
56
|
+
'store-cart-item-content': 'data-fs-cart-item-content',
|
|
57
|
+
'store-cart-item-image': 'data-fs-cart-item-image',
|
|
58
|
+
'store-cart-item-summary': 'data-fs-cart-item-summary',
|
|
59
|
+
'store-cart-item-title': 'data-fs-cart-item-title',
|
|
60
|
+
'store-cart-item-prices': 'data-fs-cart-item-prices',
|
|
61
|
+
'store-cart-item-actions': 'data-fs-cart-item-actions',
|
|
62
|
+
}
|
|
63
|
+
const { getByTestId } = render(<CartItemTest />)
|
|
64
|
+
|
|
65
|
+
for (const [testId, dataAttribute] of Object.entries(testIdToDataAttributeMap)) {
|
|
66
|
+
expect(getByTestId(testId)).toHaveAttribute(dataAttribute)
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
describe('Accessibility', () => {
|
|
72
|
+
it('should have no violations', async () => {
|
|
73
|
+
const { getByTestId } = render(<CartItemTest />)
|
|
74
|
+
|
|
75
|
+
expect(await axe(getByTestId('store-cart-item'))).toHaveNoViolations()
|
|
76
|
+
expect(await axe(getByTestId('store-cart-item'))).toHaveNoIncompletes()
|
|
77
|
+
})
|
|
78
|
+
})
|
|
79
|
+
})
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItem = forwardRef<HTMLDivElement, CartItemProps>(function CartItem(
|
|
12
|
+
{ testId = 'store-cart-item', children, ...otherProps },
|
|
13
|
+
ref
|
|
14
|
+
) {
|
|
15
|
+
return (
|
|
16
|
+
<article ref={ref} data-fs-cart-item data-testid={testId} {...otherProps}>
|
|
17
|
+
{children}
|
|
18
|
+
</article>
|
|
19
|
+
)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
export default CartItem
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemActions = forwardRef<HTMLDivElement, CartItemActionsProps>(
|
|
12
|
+
function CartItemActions(
|
|
13
|
+
{ testId = 'store-cart-item-actions', children, ...otherProps },
|
|
14
|
+
ref
|
|
15
|
+
) {
|
|
16
|
+
return (
|
|
17
|
+
<div ref={ref} data-fs-cart-item-actions data-testid={testId} {...otherProps}>
|
|
18
|
+
{children}
|
|
19
|
+
</div>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
export default CartItemActions
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react'
|
|
2
|
+
import React, { forwardRef } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemContentProps extends HTMLAttributes<HTMLElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemContent = forwardRef<HTMLElement, CartItemContentProps>(
|
|
12
|
+
function CartItemContent(
|
|
13
|
+
{ testId = 'store-cart-item-content', children, ...otherProps },
|
|
14
|
+
ref
|
|
15
|
+
) {
|
|
16
|
+
return (
|
|
17
|
+
<section ref={ref} data-fs-cart-item-content data-testid={testId} {...otherProps}>
|
|
18
|
+
{children}
|
|
19
|
+
</section>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
export default CartItemContent
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react'
|
|
2
|
+
import React, { forwardRef } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemImageProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemImage = forwardRef<HTMLDivElement, CartItemImageProps>(function CartItemImage(
|
|
12
|
+
{ testId = 'store-cart-item-image', children, ...otherProps },
|
|
13
|
+
ref
|
|
14
|
+
) {
|
|
15
|
+
return (
|
|
16
|
+
<div ref={ref} data-fs-cart-item-image data-testid={testId} {...otherProps}>
|
|
17
|
+
{children}
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
export default CartItemImage
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemPricesProps extends HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemPrices = forwardRef<HTMLSpanElement, CartItemPricesProps>(
|
|
12
|
+
function CartItemPrices(
|
|
13
|
+
{ testId = 'store-cart-item-prices', children, ...otherProps },
|
|
14
|
+
ref
|
|
15
|
+
) {
|
|
16
|
+
return (
|
|
17
|
+
<span ref={ref} data-fs-cart-item-prices data-testid={testId} {...otherProps}>
|
|
18
|
+
{children}
|
|
19
|
+
</span>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
export default CartItemPrices
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemSummary = forwardRef<HTMLDivElement, CartItemSummaryProps>(
|
|
12
|
+
function CartItemSummary(
|
|
13
|
+
{ testId = 'store-cart-item-summary', children, ...otherProps },
|
|
14
|
+
ref
|
|
15
|
+
) {
|
|
16
|
+
return (
|
|
17
|
+
<div ref={ref} data-fs-cart-item-summary data-testid={testId} {...otherProps}>
|
|
18
|
+
{children}
|
|
19
|
+
</div>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
export default CartItemSummary
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react'
|
|
2
|
+
import React, { forwardRef } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CartItemTitleProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const CartItemTitle = forwardRef<HTMLDivElement, CartItemTitleProps>(function CartItemTitle(
|
|
12
|
+
{ testId = 'store-cart-item-title', children, ...otherProps },
|
|
13
|
+
ref
|
|
14
|
+
) {
|
|
15
|
+
return (
|
|
16
|
+
<div ref={ref} data-fs-cart-item-title data-testid={testId} {...otherProps}>
|
|
17
|
+
{children}
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
export default CartItemTitle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export { default } from './CartItem'
|
|
2
|
+
export type { CartItemProps } from './CartItem'
|
|
3
|
+
|
|
4
|
+
export { default as CartItemActions } from './CartItemActions'
|
|
5
|
+
export type { CartItemActionsProps } from './CartItemActions'
|
|
6
|
+
|
|
7
|
+
export { default as CartItemContent } from './CartItemContent'
|
|
8
|
+
export type { CartItemContentProps } from './CartItemContent'
|
|
9
|
+
|
|
10
|
+
export { default as CartItemImage } from './CartItemImage'
|
|
11
|
+
export type { CartItemImageProps } from './CartItemImage'
|
|
12
|
+
|
|
13
|
+
export { default as CartItemPrices } from './CartItemPrices'
|
|
14
|
+
export type { CartItemPricesProps } from './CartItemPrices'
|
|
15
|
+
|
|
16
|
+
export { default as CartItemSummary } from './CartItemSummary'
|
|
17
|
+
export type { CartItemSummaryProps } from './CartItemSummary'
|
|
18
|
+
|
|
19
|
+
export { default as CartItemTitle } from './CartItemTitle'
|
|
20
|
+
export type { CartItemTitleProps } from './CartItemTitle'
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { ArgsTable, Canvas, Props, Story } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
import CartItem, {
|
|
4
|
+
CartItemActions,
|
|
5
|
+
CartItemContent,
|
|
6
|
+
CartItemImage,
|
|
7
|
+
CartItemPrices,
|
|
8
|
+
CartItemSummary,
|
|
9
|
+
CartItemTitle,
|
|
10
|
+
} from '../'
|
|
11
|
+
|
|
12
|
+
# Cart Item
|
|
13
|
+
|
|
14
|
+
<Canvas>
|
|
15
|
+
<Story id="molecules-cartitem--default" />
|
|
16
|
+
</Canvas>
|
|
17
|
+
|
|
18
|
+
## Components
|
|
19
|
+
|
|
20
|
+
The `CartItem` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
|
|
21
|
+
|
|
22
|
+
- `CartItem`: the wrapper component;
|
|
23
|
+
- `CartItemContent`: the wrapper component for the image and summary;
|
|
24
|
+
- `CartItemImage`: the wrapper component for the content's image;
|
|
25
|
+
- `CartItemSummary`: the wrapper component for the title and prices;
|
|
26
|
+
- `CartItemTitle`: the wrapper component for the title;
|
|
27
|
+
- `CartItemPrices`: the wrapper component for the prices;
|
|
28
|
+
- `CartItemActions`: the wrapper component for the remove from cart button and quantity selector;
|
|
29
|
+
|
|
30
|
+
## Props
|
|
31
|
+
|
|
32
|
+
All CartItem-related components support all attributes also supported by the `<div>` tag.
|
|
33
|
+
|
|
34
|
+
### `CartItem`
|
|
35
|
+
|
|
36
|
+
<ArgsTable of={CartItem} />
|
|
37
|
+
|
|
38
|
+
### `CartItemContent`
|
|
39
|
+
|
|
40
|
+
<ArgsTable of={CartItemContent} />
|
|
41
|
+
|
|
42
|
+
### `CartItemImage`
|
|
43
|
+
|
|
44
|
+
<ArgsTable of={CartItemImage} />
|
|
45
|
+
|
|
46
|
+
### `CartItemSummary`
|
|
47
|
+
|
|
48
|
+
<ArgsTable of={CartItemSummary} />
|
|
49
|
+
|
|
50
|
+
### `CartItemTitle`
|
|
51
|
+
|
|
52
|
+
<ArgsTable of={CartItemTitle} />
|
|
53
|
+
|
|
54
|
+
### `CartItemPrices`
|
|
55
|
+
|
|
56
|
+
<ArgsTable of={CartItemPrices} />
|
|
57
|
+
|
|
58
|
+
### `CartItemActions`
|
|
59
|
+
|
|
60
|
+
<ArgsTable of={CartItemActions} />
|
|
61
|
+
|
|
62
|
+
## CSS Selectors
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
[data-fs-cart-item] {
|
|
66
|
+
}
|
|
67
|
+
[data-fs-cart-item-content] {
|
|
68
|
+
}
|
|
69
|
+
[data-fs-cart-item-image] {
|
|
70
|
+
}
|
|
71
|
+
[data-fs-cart-item-summary] {
|
|
72
|
+
}
|
|
73
|
+
[data-fs-cart-item-title] {
|
|
74
|
+
}
|
|
75
|
+
[data-fs-cart-item-prices] {
|
|
76
|
+
}
|
|
77
|
+
[data-fs-cart-item-actions] {
|
|
78
|
+
}
|
|
79
|
+
```
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import CartItem, {
|
|
4
|
+
CartItemActions,
|
|
5
|
+
CartItemContent,
|
|
6
|
+
CartItemImage,
|
|
7
|
+
CartItemPrices,
|
|
8
|
+
CartItemSummary,
|
|
9
|
+
CartItemTitle,
|
|
10
|
+
} from '../'
|
|
11
|
+
import { Button, Price, QuantitySelector } from '../../../'
|
|
12
|
+
import mdx from './CartItem.mdx'
|
|
13
|
+
|
|
14
|
+
import type { Meta, Story } from '@storybook/react'
|
|
15
|
+
import type { CartItemProps } from '../'
|
|
16
|
+
|
|
17
|
+
const product = {
|
|
18
|
+
name: 'Apple Magic Mouse',
|
|
19
|
+
imageUrl:
|
|
20
|
+
'https://assets.vtex.app/unsafe/216x216/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190902%2Funsplash-magic-mouse.jpg%3Fv%3D637800136963870000',
|
|
21
|
+
price: {
|
|
22
|
+
listing: 999,
|
|
23
|
+
spot: 950,
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const CartItemTemplate: Story<CartItemProps> = ({ testId }) => {
|
|
28
|
+
return (
|
|
29
|
+
<CartItem testId={testId}>
|
|
30
|
+
<CartItemContent>
|
|
31
|
+
<CartItemImage>
|
|
32
|
+
<img alt={product.name} src={product.imageUrl} />
|
|
33
|
+
</CartItemImage>
|
|
34
|
+
|
|
35
|
+
<CartItemSummary>
|
|
36
|
+
<CartItemTitle>{product.name}</CartItemTitle>
|
|
37
|
+
|
|
38
|
+
<CartItemPrices>
|
|
39
|
+
<Price variant="listing" value={product.price.listing} />
|
|
40
|
+
<Price variant="spot" value={product.price.spot} />
|
|
41
|
+
</CartItemPrices>
|
|
42
|
+
</CartItemSummary>
|
|
43
|
+
</CartItemContent>
|
|
44
|
+
|
|
45
|
+
<CartItemActions>
|
|
46
|
+
<Button>Remove</Button>
|
|
47
|
+
|
|
48
|
+
<QuantitySelector
|
|
49
|
+
quantity={1}
|
|
50
|
+
leftButtonProps={{ icon: <span>-</span> }}
|
|
51
|
+
rightButtonProps={{ icon: <span>+</span> }}
|
|
52
|
+
inputProps={{ readOnly: true }}
|
|
53
|
+
/>
|
|
54
|
+
</CartItemActions>
|
|
55
|
+
</CartItem>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export const Default = CartItemTemplate.bind({})
|
|
60
|
+
|
|
61
|
+
Default.storyName = 'CartItem'
|
|
62
|
+
|
|
63
|
+
export default {
|
|
64
|
+
title: 'Molecules/CartItem',
|
|
65
|
+
parameters: {
|
|
66
|
+
docs: {
|
|
67
|
+
page: mdx,
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
} as Meta
|