@faststore/components 2.0.87-alpha.0 → 2.0.89-alpha.0

package/src/organisms/OutOfStock/OutOfStock.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from 'react'
+import type { FormHTMLAttributes } from 'react'
+import { BellRinging } from '../../assets'
+import { Button, Icon, InputField } from '../..'
+
+export interface OutOfStockProps extends FormHTMLAttributes<HTMLFormElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The Out of Stock Section's title.
+   */
+  title?: string
+  /**
+   * Additional message displayed with the title.
+   */
+  subtitle?: string
+  /**
+   * The email input label.
+   */
+  inputLabel: string
+  /**
+   * The button label.
+   */
+  buttonLabel?: string
+  /**
+   * Specifies a label for loading state.
+   */
+  loadingLabel?: string
+  /**
+   * Error message displayed when error.
+   */
+  errorMessage?: string
+  /**
+   * Specifies that the submit button should be disabled.
+   */
+  disabled: boolean
+  /**
+   * Event emitted when form is submitted.
+   */
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
+const OutOfStock = forwardRef<HTMLFormElement, OutOfStockProps>(
+  function OutOfStock(
+    {
+      testId = 'fs-out-of-stock',
+      title,
+      buttonLabel = 'Notify Me',
+      loadingLabel = 'Loading',
+      inputLabel,
+      subtitle,
+      disabled,
+      errorMessage,
+      onSubmit,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <form
+        data-fs-out-of-stock
+        ref={ref}
+        data-testid={testId}
+        onSubmit={onSubmit}
+        {...otherProps}
+      >
+        <h2 data-fs-out-of-stock-title>{title}</h2>
+        {subtitle && (
+          <p data-fs-out-of-stock-message>
+            <Icon component={<BellRinging size={16} />} />
+            {subtitle}
+          </p>
+        )}
+        <InputField
+          id="out-of-stock-email"
+          name="out-of-stock-email"
+          label={inputLabel}
+          aria-label={inputLabel}
+          error={errorMessage}
+          required
+        />
+        <Button
+          data-fs-out-of-stock-button
+          type="submit"
+          loading={disabled}
+          loadingLabel={loadingLabel}
+          disabled={disabled}
+          variant="primary"
+          icon={<BellRinging />}
+          iconPosition="left"
+        >
+          {buttonLabel}
+        </Button>
+      </form>
+    )
+  }
+)
+
+export default OutOfStock

package/src/organisms/OutOfStock/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './OutOfStock'
+export type { OutOfStockProps } from './OutOfStock'

package/src/organisms/SearchInput/SearchInput.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import SearchProvider, { SearchProviderContextValue } from '../../molecules/SearchProvider'
+
+
+export type SearchInputProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The current status of the Search Dropdown.
+   */
+  visibleDropdown: boolean
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue
+
+const SearchInput = forwardRef<HTMLDivElement, SearchInputProps>(
+  function SearchInput(
+    {
+      children,
+      visibleDropdown = false,
+      testId = 'fs-search-input',
+      isLoading,
+      products,
+      term,
+      terms,
+      onSearchSelection,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-fs-search-input
+        data-fs-search-input-dropdown-visible={visibleDropdown}
+        data-testid={testId}
+        {...otherProps}
+      >
+        <SearchProvider 
+          onSearchSelection={onSearchSelection} 
+          isLoading={isLoading} 
+          term={term} 
+          products={products} 
+          terms={terms}
+        >
+          {children}
+        </SearchProvider>
+      </div>
+    )
+  }
+)
+
+export default SearchInput

package/src/organisms/SearchInput/index.ts

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