@faststore/ui 1.8.16 → 1.8.19
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 +27 -0
- package/dist/index.d.ts +4 -2
- package/dist/{organisms → molecules}/Card/Card.d.ts +0 -0
- package/dist/{organisms → molecules}/Card/CardActions.d.ts +0 -0
- package/dist/{organisms → molecules}/Card/CardContent.d.ts +0 -0
- package/dist/{organisms → molecules}/Card/CardImage.d.ts +0 -0
- package/dist/{organisms → molecules}/Card/index.d.ts +0 -0
- package/dist/{organisms → molecules}/Card/stories/Card.stories.d.ts +0 -0
- package/dist/molecules/ProductCard/ProductCard.d.ts +11 -0
- package/dist/molecules/ProductCard/ProductCardActions.d.ts +10 -0
- package/dist/molecules/ProductCard/ProductCardContent.d.ts +10 -0
- package/dist/molecules/ProductCard/ProductCardImage.d.ts +10 -0
- package/dist/molecules/ProductCard/index.d.ts +8 -0
- package/dist/molecules/ProductCard/stories/ProductCard.stories.d.ts +4 -0
- package/dist/ui.cjs.development.js +100 -48
- package/dist/ui.cjs.development.js.map +1 -1
- package/dist/ui.cjs.production.min.js +1 -1
- package/dist/ui.cjs.production.min.js.map +1 -1
- package/dist/ui.esm.js +97 -49
- package/dist/ui.esm.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +26 -12
- package/src/{organisms → molecules}/Card/Card.test.tsx +0 -0
- package/src/{organisms → molecules}/Card/Card.tsx +0 -0
- package/src/{organisms → molecules}/Card/CardActions.tsx +0 -0
- package/src/{organisms → molecules}/Card/CardContent.tsx +0 -0
- package/src/{organisms → molecules}/Card/CardImage.tsx +0 -0
- package/src/{organisms → molecules}/Card/index.tsx +0 -0
- package/src/{organisms → molecules}/Card/stories/Card.mdx +1 -1
- package/src/molecules/Card/stories/Card.stories.tsx +63 -0
- package/src/molecules/ProductCard/ProductCard.test.tsx +75 -0
- package/src/molecules/ProductCard/ProductCard.tsx +28 -0
- package/src/molecules/ProductCard/ProductCardActions.tsx +30 -0
- package/src/molecules/ProductCard/ProductCardContent.tsx +29 -0
- package/src/molecules/ProductCard/ProductCardImage.tsx +29 -0
- package/src/molecules/ProductCard/index.tsx +11 -0
- package/src/molecules/ProductCard/stories/ProductCard.mdx +55 -0
- package/src/{organisms/Card/stories/Card.stories.tsx → molecules/ProductCard/stories/ProductCard.stories.tsx} +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
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.8.19 (2022-05-14)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @faststore/ui
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## 1.8.18 (2022-05-14)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @faststore/ui
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## 1.8.17 (2022-05-13)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* **UI:** Add `ProductCard` component ([#1272](https://github.com/vtex/faststore/issues/1272)) ([ea62210](https://github.com/vtex/faststore/commit/ea6221080da8b3538551f7a77df61a14d8de297d))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
## 1.8.16 (2022-05-13)
|
|
7
34
|
|
|
8
35
|
**Note:** Version bump only for package @faststore/ui
|
package/dist/index.d.ts
CHANGED
|
@@ -34,6 +34,10 @@ export { default as Label } from './atoms/Label';
|
|
|
34
34
|
export type { LabelProps } from './atoms/Label';
|
|
35
35
|
export { default as Incentive } from './atoms/Incentive';
|
|
36
36
|
export type { IncentiveProps } from './atoms/Incentive';
|
|
37
|
+
export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
|
|
38
|
+
export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, ProductCardActionsProps, } from './molecules/ProductCard';
|
|
39
|
+
export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
|
|
40
|
+
export type { CardProps, CardImageProps, CardContentProps, CardActionsProps, } from './molecules/Card';
|
|
37
41
|
export { default as Bullets } from './molecules/Bullets';
|
|
38
42
|
export type { BulletsProps } from './molecules/Bullets';
|
|
39
43
|
export { default as SearchInput } from './molecules/SearchInput';
|
|
@@ -68,7 +72,5 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
|
|
|
68
72
|
export type { QuantitySelectorProps } from './molecules/QuantitySelector';
|
|
69
73
|
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
|
|
70
74
|
export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
|
|
71
|
-
export { default as Card, CardImage, CardContent, CardActions, } from './organisms/Card';
|
|
72
|
-
export type { CardProps, CardImageProps, CardContentProps, CardActionsProps, } from './organisms/Card';
|
|
73
75
|
export { default as useSlider } from './hooks/useSlider';
|
|
74
76
|
export type { UseSliderArgs, SliderState, SliderDispatch, SlideDirection, } from './hooks/useSlider';
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
6
|
+
* testing-library, and jest).
|
|
7
|
+
*/
|
|
8
|
+
testId?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default ProductCard;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface ProductCardActionsProps 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 ProductCardActions: React.ForwardRefExoticComponent<ProductCardActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default ProductCardActions;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface ProductCardContentProps 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 ProductCardContent: React.ForwardRefExoticComponent<ProductCardContentProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
export default ProductCardContent;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface ProductCardImageProps 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 ProductCardImage: React.ForwardRefExoticComponent<ProductCardImageProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default ProductCardImage;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default } from './ProductCard';
|
|
2
|
+
export type { ProductCardProps } from './ProductCard';
|
|
3
|
+
export { default as ProductCardImage } from './ProductCardImage';
|
|
4
|
+
export type { ProductCardImageProps } from './ProductCardImage';
|
|
5
|
+
export { default as ProductCardContent } from './ProductCardContent';
|
|
6
|
+
export type { ProductCardContentProps } from './ProductCardContent';
|
|
7
|
+
export { default as ProductCardActions } from './ProductCardActions';
|
|
8
|
+
export type { ProductCardActionsProps } from './ProductCardActions';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ProductCardProps } from '../ProductCard';
|
|
2
|
+
export declare const ProductCard: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ProductCardProps>;
|
|
3
|
+
declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
|
|
4
|
+
export default _default;
|
|
@@ -328,6 +328,102 @@ const Incentive = /*#__PURE__*/React.forwardRef(function Incentive({
|
|
|
328
328
|
}, otherProps), children);
|
|
329
329
|
});
|
|
330
330
|
|
|
331
|
+
const ProductCard = /*#__PURE__*/React.forwardRef(function Card({
|
|
332
|
+
testId = 'store-product-card',
|
|
333
|
+
children,
|
|
334
|
+
...otherProps
|
|
335
|
+
}, ref) {
|
|
336
|
+
return React__default.createElement("article", Object.assign({
|
|
337
|
+
ref: ref,
|
|
338
|
+
"data-store-product-card": true,
|
|
339
|
+
"data-testid": testId
|
|
340
|
+
}, otherProps), children);
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
const ProductCardImage = /*#__PURE__*/React.forwardRef(function ProductCardImage({
|
|
344
|
+
testId = 'store-product-card-image',
|
|
345
|
+
children,
|
|
346
|
+
...otherProps
|
|
347
|
+
}, ref) {
|
|
348
|
+
return React__default.createElement("div", Object.assign({
|
|
349
|
+
ref: ref,
|
|
350
|
+
"data-product-card-image": true,
|
|
351
|
+
"data-testid": testId
|
|
352
|
+
}, otherProps), children);
|
|
353
|
+
});
|
|
354
|
+
|
|
355
|
+
const ProductCardContent = /*#__PURE__*/React.forwardRef(function CardContent({
|
|
356
|
+
testId = 'store-product-card-content',
|
|
357
|
+
children,
|
|
358
|
+
...otherProps
|
|
359
|
+
}, ref) {
|
|
360
|
+
return React__default.createElement("section", Object.assign({
|
|
361
|
+
ref: ref,
|
|
362
|
+
"data-product-card-content": true,
|
|
363
|
+
"data-testid": testId
|
|
364
|
+
}, otherProps), children);
|
|
365
|
+
});
|
|
366
|
+
|
|
367
|
+
const ProductCardActions = /*#__PURE__*/React.forwardRef(function CardActions({
|
|
368
|
+
testId = 'store-product-card-actions',
|
|
369
|
+
children,
|
|
370
|
+
...otherProps
|
|
371
|
+
}, ref) {
|
|
372
|
+
return React__default.createElement("div", Object.assign({
|
|
373
|
+
ref: ref,
|
|
374
|
+
"data-product-card-actions": true,
|
|
375
|
+
"data-testid": testId
|
|
376
|
+
}, otherProps), children);
|
|
377
|
+
});
|
|
378
|
+
|
|
379
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card({
|
|
380
|
+
testId = 'store-card',
|
|
381
|
+
children,
|
|
382
|
+
...otherProps
|
|
383
|
+
}, ref) {
|
|
384
|
+
return React__default.createElement("article", Object.assign({
|
|
385
|
+
ref: ref,
|
|
386
|
+
"data-store-card": true,
|
|
387
|
+
"data-testid": testId
|
|
388
|
+
}, otherProps), children);
|
|
389
|
+
});
|
|
390
|
+
|
|
391
|
+
const CardImage = /*#__PURE__*/React.forwardRef(function CardImage({
|
|
392
|
+
testId = 'store-card-image',
|
|
393
|
+
children,
|
|
394
|
+
...otherProps
|
|
395
|
+
}, ref) {
|
|
396
|
+
return React__default.createElement("div", Object.assign({
|
|
397
|
+
ref: ref,
|
|
398
|
+
"data-card-image": true,
|
|
399
|
+
"data-testid": testId
|
|
400
|
+
}, otherProps), children);
|
|
401
|
+
});
|
|
402
|
+
|
|
403
|
+
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent({
|
|
404
|
+
testId = 'store-card-content',
|
|
405
|
+
children,
|
|
406
|
+
...otherProps
|
|
407
|
+
}, ref) {
|
|
408
|
+
return React__default.createElement("section", Object.assign({
|
|
409
|
+
ref: ref,
|
|
410
|
+
"data-card-content": true,
|
|
411
|
+
"data-testid": testId
|
|
412
|
+
}, otherProps), children);
|
|
413
|
+
});
|
|
414
|
+
|
|
415
|
+
const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
|
|
416
|
+
testId = 'store-card-actions',
|
|
417
|
+
children,
|
|
418
|
+
...otherProps
|
|
419
|
+
}, ref) {
|
|
420
|
+
return React__default.createElement("div", Object.assign({
|
|
421
|
+
ref: ref,
|
|
422
|
+
"data-card-actions": true,
|
|
423
|
+
"data-testid": testId
|
|
424
|
+
}, otherProps), children);
|
|
425
|
+
});
|
|
426
|
+
|
|
331
427
|
const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
|
|
332
428
|
|
|
333
429
|
const Bullets = /*#__PURE__*/React.forwardRef(function Bullets({
|
|
@@ -1871,54 +1967,6 @@ const DropdownMenu = ({
|
|
|
1871
1967
|
}, otherProps), children)), document.body) : clearChildrenReferences();
|
|
1872
1968
|
};
|
|
1873
1969
|
|
|
1874
|
-
const Card = /*#__PURE__*/React.forwardRef(function Card({
|
|
1875
|
-
testId = 'store-card',
|
|
1876
|
-
children,
|
|
1877
|
-
...otherProps
|
|
1878
|
-
}, ref) {
|
|
1879
|
-
return React__default.createElement("article", Object.assign({
|
|
1880
|
-
ref: ref,
|
|
1881
|
-
"data-store-card": true,
|
|
1882
|
-
"data-testid": testId
|
|
1883
|
-
}, otherProps), children);
|
|
1884
|
-
});
|
|
1885
|
-
|
|
1886
|
-
const CardImage = /*#__PURE__*/React.forwardRef(function CardImage({
|
|
1887
|
-
testId = 'store-card-image',
|
|
1888
|
-
children,
|
|
1889
|
-
...otherProps
|
|
1890
|
-
}, ref) {
|
|
1891
|
-
return React__default.createElement("div", Object.assign({
|
|
1892
|
-
ref: ref,
|
|
1893
|
-
"data-card-image": true,
|
|
1894
|
-
"data-testid": testId
|
|
1895
|
-
}, otherProps), children);
|
|
1896
|
-
});
|
|
1897
|
-
|
|
1898
|
-
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent({
|
|
1899
|
-
testId = 'store-card-content',
|
|
1900
|
-
children,
|
|
1901
|
-
...otherProps
|
|
1902
|
-
}, ref) {
|
|
1903
|
-
return React__default.createElement("section", Object.assign({
|
|
1904
|
-
ref: ref,
|
|
1905
|
-
"data-card-content": true,
|
|
1906
|
-
"data-testid": testId
|
|
1907
|
-
}, otherProps), children);
|
|
1908
|
-
});
|
|
1909
|
-
|
|
1910
|
-
const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
|
|
1911
|
-
testId = 'store-card-actions',
|
|
1912
|
-
children,
|
|
1913
|
-
...otherProps
|
|
1914
|
-
}, ref) {
|
|
1915
|
-
return React__default.createElement("div", Object.assign({
|
|
1916
|
-
ref: ref,
|
|
1917
|
-
"data-card-actions": true,
|
|
1918
|
-
"data-testid": testId
|
|
1919
|
-
}, otherProps), children);
|
|
1920
|
-
});
|
|
1921
|
-
|
|
1922
1970
|
exports.Accordion = Accordion;
|
|
1923
1971
|
exports.AccordionButton = AccordionButton;
|
|
1924
1972
|
exports.AccordionItem = AccordionItem;
|
|
@@ -1957,6 +2005,10 @@ exports.PaymentMethods = PaymentMethods;
|
|
|
1957
2005
|
exports.Popover = Popover;
|
|
1958
2006
|
exports.Price = Price;
|
|
1959
2007
|
exports.PriceRange = PriceRange;
|
|
2008
|
+
exports.ProductCard = ProductCard;
|
|
2009
|
+
exports.ProductCardActions = ProductCardActions;
|
|
2010
|
+
exports.ProductCardContent = ProductCardContent;
|
|
2011
|
+
exports.ProductCardImage = ProductCardImage;
|
|
1960
2012
|
exports.QuantitySelector = QuantitySelector;
|
|
1961
2013
|
exports.Radio = Radio;
|
|
1962
2014
|
exports.RadioGroup = RadioGroup;
|