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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "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": "ef072d94fbdf9e14583d82a818d137a96642fad1"
 }

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;