@faststore/ui 2.0.70-alpha.0 → 2.0.73-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 +0 -4
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -6
- package/src/components/atoms/Price/styles.scss +5 -0
- package/src/components/molecules/CartItem/styles.scss +1 -3
- package/src/components/molecules/Gift/styles.scss +8 -0
- package/src/components/molecules/ProductCard/styles.scss +0 -7
- package/src/components/molecules/SearchHistory/styles.scss +85 -0
- package/src/components/molecules/SearchProductCard/styles.scss +1 -8
- package/src/components/molecules/SearchTop/styles.scss +77 -0
- package/src/components/organisms/SlideOver/styles.scss +84 -0
- package/src/index.ts +0 -16
- package/src/styles/base.scss +5 -3
- package/src/styles/components.scss +3 -0
- package/src/styles/global.scss +0 -2
- package/dist/components/atoms/Popover/Popover.d.ts +0 -15
- package/dist/components/atoms/Popover/Popover.js +0 -7
- package/dist/components/atoms/Popover/Popover.js.map +0 -1
- package/dist/components/atoms/Popover/index.d.ts +0 -2
- package/dist/components/atoms/Popover/index.js +0 -2
- package/dist/components/atoms/Popover/index.js.map +0 -1
- package/dist/components/molecules/Card/Card.d.ts +0 -10
- package/dist/components/molecules/Card/Card.js +0 -6
- package/dist/components/molecules/Card/Card.js.map +0 -1
- package/dist/components/molecules/Card/CardActions.d.ts +0 -10
- package/dist/components/molecules/Card/CardActions.js +0 -6
- package/dist/components/molecules/Card/CardActions.js.map +0 -1
- package/dist/components/molecules/Card/CardContent.d.ts +0 -10
- package/dist/components/molecules/Card/CardContent.js +0 -6
- package/dist/components/molecules/Card/CardContent.js.map +0 -1
- package/dist/components/molecules/Card/CardImage.d.ts +0 -10
- package/dist/components/molecules/Card/CardImage.js +0 -6
- package/dist/components/molecules/Card/CardImage.js.map +0 -1
- package/dist/components/molecules/Card/index.d.ts +0 -8
- package/dist/components/molecules/Card/index.js +0 -5
- package/dist/components/molecules/Card/index.js.map +0 -1
- package/src/components/atoms/Popover/Popover.tsx +0 -37
- package/src/components/atoms/Popover/index.ts +0 -2
- package/src/components/molecules/Card/Card.tsx +0 -22
- package/src/components/molecules/Card/CardActions.tsx +0 -24
- package/src/components/molecules/Card/CardContent.tsx +0 -24
- package/src/components/molecules/Card/CardImage.tsx +0 -22
- package/src/components/molecules/Card/index.tsx +0 -11
- /package/src/{base → styles/base}/layout.scss +0 -0
- /package/src/styles/{reset.scss → base/reset.scss} +0 -0
- /package/src/{base → styles/base}/tokens.scss +0 -0
- /package/src/{base → styles/base}/typography.scss +0 -0
- /package/src/styles/{utilities.scss → base/utilities.scss} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export * from '@faststore/components';
|
|
2
|
-
export { default as Popover } from './components/atoms/Popover';
|
|
3
|
-
export type { PopoverProps } from './components/atoms/Popover';
|
|
4
2
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
5
3
|
export type { TextAreaProps } from './components/atoms/TextArea';
|
|
6
4
|
export { default as Incentive } from './components/atoms/Incentive';
|
|
@@ -9,8 +7,6 @@ export { default as SkuSelector } from './components/molecules/SkuSelector';
|
|
|
9
7
|
export type { SkuSelectorProps } from './components/molecules/SkuSelector';
|
|
10
8
|
export { default as OrderSummary } from './components/molecules/OrderSummary';
|
|
11
9
|
export type { OrderSummaryProps } from './components/molecules/OrderSummary';
|
|
12
|
-
export { default as Card, CardImage, CardContent, CardActions, } from './components/molecules/Card';
|
|
13
|
-
export type { CardProps, CardImageProps, CardContentProps, CardActionsProps, } from './components/molecules/Card';
|
|
14
10
|
export { default as Bullets } from './components/molecules/Bullets';
|
|
15
11
|
export type { BulletsProps } from './components/molecules/Bullets';
|
|
16
12
|
export { default as SearchInput } from './components/molecules/SearchInput';
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
export * from '@faststore/components';
|
|
2
2
|
// Atoms
|
|
3
|
-
export { default as Popover } from './components/atoms/Popover';
|
|
4
3
|
export { default as TextArea } from './components/atoms/TextArea';
|
|
5
4
|
export { default as Incentive } from './components/atoms/Incentive';
|
|
6
5
|
// Molecules
|
|
7
6
|
export { default as SkuSelector } from './components/molecules/SkuSelector';
|
|
8
7
|
export { default as OrderSummary } from './components/molecules/OrderSummary';
|
|
9
|
-
export { default as Card, CardImage, CardContent, CardActions, } from './components/molecules/Card';
|
|
10
8
|
export { default as Bullets } from './components/molecules/Bullets';
|
|
11
9
|
export { default as SearchInput } from './components/molecules/SearchInput';
|
|
12
10
|
export { default as Carousel } from './components/molecules/Carousel';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.73-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,12 +30,11 @@
|
|
|
30
30
|
"size-limit": [
|
|
31
31
|
{
|
|
32
32
|
"path": "dist/index.js",
|
|
33
|
-
"limit": "
|
|
33
|
+
"limit": "40 KB"
|
|
34
34
|
}
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@faststore/components": "*",
|
|
38
|
-
"@reach/popover": "^0.16.0",
|
|
39
38
|
"include-media": "^1.4.10",
|
|
40
39
|
"modern-normalize": "^1.1.0",
|
|
41
40
|
"react-swipeable": "^7.0.0",
|
|
@@ -46,8 +45,8 @@
|
|
|
46
45
|
"react-dom": "^18.2.0"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"@faststore/eslint-config": "^2.0.
|
|
50
|
-
"@faststore/shared": "^2.0.
|
|
48
|
+
"@faststore/eslint-config": "^2.0.73-alpha.0",
|
|
49
|
+
"@faststore/shared": "^2.0.73-alpha.0",
|
|
51
50
|
"@size-limit/preset-small-lib": "^7.0.8",
|
|
52
51
|
"@types/tabbable": "^3.1.1",
|
|
53
52
|
"babel-loader": "^8.2.5",
|
|
@@ -59,5 +58,5 @@
|
|
|
59
58
|
"node": "16.18.0",
|
|
60
59
|
"yarn": "1.19.1"
|
|
61
60
|
},
|
|
62
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "6ea74fc2ff1eaa78550e8801304eeac29e7d5938"
|
|
63
62
|
}
|
|
@@ -4,22 +4,27 @@
|
|
|
4
4
|
// --------------------------------------------------------
|
|
5
5
|
|
|
6
6
|
// Listing
|
|
7
|
+
--fs-price-listing-text-size : var(--fs-text-size-legend);
|
|
7
8
|
--fs-price-listing-color : var(--fs-color-text-light);
|
|
8
9
|
--fs-price-listing-text-decoration : line-through;
|
|
9
10
|
|
|
10
11
|
// Spot
|
|
11
12
|
--fs-price-spot-font-weight : var(--fs-text-weight-bold);
|
|
13
|
+
--fs-price-spot-color : var(--fs-color-text);
|
|
12
14
|
|
|
13
15
|
// --------------------------------------------------------
|
|
14
16
|
// Variants Styles
|
|
15
17
|
// --------------------------------------------------------
|
|
16
18
|
|
|
17
19
|
&[data-fs-price-variant="listing"] {
|
|
20
|
+
font-size: var(--fs-price-listing-text-size);
|
|
21
|
+
line-height: 1.7;
|
|
18
22
|
color: var(--fs-price-listing-color);
|
|
19
23
|
text-decoration: var(--fs-price-listing-text-decoration);
|
|
20
24
|
}
|
|
21
25
|
|
|
22
26
|
&[data-fs-price-variant="spot"] {
|
|
27
|
+
color: var(--fs-price-spot-color);
|
|
23
28
|
font-weight: var(--fs-price-spot-font-weight);
|
|
24
29
|
}
|
|
25
30
|
}
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
|
|
32
32
|
// Prices
|
|
33
33
|
--fs-cart-item-price-gap : var(--fs-spacing-1);
|
|
34
|
-
--fs-cart-item-listing-price-text-size : var(--fs-text-size-legend);
|
|
35
34
|
|
|
36
35
|
|
|
37
36
|
// --------------------------------------------------------
|
|
@@ -99,7 +98,6 @@
|
|
|
99
98
|
display: flex;
|
|
100
99
|
align-items: baseline;
|
|
101
100
|
column-gap: var(--fs-cart-item-price-gap);
|
|
102
|
-
[data-fs-price-variant="listing"] { font-size: var(--fs-cart-item-listing-price-text-size); }
|
|
103
101
|
}
|
|
104
102
|
|
|
105
103
|
[data-fs-cart-item-actions] {
|
|
@@ -125,4 +123,4 @@
|
|
|
125
123
|
[data-fs-cart-item-actions] { display: none; }
|
|
126
124
|
}
|
|
127
125
|
|
|
128
|
-
}
|
|
126
|
+
}
|
|
@@ -27,6 +27,9 @@
|
|
|
27
27
|
--fs-gift-icon-color : var(--fs-gift-title-color);
|
|
28
28
|
--fs-gift-icon-bkg-color : var(--fs-color-body-bkg);
|
|
29
29
|
|
|
30
|
+
// Price
|
|
31
|
+
--fs-gift-price-size : var(--fs-text-size-legend);
|
|
32
|
+
|
|
30
33
|
// --------------------------------------------------------
|
|
31
34
|
// Structural Styles
|
|
32
35
|
// --------------------------------------------------------
|
|
@@ -78,6 +81,11 @@
|
|
|
78
81
|
[data-fs-badge] {
|
|
79
82
|
margin-left: var(--fs-spacing-1);
|
|
80
83
|
}
|
|
84
|
+
|
|
85
|
+
[data-fs-price-variant="listing"] {
|
|
86
|
+
font-size: var(--fs-gift-price-size);
|
|
87
|
+
line-height: 1.7;
|
|
88
|
+
}
|
|
81
89
|
}
|
|
82
90
|
|
|
83
91
|
[data-fs-gift-icon] {
|
|
@@ -38,8 +38,6 @@
|
|
|
38
38
|
--fs-product-card-price-gap : var(--fs-spacing-1);
|
|
39
39
|
--fs-product-card-price-color : var(--fs-color-text);
|
|
40
40
|
--fs-product-card-price-size : var(--fs-text-size-base);
|
|
41
|
-
--fs-product-card-price-listing-color : var(--fs-color-text-light);
|
|
42
|
-
--fs-product-card-price-listing-size : var(--fs-text-size-legend);
|
|
43
41
|
|
|
44
42
|
// Out Of Stock
|
|
45
43
|
--fs-product-card-out-of-stock-bkg-color : var(--fs-color-disabled-bkg);
|
|
@@ -146,11 +144,6 @@
|
|
|
146
144
|
font-size: var(--fs-product-card-price-size);
|
|
147
145
|
color: var(--fs-product-card-price-color);
|
|
148
146
|
}
|
|
149
|
-
|
|
150
|
-
[data-fs-price-variant="listing"] {
|
|
151
|
-
font-size: var(--fs-product-card-price-listing-size);
|
|
152
|
-
color: var(--fs-product-card-price-listing-color);
|
|
153
|
-
}
|
|
154
147
|
}
|
|
155
148
|
|
|
156
149
|
[data-fs-product-card-actions] {
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
[data-fs-search-history] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Search History
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-search-history-padding-top : var(--fs-spacing-2);
|
|
8
|
+
--fs-search-history-padding-right : var(--fs-spacing-3);
|
|
9
|
+
--fs-search-history-padding-bottom : var(--fs-search-history-padding-top);
|
|
10
|
+
--fs-search-history-padding-left : var(--fs-search-history-padding-right);
|
|
11
|
+
--fs-search-history-transition-property : var(--fs-transition-property);
|
|
12
|
+
--fs-search-history-transition-function : var(--fs-transition-function);
|
|
13
|
+
--fs-search-history-transition-timing : var(--fs-transition-timing);
|
|
14
|
+
|
|
15
|
+
// Header
|
|
16
|
+
--fs-search-history-header-padding-top : var(--fs-spacing-1);
|
|
17
|
+
--fs-search-history-header-padding-bottom : var(--fs-search-history-header-padding-top);
|
|
18
|
+
|
|
19
|
+
// Title
|
|
20
|
+
--fs-search-history-title-size : var(--fs-text-size-lead);
|
|
21
|
+
--fs-search-history-title-line-height : 1.5;
|
|
22
|
+
|
|
23
|
+
// Item
|
|
24
|
+
--fs-search-history-item-column-gap : var(--fs-spacing-1);
|
|
25
|
+
--fs-search-history-item-text-size : var(--fs-text-size-2);
|
|
26
|
+
--fs-search-history-item-line-height : 1.25;
|
|
27
|
+
--fs-search-history-item-bkg-color-hover : var(--fs-color-tertiary-bkg-hover);
|
|
28
|
+
|
|
29
|
+
// Icon
|
|
30
|
+
--fs-search-history-item-icon-color : var(--fs-color-neutral-4);
|
|
31
|
+
--fs-search-history-item-icon-size : 1.125rem;
|
|
32
|
+
|
|
33
|
+
// --------------------------------------------------------
|
|
34
|
+
// Structural Styles
|
|
35
|
+
// --------------------------------------------------------
|
|
36
|
+
|
|
37
|
+
width: 100%;
|
|
38
|
+
padding-top: var(--fs-search-history-padding-top);
|
|
39
|
+
padding-bottom: var(--fs-search-history-padding-bottom);
|
|
40
|
+
|
|
41
|
+
[data-fs-search-history-header] {
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
min-height: var(--fs-search-history-min-height);
|
|
46
|
+
padding: var(--fs-search-history-header-padding-top) var(--fs-search-history-padding-right) var(--fs-search-history-header-padding-bottom) var(--fs-search-history-padding-left);
|
|
47
|
+
[data-fs-button] { white-space: nowrap; }
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[data-fs-search-history-title] {
|
|
51
|
+
width: 100%;
|
|
52
|
+
font-size: var(--fs-search-history-title-size);
|
|
53
|
+
line-height: var(--fs-search-history-title-line-height);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-fs-search-history-item] {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
font-size: var(--fs-search-history-item-text-size);
|
|
60
|
+
line-height: var(--fs-search-history-item-line-height);
|
|
61
|
+
transition: var(--fs-search-history-transition-property) var(--fs-search-history-transition-timing) var(--fs-search-history-transition-function);
|
|
62
|
+
|
|
63
|
+
&:hover {
|
|
64
|
+
background-color: var(--fs-search-history-item-bkg-color-hover);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-fs-search-history-item-link] {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: flex-start;
|
|
71
|
+
width: 100%;
|
|
72
|
+
padding-left: var(--fs-search-history-padding-left);
|
|
73
|
+
padding-right: var(--fs-search-history-padding-right);
|
|
74
|
+
column-gap: var(--fs-search-history-item-column-gap);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
[data-fs-search-history-item-icon] {
|
|
78
|
+
flex-grow: 0;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
width: var(--fs-search-history-item-icon-size);
|
|
81
|
+
height: var(--fs-search-history-item-icon-size);
|
|
82
|
+
color: var(--fs-search-history-item-icon-color);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -19,8 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
// Price
|
|
21
21
|
--fs-search-product-card-price-gap : var(--fs-spacing-1);
|
|
22
|
-
--fs-search-product-card-price-size : var(--fs-text-size-
|
|
23
|
-
--fs-search-product-card-price-listing-size : var(--fs-text-size-1);
|
|
22
|
+
--fs-search-product-card-price-size : var(--fs-text-size-base);
|
|
24
23
|
|
|
25
24
|
[data-fs-search-product-card-image] {
|
|
26
25
|
display: flex;
|
|
@@ -48,14 +47,8 @@
|
|
|
48
47
|
align-items: baseline;
|
|
49
48
|
column-gap: var(--fs-search-product-card-price-gap);
|
|
50
49
|
|
|
51
|
-
[data-fs-price-variant="listing"] {
|
|
52
|
-
font-size: var(--fs-search-product-card-price-listing-size);
|
|
53
|
-
line-height: 1.7;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
50
|
[data-fs-price-variant="spot"] {
|
|
57
51
|
font-size: var(--fs-search-product-card-price-size);
|
|
58
|
-
color: var(--fs-product-card-price-color);
|
|
59
52
|
}
|
|
60
53
|
}
|
|
61
54
|
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
[data-fs-search-top] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Search Top
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-search-top-padding-top : var(--fs-spacing-2);
|
|
8
|
+
--fs-search-top-padding-right : var(--fs-spacing-3);
|
|
9
|
+
--fs-search-top-padding-bottom : var(--fs-search-top-padding-top);
|
|
10
|
+
--fs-search-top-padding-left : var(--fs-search-top-padding-right);
|
|
11
|
+
--fs-search-top-transition-property : var(--fs-transition-property);
|
|
12
|
+
--fs-search-top-transition-function : var(--fs-transition-function);
|
|
13
|
+
--fs-search-top-transition-timing : var(--fs-transition-timing);
|
|
14
|
+
|
|
15
|
+
// Header
|
|
16
|
+
--fs-search-top-header-padding-top : var(--fs-spacing-1);
|
|
17
|
+
--fs-search-top-header-padding-bottom : var(--fs-search-top-header-padding-top);
|
|
18
|
+
|
|
19
|
+
// Title
|
|
20
|
+
--fs-search-top-title-padding-top : var(--fs-spacing-1);
|
|
21
|
+
--fs-search-top-title-padding-bottom : var(--fs-search-top-title-padding-top);
|
|
22
|
+
--fs-search-top-title-size : var(--fs-text-size-lead);
|
|
23
|
+
--fs-search-top-title-line-height : 1.5;
|
|
24
|
+
|
|
25
|
+
// Item
|
|
26
|
+
--fs-search-top-item-column-gap : var(--fs-spacing-1);
|
|
27
|
+
--fs-search-top-item-text-size : var(--fs-text-size-2);
|
|
28
|
+
--fs-search-top-item-line-height : 1.25;
|
|
29
|
+
--fs-search-top-item-bkg-color-hover : var(--fs-color-tertiary-bkg-hover);
|
|
30
|
+
|
|
31
|
+
// --------------------------------------------------------
|
|
32
|
+
// Structural Styles
|
|
33
|
+
// --------------------------------------------------------
|
|
34
|
+
|
|
35
|
+
width: 100%;
|
|
36
|
+
padding-top: var(--fs-search-top-padding-top);
|
|
37
|
+
padding-bottom: var(--fs-search-top-padding-bottom);
|
|
38
|
+
|
|
39
|
+
[data-fs-search-top-header] {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
min-height: var(--fs-search-top-min-height);
|
|
44
|
+
padding: var(--fs-search-top-header-padding-top) var(--fs-search-top-padding-right) var(--fs-search-top-header-padding-bottom) var(--fs-search-top-padding-left);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-fs-search-top-title] {
|
|
48
|
+
width: 100%;
|
|
49
|
+
font-size: var(--fs-search-top-title-size);
|
|
50
|
+
line-height: var(--fs-search-top-title-line-height);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-fs-search-top-item] {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
font-size: var(--fs-search-top-item-text-size);
|
|
57
|
+
line-height: var(--fs-search-top-item-line-height);
|
|
58
|
+
transition: var(--fs-search-top-transition-property) var(--fs-search-top-transition-timing) var(--fs-search-top-transition-function);
|
|
59
|
+
|
|
60
|
+
&:hover {
|
|
61
|
+
background-color: var(--fs-search-top-item-bkg-color-hover);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[data-fs-search-top-item-link] {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: flex-end;
|
|
67
|
+
justify-content: flex-start;
|
|
68
|
+
width: 100%;
|
|
69
|
+
padding-left: var(--fs-search-top-padding-left);
|
|
70
|
+
padding-right: var(--fs-search-top-padding-right);
|
|
71
|
+
column-gap: var(--fs-search-top-item-column-gap);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-fs-search-top-item-badge] [data-fs-badge-wrapper] { display: inline-block; }
|
|
77
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
[data-fs-slide-over] {
|
|
2
|
+
|
|
3
|
+
// --------------------------------------------------------
|
|
4
|
+
// Design Tokens for Slide Over
|
|
5
|
+
// --------------------------------------------------------
|
|
6
|
+
|
|
7
|
+
// Default properties
|
|
8
|
+
--fs-slide-over-bkg-color : var(--fs-color-body-bkg);
|
|
9
|
+
--fs-slide-over-transition-timing : var(--fs-transition-timing);
|
|
10
|
+
|
|
11
|
+
// Header
|
|
12
|
+
--fs-slide-over-header-padding : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
|
|
13
|
+
--fs-slide-over-header-bkg-color : var(--fs-color-neutral-0);
|
|
14
|
+
|
|
15
|
+
// Partial
|
|
16
|
+
--fs-slide-over-partial-gap : calc(2 * var(--fs-grid-padding));
|
|
17
|
+
--fs-slide-over-partial-width-mobile : calc(100vw - var(--fs-slide-over-partial-gap));
|
|
18
|
+
|
|
19
|
+
--fs-slide-over-partial-width-notebook : calc(100% / 3);
|
|
20
|
+
--fs-slide-over-partial-max-width-notebook : calc(var(--fs-grid-breakpoint-notebook) / 3);
|
|
21
|
+
|
|
22
|
+
// --------------------------------------------------------
|
|
23
|
+
// Structural Styles
|
|
24
|
+
// --------------------------------------------------------
|
|
25
|
+
|
|
26
|
+
position: fixed;
|
|
27
|
+
height: 100vh;
|
|
28
|
+
background-color: var(--fs-slide-over-bkg-color);
|
|
29
|
+
|
|
30
|
+
&[data-fs-slide-over-size="full"] {
|
|
31
|
+
width: 100vw;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[data-fs-slide-over-size="partial"] {
|
|
35
|
+
width: var(--fs-slide-over-partial-width-mobile);
|
|
36
|
+
|
|
37
|
+
@include media(">=notebook") {
|
|
38
|
+
width: var(--fs-slide-over-partial-width-notebook);
|
|
39
|
+
max-width: var(--fs-slide-over-partial-max-width-notebook);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&[data-fs-slide-over-state="in"] {
|
|
44
|
+
transition: transform var(--fs-slide-over-transition-timing) ease-in;
|
|
45
|
+
transform: translateX(0);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&[data-fs-slide-over-state="out"] {
|
|
49
|
+
transition: transform var(--fs-slide-over-transition-timing) ease-out;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&[data-fs-slide-over-direction="leftSide"] {
|
|
53
|
+
left: 0;
|
|
54
|
+
|
|
55
|
+
&[data-fs-slide-over-state="out"] {
|
|
56
|
+
transform: translateX(-100%);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&[data-fs-slide-over-direction="rightSide"] {
|
|
61
|
+
right: 0;
|
|
62
|
+
|
|
63
|
+
&[data-fs-slide-over-state="out"] {
|
|
64
|
+
transform: translateX(100%);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[data-fs-slide-over-header] {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
padding: var(--fs-slide-over-header-padding);
|
|
73
|
+
background-color: var(--fs-slide-over-header-bkg-color);
|
|
74
|
+
|
|
75
|
+
[data-fs-slide-over-header-icon] {
|
|
76
|
+
margin-right: calc(-1 * var(--fs-spacing-1));
|
|
77
|
+
|
|
78
|
+
svg {
|
|
79
|
+
width: 32px;
|
|
80
|
+
height: 32px;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
export * from '@faststore/components'
|
|
2
2
|
|
|
3
3
|
// Atoms
|
|
4
|
-
export { default as Popover } from './components/atoms/Popover'
|
|
5
|
-
export type { PopoverProps } from './components/atoms/Popover'
|
|
6
|
-
|
|
7
4
|
export { default as TextArea } from './components/atoms/TextArea'
|
|
8
5
|
export type { TextAreaProps } from './components/atoms/TextArea'
|
|
9
6
|
|
|
@@ -17,19 +14,6 @@ export type { SkuSelectorProps } from './components/molecules/SkuSelector'
|
|
|
17
14
|
export { default as OrderSummary } from './components/molecules/OrderSummary'
|
|
18
15
|
export type { OrderSummaryProps } from './components/molecules/OrderSummary'
|
|
19
16
|
|
|
20
|
-
export {
|
|
21
|
-
default as Card,
|
|
22
|
-
CardImage,
|
|
23
|
-
CardContent,
|
|
24
|
-
CardActions,
|
|
25
|
-
} from './components/molecules/Card'
|
|
26
|
-
export type {
|
|
27
|
-
CardProps,
|
|
28
|
-
CardImageProps,
|
|
29
|
-
CardContentProps,
|
|
30
|
-
CardActionsProps,
|
|
31
|
-
} from './components/molecules/Card'
|
|
32
|
-
|
|
33
17
|
export { default as Bullets } from './components/molecules/Bullets'
|
|
34
18
|
export type { BulletsProps } from './components/molecules/Bullets'
|
|
35
19
|
|
package/src/styles/base.scss
CHANGED
|
@@ -33,7 +33,9 @@
|
|
|
33
33
|
@import "../components/molecules/QuantitySelector/styles";
|
|
34
34
|
@import "../components/molecules/RadioField/styles";
|
|
35
35
|
@import "../components/molecules/Rating/styles";
|
|
36
|
+
@import "../components/molecules/SearchHistory/styles";
|
|
36
37
|
@import "../components/molecules/SearchProductCard/styles";
|
|
38
|
+
@import "../components/molecules/SearchTop/styles";
|
|
37
39
|
@import "../components/molecules/SelectField/styles";
|
|
38
40
|
@import "../components/molecules/Table/styles";
|
|
39
41
|
@import "../components/molecules/Tag/styles";
|
|
@@ -44,3 +46,4 @@
|
|
|
44
46
|
@import "../components/organisms/Hero/styles";
|
|
45
47
|
@import "../components/organisms/PaymentMethods/styles";
|
|
46
48
|
@import "../components/organisms/PriceRange/styles";
|
|
49
|
+
@import "../components/organisms/SlideOver/styles";
|
package/src/styles/global.scss
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { PopoverProps as ReachPopoverProps } from '@reach/popover';
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
3
|
-
export type PopoverProps = Omit<ReachPopoverProps, 'position' | 'targetRef'> & {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
/**
|
|
9
|
-
* Ref for the component initial position.
|
|
10
|
-
*/
|
|
11
|
-
targetRef: ReachPopoverProps['targetRef'];
|
|
12
|
-
children: ReactNode;
|
|
13
|
-
};
|
|
14
|
-
declare const Popover: ({ targetRef, testId, children, ...otherProps }: PopoverProps) => JSX.Element;
|
|
15
|
-
export default Popover;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import ReachPopover, { positionDefault } from '@reach/popover';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
const Popover = ({ targetRef, testId = 'store-popover', children, ...otherProps }) => {
|
|
4
|
-
return (React.createElement(ReachPopover, { "data-fs-popover": true, "data-testid": testId, position: positionDefault, targetRef: targetRef, ...otherProps }, children));
|
|
5
|
-
};
|
|
6
|
-
export default Popover;
|
|
7
|
-
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/atoms/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,YAAY,EAAE,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,MAAM,OAAO,GAAG,CAAC,EACf,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,QAAQ,EACR,GAAG,UAAU,EACA,EAAE,EAAE;IACjB,OAAO,CACL,oBAAC,YAAY,4CAEE,MAAM,EACnB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,SAAS,KAChB,UAAU,IAEb,QAAQ,CACI,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,OAAO,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { HTMLAttributes } from 'react';
|
|
3
|
-
export interface CardProps 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 Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export default Card;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const Card = forwardRef(function Card({ testId = 'store-card', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("article", { ref: ref, "data-fs-card": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
});
|
|
5
|
-
export default Card;
|
|
6
|
-
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/molecules/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,IAAI,GAAG,UAAU,CAA4B,SAAS,IAAI,CAC9D,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,iCAAS,GAAG,EAAE,GAAG,uCAA4B,MAAM,KAAM,UAAU,IAChE,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { HTMLAttributes } from 'react';
|
|
3
|
-
export interface CardActionsProps 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 CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export default CardActions;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const CardActions = forwardRef(function CardActions({ testId = 'store-card-actions', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("div", { ref: ref, "data-card-actions": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
});
|
|
5
|
-
export default CardActions;
|
|
6
|
-
//# sourceMappingURL=CardActions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../../src/components/molecules/Card/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IACjE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface CardContentProps 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 CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
-
export default CardContent;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const CardContent = forwardRef(function CardContent({ testId = 'store-card-content', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("section", { ref: ref, "data-card-content": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
});
|
|
5
|
-
export default CardContent;
|
|
6
|
-
//# sourceMappingURL=CardContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardContent.js","sourceRoot":"","sources":["../../../../src/components/molecules/Card/CardContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,iCAAS,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IACrE,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface CardImageProps 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 CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export default CardImage;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const CardImage = forwardRef(function CardImage({ testId = 'store-card-image', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("div", { ref: ref, "data-card-image": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
});
|
|
5
|
-
export default CardImage;
|
|
6
|
-
//# sourceMappingURL=CardImage.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardImage.js","sourceRoot":"","sources":["../../../../src/components/molecules/Card/CardImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,kBAAkB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACxD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,0CAA+B,MAAM,KAAM,UAAU,IAC/D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { default } from './Card';
|
|
2
|
-
export type { CardProps } from './Card';
|
|
3
|
-
export { default as CardImage } from './CardImage';
|
|
4
|
-
export type { CardImageProps } from './CardImage';
|
|
5
|
-
export { default as CardContent } from './CardContent';
|
|
6
|
-
export type { CardContentProps } from './CardContent';
|
|
7
|
-
export { default as CardActions } from './CardActions';
|
|
8
|
-
export type { CardActionsProps } from './CardActions';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import type { PopoverProps as ReachPopoverProps } from '@reach/popover'
|
|
2
|
-
import ReachPopover, { positionDefault } from '@reach/popover'
|
|
3
|
-
import type { ReactNode } from 'react'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
export type PopoverProps = Omit<ReachPopoverProps, 'position' | 'targetRef'> & {
|
|
7
|
-
/**
|
|
8
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
9
|
-
*/
|
|
10
|
-
testId?: string
|
|
11
|
-
/**
|
|
12
|
-
* Ref for the component initial position.
|
|
13
|
-
*/
|
|
14
|
-
targetRef: ReachPopoverProps['targetRef']
|
|
15
|
-
children: ReactNode
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const Popover = ({
|
|
19
|
-
targetRef,
|
|
20
|
-
testId = 'store-popover',
|
|
21
|
-
children,
|
|
22
|
-
...otherProps
|
|
23
|
-
}: PopoverProps) => {
|
|
24
|
-
return (
|
|
25
|
-
<ReachPopover
|
|
26
|
-
data-fs-popover
|
|
27
|
-
data-testid={testId}
|
|
28
|
-
position={positionDefault}
|
|
29
|
-
targetRef={targetRef}
|
|
30
|
-
{...otherProps}
|
|
31
|
-
>
|
|
32
|
-
{children}
|
|
33
|
-
</ReachPopover>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export default Popover
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react'
|
|
2
|
-
import type { HTMLAttributes } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface CardProps 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 Card = forwardRef<HTMLDivElement, CardProps>(function Card(
|
|
12
|
-
{ testId = 'store-card', children, ...otherProps },
|
|
13
|
-
ref
|
|
14
|
-
) {
|
|
15
|
-
return (
|
|
16
|
-
<article ref={ref} data-fs-card data-testid={testId} {...otherProps}>
|
|
17
|
-
{children}
|
|
18
|
-
</article>
|
|
19
|
-
)
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
export default Card
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react'
|
|
2
|
-
import type { HTMLAttributes } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface CardActionsProps 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 CardActions = forwardRef<HTMLDivElement, CardActionsProps>(
|
|
12
|
-
function CardActions(
|
|
13
|
-
{ testId = 'store-card-actions', children, ...otherProps },
|
|
14
|
-
ref
|
|
15
|
-
) {
|
|
16
|
-
return (
|
|
17
|
-
<div ref={ref} data-card-actions data-testid={testId} {...otherProps}>
|
|
18
|
-
{children}
|
|
19
|
-
</div>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
export default CardActions
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface CardContentProps 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 CardContent = forwardRef<HTMLElement, CardContentProps>(
|
|
12
|
-
function CardContent(
|
|
13
|
-
{ testId = 'store-card-content', children, ...otherProps },
|
|
14
|
-
ref
|
|
15
|
-
) {
|
|
16
|
-
return (
|
|
17
|
-
<section ref={ref} data-card-content data-testid={testId} {...otherProps}>
|
|
18
|
-
{children}
|
|
19
|
-
</section>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
export default CardContent
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface CardImageProps 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 CardImage = forwardRef<HTMLDivElement, CardImageProps>(function CardImage(
|
|
12
|
-
{ testId = 'store-card-image', children, ...otherProps },
|
|
13
|
-
ref
|
|
14
|
-
) {
|
|
15
|
-
return (
|
|
16
|
-
<div ref={ref} data-card-image data-testid={testId} {...otherProps}>
|
|
17
|
-
{children}
|
|
18
|
-
</div>
|
|
19
|
-
)
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
export default CardImage
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export { default } from './Card'
|
|
2
|
-
export type { CardProps } from './Card'
|
|
3
|
-
|
|
4
|
-
export { default as CardImage } from './CardImage'
|
|
5
|
-
export type { CardImageProps } from './CardImage'
|
|
6
|
-
|
|
7
|
-
export { default as CardContent } from './CardContent'
|
|
8
|
-
export type { CardContentProps } from './CardContent'
|
|
9
|
-
|
|
10
|
-
export { default as CardActions } from './CardActions'
|
|
11
|
-
export type { CardActionsProps } from './CardActions'
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|