@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.
Files changed (34) hide show
  1. package/dist/index.d.ts +0 -4
  2. package/dist/index.js +0 -2
  3. package/dist/index.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/molecules/SearchDropdown/styles.scss +65 -0
  6. package/src/components/molecules/SearchInputField/styles.scss +68 -0
  7. package/src/components/organisms/OutOfStock/styles.scss +55 -0
  8. package/src/components/organisms/SearchInput/styles.scss +28 -0
  9. package/src/index.ts +0 -17
  10. package/src/styles/components.scss +4 -0
  11. package/dist/components/molecules/SearchInput/SearchInput.d.ts +0 -28
  12. package/dist/components/molecules/SearchInput/SearchInput.js +0 -26
  13. package/dist/components/molecules/SearchInput/SearchInput.js.map +0 -1
  14. package/dist/components/molecules/SearchInput/index.d.ts +0 -2
  15. package/dist/components/molecules/SearchInput/index.js +0 -2
  16. package/dist/components/molecules/SearchInput/index.js.map +0 -1
  17. package/dist/components/organisms/OutOfStock/OutOfStock.d.ts +0 -21
  18. package/dist/components/organisms/OutOfStock/OutOfStock.js +0 -8
  19. package/dist/components/organisms/OutOfStock/OutOfStock.js.map +0 -1
  20. package/dist/components/organisms/OutOfStock/OutOfStockMessage.d.ts +0 -9
  21. package/dist/components/organisms/OutOfStock/OutOfStockMessage.js +0 -5
  22. package/dist/components/organisms/OutOfStock/OutOfStockMessage.js.map +0 -1
  23. package/dist/components/organisms/OutOfStock/OutOfStockTitle.d.ts +0 -9
  24. package/dist/components/organisms/OutOfStock/OutOfStockTitle.js +0 -5
  25. package/dist/components/organisms/OutOfStock/OutOfStockTitle.js.map +0 -1
  26. package/dist/components/organisms/OutOfStock/index.d.ts +0 -6
  27. package/dist/components/organisms/OutOfStock/index.js +0 -4
  28. package/dist/components/organisms/OutOfStock/index.js.map +0 -1
  29. package/src/components/molecules/SearchInput/SearchInput.tsx +0 -100
  30. package/src/components/molecules/SearchInput/index.ts +0 -2
  31. package/src/components/organisms/OutOfStock/OutOfStock.tsx +0 -39
  32. package/src/components/organisms/OutOfStock/OutOfStockMessage.tsx +0 -27
  33. package/src/components/organisms/OutOfStock/OutOfStockTitle.tsx +0 -27
  34. 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,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"}
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.87-alpha.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": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
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,2 +0,0 @@
1
- export { default } from './SearchInput';
2
- export type { SearchInputProps, SearchInputRef } from './SearchInput';
@@ -1,2 +0,0 @@
1
- export { default } from './SearchInput';
2
- //# sourceMappingURL=index.js.map
@@ -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,4 +0,0 @@
1
- export { default } from './OutOfStock';
2
- export { OutOfStockMessage } from './OutOfStockMessage';
3
- export { OutOfStockTitle } from './OutOfStockTitle';
4
- //# sourceMappingURL=index.js.map
@@ -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,2 +0,0 @@
1
- export { default } from './SearchInput'
2
- export type { SearchInputProps, SearchInputRef } from './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'