@faststore/ui 2.0.87-alpha.0 → 2.0.89-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 +2 -2
- package/src/components/molecules/SearchDropdown/styles.scss +65 -0
- package/src/components/molecules/SearchInputField/styles.scss +68 -0
- package/src/components/organisms/OutOfStock/styles.scss +55 -0
- package/src/components/organisms/SearchInput/styles.scss +28 -0
- package/src/index.ts +0 -17
- package/src/styles/components.scss +4 -0
- package/dist/components/molecules/SearchInput/SearchInput.d.ts +0 -28
- package/dist/components/molecules/SearchInput/SearchInput.js +0 -26
- package/dist/components/molecules/SearchInput/SearchInput.js.map +0 -1
- package/dist/components/molecules/SearchInput/index.d.ts +0 -2
- package/dist/components/molecules/SearchInput/index.js +0 -2
- package/dist/components/molecules/SearchInput/index.js.map +0 -1
- package/dist/components/organisms/OutOfStock/OutOfStock.d.ts +0 -21
- package/dist/components/organisms/OutOfStock/OutOfStock.js +0 -8
- package/dist/components/organisms/OutOfStock/OutOfStock.js.map +0 -1
- package/dist/components/organisms/OutOfStock/OutOfStockMessage.d.ts +0 -9
- package/dist/components/organisms/OutOfStock/OutOfStockMessage.js +0 -5
- package/dist/components/organisms/OutOfStock/OutOfStockMessage.js.map +0 -1
- package/dist/components/organisms/OutOfStock/OutOfStockTitle.d.ts +0 -9
- package/dist/components/organisms/OutOfStock/OutOfStockTitle.js +0 -5
- package/dist/components/organisms/OutOfStock/OutOfStockTitle.js.map +0 -1
- package/dist/components/organisms/OutOfStock/index.d.ts +0 -6
- package/dist/components/organisms/OutOfStock/index.js +0 -4
- package/dist/components/organisms/OutOfStock/index.js.map +0 -1
- package/src/components/molecules/SearchInput/SearchInput.tsx +0 -100
- package/src/components/molecules/SearchInput/index.ts +0 -2
- package/src/components/organisms/OutOfStock/OutOfStock.tsx +0 -39
- package/src/components/organisms/OutOfStock/OutOfStockMessage.tsx +0 -27
- package/src/components/organisms/OutOfStock/OutOfStockTitle.tsx +0 -27
- package/src/components/organisms/OutOfStock/index.tsx +0 -6
package/dist/index.d.ts
CHANGED
|
@@ -7,16 +7,12 @@ export { default as OrderSummary } from './components/molecules/OrderSummary';
|
|
|
7
7
|
export type { OrderSummaryProps } from './components/molecules/OrderSummary';
|
|
8
8
|
export { default as Bullets } from './components/molecules/Bullets';
|
|
9
9
|
export type { BulletsProps } from './components/molecules/Bullets';
|
|
10
|
-
export { default as SearchInput } from './components/molecules/SearchInput';
|
|
11
|
-
export type { SearchInputProps, SearchInputRef, } from './components/molecules/SearchInput';
|
|
12
10
|
export { default as Carousel } from './components/molecules/Carousel';
|
|
13
11
|
export type { CarouselProps } from './components/molecules/Carousel';
|
|
14
12
|
export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
|
|
15
13
|
export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
|
|
16
14
|
export { default as Form } from './components/molecules/Form';
|
|
17
15
|
export type { FormProps } from './components/molecules/Form';
|
|
18
|
-
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
|
|
19
|
-
export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './components/organisms/OutOfStock';
|
|
20
16
|
export { Tiles, Tile } from './components/organisms/Tiles';
|
|
21
17
|
export type { TilesProps, TileProps } from './components/organisms/Tiles';
|
|
22
18
|
export { default as useSlider } from './hooks/useSlider';
|
package/dist/index.js
CHANGED
|
@@ -5,12 +5,10 @@ export { default as Incentive } from './components/atoms/Incentive';
|
|
|
5
5
|
// Molecules
|
|
6
6
|
export { default as OrderSummary } from './components/molecules/OrderSummary';
|
|
7
7
|
export { default as Bullets } from './components/molecules/Bullets';
|
|
8
|
-
export { default as SearchInput } from './components/molecules/SearchInput';
|
|
9
8
|
export { default as Carousel } from './components/molecules/Carousel';
|
|
10
9
|
export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
|
|
11
10
|
export { default as Form } from './components/molecules/Form';
|
|
12
11
|
// Organisms
|
|
13
|
-
export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
|
|
14
12
|
export { Tiles, Tile } from './components/organisms/Tiles';
|
|
15
13
|
// Hooks
|
|
16
14
|
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":"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;AAEZ,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,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;AAEZ,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,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,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.89-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"node": "16.18.0",
|
|
59
59
|
"yarn": "1.19.1"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "110810c0f5ff267980370f556fe7e9ad34e4d68a"
|
|
62
62
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
[data-fs-search-dropdown] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Search Dropdown
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-search-input-height-desktop : var(--fs-spacing-6);
|
|
8
|
+
--fs-search-dropdown-bkg-color : var(--fs-color-neutral-0);
|
|
9
|
+
--fs-search-dropdown-box-shadow : var(--fs-shadow);
|
|
10
|
+
|
|
11
|
+
--fs-search-dropdown-width-mobile : 100vw;
|
|
12
|
+
--fs-search-dropdown-width-desktop : 100%;
|
|
13
|
+
|
|
14
|
+
--fs-search-dropdown-border-width : var(--fs-border-width);
|
|
15
|
+
--fs-search-dropdown-border-color : var(--fs-border-color);
|
|
16
|
+
--fs-search-dropdown-border-radius : 0 0 var(--fs-border-radius) var(--fs-border-radius);
|
|
17
|
+
|
|
18
|
+
--fs-search-dropdown-position-left-mobile : calc(-1 * var(--fs-control-tap-size));
|
|
19
|
+
--fs-search-dropdown-position-left-tablet : calc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1));
|
|
20
|
+
--fs-search-dropdown-position-top-mobile : calc(var(--fs-search-dropdown-position-top-tablet) + 1px);
|
|
21
|
+
--fs-search-dropdown-position-top-tablet : calc(var(--fs-control-tap-size) + var(--fs-spacing-2) + var(--fs-border-width));
|
|
22
|
+
--fs-search-dropdown-position-top-desktop : var(--fs-search-input-height-desktop);
|
|
23
|
+
|
|
24
|
+
--fs-search-dropdown-section-border-color : var(--fs-border-color-light);
|
|
25
|
+
|
|
26
|
+
// --------------------------------------------------------
|
|
27
|
+
// Structural Styles
|
|
28
|
+
// --------------------------------------------------------
|
|
29
|
+
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: var(--fs-search-dropdown-position-top-mobile);
|
|
32
|
+
left: var(--fs-search-dropdown-position-left-mobile);
|
|
33
|
+
z-index: 1;
|
|
34
|
+
width: var(--fs-search-dropdown-width-mobile);
|
|
35
|
+
padding-top: 0;
|
|
36
|
+
background-color: var(--fs-search-dropdown-bkg-color);
|
|
37
|
+
|
|
38
|
+
&:empty { display: none; }
|
|
39
|
+
|
|
40
|
+
@include media(">=tablet") {
|
|
41
|
+
top: var(--fs-search-dropdown-position-top-tablet);
|
|
42
|
+
left: var(--fs-search-dropdown-position-left-tablet);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@include media(">=notebook") {
|
|
46
|
+
top: var(--fs-search-dropdown-position-top-desktop);
|
|
47
|
+
left: 0;
|
|
48
|
+
width: var(--fs-search-dropdown-width-desktop);
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
border: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-border-color);
|
|
51
|
+
border-top: none;
|
|
52
|
+
border-radius: var(--fs-search-dropdown-border-radius);
|
|
53
|
+
box-shadow: var(--fs-search-dropdown-box-shadow);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-fs-search-dropdown-loading-text] { padding: var(--fs-spacing-3); }
|
|
57
|
+
|
|
58
|
+
section, [data-fs-search-section] {
|
|
59
|
+
border-bottom: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-section-border-color);
|
|
60
|
+
|
|
61
|
+
&:last-child {
|
|
62
|
+
border-bottom-width: 0;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
[data-fs-search-input-field] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Search Input Field
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
// Default properties
|
|
6
|
+
--fs-search-input-height-desktop : var(--fs-spacing-6);
|
|
7
|
+
|
|
8
|
+
--fs-search-input-field-height-mobile : var(--fs-control-tap-size);
|
|
9
|
+
--fs-search-input-field-height-desktop : var(--fs-spacing-6);
|
|
10
|
+
|
|
11
|
+
--fs-search-input-field-transition-timing : var(--fs-transition-timing);
|
|
12
|
+
--fs-search-input-field-transition-function : ease;
|
|
13
|
+
|
|
14
|
+
// Button
|
|
15
|
+
--fs-search-input-field-button-width : var(--fs-spacing-7);
|
|
16
|
+
--fs-search-input-field-button-min-height : var(--fs-search-input-height-desktop);
|
|
17
|
+
--fs-search-input-field-button-bkg-color : transparent;
|
|
18
|
+
|
|
19
|
+
--fs-search-input-field-button-height-mobile : var(--fs-search-input-field-button-width);
|
|
20
|
+
--fs-search-input-field-button-height-desktop : var(--fs-search-input-field-height-desktop);
|
|
21
|
+
|
|
22
|
+
// Input
|
|
23
|
+
--fs-search-input-field-input-padding-right : var(--fs-search-input-field-button-width);
|
|
24
|
+
--fs-search-input-field-input-bkg-color : var(--fs-color-body-bkg);
|
|
25
|
+
|
|
26
|
+
// Icon
|
|
27
|
+
--fs-search-input-field-icon-width : var(--fs-spacing-4);
|
|
28
|
+
--fs-search-input-field-icon-height : var(--fs-search-input-field-icon-width);
|
|
29
|
+
|
|
30
|
+
// --------------------------------------------------------
|
|
31
|
+
// Structural Styles
|
|
32
|
+
// --------------------------------------------------------
|
|
33
|
+
|
|
34
|
+
position: relative;
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: var(--fs-search-input-field-height-mobile);
|
|
38
|
+
|
|
39
|
+
@include input-focus-ring;
|
|
40
|
+
|
|
41
|
+
@include media(">=notebook") { height: var(--fs-search-input-field-height-desktop); }
|
|
42
|
+
|
|
43
|
+
[data-fs-icon-button][data-fs-button-variant] {
|
|
44
|
+
position: absolute;
|
|
45
|
+
right: var(--fs-spacing-0);
|
|
46
|
+
width: var(--fs-search-input-field-button-width);
|
|
47
|
+
height: var(--fs-search-input-field-button-height-mobile);
|
|
48
|
+
padding: 0;
|
|
49
|
+
background-color: var(--fs-search-input-field-button-bkg-color);
|
|
50
|
+
border: 0;
|
|
51
|
+
@include media(">=notebook") {
|
|
52
|
+
height: var(--fs-search-input-field-button-height-desktop);
|
|
53
|
+
min-height: var(--fs-search-input-field-button-min-height);
|
|
54
|
+
}
|
|
55
|
+
svg {
|
|
56
|
+
width: var(--fs-search-input-field-icon-width);
|
|
57
|
+
height: var(--fs-search-input-field-icon-height);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[data-fs-search-input-field-input] {
|
|
62
|
+
height: auto;
|
|
63
|
+
padding-right: var(--fs-search-input-field-input-padding-right);
|
|
64
|
+
background-color: var(--fs-search-input-field-input-bkg-color);
|
|
65
|
+
transition: box-shadow var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-timing), border var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-function);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
[data-fs-out-of-stock] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Out of Stock
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Title
|
|
7
|
+
--fs-out-of-stock-title-margin-bottom : var(--fs-spacing-0);
|
|
8
|
+
--fs-out-of-stock-title-line-height : 1.15;
|
|
9
|
+
--fs-out-of-stock-title-size : var(--fs-text-size-lead);
|
|
10
|
+
--fs-out-of-stock-title-weight : var(--fs-text-weight-bold);
|
|
11
|
+
--fs-out-of-stock-title-color : var(--fs-color-neutral-text);
|
|
12
|
+
|
|
13
|
+
// Message
|
|
14
|
+
--fs-out-of-stock-message-column-gap : var(--fs-spacing-0);
|
|
15
|
+
--fs-out-of-stock-message-margin-bottom : var(--fs-spacing-3);
|
|
16
|
+
--fs-out-of-stock-message-line-height : 1.15;
|
|
17
|
+
--fs-out-of-stock-message-size : var(--fs-text-size-body);
|
|
18
|
+
--fs-out-of-stock-message-weight : var(--fs-text-weight-regular);
|
|
19
|
+
--fs-out-of-stock-message-color : var(--fs-color-success-text);
|
|
20
|
+
|
|
21
|
+
// Button
|
|
22
|
+
--fs-out-of-stock-button-width : 100%;
|
|
23
|
+
--fs-out-of-stock-button-margin-top : var(--fs-spacing-3);
|
|
24
|
+
|
|
25
|
+
// --------------------------------------------------------
|
|
26
|
+
// Structural Styles
|
|
27
|
+
// --------------------------------------------------------
|
|
28
|
+
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
|
|
32
|
+
[data-fs-out-of-stock-title] {
|
|
33
|
+
margin-bottom: var(--fs-out-of-stock-title-margin-bottom);
|
|
34
|
+
font-size: var(--fs-out-of-stock-title-size);
|
|
35
|
+
font-weight: var(--fs-out-of-stock-title-weight);
|
|
36
|
+
line-height: var(--fs-out-of-stock-title-line-height);
|
|
37
|
+
color: var(--fs-out-of-stock-title-color);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-fs-out-of-stock-message] {
|
|
41
|
+
display: flex;
|
|
42
|
+
column-gap: var(--fs-out-of-stock-message-column-gap);
|
|
43
|
+
align-items: center;
|
|
44
|
+
margin-bottom: var(--fs-out-of-stock-message-margin-bottom);
|
|
45
|
+
font-size: var(--fs-out-of-stock-message-font-size);
|
|
46
|
+
font-weight: var(--fs-out-of-stock-message-weight);
|
|
47
|
+
line-height: var(--fs-out-of-stock-message-line-height);
|
|
48
|
+
color: var(--fs-out-of-stock-message-color);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-fs-button] {
|
|
52
|
+
width: var(--fs-out-of-stock-button-width);
|
|
53
|
+
margin-top: var(--fs-out-of-stock-button-margin-top);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
[data-fs-search-input] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Search Input
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-search-input-height-desktop : var(--fs-spacing-6);
|
|
8
|
+
|
|
9
|
+
// --------------------------------------------------------
|
|
10
|
+
// Structural Styles
|
|
11
|
+
// --------------------------------------------------------
|
|
12
|
+
|
|
13
|
+
position: relative;
|
|
14
|
+
|
|
15
|
+
&[data-fs-search-input-dropdown-visible="true"] [data-fs-search-input-field-input] {
|
|
16
|
+
@include media(">=notebook") {
|
|
17
|
+
border-bottom-right-radius: 0;
|
|
18
|
+
border-bottom-left-radius: 0;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[data-fs-search-product-card-link] {
|
|
23
|
+
color: var(--fs-color-neutral-7);
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
|
|
26
|
+
&:hover { text-decoration: none; }
|
|
27
|
+
}
|
|
28
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -15,12 +15,6 @@ export type { OrderSummaryProps } from './components/molecules/OrderSummary'
|
|
|
15
15
|
export { default as Bullets } from './components/molecules/Bullets'
|
|
16
16
|
export type { BulletsProps } from './components/molecules/Bullets'
|
|
17
17
|
|
|
18
|
-
export { default as SearchInput } from './components/molecules/SearchInput'
|
|
19
|
-
export type {
|
|
20
|
-
SearchInputProps,
|
|
21
|
-
SearchInputRef,
|
|
22
|
-
} from './components/molecules/SearchInput'
|
|
23
|
-
|
|
24
18
|
export { default as Carousel } from './components/molecules/Carousel'
|
|
25
19
|
export type { CarouselProps } from './components/molecules/Carousel'
|
|
26
20
|
|
|
@@ -41,17 +35,6 @@ export { default as Form } from './components/molecules/Form'
|
|
|
41
35
|
export type { FormProps } from './components/molecules/Form'
|
|
42
36
|
|
|
43
37
|
// Organisms
|
|
44
|
-
export {
|
|
45
|
-
default as OutOfStock,
|
|
46
|
-
OutOfStockTitle,
|
|
47
|
-
OutOfStockMessage,
|
|
48
|
-
} from './components/organisms/OutOfStock'
|
|
49
|
-
export type {
|
|
50
|
-
OutOfStockProps,
|
|
51
|
-
OutOfStockMessageProps,
|
|
52
|
-
OutOfStockTitleProps,
|
|
53
|
-
} from './components/organisms/OutOfStock'
|
|
54
|
-
|
|
55
38
|
export { Tiles, Tile } from './components/organisms/Tiles'
|
|
56
39
|
export type { TilesProps, TileProps } from './components/organisms/Tiles'
|
|
57
40
|
|
|
@@ -34,7 +34,9 @@
|
|
|
34
34
|
@import "../components/molecules/RadioField/styles";
|
|
35
35
|
@import "../components/molecules/Rating/styles";
|
|
36
36
|
@import "../components/molecules/SearchAutoComplete/styles";
|
|
37
|
+
@import "../components/molecules/SearchDropdown/styles";
|
|
37
38
|
@import "../components/molecules/SearchHistory/styles";
|
|
39
|
+
@import "../components/molecules/SearchInputField/styles";
|
|
38
40
|
@import "../components/molecules/SearchProducts/styles";
|
|
39
41
|
@import "../components/molecules/SearchTop/styles";
|
|
40
42
|
@import "../components/molecules/SelectField/styles";
|
|
@@ -47,6 +49,8 @@
|
|
|
47
49
|
|
|
48
50
|
// Organisms
|
|
49
51
|
@import "../components/organisms/Hero/styles";
|
|
52
|
+
@import "../components/organisms/OutOfStock/styles";
|
|
50
53
|
@import "../components/organisms/PaymentMethods/styles";
|
|
51
54
|
@import "../components/organisms/PriceRange/styles";
|
|
55
|
+
@import "../components/organisms/SearchInput/styles";
|
|
52
56
|
@import "../components/organisms/SlideOver/styles";
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { AriaAttributes, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>;
|
|
4
|
-
export interface SearchInputProps extends InputProps {
|
|
5
|
-
/**
|
|
6
|
-
* Callback function when submitted.
|
|
7
|
-
*/
|
|
8
|
-
onSubmit: (value: string) => void;
|
|
9
|
-
/**
|
|
10
|
-
* Custom icon inside the submit button.
|
|
11
|
-
*/
|
|
12
|
-
icon?: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Custom aria-label for input and button.
|
|
15
|
-
*/
|
|
16
|
-
'aria-label'?: AriaAttributes['aria-label'];
|
|
17
|
-
/**
|
|
18
|
-
/**
|
|
19
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
20
|
-
*/
|
|
21
|
-
testId?: string;
|
|
22
|
-
}
|
|
23
|
-
export interface SearchInputRef {
|
|
24
|
-
inputRef?: HTMLInputElement | null;
|
|
25
|
-
formRef?: HTMLFormElement | null;
|
|
26
|
-
}
|
|
27
|
-
declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<SearchInputRef | null>>;
|
|
28
|
-
export default SearchInput;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
2
|
-
import { Icon, Button, Input } from '@faststore/components';
|
|
3
|
-
import Form from '../Form';
|
|
4
|
-
const SearchIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
|
|
5
|
-
React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
|
|
6
|
-
React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
|
|
7
|
-
const SearchInput = forwardRef(function SearchInput({ onSubmit, icon, 'aria-label': ariaLabel = 'search', testId = 'store-search-input', ...otherProps }, ref) {
|
|
8
|
-
const inputRef = useRef(null);
|
|
9
|
-
const formRef = useRef(null);
|
|
10
|
-
const handleSubmit = (event) => {
|
|
11
|
-
event.preventDefault();
|
|
12
|
-
if (inputRef.current?.value !== '') {
|
|
13
|
-
onSubmit(inputRef.current.value);
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
useImperativeHandle(ref, () => ({
|
|
17
|
-
inputRef: inputRef.current,
|
|
18
|
-
formRef: formRef.current,
|
|
19
|
-
}));
|
|
20
|
-
return (React.createElement(Form, { ref: formRef, "data-fs-search-input-form": true, "data-testid": testId, onSubmit: handleSubmit, role: "search" },
|
|
21
|
-
React.createElement(Input, { ref: inputRef, "aria-label": ariaLabel, ...otherProps }),
|
|
22
|
-
React.createElement(Button, { type: "submit", "aria-label": "Submit Search" },
|
|
23
|
-
React.createElement(Icon, { component: icon ?? React.createElement(SearchIcon, null) }))));
|
|
24
|
-
});
|
|
25
|
-
export default SearchInput;
|
|
26
|
-
//# sourceMappingURL=SearchInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAE1B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO;IAEtB,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;IAChC,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,CAC1C,CACP,CAAA;AA6BD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,oBAAoB,EAC7B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,OAAO,oDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,gBAAc,SAAS,KAAM,UAAU,GAAI;QAC/D,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,gBAAY,eAAe;YAC9C,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,IAAI,oBAAC,UAAU,OAAG,GAAI,CACpC,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ReactNode, FormHTMLAttributes } from 'react';
|
|
3
|
-
export type OutOfStockBaseProps = {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress,
|
|
6
|
-
* testing-library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Children for Out of Stock components.
|
|
11
|
-
*/
|
|
12
|
-
children: string | ReactNode;
|
|
13
|
-
};
|
|
14
|
-
export type OutOfStockProps = OutOfStockBaseProps & {
|
|
15
|
-
/**
|
|
16
|
-
* Event emitted when form is submitted.
|
|
17
|
-
*/
|
|
18
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
19
|
-
} & FormHTMLAttributes<HTMLFormElement>;
|
|
20
|
-
declare const OutOfStock: ({ testId, children, ...otherProps }: OutOfStockProps) => JSX.Element;
|
|
21
|
-
export default OutOfStock;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Form from '../../molecules/Form';
|
|
3
|
-
const OutOfStock = ({ testId = 'store-out-of-stock', children, ...otherProps }) => {
|
|
4
|
-
return (React.createElement("section", { "data-fs-out-of-stock": true, "data-testid": testId },
|
|
5
|
-
React.createElement(Form, { "data-out-of-stock-form": true, testId: `${testId}-form`, ...otherProps }, children)));
|
|
6
|
-
};
|
|
7
|
-
export default OutOfStock;
|
|
8
|
-
//# sourceMappingURL=OutOfStock.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OutOfStock.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,IAAI,MAAM,sBAAsB,CAAA;AAqBvC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,GAAG,oBAAoB,EAC7B,QAAQ,EACR,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,OAAO,CACL,8EAA2C,MAAM;QAC/C,oBAAC,IAAI,oCAAwB,MAAM,EAAE,GAAG,MAAM,OAAO,KAAM,UAAU,IAClE,QAAQ,CACJ,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { OutOfStockBaseProps } from './OutOfStock';
|
|
3
|
-
export type OutOfStockMessageProps = {
|
|
4
|
-
/**
|
|
5
|
-
* Attribute used for polymorphic component.
|
|
6
|
-
*/
|
|
7
|
-
as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
|
|
8
|
-
} & OutOfStockBaseProps;
|
|
9
|
-
export declare const OutOfStockMessage: ({ as: MessageComponent, testId, children, ...otherProps }: OutOfStockMessageProps) => JSX.Element;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export const OutOfStockMessage = ({ as: MessageComponent = 'p', testId = 'store-out-of-stock-message', children, ...otherProps }) => {
|
|
3
|
-
return (React.createElement(MessageComponent, { "data-out-of-stock-message": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
};
|
|
5
|
-
//# sourceMappingURL=OutOfStockMessage.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OutOfStockMessage.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStockMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,EAAE,EAAE,gBAAgB,GAAG,GAAG,EAC1B,MAAM,GAAG,4BAA4B,EACrC,QAAQ,EACR,GAAG,UAAU,EACU,EAAE,EAAE;IAC3B,OAAO,CACL,oBAAC,gBAAgB,sDAEF,MAAM,KACf,UAAU,IAEb,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { OutOfStockBaseProps } from './OutOfStock';
|
|
3
|
-
export type OutOfStockTitleProps = {
|
|
4
|
-
/**
|
|
5
|
-
* Attribute used for polymorphic component.
|
|
6
|
-
*/
|
|
7
|
-
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
|
|
8
|
-
} & OutOfStockBaseProps;
|
|
9
|
-
export declare const OutOfStockTitle: ({ as: TitleComponent, testId, children, ...otherProps }: OutOfStockTitleProps) => JSX.Element;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export const OutOfStockTitle = ({ as: TitleComponent = 'h2', testId = 'store-out-of-stock-title', children, ...otherProps }) => {
|
|
3
|
-
return (React.createElement(TitleComponent, { "data-out-of-stock-title": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
-
};
|
|
5
|
-
//# sourceMappingURL=OutOfStockTitle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OutOfStockTitle.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStockTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EAAE,cAAc,GAAG,IAAI,EACzB,MAAM,GAAG,0BAA0B,EACnC,QAAQ,EACR,GAAG,UAAU,EACQ,EAAE,EAAE;IACzB,OAAO,CACL,oBAAC,cAAc,oDAEA,MAAM,KACf,UAAU,IAEb,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { default } from './OutOfStock';
|
|
2
|
-
export { OutOfStockMessage } from './OutOfStockMessage';
|
|
3
|
-
export { OutOfStockTitle } from './OutOfStockTitle';
|
|
4
|
-
export type { OutOfStockProps } from './OutOfStock';
|
|
5
|
-
export type { OutOfStockMessageProps } from './OutOfStockMessage';
|
|
6
|
-
export type { OutOfStockTitleProps } from './OutOfStockTitle';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
AriaAttributes,
|
|
3
|
-
FormEvent,
|
|
4
|
-
InputHTMLAttributes,
|
|
5
|
-
ReactNode,
|
|
6
|
-
} from 'react'
|
|
7
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react'
|
|
8
|
-
|
|
9
|
-
import { Icon, Button, Input } from '@faststore/components'
|
|
10
|
-
import Form from '../Form'
|
|
11
|
-
|
|
12
|
-
const SearchIcon = () => (
|
|
13
|
-
<svg
|
|
14
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
-
width="1em"
|
|
16
|
-
height="1em"
|
|
17
|
-
viewBox="0 0 24 24"
|
|
18
|
-
fill="none"
|
|
19
|
-
stroke="currentColor"
|
|
20
|
-
strokeWidth="2"
|
|
21
|
-
strokeLinecap="round"
|
|
22
|
-
strokeLinejoin="round"
|
|
23
|
-
>
|
|
24
|
-
<circle cx="11" cy="11" r="8" />
|
|
25
|
-
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
26
|
-
</svg>
|
|
27
|
-
)
|
|
28
|
-
|
|
29
|
-
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
|
|
30
|
-
|
|
31
|
-
export interface SearchInputProps extends InputProps {
|
|
32
|
-
/**
|
|
33
|
-
* Callback function when submitted.
|
|
34
|
-
*/
|
|
35
|
-
onSubmit: (value: string) => void
|
|
36
|
-
/**
|
|
37
|
-
* Custom icon inside the submit button.
|
|
38
|
-
*/
|
|
39
|
-
icon?: ReactNode
|
|
40
|
-
/**
|
|
41
|
-
* Custom aria-label for input and button.
|
|
42
|
-
*/
|
|
43
|
-
'aria-label'?: AriaAttributes['aria-label']
|
|
44
|
-
/**
|
|
45
|
-
/**
|
|
46
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
47
|
-
*/
|
|
48
|
-
testId?: string
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export interface SearchInputRef {
|
|
52
|
-
inputRef?: HTMLInputElement | null
|
|
53
|
-
formRef?: HTMLFormElement | null
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const SearchInput = forwardRef<SearchInputRef | null, SearchInputProps>(
|
|
57
|
-
function SearchInput(
|
|
58
|
-
{
|
|
59
|
-
onSubmit,
|
|
60
|
-
icon,
|
|
61
|
-
'aria-label': ariaLabel = 'search',
|
|
62
|
-
testId = 'store-search-input',
|
|
63
|
-
...otherProps
|
|
64
|
-
},
|
|
65
|
-
ref
|
|
66
|
-
) {
|
|
67
|
-
const inputRef = useRef<HTMLInputElement>(null)
|
|
68
|
-
const formRef = useRef<HTMLFormElement>(null)
|
|
69
|
-
|
|
70
|
-
const handleSubmit = (event: FormEvent) => {
|
|
71
|
-
event.preventDefault()
|
|
72
|
-
|
|
73
|
-
if (inputRef.current?.value !== '') {
|
|
74
|
-
onSubmit(inputRef.current!.value)
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
useImperativeHandle(ref, () => ({
|
|
79
|
-
inputRef: inputRef.current,
|
|
80
|
-
formRef: formRef.current,
|
|
81
|
-
}))
|
|
82
|
-
|
|
83
|
-
return (
|
|
84
|
-
<Form
|
|
85
|
-
ref={formRef}
|
|
86
|
-
data-fs-search-input-form
|
|
87
|
-
data-testid={testId}
|
|
88
|
-
onSubmit={handleSubmit}
|
|
89
|
-
role="search"
|
|
90
|
-
>
|
|
91
|
-
<Input ref={inputRef} aria-label={ariaLabel} {...otherProps} />
|
|
92
|
-
<Button type="submit" aria-label="Submit Search">
|
|
93
|
-
<Icon component={icon ?? <SearchIcon />} />
|
|
94
|
-
</Button>
|
|
95
|
-
</Form>
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
export default SearchInput
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import type { ReactNode, FormHTMLAttributes } from 'react'
|
|
3
|
-
|
|
4
|
-
import Form from '../../molecules/Form'
|
|
5
|
-
|
|
6
|
-
export type OutOfStockBaseProps = {
|
|
7
|
-
/**
|
|
8
|
-
* ID to find this component in testing tools (e.g.: cypress,
|
|
9
|
-
* testing-library, and jest).
|
|
10
|
-
*/
|
|
11
|
-
testId?: string
|
|
12
|
-
/**
|
|
13
|
-
* Children for Out of Stock components.
|
|
14
|
-
*/
|
|
15
|
-
children: string | ReactNode
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export type OutOfStockProps = OutOfStockBaseProps & {
|
|
19
|
-
/**
|
|
20
|
-
* Event emitted when form is submitted.
|
|
21
|
-
*/
|
|
22
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
|
|
23
|
-
} & FormHTMLAttributes<HTMLFormElement>
|
|
24
|
-
|
|
25
|
-
const OutOfStock = ({
|
|
26
|
-
testId = 'store-out-of-stock',
|
|
27
|
-
children,
|
|
28
|
-
...otherProps
|
|
29
|
-
}: OutOfStockProps) => {
|
|
30
|
-
return (
|
|
31
|
-
<section data-fs-out-of-stock data-testid={testId}>
|
|
32
|
-
<Form data-out-of-stock-form testId={`${testId}-form`} {...otherProps}>
|
|
33
|
-
{children}
|
|
34
|
-
</Form>
|
|
35
|
-
</section>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default OutOfStock
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import type { OutOfStockBaseProps } from './OutOfStock'
|
|
4
|
-
|
|
5
|
-
export type OutOfStockMessageProps = {
|
|
6
|
-
/**
|
|
7
|
-
* Attribute used for polymorphic component.
|
|
8
|
-
*/
|
|
9
|
-
as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'
|
|
10
|
-
} & OutOfStockBaseProps
|
|
11
|
-
|
|
12
|
-
export const OutOfStockMessage = ({
|
|
13
|
-
as: MessageComponent = 'p',
|
|
14
|
-
testId = 'store-out-of-stock-message',
|
|
15
|
-
children,
|
|
16
|
-
...otherProps
|
|
17
|
-
}: OutOfStockMessageProps) => {
|
|
18
|
-
return (
|
|
19
|
-
<MessageComponent
|
|
20
|
-
data-out-of-stock-message
|
|
21
|
-
data-testid={testId}
|
|
22
|
-
{...otherProps}
|
|
23
|
-
>
|
|
24
|
-
{children}
|
|
25
|
-
</MessageComponent>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import type { OutOfStockBaseProps } from './OutOfStock'
|
|
4
|
-
|
|
5
|
-
export type OutOfStockTitleProps = {
|
|
6
|
-
/**
|
|
7
|
-
* Attribute used for polymorphic component.
|
|
8
|
-
*/
|
|
9
|
-
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
|
|
10
|
-
} & OutOfStockBaseProps
|
|
11
|
-
|
|
12
|
-
export const OutOfStockTitle = ({
|
|
13
|
-
as: TitleComponent = 'h2',
|
|
14
|
-
testId = 'store-out-of-stock-title',
|
|
15
|
-
children,
|
|
16
|
-
...otherProps
|
|
17
|
-
}: OutOfStockTitleProps) => {
|
|
18
|
-
return (
|
|
19
|
-
<TitleComponent
|
|
20
|
-
data-out-of-stock-title
|
|
21
|
-
data-testid={testId}
|
|
22
|
-
{...otherProps}
|
|
23
|
-
>
|
|
24
|
-
{children}
|
|
25
|
-
</TitleComponent>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { default } from './OutOfStock'
|
|
2
|
-
export { OutOfStockMessage } from './OutOfStockMessage'
|
|
3
|
-
export { OutOfStockTitle } from './OutOfStockTitle'
|
|
4
|
-
export type { OutOfStockProps } from './OutOfStock'
|
|
5
|
-
export type { OutOfStockMessageProps } from './OutOfStockMessage'
|
|
6
|
-
export type { OutOfStockTitleProps } from './OutOfStockTitle'
|