@4alldigital/foundation-ui--core 3.12.2 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -38,5 +38,5 @@
   "devDependencies": {
     "@types/he": "^1.2.3"
   },
-  "gitHead": "3d674cdb288d74e5021fcf47bdf674c44355b7af"
+  "gitHead": "2394d061bf5fa814a00ffb74c334a001dbbc9bf4"
 }

package/src/components/AddressForm/AddressForm.tsx

@@ -124,6 +124,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Full Name */}
         <TextInput
           id="shipping-name"
+          name="name"
+          autoComplete="shipping name"
           placeholder="Full Name"
           value={address.name || ''}
           onChange={(e) => handleChange('name', e.target.value)}
@@ -136,6 +138,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 1 */}
         <TextInput
           id="shipping-line1"
+          name="address-line1"
+          autoComplete="shipping address-line1"
           placeholder="Street Address"
           value={address.line1 || ''}
           onChange={(e) => handleChange('line1', e.target.value)}
@@ -148,6 +152,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 2 */}
         <TextInput
           id="shipping-line2"
+          name="address-line2"
+          autoComplete="shipping address-line2"
           placeholder="Apartment, suite, etc. (optional)"
           value={address.line2 || ''}
           onChange={(e) => handleChange('line2', e.target.value)}
@@ -158,6 +164,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-city"
+            name="address-level2"
+            autoComplete="shipping address-level2"
             placeholder="City"
             value={address.city || ''}
             onChange={(e) => handleChange('city', e.target.value)}
@@ -169,6 +177,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <TextInput
             id="shipping-state"
+            name="address-level1"
+            autoComplete="shipping address-level1"
             placeholder="State / County / Province"
             value={address.state || ''}
             onChange={(e) => handleChange('state', e.target.value)}
@@ -183,6 +193,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-postal-code"
+            name="postal-code"
+            autoComplete="shipping postal-code"
             placeholder="Postal / ZIP Code"
             value={address.postal_code || ''}
             onChange={(e) => handleChange('postal_code', e.target.value)}
@@ -194,6 +206,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <FormSelect
             id="shipping-country"
+            name="country"
+            autoComplete="shipping country"
             placeholder="Country"
             value={address.country || ''}
             onChange={(e) => handleChange('country', e.target.value)}
@@ -208,7 +222,9 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Phone */}
         <TextInput
           id="shipping-phone"
+          name="phone"
           type={InputType.TEL}
+          autoComplete="shipping tel"
           placeholder="Phone Number (optional)"
           value={address.phone || ''}
           onChange={(e) => handleChange('phone', e.target.value)}

package/src/components/Header/Header.tsx

@@ -4,17 +4,16 @@ import { useCallback, useEffect, useState } from 'react';
 import { clsx as cx } from 'clsx';
 import { Props } from './Header.types';
 import { useAppContext } from '../../context/App';
+import { useThemeContext } from '../../context/Theme';
 import Logo from '../Logo';
 import Button from '../Button';
 import Menu from '../Menu';
 import { BTN_VARIANTS } from '../Button/Button.types';
-// import Copy from '../Copy';
 import Link from '../Link';
 import { useLanguage } from '../../hooks';
 import Container from '../Container';
 import { twMerge } from 'tailwind-merge';
 import Cart from '../Cart';
-// import Avatar from '../Avatar';
 
 const Header = ({
   testID,
@@ -28,6 +27,7 @@ const Header = ({
 }: Props) => {
   const context = useAppContext();
   const T = useLanguage();
+  const theme = useThemeContext();
 
   const [mobileMenuClass, mobileMenuIcon] = useState('hidden');
   const [showDropdown, setShowDropdown] = useState(false);
@@ -94,6 +94,13 @@ const Header = ({
           </div>
           {/* <!-- tablet/desktop --> */}
           <div className="hidden md:flex items-center justify-center gap-2">
+            {theme?.toggleTheme && (
+              <Button
+                onClick={theme.toggleTheme}
+                icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
+                ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+              />
+            )}
             {!context?.app?.isAuthenticated && context?.app?.loginCallback && (
               <div className="w-32 flex justify-end">
                 <Button rounded onClick={context?.app?.loginCallback}>{T.UI.LOGIN}</Button>
@@ -158,6 +165,15 @@ const Header = ({
                   <Menu links={context.header.profile} separators />
                 )}
               </div>
+              {theme?.toggleTheme && (
+                <div className="md:hidden flex justify-center">
+                  <Button
+                    onClick={theme.toggleTheme}
+                    icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
+                    ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+                  />
+                </div>
+              )}
               {context?.app?.isAuthenticated && (
                 <div className="md:hidden flex justify-center">
                   <Button rounded onClick={context?.app?.logoutCallback}>{T.UI.LOGOUT}</Button>

package/src/components/Menu/Menu.tsx

@@ -7,7 +7,20 @@ import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';
 import { twMerge } from 'tailwind-merge';
 
+function useCurrentPathname(): string | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { usePathname } = require('next/navigation');
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePathname();
+  } catch {
+    return null;
+  }
+}
+
 const Menu = ({ testID, title, links, inline = true, separators = false, className }: Props) => {
+  const pathname = useCurrentPathname();
+
   return (
     <div data-testid={testID || '"Menu"'} className={twMerge(cx('flex flex-col gap-2', className))}>
       {title && (
@@ -18,13 +31,17 @@ const Menu = ({ testID, title, links, inline = true, separators = false, classNa
       <div className={cx('flex gap-0 items-center md:items-start', { 'flex-col md:flex-row ': inline }, { 'flex-col ': !inline })}>
         {links?.map((link, index) => {
           const key = `${link.id}--${index}`;
+          const isActive = pathname ? pathname === link.url || (link.url !== '/' && pathname.startsWith(link.url)) : false;
           return (
             <div key={key} className='flex gap-0'>
               <div className="relative py-2">
-                <Link href={link.url} className="flex gap-1 transition-opacity hover:opacity-70">
+                <Link href={link.url} className={cx("flex gap-1 transition-opacity hover:opacity-70", isActive && "opacity-100 font-bold")}>
                   {link.icon && <Icon name={link.icon} />}
                   {link.title && <div>{link.title}</div>}
                 </Link>
+                {isActive && (
+                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-current rounded-full" />
+                )}
               </div>
               {separators && index + 1 < links.length && (
                 <div className="h-full hidden md:flex self-center px-2">

package/src/features/Search/views/SearchBox/SearchBox.tsx

@@ -17,7 +17,7 @@ function SearchBox({
   resetTrigger = () => {},
 }: Props) {
   return (
-    <div className={cx('m-0 md:px-48', className)}>
+    <div className={cx('m-0 w-full', className)}>
       <form onSubmit={e => onSubmit(e)} className="flex items-center">
         <div className="flex-1 bg-body-bg/80 dark:bg-body-bg-dark/80 rounded">
           <TextInput

package/src/features/Search/views/SearchBox/SearchBox.types.ts

@@ -7,4 +7,5 @@ export interface Props {
   placeholder?: string;
   allowReset?: boolean;
   resetTrigger?: (data?: any, options?: any) => void;
+  shouldClearFilters?: boolean;
 }