@faststore/components 2.0.114-alpha.0 → 2.0.122-alpha.0

package/src/organisms/NavbarSlider/NavbarSlider.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { SlideOver } from '../..'
+import type { SlideOverProps } from '../..'
+
+type RequiredSliderOverProps = 'isOpen' | 'direction' | 'size'
+
+export interface NavbarSliderProps
+  extends Omit<SlideOverProps, RequiredSliderOverProps> {
+  /**
+   * A boolean value that represents the state of the slider.
+   */
+  isOpen?: SlideOverProps['isOpen']
+  /**
+   * Represents the side that the slider comes from.
+   */
+  direction?: SlideOverProps['direction']
+  /**
+   * Represents the size of the slider.
+   */
+  size?: SlideOverProps['size']
+}
+
+function NavbarSlider({
+  children,
+  size = 'full',
+  isOpen = true,
+  direction = 'leftSide',
+  testId = 'fs-navbar-slider',
+  ...otherProps
+}: NavbarSliderProps) {
+  return (
+    <SlideOver
+      data-fs-navbar-slider
+      size="full"
+      isOpen={isOpen}
+      direction="leftSide"
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </SlideOver>
+  )
+}
+
+export default NavbarSlider

package/src/organisms/NavbarSlider/NavbarSliderContent.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarSliderContentProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarSliderContent = forwardRef<
+  HTMLDivElement,
+  NavbarSliderContentProps
+>(function NavbarSliderContent(
+  { children, testId = 'fs-navbar-slider-content', ...otherProps },
+  ref
+) {
+  return (
+    <div
+      data-fs-navbar-slider-content
+      ref={ref}
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  )
+})
+
+export default NavbarSliderContent

package/src/organisms/NavbarSlider/NavbarSliderFooter.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarSliderFooterProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarSliderFooter = forwardRef<HTMLDivElement, NavbarSliderFooterProps>(
+  function NavbarSliderFooter(
+    { children, testId = 'fs-navbar-slider-footer', ...otherProps },
+    ref
+  ) {
+    return (
+      <footer
+        data-fs-navbar-slider-footer
+        ref={ref}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </footer>
+    )
+  }
+)
+
+export default NavbarSliderFooter

package/src/organisms/NavbarSlider/NavbarSliderHeader.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { SlideOverHeader } from '../..'
+import type { SlideOverHeaderProps } from '../..'
+
+export interface NavbarSliderHeaderProps extends SlideOverHeaderProps {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+function NavbarSliderHeader({
+  children,
+  testId = 'fs-navbar-slider-header',
+  ...otherProps
+}: NavbarSliderHeaderProps) {
+  return (
+    <SlideOverHeader
+      data-fs-navbar-slider-header
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </SlideOverHeader>
+  )
+}
+
+export default NavbarSliderHeader

package/src/organisms/NavbarSlider/index.ts

@@ -0,0 +1,11 @@
+export { default } from './NavbarSlider'
+export type { NavbarSliderProps } from './NavbarSlider'
+
+export { default as NavbarSliderHeader } from './NavbarSliderHeader'
+export type { NavbarSliderHeaderProps } from './NavbarSliderHeader'
+
+export { default as NavbarSliderContent } from './NavbarSliderContent'
+export type { NavbarSliderContentProps } from './NavbarSliderContent'
+
+export { default as NavbarSliderFooter } from './NavbarSliderFooter'
+export type { NavbarSliderFooterProps } from './NavbarSliderFooter'

package/src/organisms/RegionModal/RegionModal.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 
 import type { MutableRefObject } from 'react'
-import type { ModalProps, LinkProps, LinkElementType } from '../../'
-import { Icon, InputField, Link, Modal, ModalHeader, ModalBody } from '../..'
+import { Icon, InputField, Link, Modal, ModalBody, ModalHeader } from '../..'
+import type {
+  LinkElementType,
+  LinkProps,
+  ModalProps,
+  OverlayProps,
+} from '../../'
 
 export interface RegionModalProps extends Omit<ModalProps, 'children'> {
   /**
@@ -42,6 +47,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
    * Enables fadeOut effect on modal after onSubmit function
    */
   fadeOutOnSubmit?: boolean
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
   /**
    * Function called when Close button is clicked.
    */
@@ -69,6 +78,7 @@ function RegionModal({
   inputRef,
   inputValue,
   fadeOutOnSubmit,
+  overlayProps,
   onClose,
   onInput,
   onSubmit,
@@ -76,7 +86,12 @@ function RegionModal({
   ...otherProps
 }: RegionModalProps) {
   return (
-    <Modal data-fs-region-modal testId={testId} {...otherProps}>
+    <Modal
+      data-fs-region-modal
+      testId={testId}
+      overlayProps={overlayProps}
+      {...otherProps}
+    >
       {({ fadeOut }) => (
         <>
           <ModalHeader

package/src/organisms/SlideOver/SlideOver.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
-import type { ModalProps } from '../../'
+import type { ModalProps, OverlayProps } from '../../'
 import { Modal } from '../../'
 
 export type Direction = 'leftSide' | 'rightSide'
@@ -29,6 +29,10 @@ export interface SlideOverProps extends Omit<ModalProps, 'title'> {
    */
   fade: 'in' | 'out'
   children: ReactNode
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
   /**
    * This function is called whenever the user clicks outside.
    * the modal content
@@ -37,13 +41,14 @@ export interface SlideOverProps extends Omit<ModalProps, 'title'> {
 }
 
 function SlideOver({
+  testId = 'fs-slide-over',
   isOpen,
   direction = 'leftSide',
   size = 'full',
   fade = 'out',
   children,
+  overlayProps,
   onDismiss,
-  testId = 'fs-slide-over',
   ...otherProps
 }: SlideOverProps) {
   return (
@@ -56,6 +61,7 @@ function SlideOver({
       isOpen={isOpen}
       onDismiss={onDismiss}
       testId={testId}
+      overlayProps={overlayProps}
       {...otherProps}
     >
       {children}