Adds dynamic product label font size (#1099)

app/product/[handle]/page.tsx

@@ -125,8 +125,7 @@ async function RelatedProducts({ id }: { id: string }) {
             >
               <GridTileImage
                 alt={product.title}
-                labels={{
+                label={{
-                  isSmall: true,
                   title: product.title,
                   amount: product.priceRange.maxVariantPrice.amount,
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode

app/search/[collection]/page.tsx

@@ -40,7 +40,7 @@ export default async function CategoryPage({
       {products.length === 0 ? (
         <p className="py-3 text-lg">{`No products found in this collection`}</p>
       ) : (
-        <Grid className="grid-cols-2 lg:grid-cols-3">
+        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
           <ProductGridItems products={products} />
         </Grid>
       )}

app/search/page.tsx

@@ -32,7 +32,7 @@ export default async function SearchPage({
         </p>
       ) : null}
       {products.length > 0 ? (
-        <Grid className="grid-cols-2 lg:grid-cols-3">
+        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
           <ProductGridItems products={products} />
         </Grid>
       ) : null}

components/carousel.tsx

@@ -19,8 +19,7 @@ export async function Carousel() {
           >
             <GridTileImage
               alt={product.title}
-              labels={{
+              label={{
-                isSmall: true,
                 title: product.title,
                 amount: product.priceRange.maxVariantPrice.amount,
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode

components/grid/three-items.tsx

@@ -13,10 +13,10 @@ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half
           src={item.featuredImage.url}
           width={size === 'full' ? 1080 : 540}
           height={size === 'full' ? 1080 : 540}
-          labelPosition={size === 'full' ? 'center' : 'bottom'}
           priority={true}
           alt={item.title}
-          labels={{
+          label={{
+            position: size === 'full' ? 'center' : 'bottom',
             title: item.title as string,
             amount: item.priceRange.maxVariantPrice.amount,
             currencyCode: item.priceRange.maxVariantPrice.currencyCode

components/grid/tile.tsx

@@ -5,18 +5,16 @@ import Label from '../label';
 export function GridTileImage({
   isInteractive = true,
   active,
-  labelPosition,
+  label,
-  labels,
   ...props
 }: {
   isInteractive?: boolean;
   active?: boolean;
-  labelPosition?: 'bottom' | 'center';
+  label?: {
-  labels?: {
     title: string;
     amount: string;
     currencyCode: string;
-    isSmall?: boolean;
+    position?: 'bottom' | 'center';
   };
 } & React.ComponentProps<typeof Image>) {
   return (
@@ -24,7 +22,7 @@ export function GridTileImage({
       className={clsx(
         'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
         {
-          relative: labels,
+          relative: label,
           'border-2 border-blue-600': active,
           'border-neutral-200 dark:border-neutral-800': !active
         }
@@ -39,13 +37,12 @@ export function GridTileImage({
           {...props}
         />
       ) : null}
-      {labels ? (
+      {label ? (
         <Label
-          title={labels.title}
+          title={label.title}
-          amount={labels.amount}
+          amount={label.amount}
-          currencyCode={labels.currencyCode}
+          currencyCode={label.currencyCode}
-          size={labels.isSmall ? 'small' : 'large'}
+          position={label.position}
-          position={labelPosition}
         />
       ) : null}
     </div>

components/label.tsx

@@ -5,38 +5,25 @@ const Label = ({
   title,
   amount,
   currencyCode,
-  position,
+  position = 'bottom'
-  size
 }: {
   title: string;
   amount: string;
   currencyCode: string;
   position?: 'bottom' | 'center';
-  size?: 'large' | 'small';
 }) => {
   return (
     <div
-      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4', {
+      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
-        'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]': position === 'center',
+        'lg:px-20 lg:pb-[35%]': position === 'center'
-        'px-4 pb-4 md:px-8 md:pb-8': size === 'large'
       })}
     >
-      <div
+      <div className="flex items-center rounded-full border bg-white/70 p-1 text-[10px] font-semibold text-black backdrop-blur-md @[275px]/label:text-xs dark:border-neutral-800 dark:bg-black/70 dark:text-white">
-        className={clsx(
+        <h3 data-testid="product-name" className="mr-4 inline pl-2 leading-none tracking-tight">
-          'flex items-center rounded-full border bg-white/80 p-1 text-xs text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/80 dark:text-white',
-          {
-            'text-sm': size === 'large'
-          }
-        )}
-      >
-        <h3
-          data-testid="product-name"
-          className="mr-6 inline pl-2 font-semibold leading-none tracking-tight"
-        >
           {title}
         </h3>
         <Price
-          className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
+          className="flex-none rounded-full bg-blue-600 p-2 text-white"
           amount={amount}
           currencyCode={currencyCode}
         />

components/layout/product-grid-items.tsx

@@ -11,8 +11,7 @@ export default function ProductGridItems({ products }: { products: Product[] })
           <Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
             <GridTileImage
               alt={product.title}
-              labels={{
+              label={{
-                isSmall: true,
                 title: product.title,
                 amount: product.priceRange.maxVariantPrice.amount,
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode

components/price.tsx

@@ -11,7 +11,8 @@ const Price = ({
       style: 'currency',
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
-    }).format(parseFloat(amount))} ${currencyCode}`}
+    }).format(parseFloat(amount))}`}
+    <span className="hidden @[275px]/label:inline">{` ${currencyCode}`}</span>
   </p>
 );
 

package.json

@@ -30,6 +30,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",

pnpm-lock.yaml

@@ -21,6 +21,9 @@ dependencies:
     version: 18.2.0(react@18.2.0)
 
 devDependencies:
+  '@tailwindcss/container-queries':
+    specifier: ^0.1.1
+    version: 0.1.1(tailwindcss@3.3.3)
   '@tailwindcss/typography':
     specifier: ^0.5.9
     version: 0.5.9(tailwindcss@3.3.3)
@@ -355,6 +358,14 @@ packages:
       tslib: 2.6.0
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.3.3
+    dev: true
+
   /@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
     resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
     peerDependencies:

tailwind.config.js

@@ -1,5 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -35,6 +34,7 @@ module.exports = {
     hoverOnlyWhenSupported: true
   },
   plugins: [
+    require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(