From 3db8ad4074f72aaf1bbd27b35741f5f13316ddca Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Mon, 24 Jul 2023 14:26:07 -0500
Subject: [PATCH] Adds dynamic product label font size (#1099)

---
 app/product/[handle]/page.tsx            |  3 +--
 app/search/[collection]/page.tsx         |  2 +-
 app/search/page.tsx                      |  2 +-
 components/carousel.tsx                  |  3 +--
 components/grid/three-items.tsx          |  4 ++--
 components/grid/tile.tsx                 | 21 +++++++++-----------
 components/label.tsx                     | 25 ++++++------------------
 components/layout/product-grid-items.tsx |  3 +--
 components/price.tsx                     |  3 ++-
 package.json                             |  1 +
 pnpm-lock.yaml                           | 11 +++++++++++
 tailwind.config.js                       |  2 +-
 12 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index f23c0cc4c..828973071 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -125,8 +125,7 @@ async function RelatedProducts({ id }: { id: string }) {
             >
               <GridTileImage
                 alt={product.title}
-                labels={{
-                  isSmall: true,
+                label={{
                   title: product.title,
                   amount: product.priceRange.maxVariantPrice.amount,
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index 4ec62f2f4..25416d544 100644
--- a/app/search/[collection]/page.tsx
+++ b/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>
       )}
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 354a2022f..5f4b60c01 100644
--- a/app/search/page.tsx
+++ b/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}
diff --git a/components/carousel.tsx b/components/carousel.tsx
index 408e24e4f..d67ba5deb 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -19,8 +19,7 @@ export async function Carousel() {
           >
             <GridTileImage
               alt={product.title}
-              labels={{
-                isSmall: true,
+              label={{
                 title: product.title,
                 amount: product.priceRange.maxVariantPrice.amount,
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 5e6ac101e..cea0488ad 100644
--- a/components/grid/three-items.tsx
+++ b/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
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index fcb24e4d4..cf9aa49a9 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -5,18 +5,16 @@ import Label from '../label';
 export function GridTileImage({
   isInteractive = true,
   active,
-  labelPosition,
-  labels,
+  label,
   ...props
 }: {
   isInteractive?: boolean;
   active?: boolean;
-  labelPosition?: 'bottom' | 'center';
-  labels?: {
+  label?: {
     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}
-          amount={labels.amount}
-          currencyCode={labels.currencyCode}
-          size={labels.isSmall ? 'small' : 'large'}
-          position={labelPosition}
+          title={label.title}
+          amount={label.amount}
+          currencyCode={label.currencyCode}
+          position={label.position}
         />
       ) : null}
     </div>
diff --git a/components/label.tsx b/components/label.tsx
index 8aa7a6fca..791609521 100644
--- a/components/label.tsx
+++ b/components/label.tsx
@@ -5,38 +5,25 @@ const Label = ({
   title,
   amount,
   currencyCode,
-  position,
-  size
+  position = 'bottom'
 }: {
   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', {
-        'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]': position === 'center',
-        'px-4 pb-4 md:px-8 md:pb-8': size === 'large'
+      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
+        'lg:px-20 lg:pb-[35%]': position === 'center'
       })}
     >
-      <div
-        className={clsx(
-          '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"
-        >
+      <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">
+        <h3 data-testid="product-name" className="mr-4 inline pl-2 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}
         />
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index 364d4e5df..d9060adbb 100644
--- a/components/layout/product-grid-items.tsx
+++ b/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={{
-                isSmall: true,
+              label={{
                 title: product.title,
                 amount: product.priceRange.maxVariantPrice.amount,
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
diff --git a/components/price.tsx b/components/price.tsx
index 90f6558a0..1ec29fe93 100644
--- a/components/price.tsx
+++ b/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>
 );
 
diff --git a/package.json b/package.json
index 45dc860b7..492f6a0af 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85b7f34f4..b64cb5dbe 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/tailwind.config.js b/tailwind.config.js
index 9d2e7a638..0f10cf955 100644
--- a/tailwind.config.js
+++ b/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(