header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
- background-color: var(--fs-color-neutral-0);
-
- > [data-store-icon-button] {
- &:last-of-type {
- margin-right: calc(-1 * var(--fs-spacing-1));
- }
- }
- }
-
- .cart-sidebar__title {
- display: flex;
- align-items: center;
-
- p {
- margin-right: var(--fs-spacing-2);
- line-height: 1.35;
- }
- }
-
- > [data-store-list] {
- display: flex;
- flex-direction: column;
- row-gap: var(--fs-spacing-2);
- padding: var(--fs-spacing-3);
- overflow: auto;
- }
-
- > footer {
- margin-top: auto;
- background-color: var(--fs-color-neutral-0);
- box-shadow: 0 0 6px rgb(0 0 0 / 20%);
-
- [data-store-button] {
- width: 100%;
- }
- }
-}
diff --git a/src/components/ui/SlideOver/SlideOver.stories.mdx b/src/components/ui/SlideOver/SlideOver.stories.mdx
new file mode 100644
index 00000000..cc76b1dc
--- /dev/null
+++ b/src/components/ui/SlideOver/SlideOver.stories.mdx
@@ -0,0 +1,293 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import {
+ CartProvider,
+ SessionProvider,
+ SearchProvider,
+ useSearch,
+} from '@faststore/sdk'
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useCart } from 'src/sdk/cart/useCart'
+
+import { NavbarSlider } from 'src/components/common/Navbar'
+
+import { ButtonIcon } from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import CartToggle from 'src/components/cart/CartToggle'
+import CartSidebar from 'src/components/cart/CartSidebar'
+
+import { ButtonBuy } from 'src/components/ui/Button'
+
+import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
+import { facets as facetsMock } from 'src/../.storybook/mocks/filter-slider'
+
+import storeConfig from 'store.config'
+
+import { validateSession } from 'src/sdk/session/validate'
+import { useFilter } from 'src/components/search/Filter/useFilter'
+
+import Button from 'src/components/ui/Button'
+import { FilterSlider } from 'src/components/search/Filter'
+
+import SlideOver from '.'
+
+import {
+ TokenTable,
+ TokenRow,
+ TokenDivider,
+ SectionList,
+ SectionItem,
+} from 'src/../.storybook/components'
+
+
+
+export function SlideOverTemplate() {
+ const { cart: displayCart, closeCart } = useUI()
+ const { fade, fadeOut } = useFadeEffect()
+ return (
+ fade === 'out' && closeCart()}
+ >
+
+
+ }
+ onClick={fadeOut}
+ />
+
+
+
+ A generic SlideOver component.
+
+
+
+ )
+}
+
+export const Template = () => {
+ const { cart: displayCart, openCart } = useUI()
+ const { fade, fadeOut } = useFadeEffect()
+ return (
+
+ }
+ iconPosition="left"
+ aria-label="Open SlideOver"
+ onClick={openCart}
+ >
+ Open SlideOver
+
+ {displayCart && }
+
+ )
+}
+
+export const TemplateNavbarSlider = () => {
+ const { openNavbar, navbar: displayNavbar } = useUI()
+ return (
+
+ }
+ iconPosition="left"
+ aria-label="Open Menu"
+ onClick={openNavbar}
+ >
+ Open Menu
+
+ {displayNavbar && }
+
+ )
+}
+
+export const TemplateCartSidebar = () => {
+ const { cart: displayCart } = useUI()
+ const { addItem } = useCart()
+ return (
+
+
+ addItem(cartItem)}
+ >
+ Add item to Cart
+
+ {displayCart && }
+
+ )
+}
+
+export const TemplateFilter = () => {
+ const filter = useFilter(facetsMock)
+ const { state, setState } = useSearch()
+ const { filter: displayFilter, openFilter } = useUI()
+ const { facets, expanded, dispatch } = filter
+ return (
+ <>
+ }
+ iconPosition="left"
+ aria-label="Open Filters"
+ onClick={openFilter}
+ >
+ Open Filters
+
+ {displayFilter && }
+
+ )
+}
+
+export const TemplateProvider = ({ children }) => {
+ return (
+
+
+
+ ({})}>{children}
+
+
+
+ )
+}
+
+
+
+# Slide Over
+
+This component represents an aditional session that complements the screen's information. Usually used on `NavbarSlider`, `FilterSlider`, and `CartSidebar` components.
+
+
+
+## Usage
+
+`import SlideOver from 'src/components/ui/SlideOver'`
+
+
+
+
+
+
+
+
+
+
+---
+
+## Variants
+
+### Partial
+
+
+
+
+
+
+
+
+---
+
+## Use Cases
+
+
+
+ An implementation of the SlideOver that represents the
+ menu.
+
+ }
+ >
+
+
+
+
+
+ An implementation of the SlideOver that represents the
+ summary of items added to the cart along with detailed information, and
+ checkout option.
+
+ }
+ >
+
+
+
+
+
+ An implementation of the SlideOver that represents the
+ mobile Filter view.
+
+ }
+ >
+
+
+
+
+
diff --git a/src/components/ui/SlideOver/SlideOver.tsx b/src/components/ui/SlideOver/SlideOver.tsx
index 6d75c364..2c914897 100644
--- a/src/components/ui/SlideOver/SlideOver.tsx
+++ b/src/components/ui/SlideOver/SlideOver.tsx
@@ -1,14 +1,28 @@
import { Modal as UIModal } from '@faststore/ui'
-import type { ReactNode, HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+import styles from './slide-over.module.scss'
type Direction = 'leftSide' | 'rightSide'
type WidthSize = 'full' | 'partial'
interface SlideOverProps extends HTMLAttributes {
+ /**
+ * A boolean value that represents the state of the SlideOver
+ */
isOpen: boolean
+ /**
+ * Represents the side that the SlideOver comes from.
+ */
direction: Direction
+ /**
+ * Represents the size of the SlideOver.
+ */
size: WidthSize
children: ReactNode
+ /**
+ * Represents the fade effect of the SlideOver.
+ */
fade: 'in' | 'out'
/**
* This function is called whenever the user clicks outside
@@ -23,15 +37,17 @@ function SlideOver({
size = 'full',
fade = 'out',
children,
+ className,
...otherProps
}: SlideOverProps) {
return (
{children}
diff --git a/src/components/ui/SlideOver/overlay.scss b/src/components/ui/SlideOver/overlay.scss
new file mode 100644
index 00000000..a245e93e
--- /dev/null
+++ b/src/components/ui/SlideOver/overlay.scss
@@ -0,0 +1,14 @@
+[data-modal-overlay] {
+ // --------------------------------------------------------
+ // Design Tokens for Overlay
+ // --------------------------------------------------------
+ --fs-overlay-bkg-color: rgb(0 0 0 / 20%);
+
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 3;
+ background-color: var(--fs-overlay-bkg-color);
+}
diff --git a/src/components/ui/SlideOver/slide-over.module.scss b/src/components/ui/SlideOver/slide-over.module.scss
new file mode 100644
index 00000000..9964884d
--- /dev/null
+++ b/src/components/ui/SlideOver/slide-over.module.scss
@@ -0,0 +1,63 @@
+@import "src/styles/scaffold";
+
+.fs-slide-over {
+ // --------------------------------------------------------
+ // Design Tokens for Slide Over
+ // --------------------------------------------------------
+
+ // Default properties
+ --fs-slide-over-bkg-color : var(--fs-color-body-bkg);
+ --fs-slide-over-transition-timing : var(--fs-transition-timing);
+
+ // Partial
+ --fs-slide-over-partial-gap : calc(2 * var(--fs-grid-padding));
+ --fs-slide-over-partial-width-mobile : calc(100vw - var(--fs-slide-over-partial-gap));
+
+ --fs-slide-over-partial-width-notebook : calc(100% / 3);
+ --fs-slide-over-partial-max-width-notebook : calc(var(--fs-grid-breakpoint-notebook) / 3);
+
+ // --------------------------------------------------------
+ // Structural Styles
+ // --------------------------------------------------------
+ position: fixed;
+ height: 100vh;
+ background-color: var(--fs-slide-over-bkg-color);
+
+ &[data-fs-slide-over-size="full"] {
+ width: 100vw;
+ }
+
+ &[data-fs-slide-over-size="partial"] {
+ width: var(--fs-slide-over-partial-width-mobile);
+
+ @include media(">=notebook") {
+ width: var(--fs-slide-over-partial-width-notebook);
+ max-width: var(--fs-slide-over-partial-max-width-notebook);
+ }
+ }
+
+ &[data-fs-slide-over-state="in"] {
+ transition: transform var(--fs-slide-over-transition-timing) ease-in;
+ transform: translateX(0);
+ }
+
+ &[data-fs-slide-over-state="out"] {
+ transition: transform var(--fs-slide-over-transition-timing) ease-out;
+ }
+
+ &[data-fs-slide-over-direction="leftSide"] {
+ left: 0;
+
+ &[data-fs-slide-over-state="out"] {
+ transform: translateX(-100%);
+ }
+ }
+
+ &[data-fs-slide-over-direction="rightSide"] {
+ right: 0;
+
+ &[data-fs-slide-over-state="out"] {
+ transform: translateX(100%);
+ }
+ }
+}
diff --git a/src/components/ui/SlideOver/slide-over.scss b/src/components/ui/SlideOver/slide-over.scss
deleted file mode 100644
index 288a0217..00000000
--- a/src/components/ui/SlideOver/slide-over.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-modal-overlay] {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 3;
- background-color: rgb(0 0 0 / 20%);
-}
-
-[data-slide-over] {
- position: fixed;
- height: 100vh;
- background-color: var(--fs-color-neutral-0);
-}
-
-[data-slide-over-size="full"] {
- width: 100vw;
-}
-
-[data-slide-over-size="partial"] {
- --gap-out: 48px;
-
- width: calc(100vw - var(--gap-out));
-
- @include media(">=notebook") {
- width: calc(100% / 3);
- max-width: calc(var(--fs-grid-breakpoint-notebook) / 3);
- }
-}
-
-[data-slide-over-direction="leftSide"] {
- left: 0;
-}
-
-[data-slide-over-direction="leftSide"][data-slide-over-state="in"] {
- transition: transform .25s ease-in;
- transform: translateX(0);
-}
-
-[data-slide-over-direction="leftSide"][data-slide-over-state="out"] {
- transition: transform .25s ease-out;
- transform: translateX(-100%);
-}
-
-[data-slide-over-direction="rightSide"] {
- right: 0;
-}
-
-[data-slide-over-direction="rightSide"][data-slide-over-state="in"] {
- transition: transform .25s ease-in;
- transform: translateX(0);
-}
-
-[data-slide-over-direction="rightSide"][data-slide-over-state="out"] {
- transition: transform .25s ease-out;
- transform: translateX(100%);
-}
diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss
index 5c857a19..9105b056 100644
--- a/src/styles/global/storybook-components.scss
+++ b/src/styles/global/storybook-components.scss
@@ -1,5 +1,4 @@
// Cart
-@import "src/components/cart/CartSidebar/cart-sidebar.scss";
@import "src/components/cart/CartToggle/cart-toggle.scss";
@import "src/components/cart/OrderSummary/order-summary.scss";
@@ -31,5 +30,5 @@
@import "src/components/ui/Badge/badge.scss";
@import "src/components/ui/Breadcrumb/breadcrumb.scss";
@import "src/components/ui/InputText/input-text.scss";
-@import "src/components/ui/SlideOver/slide-over.scss";
+@import "src/components/ui/SlideOver/overlay.scss";
@import "src/components/ui/SROnly/sr-only.scss";
diff --git a/src/styles/pages/layout.scss b/src/styles/pages/layout.scss
index 5583ed83..89238a5e 100644
--- a/src/styles/pages/layout.scss
+++ b/src/styles/pages/layout.scss
@@ -1,6 +1,5 @@
// Cart
@import "src/components/cart/CartToggle/cart-toggle.scss";
-@import "src/components/cart/CartSidebar/cart-sidebar.scss";
@import "src/components/cart/OrderSummary/order-summary.scss";
// Common
@@ -14,5 +13,5 @@
// UI
@import "src/components/ui/Badge/badge.scss";
@import "src/components/ui/InputText/input-text.scss";
-@import "src/components/ui/SlideOver/slide-over.scss";
+@import "src/components/ui/SlideOver/overlay.scss";
@import "src/components/ui/SROnly/sr-only.scss";