@faststore/ui 2.0.87-alpha.0 → 2.0.88-alpha.0

package/dist/index.d.ts

@@ -7,8 +7,6 @@ export { default as OrderSummary } from './components/molecules/OrderSummary';
 export type { OrderSummaryProps } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';
 export type { BulletsProps } from './components/molecules/Bullets';
-export { default as SearchInput } from './components/molecules/SearchInput';
-export type { SearchInputProps, SearchInputRef, } from './components/molecules/SearchInput';
 export { default as Carousel } from './components/molecules/Carousel';
 export type { CarouselProps } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';

package/dist/index.js

@@ -5,7 +5,6 @@ export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
 export { default as OrderSummary } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';
-export { default as SearchInput } from './components/molecules/SearchInput';
 export { default as Carousel } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export { default as Form } from './components/molecules/Form';

package/dist/index.js.map

@@ -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"}
+{"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,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

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.87-alpha.0",
+  "version": "2.0.88-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
+  "gitHead": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
 }

package/src/components/molecules/SearchDropdown/styles.scss

@@ -0,0 +1,65 @@
+[data-fs-search-dropdown] {
+  // --------------------------------------------------------
+  // Design Tokens for Search Dropdown
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-search-input-height-desktop          : var(--fs-spacing-6);
+  --fs-search-dropdown-bkg-color            : var(--fs-color-neutral-0);
+  --fs-search-dropdown-box-shadow           : var(--fs-shadow);
+
+  --fs-search-dropdown-width-mobile         : 100vw;
+  --fs-search-dropdown-width-desktop        : 100%;
+
+  --fs-search-dropdown-border-width         : var(--fs-border-width);
+  --fs-search-dropdown-border-color         : var(--fs-border-color);
+  --fs-search-dropdown-border-radius        : 0 0 var(--fs-border-radius) var(--fs-border-radius);
+
+  --fs-search-dropdown-position-left-mobile : calc(-1 * var(--fs-control-tap-size));
+  --fs-search-dropdown-position-left-tablet : calc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1));
+  --fs-search-dropdown-position-top-mobile  : calc(var(--fs-search-dropdown-position-top-tablet) + 1px);
+  --fs-search-dropdown-position-top-tablet  : calc(var(--fs-control-tap-size) + var(--fs-spacing-2) + var(--fs-border-width));
+  --fs-search-dropdown-position-top-desktop : var(--fs-search-input-height-desktop);
+
+  --fs-search-dropdown-section-border-color : var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+    position: absolute;
+    top: var(--fs-search-dropdown-position-top-mobile);
+    left: var(--fs-search-dropdown-position-left-mobile);
+    z-index: 1;
+    width: var(--fs-search-dropdown-width-mobile);
+    padding-top: 0;
+    background-color: var(--fs-search-dropdown-bkg-color);
+
+    &:empty { display: none; }
+
+    @include media(">=tablet") {
+      top: var(--fs-search-dropdown-position-top-tablet);
+      left: var(--fs-search-dropdown-position-left-tablet);
+    }
+
+    @include media(">=notebook") {
+      top: var(--fs-search-dropdown-position-top-desktop);
+      left: 0;
+      width: var(--fs-search-dropdown-width-desktop);
+      overflow: hidden;
+      border: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-border-color);
+      border-top: none;
+      border-radius: var(--fs-search-dropdown-border-radius);
+      box-shadow: var(--fs-search-dropdown-box-shadow);
+    }
+
+    [data-fs-search-dropdown-loading-text] { padding: var(--fs-spacing-3); }
+
+    section, [data-fs-search-section] {
+      border-bottom: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-section-border-color);
+
+      &:last-child {
+        border-bottom-width: 0;
+      }
+    }
+  }

package/src/components/molecules/SearchInputField/styles.scss

@@ -0,0 +1,68 @@
+[data-fs-search-input-field] {
+  // --------------------------------------------------------
+  // Design Tokens for Search Input Field
+  // --------------------------------------------------------
+  // Default properties
+  --fs-search-input-height-desktop                : var(--fs-spacing-6);
+
+  --fs-search-input-field-height-mobile           : var(--fs-control-tap-size);
+  --fs-search-input-field-height-desktop          : var(--fs-spacing-6);
+
+  --fs-search-input-field-transition-timing       : var(--fs-transition-timing);
+  --fs-search-input-field-transition-function     : ease;
+
+  // Button
+  --fs-search-input-field-button-width            : var(--fs-spacing-7);
+  --fs-search-input-field-button-min-height       : var(--fs-search-input-height-desktop);
+  --fs-search-input-field-button-bkg-color        : transparent;
+
+  --fs-search-input-field-button-height-mobile    : var(--fs-search-input-field-button-width);
+  --fs-search-input-field-button-height-desktop   : var(--fs-search-input-field-height-desktop);
+
+  // Input
+  --fs-search-input-field-input-padding-right     : var(--fs-search-input-field-button-width);
+  --fs-search-input-field-input-bkg-color         : var(--fs-color-body-bkg);
+
+  // Icon
+  --fs-search-input-field-icon-width              : var(--fs-spacing-4);
+  --fs-search-input-field-icon-height             : var(--fs-search-input-field-icon-width);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  height: var(--fs-search-input-field-height-mobile);
+
+  @include input-focus-ring;
+
+  @include media(">=notebook") { height: var(--fs-search-input-field-height-desktop); }
+
+  [data-fs-icon-button][data-fs-button-variant] {
+    position: absolute;
+    right: var(--fs-spacing-0);
+    width: var(--fs-search-input-field-button-width);
+    height: var(--fs-search-input-field-button-height-mobile);
+    padding: 0;
+    background-color: var(--fs-search-input-field-button-bkg-color);
+    border: 0;
+    @include media(">=notebook") {
+      height: var(--fs-search-input-field-button-height-desktop);
+      min-height: var(--fs-search-input-field-button-min-height);
+    }
+    svg {
+      width: var(--fs-search-input-field-icon-width);
+      height: var(--fs-search-input-field-icon-height);
+    }
+  }
+
+  [data-fs-search-input-field-input] {
+    height: auto;
+    padding-right: var(--fs-search-input-field-input-padding-right);
+    background-color: var(--fs-search-input-field-input-bkg-color);
+    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);
+  }
+
+}

package/src/components/organisms/SearchInput/styles.scss

@@ -0,0 +1,28 @@
+[data-fs-search-input] {
+  // --------------------------------------------------------
+  // Design Tokens for Search Input
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-search-input-height-desktop          : var(--fs-spacing-6);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+
+  &[data-fs-search-input-dropdown-visible="true"] [data-fs-search-input-field-input] {
+      @include media(">=notebook") {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [data-fs-search-product-card-link] {
+    color: var(--fs-color-neutral-7);
+    text-decoration: none;
+
+    &:hover { text-decoration: none; }
+  }
+}

package/src/index.ts

@@ -15,12 +15,6 @@ export type { OrderSummaryProps } from './components/molecules/OrderSummary'
 export { default as Bullets } from './components/molecules/Bullets'
 export type { BulletsProps } from './components/molecules/Bullets'
 
-export { default as SearchInput } from './components/molecules/SearchInput'
-export type {
-  SearchInputProps,
-  SearchInputRef,
-} from './components/molecules/SearchInput'
-
 export { default as Carousel } from './components/molecules/Carousel'
 export type { CarouselProps } from './components/molecules/Carousel'
 

package/src/styles/components.scss

@@ -34,7 +34,9 @@
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Rating/styles";
 @import "../components/molecules/SearchAutoComplete/styles";
+@import "../components/molecules/SearchDropdown/styles";
 @import "../components/molecules/SearchHistory/styles";
+@import "../components/molecules/SearchInputField/styles";
 @import "../components/molecules/SearchProducts/styles";
 @import "../components/molecules/SearchTop/styles";
 @import "../components/molecules/SelectField/styles";
@@ -49,4 +51,5 @@
 @import "../components/organisms/Hero/styles";
 @import "../components/organisms/PaymentMethods/styles";
 @import "../components/organisms/PriceRange/styles";
+@import "../components/organisms/SearchInput/styles";
 @import "../components/organisms/SlideOver/styles";

package/dist/components/molecules/SearchInput/SearchInput.d.ts

@@ -1,28 +0,0 @@
-import type { AriaAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import React from 'react';
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>;
-export interface SearchInputProps extends InputProps {
-    /**
-     * Callback function when submitted.
-     */
-    onSubmit: (value: string) => void;
-    /**
-     * Custom icon inside the submit button.
-     */
-    icon?: ReactNode;
-    /**
-     * Custom aria-label for input and button.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-    /**
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-export interface SearchInputRef {
-    inputRef?: HTMLInputElement | null;
-    formRef?: HTMLFormElement | null;
-}
-declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<SearchInputRef | null>>;
-export default SearchInput;

package/dist/components/molecules/SearchInput/SearchInput.js

@@ -1,26 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Icon, Button, Input } from '@faststore/components';
-import Form from '../Form';
-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" },
-    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
-    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
-const SearchInput = forwardRef(function SearchInput({ onSubmit, icon, 'aria-label': ariaLabel = 'search', testId = 'store-search-input', ...otherProps }, ref) {
-    const inputRef = useRef(null);
-    const formRef = useRef(null);
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        if (inputRef.current?.value !== '') {
-            onSubmit(inputRef.current.value);
-        }
-    };
-    useImperativeHandle(ref, () => ({
-        inputRef: inputRef.current,
-        formRef: formRef.current,
-    }));
-    return (React.createElement(Form, { ref: formRef, "data-fs-search-input-form": true, "data-testid": testId, onSubmit: handleSubmit, role: "search" },
-        React.createElement(Input, { ref: inputRef, "aria-label": ariaLabel, ...otherProps }),
-        React.createElement(Button, { type: "submit", "aria-label": "Submit Search" },
-            React.createElement(Icon, { component: icon ?? React.createElement(SearchIcon, null) }))));
-});
-export default SearchInput;
-//# sourceMappingURL=SearchInput.js.map

package/dist/components/molecules/SearchInput/SearchInput.js.map

@@ -1 +0,0 @@
-{"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"}

package/dist/components/molecules/SearchInput/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './SearchInput';
-export type { SearchInputProps, SearchInputRef } from './SearchInput';

package/dist/components/molecules/SearchInput/index.js

@@ -1,2 +0,0 @@
-export { default } from './SearchInput';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/SearchInput/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/src/components/molecules/SearchInput/SearchInput.tsx

@@ -1,100 +0,0 @@
-import type {
-  AriaAttributes,
-  FormEvent,
-  InputHTMLAttributes,
-  ReactNode,
-} from 'react'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-
-import { Icon, Button, Input } from '@faststore/components'
-import Form from '../Form'
-
-const SearchIcon = () => (
-  <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"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>
-)
-
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
-
-export interface SearchInputProps extends InputProps {
-  /**
-   * Callback function when submitted.
-   */
-  onSubmit: (value: string) => void
-  /**
-   * Custom icon inside the submit button.
-   */
-  icon?: ReactNode
-  /**
-   * Custom aria-label for input and button.
-   */
-  'aria-label'?: AriaAttributes['aria-label']
-  /**
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-export interface SearchInputRef {
-  inputRef?: HTMLInputElement | null
-  formRef?: HTMLFormElement | null
-}
-
-const SearchInput = forwardRef<SearchInputRef | null, SearchInputProps>(
-  function SearchInput(
-    {
-      onSubmit,
-      icon,
-      'aria-label': ariaLabel = 'search',
-      testId = 'store-search-input',
-      ...otherProps
-    },
-    ref
-  ) {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const formRef = useRef<HTMLFormElement>(null)
-
-    const handleSubmit = (event: FormEvent) => {
-      event.preventDefault()
-
-      if (inputRef.current?.value !== '') {
-        onSubmit(inputRef.current!.value)
-      }
-    }
-
-    useImperativeHandle(ref, () => ({
-      inputRef: inputRef.current,
-      formRef: formRef.current,
-    }))
-
-    return (
-      <Form
-        ref={formRef}
-        data-fs-search-input-form
-        data-testid={testId}
-        onSubmit={handleSubmit}
-        role="search"
-      >
-        <Input ref={inputRef} aria-label={ariaLabel} {...otherProps} />
-        <Button type="submit" aria-label="Submit Search">
-          <Icon component={icon ?? <SearchIcon />} />
-        </Button>
-      </Form>
-    )
-  }
-)
-
-export default SearchInput

package/src/components/molecules/SearchInput/index.ts

@@ -1,2 +0,0 @@
-export { default } from './SearchInput'
-export type { SearchInputProps, SearchInputRef } from './SearchInput'