@faststore/core 2.0.113-alpha.0 → 2.0.114-alpha.0

package/src/components/{navigation/NavbarSlider → common/Navbar}/NavbarSlider.tsx

@@ -1,31 +1,34 @@
 import { Suspense } from 'react'
 import {
-  useUI,
-  useFadeEffect,
-  NavbarSlider as UINavbarSlider,
-  NavbarSliderHeader as UINavbarSliderHeader,
-  NavbarSliderContent as UINavbarSliderContent,
-  NavbarSliderFooter as UINavbarSliderFooter,
+  SlideOver as UISlideOver,
+  SlideOverHeader as UISlideOverHeader,
 } from '@faststore/ui'
 
-import { mark } from 'src/sdk/tests/mark'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import { mark } from 'src/sdk/tests/mark'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
-import NavbarLinks from '../NavbarLinks'
+import styles from './navbar-slider.module.scss'
+import NavLinks from './NavLinks'
 
 function NavbarSlider() {
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
 
   return (
-    <UINavbarSlider
+    <UISlideOver
+      isOpen
       fade={fade}
       onDismiss={fadeOut}
+      size="full"
+      direction="leftSide"
+      className={styles.fsNavbarSlider}
       onTransitionEnd={() => fade === 'out' && closeNavbar()}
     >
-      <UINavbarSliderHeader onClose={fadeOut}>
+      <UISlideOverHeader data-fs-navbar-slider-header onClose={fadeOut}>
         <Link
           href="/"
           onClick={fadeOut}
@@ -35,16 +38,16 @@ function NavbarSlider() {
         >
           <Logo />
         </Link>
-      </UINavbarSliderHeader>
-      <UINavbarSliderContent>
-        <NavbarLinks onClickLink={fadeOut} />
-      </UINavbarSliderContent>
-      <UINavbarSliderFooter>
+      </UISlideOverHeader>
+      <div data-fs-navbar-slider-content>
+        <NavLinks onClickLink={fadeOut} />
+      </div>
+      <footer data-fs-navbar-slider-footer>
         <Suspense fallback={<ButtonSignInFallback />}>
           <ButtonSignIn />
         </Suspense>
-      </UINavbarSliderFooter>
-    </UINavbarSlider>
+      </footer>
+    </UISlideOver>
   )
 }
 

package/src/components/common/Navbar/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Navbar'
+export { default as NavbarSlider } from './NavbarSlider'
+export { default as NavLinks } from './NavLinks'

package/src/components/common/Navbar/navbar-slider.module.scss

@@ -0,0 +1,53 @@
+.fs-navbar-slider {
+  // --------------------------------------------------------
+  // Design Tokens for Navbar Slider
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-navbar-slider-padding                    : var(--fs-spacing-3);
+
+  // Header
+  --fs-navbar-slider-header-padding-bottom      : var(--fs-spacing-2);
+  --fs-navbar-slider-header-button-margin-right : calc(-1 * var(--fs-spacing-1));
+
+  // Logo
+  --fs-navbar-slider-logo-height                : 2.375rem;
+  --fs-navbar-slider-logo-padding               : 0;
+  --fs-navbar-slider-logo-margin-right          : var(--fs-spacing-5);
+
+  // Footer
+  --fs-navbar-slider-footer-padding-top         : var(--fs-spacing-2);
+  --fs-navbar-slider-footer-margin-top          : var(--fs-spacing-2);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  padding: var(--fs-navbar-slider-padding);
+
+  [data-fs-slide-over-header] {
+    padding: 0;
+    padding-bottom: var(--fs-navbar-slider-header-padding-bottom);
+  }
+
+  [data-fs-navbar-slider-logo] {
+    height: var(--fs-navbar-slider-logo-height);
+    padding: var(--fs-navbar-slider-logo-padding);
+    margin-right: var(--fs-navbar-slider-logo-margin-right);
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  [data-fs-navbar-slider-footer] {
+    padding-top: var(--fs-navbar-slider-footer-padding-top);
+    margin-top: var(--fs-navbar-slider-footer-margin-top);
+
+    [data-fs-button-signin-link] {
+      width: fit-content;
+      padding-left: 0;
+    }
+  }
+}

package/src/components/common/Navbar/navbar.module.scss

@@ -0,0 +1,204 @@
+@import "src/styles/scaffold";
+
+.fs-navbar {
+  // --------------------------------------------------------
+  // Design Tokens for Navbar
+  // --------------------------------------------------------
+
+  // Default properties
+
+  --fs-navbar-height-mobile                              : 3.5rem;
+
+  --fs-navbar-bkg-color                                  : rgb(255 255 255 / 90%);
+
+  --fs-navbar-transition-timing                          : var(--fs-transition-timing);
+  --fs-navbar-transition-function                        : var(--fs-transition-function);
+
+  --fs-navbar-box-shadow                                 : 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);
+
+  // Search
+  --fs-navbar-search-button-icon-width-mobile            : var(--fs-spacing-5);
+  --fs-navbar-search-button-icon-height-mobile           : var(--fs-navbar-search-button-icon-width-mobile);
+
+  // Search Expanded
+  --fs-navbar-search-expanded-input-wrapper-margin-right : 0.625rem;
+  --fs-navbar-search-expanded-input-wrapper-margin-left  : var(--fs-spacing-9);
+
+  --fs-navbar-search-expanded-input-width                : calc(100% - var(--fs-spacing-7));
+
+  --fs-navbar-search-expanded-button-icon-margin-right   : -4.063rem;
+
+  // Header
+  --fs-navbar-header-padding                              : 0 var(--fs-spacing-0);
+
+  --fs-navbar-header-padding-top-notebook                : var(--fs-spacing-1);
+  --fs-navbar-header-padding-bottom-notebook             : var(--fs-navbar-header-padding-top-notebook);
+
+  // Logo
+  --fs-navbar-logo-border-left-width                     : var(--fs-border-width);
+  --fs-navbar-logo-border-left-color                     : var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: sticky;
+  top: 0;
+  z-index: var(--fs-z-index-high);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+  box-shadow: var(--fs-navbar-box-shadow);
+  transition: top var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
+
+  @include media("<notebook") {
+    height: var(--fs-navbar-height-mobile);
+  }
+
+  &[data-fs-navbar-scroll="down"] {
+    > nav {
+      top: calc(-1 * var(--fs-spacing-3));
+      height: 0;
+      padding: 0;
+      opacity: 0;
+    }
+  }
+
+  &[data-fs-navbar-scroll="up"] {
+    > nav {
+      top: 0;
+      opacity: 1;
+    }
+  }
+
+  [data-fs-search-input] {
+    flex: 1 0 100%;
+    order: 2;
+
+    @include media("<notebook") {
+      display: none;
+    }
+  }
+
+  [data-fs-navbar-row] {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    @include media("<notebook") {
+      padding: 0;
+    }
+
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr;
+    }
+
+    [data-fs-navbar-button-menu] {
+      @include media(">=notebook") { display: none; }
+    }
+  }
+
+  [data-fs-navbar-buttons] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    [data-fs-button-signin-link] + [data-fs-cart-toggle] {
+      @include media(">=notebook") {
+        margin-left: var(--fs-spacing-3);
+      }
+    }
+
+    [data-fs-button-signin-link] {
+      display: none;
+    }
+
+    @include media(">=notebook") {
+      order: 2;
+
+      [data-fs-button-signin-link] {
+        display: inline-flex;
+      }
+    }
+
+    [data-fs-search-input] {
+      display: none;
+      transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
+
+      @include media("<notebook") {
+        display: flex;
+        flex: 0;
+        flex-direction: column;
+        order: 0;
+        width: min-content;
+
+        &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input-field-input] {
+          width: 0;
+          padding: 0;
+          border-width: 0;
+
+          &:hover, &:focus, &:focus-visible &:hover:focus-visible {
+            border-width: 0;
+            box-shadow: 0 0;
+          }
+        }
+
+        [data-fs-icon] {
+          margin-right: 0;
+          line-height: 0;
+
+          svg {
+            width: var(--fs-navbar-search-button-icon-width-mobile);
+            height: var(--fs-navbar-search-button-icon-height-mobile);
+          }
+        }
+      }
+    }
+
+    &[data-fs-navbar-search-expanded="true"] {
+      width: 100%;
+
+      [data-fs-search-input] {
+        flex: 1 1;
+        margin-right: var(--fs-navbar-search-expanded-input-wrapper-margin-right);
+        margin-left: var(--fs-navbar-search-expanded-input-wrapper-margin-left);
+
+        [data-fs-search-input-field] [data-fs-search-input-field-input] {
+          width: var(--fs-navbar-search-expanded-input-width);
+          padding: var(--fs-spacing-2);
+        }
+
+        [data-fs-icon] {
+          margin-right: 0;
+        }
+      }
+
+      [data-fs-icon-button="true"] {
+        margin-right: var(--fs-navbar-search-expanded-button-icon-margin-right);
+        transition: margin var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
+      }
+    }
+  }
+
+  [data-fs-navbar-header] {
+    padding: var(--fs-navbar-header-padding);
+    overflow-x: clip;
+    background-color: var(--fs-navbar-bkg-color);
+    backdrop-filter: blur(10px);
+  }
+
+  [data-fs-navbar-logo] {
+    align-self: stretch;
+
+    @include media("<notebook") {
+      padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
+      margin-right: auto;
+      margin-left: var(--fs-spacing-0);
+      border-left: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
+    }
+  }
+}

package/src/components/common/Navbar/navlinks.module.scss

@@ -0,0 +1,96 @@
+@import "src/styles/scaffold";
+
+.fs-navlinks {
+  // --------------------------------------------------------
+  // Design Tokens for Navlinks
+  // --------------------------------------------------------
+
+  --fs-navlinks-padding-top-notebook             : var(--fs-spacing-1);
+  --fs-navlinks-padding-bottom-notebook          : var(--fs-navlinks-padding-top-notebook);
+
+  --fs-navlinks-bkg-color                        : var(--fs-color-body-bkg);
+
+  --fs-navlinks-transition-property              : var(--fs-transition-property);
+  --fs-navlinks-transition-timing                : var(--fs-transition-timing);
+  --fs-navlinks-transition-function              : var(--fs-transition-function);
+
+  --fs-navlinks-border-top-width-mobile          : var(--fs-border-width);
+  --fs-navlinks-border-top-color-mobile          : var(--fs-border-color-light);
+  --fs-navlinks-border-bottom-width-mobile       : var(--fs-navlinks-border-top-width-mobile);
+  --fs-navlinks-border-bottom-color-mobile       : var(--fs-navlinks-border-top-color-mobile);
+
+  // Link
+  --fs-navlinks-link-width-notebook              : auto;
+  --fs-navlinks-link-padding-notebook            : 0 var(--fs-spacing-0);
+
+  // List
+  --fs-navlinks-list-padding-left-notebook       : var(--fs-spacing-3);
+  --fs-navlinks-list-margin-left-notebook        : var(--fs-spacing-2);
+  --fs-navlinks-list-border-left-width-notebook  : var(--fs-border-width);
+  --fs-navlinks-list-border-left-color-notebook  : var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  background-color: var(--fs-navlinks-bkg-color);
+  transition: var(--fs-navlinks-transition-property) var(--fs-navlinks-transition-timing) var(--fs-navlinks-transition-function);
+
+  @include media("<notebook") { padding: 0; }
+
+  @include media(">=notebook") {
+    z-index: var(--fs-z-index-below);
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  [data-fs-navlinks-list-item] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-fs-button] {
+    margin-left: calc(-1 * var(--fs-spacing-1));
+
+    // TODO: remove this after navbar 2.0 is implemented
+    &[data-fs-button-variant="tertiary"] {
+      color: var(--fs-color-text-display);
+    }
+
+    @include media("<notebook") {
+      display: none;
+    }
+  }
+
+  [data-fs-navlinks-link] {
+    display: block;
+    width: 100%;
+  }
+
+  @include media(">=notebook") {
+    padding-top: var(--fs-navlinks-padding-top-notebook);
+    padding-bottom: var(--fs-navlinks-padding-bottom-notebook);
+
+    [data-fs-navlinks-list] {
+      display: flex;
+      column-gap: var(--fs-spacing-3);
+      padding-left: var(--fs-navlinks-list-padding-left-notebook);
+      margin-left: var(--fs-navlinks-list-margin-left-notebook);
+      border-left: var(--fs-navlinks-list-border-left-width-notebook) solid var(--fs-navlinks-list-border-left-color-notebook);
+    }
+
+    [data-fs-navlinks-link] {
+      width: var(--fs-navlinks-link-width-notebook);
+      padding: var(--fs-navlinks-link-padding-notebook);
+    }
+  }
+
+  @include media("<notebook") {
+    border-top: var(--fs-navlinks-border-top-width-mobile) solid var(--fs-navlinks-border-top-color-mobile);
+    border-bottom: var(--fs-navlinks-border-bottom-width-mobile) solid var(--fs-navlinks-border-bottom-color-mobile);
+  }
+}

package/src/sdk/ui/useScrollDirection.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export default function useScrollDirection() {
+  const [scrollDirection, setScrollDirection] = useState<string>('')
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    let lastScrollY = window.scrollY
+
+    const updateScrollDirection = () => {
+      const { scrollY } = window
+      const direction = scrollY > lastScrollY ? 'down' : 'up'
+
+      if (
+        !isPending &&
+        direction !== scrollDirection &&
+        (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)
+      ) {
+        startTransition(() => setScrollDirection(direction))
+      }
+
+      lastScrollY = scrollY > 0 ? scrollY : 0
+    }
+
+    window.addEventListener('scroll', updateScrollDirection)
+
+    return () => window.removeEventListener('scroll', updateScrollDirection)
+  }, [isPending, scrollDirection])
+
+  return scrollDirection
+}

package/.next/BUILD_ID

@@ -1 +0,0 @@
-FoOP4frMbgwDj5doLKiqK

package/.next/build-manifest.json

@@ -1,99 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/FoOP4frMbgwDj5doLKiqK/_buildManifest.js",
-    "static/FoOP4frMbgwDj5doLKiqK/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-e1b538e051ff4c3e.js",
-      "static/css/3a57acf6e411f24d.css",
-      "static/chunks/pages/index-3aae9f104d28d1a1.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/404-3637ef83b3359df7.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/500-910883c20541d9ce.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-5b07911df63b8601.js",
-      "static/css/1f987650dd4e39d0.css",
-      "static/chunks/pages/[...slug]-29d3b81ee0953846.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-e1b538e051ff4c3e.js",
-      "static/css/4abccf9803c3c356.css",
-      "static/chunks/pages/[slug]/p-74cef56b58dadbab.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/231b8c31105a684a.css",
-      "static/chunks/pages/_app-501ccc46c846c040.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-b8fc5222ffe89b60.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/checkout-f8cb7cb22225ef9d.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-45cc84352bac2408.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-855ba0986bd6023a.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-5b07911df63b8601.js",
-      "static/css/6f4d3e91f1d161a8.css",
-      "static/chunks/pages/s-ba2868e14fedb65b.js"
-    ]
-  },
-  "ampFirstPages": []
-}