@faststore/ui 1.10.24 → 1.10.30
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 +31 -0
- package/README.md +1 -1
- package/dist/atoms/Slider/Slider.js +3 -3
- package/dist/atoms/Slider/Slider.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/molecules/ProductTitle/ProductTitle.d.ts +26 -0
- package/dist/molecules/ProductTitle/ProductTitle.js +12 -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/organisms/Tiles/Tile.d.ts +11 -0
- package/dist/organisms/Tiles/Tile.js +6 -0
- package/dist/organisms/Tiles/Tile.js.map +1 -0
- package/dist/organisms/Tiles/Tiles.d.ts +11 -0
- package/dist/organisms/Tiles/Tiles.js +30 -0
- package/dist/organisms/Tiles/Tiles.js.map +1 -0
- package/dist/organisms/Tiles/index.d.ts +4 -0
- package/dist/organisms/Tiles/index.js +3 -0
- package/dist/organisms/Tiles/index.js.map +1 -0
- package/package.json +4 -4
- package/src/atoms/Slider/Slider.tsx +2 -2
- package/src/index.ts +6 -0
- package/src/molecules/ProductTitle/ProductTitle.tsx +44 -0
- package/src/molecules/ProductTitle/index.tsx +2 -0
- package/src/molecules/ProductTitle/stories/ProductTitle.mdx +26 -0
- package/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx +27 -0
- package/src/organisms/Tiles/Tile.tsx +23 -0
- package/src/organisms/Tiles/Tiles.tsx +64 -0
- package/src/organisms/Tiles/index.ts +5 -0
- package/src/organisms/Tiles/stories/Tiles.mdx +39 -0
- package/src/organisms/Tiles/stories/Tiles.stories.tsx +38 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,37 @@
|
|
|
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.10.30 (2022-08-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Chores
|
|
10
|
+
|
|
11
|
+
* Updates documentation link ([#1424](https://github.com/vtex/faststore/issues/1424)) ([04e518a](https://github.com/vtex/faststore/commit/04e518a92038259bda212024b85c1a807ebf0e1a))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [1.10.29](https://github.com/vtex/faststore/compare/v1.10.28...v1.10.29) (2022-07-29)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* Add ProductTitle Molecule ([#1418](https://github.com/vtex/faststore/issues/1418)) ([184d0b9](https://github.com/vtex/faststore/commit/184d0b9399648e3cab25cd2348c17269ac549f49))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [1.10.28](https://github.com/vtex/faststore/compare/v1.10.27...v1.10.28) (2022-07-28)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Bug Fixes
|
|
30
|
+
|
|
31
|
+
* `Slider` thumb elements position ([#1423](https://github.com/vtex/faststore/issues/1423)) ([1207769](https://github.com/vtex/faststore/commit/12077694cde6d55ae30f76f277d5eaed20938f15))
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
6
37
|
## [1.10.24](https://github.com/vtex/faststore/compare/v1.10.23...v1.10.24) (2022-07-25)
|
|
7
38
|
|
|
8
39
|
**Note:** Version bump only for package @faststore/ui
|
package/README.md
CHANGED
|
@@ -29,20 +29,20 @@ const Slider = forwardRef(function Slider({ min, max, onChange, onEnd, testId =
|
|
|
29
29
|
left: `${minPercent}%`,
|
|
30
30
|
width: `${maxPercent - minPercent}%`,
|
|
31
31
|
} }),
|
|
32
|
-
minValueLabelComponent && minValueLabelComponent(minVal),
|
|
33
32
|
React.createElement("input", { type: "range", min: Math.round(min.absolute), max: Math.round(max.absolute), value: minVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
|
|
34
33
|
const minValue = Math.min(Number(event.target.value), maxVal);
|
|
35
34
|
setMinVal(minValue);
|
|
36
35
|
setMinPercent(percent(minValue, min.absolute, max.absolute));
|
|
37
36
|
onChange?.({ min: minValue, max: maxVal });
|
|
38
37
|
}, "data-slider-thumb": "left", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": minVal, "aria-label": String(minVal), "aria-labelledby": getAriaValueText?.(minVal, 'min') }),
|
|
39
|
-
|
|
38
|
+
minValueLabelComponent && minValueLabelComponent(minVal),
|
|
40
39
|
React.createElement("input", { type: "range", min: Math.round(min.absolute), max: Math.round(max.absolute), value: maxVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
|
|
41
40
|
const maxValue = Math.max(Number(event.target.value), minVal);
|
|
42
41
|
setMaxVal(maxValue);
|
|
43
42
|
setMaxPercent(percent(maxValue, min.absolute, max.absolute));
|
|
44
43
|
onChange?.({ min: minVal, max: maxValue });
|
|
45
|
-
}, "data-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') })
|
|
44
|
+
}, "data-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') }),
|
|
45
|
+
maxValueLabelComponent && maxValueLabelComponent(maxVal)));
|
|
46
46
|
});
|
|
47
47
|
export default Slider;
|
|
48
48
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,UAAU,GACX,MAAM,OAAO,CAAA;AAyDd,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAC1D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;AAEjD,MAAM,MAAM,GAAG,UAAU,CACvB,SAAS,MAAM,CACb,EACE,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,cAAc,EACvB,gBAAgB,EAChB,SAAS,EACT,IAAI,EACJ,sBAAsB,EACtB,sBAAsB,GACvB,EACD,GAAG;IAEH,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,EACzC,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAC7B,CAAA;IACD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAClD,CAAA;IAED,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAClD,CAAA;IAED,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAC,CACrD,CAAA;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAC,CACrD,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,eAAe,EAAE,CAAC,MAAoC,EAAE,EAAE;YACxD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;YAC3D,SAAS,CAAC,cAAc,CAAC,CAAA;YACzB,aAAa,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAA;YAElE,IAAI,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,EAAE;gBAC7B,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;gBACvB,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAA;gBAChE,OAAM;aACP;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;YAC3D,SAAS,CAAC,cAAc,CAAC,CAAA;YACzB,aAAa,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAA;QACpE,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,uEAAoC,MAAM,EAAE,SAAS,EAAE,SAAS;QAC9D,wDAEE,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,UAAU,GAAG;gBACtB,KAAK,EAAE,GAAG,UAAU,GAAG,UAAU,GAAG;aACrC,GACD;
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -34,6 +34,8 @@ 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 ProductTitle } from './molecules/ProductTitle';
|
|
38
|
+
export type { ProductTitleProps } from './molecules/ProductTitle';
|
|
37
39
|
export { default as AggregateRating } from './molecules/AggregateRating';
|
|
38
40
|
export type { AggregateRatingProps } from './molecules/AggregateRating';
|
|
39
41
|
export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
|
|
@@ -76,6 +78,8 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
|
|
|
76
78
|
export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
|
|
77
79
|
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
|
|
78
80
|
export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './organisms/OutOfStock';
|
|
81
|
+
export { Tiles, Tile } from './organisms/Tiles';
|
|
82
|
+
export type { TilesProps, TileProps } from './organisms/Tiles';
|
|
79
83
|
export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
|
|
80
84
|
export type { HeroProps, HeroHeadingProps, HeroImageProps, } from './organisms/Hero';
|
|
81
85
|
export { default as useSlider } from './hooks/useSlider';
|
package/dist/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
|
|
|
18
18
|
export { default as Label } from './atoms/Label';
|
|
19
19
|
export { default as Incentive } from './atoms/Incentive';
|
|
20
20
|
// Molecules
|
|
21
|
+
export { default as ProductTitle } from './molecules/ProductTitle';
|
|
21
22
|
export { default as AggregateRating } from './molecules/AggregateRating';
|
|
22
23
|
export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
|
|
23
24
|
export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
|
|
@@ -40,6 +41,7 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
|
|
|
40
41
|
export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
|
|
41
42
|
// Organisms
|
|
42
43
|
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
|
|
44
|
+
export { Tiles, Tile } from './organisms/Tiles';
|
|
43
45
|
export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
|
|
44
46
|
// Hooks
|
|
45
47
|
export { default as useSlider } from './hooks/useSlider';
|
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,26 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
|
|
4
|
+
/**
|
|
5
|
+
* A react component to be used as the product title, e.g. a `h1`
|
|
6
|
+
*/
|
|
7
|
+
title: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* A react component to be used as the product label, e.g. a `DiscountBadge`
|
|
10
|
+
*/
|
|
11
|
+
label?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Label for reference.
|
|
14
|
+
*/
|
|
15
|
+
refTag?: string;
|
|
16
|
+
/**
|
|
17
|
+
* A text to be used below the title and the label, such as the product's reference number.
|
|
18
|
+
*/
|
|
19
|
+
refNumber?: string;
|
|
20
|
+
/**
|
|
21
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
22
|
+
*/
|
|
23
|
+
testId?: string;
|
|
24
|
+
};
|
|
25
|
+
declare function ProductTitle({ title, label, refTag, refNumber, testId, ...otherProps }: ProductTitleProps): JSX.Element;
|
|
26
|
+
export default ProductTitle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }) {
|
|
3
|
+
return (React.createElement("header", Object.assign({ "data-fs-product-title": true, "data-testid": testId }, otherProps),
|
|
4
|
+
React.createElement("div", { "data-fs-product-title-header": true },
|
|
5
|
+
title,
|
|
6
|
+
!!label && label),
|
|
7
|
+
refNumber && (React.createElement("p", { "data-fs-product-title-addendum": true },
|
|
8
|
+
refTag,
|
|
9
|
+
refNumber))));
|
|
10
|
+
}
|
|
11
|
+
export default ProductTitle;
|
|
12
|
+
//# sourceMappingURL=ProductTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AA0B7C,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAqB;IACjI,OAAO,CACL,4FAA2C,MAAM,IAAM,UAAU;QAC/D;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC;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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface TileProps extends HTMLAttributes<HTMLLIElement> {
|
|
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 Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLLIElement>>;
|
|
11
|
+
export default Tile;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const Tile = forwardRef(function Tile({ testId = 'store-tile', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("li", Object.assign({ ref: ref, "data-fs-tile": true, "data-testid": testId }, otherProps), children));
|
|
4
|
+
});
|
|
5
|
+
export default Tile;
|
|
6
|
+
//# sourceMappingURL=Tile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CAC7D,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,0CAAI,GAAG,EAAE,GAAG,uCAA4B,MAAM,IAAM,UAAU,GAC3D,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { HTMLAttributes } from 'react';
|
|
3
|
+
export interface TilesProps 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
|
+
declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLUListElement>>;
|
|
11
|
+
export default Tiles;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { Children, forwardRef } from 'react';
|
|
2
|
+
import { Tile } from '.';
|
|
3
|
+
const MIN_CHILDREN = 2;
|
|
4
|
+
const MAX_CHILDREN = 4;
|
|
5
|
+
const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2;
|
|
6
|
+
const NUMBER_ITEMS_TO_EXPAND_FIRST = 3;
|
|
7
|
+
const Tiles = forwardRef(function Tiles({ testId = 'store-tiles', children, ...otherProps }, ref) {
|
|
8
|
+
const childrenCount = Children.count(children);
|
|
9
|
+
if (process.env.NODE_ENV === 'development') {
|
|
10
|
+
const isOutOfBounds = childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN;
|
|
11
|
+
if (isOutOfBounds) {
|
|
12
|
+
throw new Error(`Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
if (process.env.NODE_ENV === 'development') {
|
|
16
|
+
Children.forEach(children, (child) => {
|
|
17
|
+
if (child.type !== Tile) {
|
|
18
|
+
throw new Error('Only Tile components allowed as children.');
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
const expandedClass = childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
|
|
23
|
+
? 'expanded-first'
|
|
24
|
+
: childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
|
|
25
|
+
? 'expanded-first-two'
|
|
26
|
+
: '';
|
|
27
|
+
return (React.createElement("ul", Object.assign({ ref: ref, "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-testid": testId }, otherProps), children));
|
|
28
|
+
});
|
|
29
|
+
export default Tiles;
|
|
30
|
+
//# sourceMappingURL=Tiles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,kDAEe,aAAa,iBACvB,MAAM,IACf,UAAU,GAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.30",
|
|
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.10.
|
|
60
|
+
"@faststore/styles": "^1.10.30",
|
|
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",
|
|
@@ -79,11 +79,11 @@
|
|
|
79
79
|
"react": "^17.0.2",
|
|
80
80
|
"react-docgen-typescript-loader": "^3.7.2",
|
|
81
81
|
"react-dom": "^17.0.2",
|
|
82
|
-
"shared": "^1.10.
|
|
82
|
+
"shared": "^1.10.30",
|
|
83
83
|
"size-limit": "^7.0.8",
|
|
84
84
|
"storybook-addon-themes": "^6.1.0",
|
|
85
85
|
"tsdx": "^0.14.1",
|
|
86
86
|
"typescript": "^4.2.4"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "4541012c9a6b238f1082c2cb92c4d6410c663795"
|
|
89
89
|
}
|
|
@@ -128,7 +128,6 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
|
|
|
128
128
|
width: `${maxPercent - minPercent}%`,
|
|
129
129
|
}}
|
|
130
130
|
/>
|
|
131
|
-
{minValueLabelComponent && minValueLabelComponent(minVal)}
|
|
132
131
|
<input
|
|
133
132
|
type="range"
|
|
134
133
|
min={Math.round(min.absolute)}
|
|
@@ -151,7 +150,7 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
|
|
|
151
150
|
aria-label={String(minVal)}
|
|
152
151
|
aria-labelledby={getAriaValueText?.(minVal, 'min')}
|
|
153
152
|
/>
|
|
154
|
-
{
|
|
153
|
+
{minValueLabelComponent && minValueLabelComponent(minVal)}
|
|
155
154
|
<input
|
|
156
155
|
type="range"
|
|
157
156
|
min={Math.round(min.absolute)}
|
|
@@ -174,6 +173,7 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
|
|
|
174
173
|
aria-label={String(maxVal)}
|
|
175
174
|
aria-labelledby={getAriaValueText?.(maxVal, 'max')}
|
|
176
175
|
/>
|
|
176
|
+
{maxValueLabelComponent && maxValueLabelComponent(maxVal)}
|
|
177
177
|
</div>
|
|
178
178
|
)
|
|
179
179
|
}
|
package/src/index.ts
CHANGED
|
@@ -54,6 +54,9 @@ export { default as Incentive } from './atoms/Incentive'
|
|
|
54
54
|
export type { IncentiveProps } from './atoms/Incentive'
|
|
55
55
|
|
|
56
56
|
// Molecules
|
|
57
|
+
export { default as ProductTitle } from './molecules/ProductTitle'
|
|
58
|
+
export type { ProductTitleProps } from './molecules/ProductTitle'
|
|
59
|
+
|
|
57
60
|
export { default as AggregateRating } from './molecules/AggregateRating'
|
|
58
61
|
export type { AggregateRatingProps } from './molecules/AggregateRating'
|
|
59
62
|
|
|
@@ -190,6 +193,9 @@ export type {
|
|
|
190
193
|
OutOfStockTitleProps,
|
|
191
194
|
} from './organisms/OutOfStock'
|
|
192
195
|
|
|
196
|
+
export { Tiles, Tile } from './organisms/Tiles'
|
|
197
|
+
export type { TilesProps, TileProps } from './organisms/Tiles'
|
|
198
|
+
|
|
193
199
|
export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
|
|
194
200
|
export type {
|
|
195
201
|
HeroProps,
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
|
|
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
|
+
|
|
27
|
+
function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }: ProductTitleProps) {
|
|
28
|
+
return (
|
|
29
|
+
<header data-fs-product-title data-testid={testId} {...otherProps}>
|
|
30
|
+
<div data-fs-product-title-header>
|
|
31
|
+
{title}
|
|
32
|
+
{!!label && label}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
{refNumber && (
|
|
36
|
+
<p data-fs-product-title-addendum>
|
|
37
|
+
{refTag}{refNumber}
|
|
38
|
+
</p>
|
|
39
|
+
)}
|
|
40
|
+
</header>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default ProductTitle
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
import ProductTitle from '../ProductTitle'
|
|
4
|
+
|
|
5
|
+
# ProductTitle
|
|
6
|
+
|
|
7
|
+
<Canvas>
|
|
8
|
+
<Story id="molecules-producttitle--product-title" />
|
|
9
|
+
</Canvas>
|
|
10
|
+
|
|
11
|
+
## Props
|
|
12
|
+
|
|
13
|
+
<ArgsTable of={ ProductTitle } />
|
|
14
|
+
|
|
15
|
+
## CSS Selectors
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
[data-fs-product-title] {
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
[data-fs-product-title-header] {
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[data-fs-product-title-addendum] {
|
|
25
|
+
}
|
|
26
|
+
```
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Story, Meta } from '@storybook/react'
|
|
2
|
+
import React from 'react'
|
|
3
|
+
|
|
4
|
+
import type { ProductTitleProps } from '../ProductTitle'
|
|
5
|
+
import Component from '../ProductTitle'
|
|
6
|
+
import mdx from './ProductTitle.mdx'
|
|
7
|
+
import Badge from '../../../atoms/Badge'
|
|
8
|
+
|
|
9
|
+
const ProductTitleTemplate: Story<ProductTitleProps> = () => (
|
|
10
|
+
<Component
|
|
11
|
+
title={<h1>Apple Magic Mouse</h1>}
|
|
12
|
+
refNumber='99995945'
|
|
13
|
+
label={<Badge>90%</Badge>}
|
|
14
|
+
/>
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
export const ProductTitle = ProductTitleTemplate.bind({})
|
|
18
|
+
ProductTitle.storyName = 'ProductTitle'
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
title: 'Molecules/ProductTitle',
|
|
22
|
+
parameters: {
|
|
23
|
+
docs: {
|
|
24
|
+
page: mdx,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
} as Meta
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface TileProps extends HTMLAttributes<HTMLLIElement> {
|
|
5
|
+
/**
|
|
6
|
+
* ID to find this component in testing tools (e.g.: Cypress,
|
|
7
|
+
* Testing Library, and Jest).
|
|
8
|
+
*/
|
|
9
|
+
testId?: string
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const Tile = forwardRef<HTMLLIElement, TileProps>(function Tile(
|
|
13
|
+
{ testId = 'store-tile', children, ...otherProps },
|
|
14
|
+
ref
|
|
15
|
+
) {
|
|
16
|
+
return (
|
|
17
|
+
<li ref={ref} data-fs-tile data-testid={testId} {...otherProps}>
|
|
18
|
+
{children}
|
|
19
|
+
</li>
|
|
20
|
+
)
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
export default Tile
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React, { Children, forwardRef } from 'react'
|
|
2
|
+
import type { HTMLAttributes, ReactElement } from 'react'
|
|
3
|
+
|
|
4
|
+
import { Tile } from '.'
|
|
5
|
+
|
|
6
|
+
export interface TilesProps 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
|
+
|
|
14
|
+
const MIN_CHILDREN = 2
|
|
15
|
+
const MAX_CHILDREN = 4
|
|
16
|
+
const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2
|
|
17
|
+
const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
|
|
18
|
+
|
|
19
|
+
const Tiles = forwardRef<HTMLUListElement, TilesProps>(function Tiles(
|
|
20
|
+
{ testId = 'store-tiles', children, ...otherProps },
|
|
21
|
+
ref
|
|
22
|
+
) {
|
|
23
|
+
const childrenCount = Children.count(children)
|
|
24
|
+
|
|
25
|
+
if (process.env.NODE_ENV === 'development') {
|
|
26
|
+
const isOutOfBounds =
|
|
27
|
+
childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN
|
|
28
|
+
|
|
29
|
+
if (isOutOfBounds) {
|
|
30
|
+
throw new Error(
|
|
31
|
+
`Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (process.env.NODE_ENV === 'development') {
|
|
37
|
+
Children.forEach(children as ReactElement, (child) => {
|
|
38
|
+
if (child.type !== Tile) {
|
|
39
|
+
throw new Error('Only Tile components allowed as children.')
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const expandedClass =
|
|
45
|
+
childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
|
|
46
|
+
? 'expanded-first'
|
|
47
|
+
: childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
|
|
48
|
+
? 'expanded-first-two'
|
|
49
|
+
: ''
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<ul
|
|
53
|
+
ref={ref}
|
|
54
|
+
data-fs-tiles
|
|
55
|
+
data-fs-tiles-variant={expandedClass}
|
|
56
|
+
data-testid={testId}
|
|
57
|
+
{...otherProps}
|
|
58
|
+
>
|
|
59
|
+
{children}
|
|
60
|
+
</ul>
|
|
61
|
+
)
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
export default Tiles
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
import { Tile, Tiles } from '../'
|
|
4
|
+
|
|
5
|
+
# Tiles
|
|
6
|
+
|
|
7
|
+
<Canvas>
|
|
8
|
+
<Story id="organisms-tiles--tiles" />
|
|
9
|
+
</Canvas>
|
|
10
|
+
|
|
11
|
+
## Components
|
|
12
|
+
|
|
13
|
+
- `Tiles`: the parent component that wraps one or many `Tile`s.
|
|
14
|
+
- `Tile`: the child component.
|
|
15
|
+
|
|
16
|
+
## Props
|
|
17
|
+
|
|
18
|
+
Besides those attributes, the following props are also supported:
|
|
19
|
+
|
|
20
|
+
### `Tiles`
|
|
21
|
+
|
|
22
|
+
<ArgsTable of={Tiles} />
|
|
23
|
+
|
|
24
|
+
### `Tile`
|
|
25
|
+
|
|
26
|
+
<ArgsTable of={Tile} />
|
|
27
|
+
|
|
28
|
+
## CSS Selectors
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
[data-fs-tiles] {
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-fs-tiles-variant='expanded-first'|'expanded-first-two'] {
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[data-fs-tile] {
|
|
38
|
+
}
|
|
39
|
+
```
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { Tile, Tiles as UITiles } from '../'
|
|
4
|
+
import mdx from './Tiles.mdx'
|
|
5
|
+
|
|
6
|
+
import type { Story, Meta } from '@storybook/react'
|
|
7
|
+
import type { TilesProps } from '../'
|
|
8
|
+
|
|
9
|
+
const TilesTemplate: Story<TilesProps> = () => (
|
|
10
|
+
<>
|
|
11
|
+
<UITiles>
|
|
12
|
+
<Tile>Tile #1</Tile>
|
|
13
|
+
<Tile>Tile #2</Tile>
|
|
14
|
+
</UITiles>
|
|
15
|
+
<UITiles>
|
|
16
|
+
<Tile>Tile #1</Tile>
|
|
17
|
+
<Tile>Tile #2</Tile>
|
|
18
|
+
<Tile>Tile #3</Tile>
|
|
19
|
+
<Tile>Tile #4</Tile>
|
|
20
|
+
</UITiles>
|
|
21
|
+
<UITiles>
|
|
22
|
+
<Tile>Tile #1</Tile>
|
|
23
|
+
<Tile>Tile #2</Tile>
|
|
24
|
+
<Tile>Tile #3</Tile>
|
|
25
|
+
</UITiles>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export const Tiles = TilesTemplate.bind({})
|
|
30
|
+
|
|
31
|
+
export default {
|
|
32
|
+
title: 'Organisms/Tiles',
|
|
33
|
+
parameters: {
|
|
34
|
+
docs: {
|
|
35
|
+
page: mdx,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
} as Meta
|