@4alldigital/foundation-ui--core 3.7.0 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,5 +32,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "0049b7335f8f06215701846c7d2efb20d12ed15a"
+  "gitHead": "ce0e9c0611e849447eafe4377f5c05d1f5d21f6b"
 }

package/src/components/Button/Button.tsx

@@ -29,7 +29,7 @@ const buttonVariants = cva(
         
         // Outline is handled as compound variant
         outline:
-          'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30 border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500',
+          'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-primary/10 border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500',
       },
       size: {
         sm: 'h-8 px-3 py-1 text-xs',

package/src/components/ButtonDeprecated/Button.tsx

@@ -87,7 +87,7 @@ const Button = ({
       { 'text-white border-primary bg-primary hover:bg-primary-darker': variant === BTN_VARIANTS.PRIMARY },
       { 'text-white border-secondary bg-secondary hover:bg-secondary-darker': variant === BTN_VARIANTS.SECONDARY },
       { 'text-black border-tertiary bg-tertiary hover:bg-tertiary-darker': variant === BTN_VARIANTS.TERTIARY },
-      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30': outline },
+      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-primary/10': outline },
       { 'border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500': outline },
       {
         'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert':

package/src/components/Card/types/CardBasic/CardBasic.tsx

@@ -53,7 +53,7 @@ const CardBasic = ({
         </div>
       )}
       {titleOverlay && title && (
-        <div className="absolute inset-0 w-full h-full z-10 flex items-center justify-center bg-black bg-opacity-30">
+        <div className="absolute inset-0 w-full h-full z-10 flex items-center justify-center bg-black/30">
           <Heading tag={HEADING_TAGS.H4} singleLine flush className='text-white'>
             {title}
           </Heading>

package/src/components/Card/types/CardMedia/CardMedia.tsx

@@ -42,7 +42,7 @@ const CardMedia = ({
             className={cx('absolute inset-0 object-cover group-hover:scale-110', animateClasses)}
           />
           {accessRestriced && (
-            <div className="absolute top-0 left-0 right-0 bottom-0 bg-body-bg bg-opacity-50 flex items-center justify-center">
+            <div className="absolute top-0 left-0 right-0 bottom-0 bg-body-bg/50 flex items-center justify-center">
               <Copy bold transform={COPY_TRANSFORM.UPPERCASE}>
                 {T.UI.PURCHASE_TO_ACCESS}
               </Copy>

package/src/components/FullScreenVideoModal/FullScreenVideoModal.tsx

@@ -24,7 +24,7 @@ const FullScreenVideoModal = ({
       isOpen={modalIsOpen}
       onRequestClose={onCloseCallback}
       className="absolute bg-none top-1/2 left-1/2 right-auto bottom-auto mr-[-50%] transform translate-x-[-50%] translate-y-[-50%] w-full h-full p-0"
-      overlayClassName="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-100 z-50"
+      overlayClassName="fixed top-0 left-0 right-0 bottom-0 bg-black z-50"
       ariaHideApp={ariaHideApp} // Only use in development, adjust for production use
       data-testid={testID || 'FullScreenVideoModal'}>
       <div className="h-full relative">

package/src/components/Screen/Screen.tsx

@@ -21,7 +21,7 @@ const Screen = ({
       {showHeader && (
         <Header
           className={cx({
-            'absolute top-0 left-0 right-0 bg-opacity-0 dark:bg-opacity-0 md:bg-opacity-20 md:dark:bg-opacity-20 z-50':
+            'absolute top-0 left-0 right-0 bg-header-bg/0 dark:bg-header-bg-dark/0 md:bg-header-bg/20 md:dark:bg-header-bg-dark/20 z-50':
               fixedHeader,
           })}
         />

package/src/components/SubscriptionManager/SubscriptionManager.tsx

@@ -355,7 +355,7 @@ const SubscriptionManager = ({
         )}
       </div>
       {isLoading && (
-        <div className="absolute top-0 left-0 w-full h-full bg-body-bg bg-opacity-50 flex items-center justify-center">
+        <div className="absolute top-0 left-0 w-full h-full bg-body-bg/50 flex items-center justify-center">
           <Loader />
         </div>
       )}

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

@@ -17,7 +17,7 @@ function SearchBox({
   return (
     <div className={cx('m-0 md:px-48', className)}>
       <form onSubmit={e => onSubmit(e)} className="flex items-center">
-        <div className="flex-1 bg-body-bg dark:bg-body-bg-dark bg-opacity-80 rounded">
+        <div className="flex-1 bg-body-bg/80 dark:bg-body-bg-dark/80 rounded">
           <TextInput
             name="SearchBoxInput"
             type={InputType.TEXT}

package/src/templates/ProductListScreen/ProductListScreen.stories.tsx

@@ -71,6 +71,7 @@ const sampleProducts: Product[] = [
 export const Default: Story = {
   args: {
     title: 'Shop Partnerships',
+    intro: 'Our Partnerships page showcases a curated selection of products available for pre-order through the NRG at Home platform, created in collaboration with trusted partners and innovators. These early-access opportunities allow our community to support new ideas, shape future offerings, and be among the first to experience products that align with our values of performance, quality, and innovation—bringing the future of NRG at Home directly into your everyday life.',
     products: sampleProducts,
     isLoading: false,
     onProductClick: (product) => console.log('Product clicked:', product),
@@ -80,6 +81,7 @@ export const Default: Story = {
 export const Loading: Story = {
   args: {
     title: 'Shop Partnerships',
+    intro: 'Browse our curated selection of high-performance gear.',
     products: [],
     isLoading: true,
   },
@@ -114,6 +116,7 @@ export const SingleProduct: Story = {
 export const ManyProducts: Story = {
   args: {
     title: 'Shop Partnerships',
+    intro: 'Explore our extensive range of athletic essentials, from performance apparel to cutting-edge accessories that help you achieve your fitness goals.',
     products: [...sampleProducts, ...sampleProducts, ...sampleProducts],
     isLoading: false,
     onProductClick: (product) => console.log('Product clicked:', product),

package/src/templates/ProductListScreen/ProductListScreen.tsx

@@ -1,14 +1,20 @@
 import Screen from '../../components/Screen';
 import DisplayHeading from '../../components/DisplayHeading';
+import Copy from '../../components/Copy';
 import { ProductCard } from '../../components/ProductCard';
 import { Props } from './ProductListScreen.types';
 
-const ProductListScreen = ({ testID, title, products, isLoading, error, onProductClick }: Props) => {
+const ProductListScreen = ({ testID, title, intro, products, isLoading, error, onProductClick }: Props) => {
   return (
     <Screen data-testid={testID || 'ProductListScreen'}>
       {title && <DisplayHeading text={title} />}
+      {intro && (
+        <div className="container mx-auto">
+          <Copy>{intro}</Copy>
+        </div>
+      )}
       
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto">
         {error && (
           <div className="rounded-lg bg-destructive/10 p-8 text-center">
             <h2 className="mb-2 text-2xl font-bold text-destructive">Unable to Load Products</h2>

package/src/templates/ProductListScreen/ProductListScreen.types.ts

@@ -3,6 +3,7 @@ import { Product } from '../../components/ProductCard';
 export interface Props {
   testID?: string;
   title?: string;
+  intro?: string;
   products: Product[];
   isLoading?: boolean;
   error?: string;