Merge pull request #86 from Weaverse/stephen-dev

Update sections and components for theme
Weaverse · Jul 24, 2024 · 1b493fb · 1b493fb
2 parents 771939a + eee7f80
commit 1b493fb
Show file tree

Hide file tree

Showing 23 changed files with 439 additions and 419 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -16,7 +16,7 @@ export function Footer({footerMenu}: FooterProps) {
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
   return (
     <footer className="footer w-full bg-background-subtle-2">
-      <div className="flex h-fit flex-col gap-6 px-4 pb-10 pt-6 lg:container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 lg:py-16">
+      <div className="flex h-fit flex-col gap-6 px-4 pb-10 pt-6 container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 lg:py-16">
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">
             <h3>Newsletter</h3>

diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
@@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
 import {CartCount} from './CartCount';
@@ -60,7 +60,7 @@ export function UseMenuDrawerHeader({
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 lg:container">
+      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',

diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx
@@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
 import {MegaMenu} from './menu/MegaMenu';
@@ -60,7 +60,7 @@ export function UseMenuMegaHeader({
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 lg:container">
+      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',

diff --git a/app/components/Header/SearchToggle.tsx b/app/components/Header/SearchToggle.tsx
@@ -12,7 +12,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
   let settings = useThemeSettings();
   const [searchType, setSearchType] = useState(settings?.searchType);
   const [openFrom, setOpenFrom] = useState<TypeOpenFrom>(
-    searchType === 'headerSearch' ? 'top' : 'right'
+    searchType === 'popupSearch' ? 'top' : 'right'
   );
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         if (settings?.searchType === 'drawerSearch' && isOpenDrawerHearder) {
           setOpenFrom('left');
         } else {
-          setOpenFrom(settings?.searchType === 'headerSearch' ? 'top' : 'right');
+          setOpenFrom(settings?.searchType === 'popupSearch' ? 'top' : 'right');
         }
       }
     };
@@ -50,7 +50,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         heading="Search"
         isForm="search"
       >
-        {searchType === 'headerSearch' && <SearchTypeHeader isOpen={isOpen} />}
+        {searchType === 'popupSearch' && <SearchTypeHeader isOpen={isOpen} />}
         {searchType === 'drawerSearch' && <SearchTypeDrawer isOpen={isOpen} />}
       </Drawer>
     </>

diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
@@ -34,8 +34,8 @@ export function SearchTypeDrawerResults() {
     );
   }
   return (
-    <div className="flex items-center justify-center border-t bg-background-subtle-1">
-      <div className="grid max-h-[78vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
+    <div className="relative flex items-center justify-center border-t bg-background-subtle-1">
+      <div className="grid custom-scroll max-h-[81vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
         <div className="space-y-8">
           {queries && (
             <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
@@ -83,11 +83,12 @@ export function SearchTypeDrawerResults() {
             />
           </div>
         )}
+        <div className='h-[50px]'/>
         {searchTerm.current && (
           <Link
             onClick={goToSearchResult}
             to={`/search?q=${searchTerm.current}`}
-            className="flex justify-center"
+            className="flex justify-center absolute bottom-0 p-6 bg-background-subtle-1 left-0 right-0"
           >
             <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
               Show All Results ({totalResultsCount})

diff --git a/app/sections/atoms/Description.tsx b/app/sections/atoms/Description.tsx
@@ -163,7 +163,7 @@ export let schema: HydrogenComponentSchema = {
               {value: 'right', label: 'Right', icon: 'align-end-vertical'},
             ],
           },
-          // defaultValue: 'center',
+          defaultValue: 'center',
         },
       ],
     },

diff --git a/app/sections/atoms/Heading.tsx b/app/sections/atoms/Heading.tsx
@@ -80,7 +80,7 @@ let variants = cva('heading', {
     size: 'default',
     weight: '400',
     letterSpacing: 'normal',
-    // alignment: 'center',
+    alignment: 'center',
   },
 });
 
@@ -307,7 +307,7 @@ export let headingInputs: InspectorGroup['inputs'] = [
         {value: 'right', label: 'Right', icon: 'align-end-vertical'},
       ],
     },
-    // defaultValue: 'center',
+    defaultValue: 'center',
   },
 ];
 

diff --git a/app/sections/atoms/SubHeading.tsx b/app/sections/atoms/SubHeading.tsx
@@ -26,7 +26,7 @@ let variants = cva('subheading', {
   defaultVariants: {
     size: 'base',
     weight: 'normal',
-    // alignment: 'center',
+    alignment: 'center',
   },
 });
 
@@ -139,7 +139,7 @@ export let schema: HydrogenComponentSchema = {
               {value: 'right', label: 'Right', icon: 'align-end-vertical'},
             ],
           },
-        //   defaultValue: 'center',
+          defaultValue: 'center',
         },
       ],
     },

diff --git a/app/sections/hightlight/content-item.tsx b/app/sections/hightlight/content-item.tsx
@@ -8,6 +8,7 @@ import React, {forwardRef, CSSProperties} from 'react';
 interface ContentProps extends HydrogenComponentProps {
     itemPerRow: number;
     gap: number;
+    borderColor: string;
 }
 
 let itemsPerRowClasses: { [item: number]: string } = {
@@ -19,15 +20,16 @@ let itemsPerRowClasses: { [item: number]: string } = {
 
 const HighlightContent = forwardRef<HTMLDivElement, ContentProps>(
   (props, ref) => {
-    let {itemPerRow, gap, children, ...rest} = props;
+    let {itemPerRow, gap, borderColor, children, ...rest} = props;
     let style: CSSProperties = {
         '--item-gap': `${gap}px`,
+        '--border-color': borderColor,
     } as CSSProperties;
     let actualItemPerRow = Math.min(itemPerRow, React.Children.count(children));
     return (
       <div ref={ref} {...rest}
         className={clsx(
-          'flex flex-col sm:grid gap-y-6 gap-x-[var(--item-gap)] w-full',
+          'flex flex-col sm:grid gap-y-6 gap-x-[var(--item-gap)]',
           itemsPerRowClasses[actualItemPerRow],
         )}
         style={style}
@@ -70,6 +72,12 @@ export let schema: HydrogenComponentSchema = {
           },
           defaultValue: 16,
         },
+        {
+          type: 'color',
+          label: 'Border color',
+          name: 'borderColor',
+          defaultValue: '#9AA473',
+      },
       ],
     },
   ],

diff --git a/app/sections/hightlight/index.tsx b/app/sections/hightlight/index.tsx
@@ -1,35 +1,24 @@
 import type {
-    HydrogenComponentProps,
     HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
+import { forwardRef } from 'react';
+import { Section, sectionInspector, SectionProps } from '../atoms/Section';
 
-interface HighlightsProps extends HydrogenComponentProps {
-    backgroundColor: string;
-    borderColor: string;
-}
+type HighlightsProps = SectionProps;
 
 const Highlights = forwardRef<
     HTMLElement,
     HighlightsProps
 >((props, ref) => {
     let {
-        backgroundColor,
-        borderColor,
         children,
         ...rest
     } = props;
-    let sectionStyle: CSSProperties = {
-        backgroundColor: backgroundColor,
-        '--border-color': borderColor,
-    } as CSSProperties;
 
     return (
-        <section ref={ref} {...rest} className="w-full h-full flex justify-center" style={sectionStyle}>
-            <div className="px-6 py-12 sm:py-20 sm:px-10 flex flex-col gap-12 container text-center">
-                {children}
-            </div>
-        </section>
+        <Section ref={ref} {...rest}>
+            {children}
+        </Section>
     );
 });
 
@@ -39,25 +28,7 @@ export let schema: HydrogenComponentSchema = {
     type: 'highlight',
     title: 'Highlights',
     toolbar: ['general-settings', ['duplicate', 'delete']],
-    inspector: [
-        {
-            group: 'Highlights',
-            inputs: [
-                {
-                    type: 'color',
-                    label: 'Background color',
-                    name: 'backgroundColor',
-                    defaultValue: '#F8F8F0',
-                },
-                {
-                    type: 'color',
-                    label: 'Border color',
-                    name: 'borderColor',
-                    defaultValue: '#9AA473',
-                },
-            ],
-        },
-    ],
+    inspector: sectionInspector,
     childTypes: ['heading', 'highlight-content--item'],
     presets: {
         children: [

diff --git a/app/sections/hightlight/item.tsx b/app/sections/hightlight/item.tsx
@@ -33,9 +33,9 @@ const HighlightItem = forwardRef<HTMLDivElement, HightlightProps>(
                         <div className='w-full flex justify-center gap-4'>
                             {index === 0 && (
                                 <div className='w-fit h-fit'>
-                                    <h3 className='border border-black rounded-full font-medium w-11 h-11 flex justify-center text-3xl'>
+                                    <span className='border border-[var(--border-color)] rounded-full font-heading font-medium w-11 h-11 flex justify-center text-3xl'>
                                         {(parentInstance?._store?.children as { id: string }[])?.findIndex((c) => c.id === child?.props.parentId) + 1}
-                                    </h3>
+                                    </span>
                                 </div>
                             )}
                             {child}
-Original file line number
+Diff line change
@@ Expand Up / @@ -163,7 +163,7 @@ export let schema: HydrogenComponentSchema = { @@
                   {value: 'right', label: 'Right', icon: 'align-end-vertical'},
                 ],
               },
-              // defaultValue: 'center',
+              defaultValue: 'center',
             },
           ],
         },
@@ Expand Down @@