Merge branch 'main' into wap

.gitignore

@@ -73,3 +73,6 @@ import_map.local.json
 _fresh/
 
 deno.lock
+
+# deco files
+.decofile.json

apps/site.ts

@@ -87,4 +87,4 @@ export default function Site(
   };
 }
 
-export { onBeforeResolveProps } from "apps/website/mod.ts";
+export { onBeforeResolveProps, Preview } from "apps/website/mod.ts";

components/footer/Footer.tsx

@@ -1,5 +1,4 @@
 import BackToTop from "$store/components/footer/BackToTop.tsx";
-import ColorClasses from "$store/components/footer/ColorClasses.tsx";
 import Divider from "$store/components/footer/Divider.tsx";
 import ExtraLinks from "$store/components/footer/ExtraLinks.tsx";
 import FooterItems from "$store/components/footer/FooterItems.tsx";
@@ -9,6 +8,7 @@ import PaymentMethods from "$store/components/footer/PaymentMethods.tsx";
 import RegionSelector from "$store/components/footer/RegionSelector.tsx";
 import Social from "$store/components/footer/Social.tsx";
 import Newsletter from "$store/islands/Newsletter.tsx";
+import { clx } from "$store/sdk/clx.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import PoweredByDeco from "apps/website/components/PoweredByDeco.tsx";
 
@@ -111,6 +111,14 @@ export interface Props {
   layout?: Layout;
 }
 
+const LAYOUT = {
+  "Primary": "bg-primary text-primary-content",
+  "Secondary": "bg-secondary text-secondary-content",
+  "Accent": "bg-accent text-accent-content",
+  "Base 100": "bg-base-100 text-base-content",
+  "Base 100 inverted": "bg-base-content text-base-100",
+};
+
 function Footer({
   logo,
   newsletter = {
@@ -214,9 +222,10 @@ function Footer({
 
   return (
     <footer
-      class={`w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10 ${
-        ColorClasses(layout)
-      }`}
+      class={clx(
+        "w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10",
+        LAYOUT[layout?.backgroundColor ?? "Primary"],
+      )}
     >
       <div class="lg:container mx-6 lg:mx-auto">
         {(!layout?.variation || layout?.variation == "Variation 1") && (

components/footer/FooterItems.tsx

@@ -48,7 +48,7 @@ export default function FooterItems(
             {sections.map((section) => (
               <li>
                 <div class="collapse collapse-arrow ">
-                  <input type="checkbox" class="min-h-[0]" />
+                  <input id={section.label} type="checkbox" class="min-h-[0]" />
                   <label
                     htmlFor={section.label}
                     class="collapse-title min-h-[0] !p-0 flex gap-2"

components/footer/Newsletter.tsx

@@ -1,5 +1,6 @@
-import { useSignal } from "@preact/signals";
 import { invoke } from "$store/runtime.ts";
+import { clx } from "$store/sdk/clx.ts";
+import { useSignal } from "@preact/signals";
 import type { JSX } from "preact";
 
 export interface Form {
@@ -44,11 +45,10 @@ function Newsletter(
 
   return (
     <div
-      class={`flex ${
-        tiled
-          ? "flex-col gap-4 lg:flex-row lg:w-full lg:justify-between"
-          : "flex-col gap-4"
-      }`}
+      class={clx(
+        "flex flex-col gap-4",
+        tiled && "lg:flex-row lg:w-full lg:justify-between",
+      )}
     >
       <div class="flex flex-col gap-4">
         {content?.title && (

components/footer/RegionSelector.tsx

@@ -19,15 +19,21 @@ export default function RegionSelector(
           {content?.currency?.length > 0 && (
             <>
               <label for="currency" class="sr-only">Currency</label>
-              <select class="select select-bordered select-sm h-10">
+              <select
+                id="currency"
+                class="select select-bordered select-sm h-10"
+              >
                 {content.currency.map((crr) => <option>{crr.label}</option>)}
               </select>
             </>
           )}
           {content?.language?.length > 0 && (
             <>
               <label for="language" class="sr-only">Language</label>
-              <select class="select select-bordered select-sm h-10">
+              <select
+                id="language"
+                class="select select-bordered select-sm h-10"
+              >
                 {content.language.map((lng) => <option>{lng.label}</option>)}
               </select>
             </>

components/header/Drawers.tsx

@@ -35,7 +35,7 @@ const Aside = (
         <span class="font-medium text-2xl">{title}</span>
       </h1>
       {onClose && (
-        <Button class="btn btn-ghost" onClick={onClose}>
+        <Button aria-label="X" class="btn btn-ghost" onClick={onClose}>
           <Icon id="XMark" size={24} strokeWidth={2} />
         </Button>
       )}

components/header/Header.tsx

@@ -1,8 +1,10 @@
+import { AppContext } from "$store/apps/site.ts";
 import type { Props as SearchbarProps } from "$store/components/search/Searchbar.tsx";
 import Drawers from "$store/islands/Header/Drawers.tsx";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import type { SiteNavigationElement } from "apps/commerce/types.ts";
+import type { SectionProps } from "deco/types.ts";
 import Alert from "./Alert.tsx";
 import Navbar from "./Navbar.tsx";
 import { headerHeight } from "./constants.ts";
@@ -74,7 +76,8 @@ function Header({
   },
   logoPosition = "center",
   buttons,
-}: Props) {
+  device,
+}: SectionProps<typeof loader>) {
   const platform = usePlatform();
   const items = navItems ?? [];
 
@@ -89,6 +92,7 @@ function Header({
           <div class="bg-base-100 fixed w-full z-50">
             {alerts && alerts.length > 0 && <Alert alerts={alerts} />}
             <Navbar
+              device={device}
               items={items}
               searchbar={searchbar && { ...searchbar, platform }}
               logo={logo}
@@ -102,4 +106,8 @@ function Header({
   );
 }
 
+export const loader = (props: Props, _req: Request, ctx: AppContext) => {
+  return { ...props, device: ctx.device };
+};
+
 export default Header;