feat:(theme) Add cva header and remove section

buildheadless · Dec 1, 2023 · 0da1479 · 0da1479
1 parent 8e51946
commit 0da1479
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 53 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/hydrogen-theme/.vscode/settings.json b/templates/hydrogen-theme/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  // If not working, try adding this setting to User settings.json
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]

diff --git a/templates/hydrogen-theme/app/components/CmsSection.tsx b/templates/hydrogen-theme/app/components/CmsSection.tsx
@@ -6,7 +6,6 @@ import type {FOOTERS_FRAGMENT} from '~/qroq/footers';
 import {useIsDev} from '~/hooks/useIsDev';
 import {sections} from '~/lib/sectionRelsolver';
 import {useSettingsCssVars} from '~/hooks/useSettingsCssVars';
-import {section} from './cva/section';
 import {EncodeDataAttributeCallback} from '@sanity/react-loader';
 
 type CmsSectionsProps =
@@ -56,7 +55,7 @@ function SectionWrapper(props: {
     <footer
       data-footer-type={isDev ? sectionType : null}
       style={cssVars}
-      className={section({})}
+      className="color-scheme section-padding relative"
     >
       {children}
       {data.settings?.customCss && (
@@ -68,7 +67,7 @@ function SectionWrapper(props: {
       data-section-type={isDev ? sectionType : null}
       id={`section-${data._key}`}
       style={cssVars}
-      className={section({})}
+      className="color-scheme section-padding relative"
     >
       {children}
       {data.settings?.customCss && (

diff --git a/templates/hydrogen-theme/app/components/ProductCard.tsx b/templates/hydrogen-theme/app/components/ProductCard.tsx
@@ -13,7 +13,9 @@ export function ProductCard(props: {
   return (
     <div className="overflow-hidden rounded-lg border">
       <Link to={`/products/${product.handle}`}>
-        {firstVariant.image && <Image data={firstVariant.image} />}
+        {firstVariant.image && (
+          <Image aspectRatio="16/9" sizes="33vw" data={firstVariant.image} />
+        )}
         <div className="p-3">
           <div className="text-lg">{product.title}</div>
           <div>

diff --git a/...e/app/components/cva/contentAlignment.tsx → ...me/app/components/cva/contentAlignment.ts b/...e/app/components/cva/contentAlignment.tsx → ...me/app/components/cva/contentAlignment.ts
diff --git a/templates/hydrogen-theme/app/components/cva/header.ts b/templates/hydrogen-theme/app/components/cva/header.ts
@@ -0,0 +1,12 @@
+import type {VariantProps} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
+
+export type HeaderVariantsProps = VariantProps<typeof header>;
+
+export const header = cva([''], {
+  variants: {
+    optional: {'separator-line': 'border-color-scheme-text/10 border-b'},
+  },
+});
+
+export const headerVariants = (props: HeaderVariantsProps) => header(props);
diff --git a/templates/hydrogen-theme/app/components/cva/section.ts b/templates/hydrogen-theme/app/components/cva/section.ts
diff --git a/templates/hydrogen-theme/app/components/layout/Header.tsx b/templates/hydrogen-theme/app/components/layout/Header.tsx
@@ -1,11 +1,12 @@
 import type {CSSProperties} from 'react';
 import {Link} from '@remix-run/react';
+import {cx} from 'class-variance-authority';
 
 import {Logo} from './Logo';
 import {Navigation} from '../navigation/Navigation';
 import {useSanityRoot} from '~/hooks/useSanityRoot';
 import {useSettingsCssVars} from '~/hooks/useSettingsCssVars';
-import {section} from '../cva/section';
+import {headerVariants} from '../cva/header';
 
 export function Header() {
   const {data} = useSanityRoot();
@@ -21,7 +22,12 @@ export function Header() {
   return (
     <header
       style={cssVars}
-      className={section({optional: showSeparatorLine ? 'header' : null})}
+      className={cx([
+        'color-scheme section-padding relative',
+        headerVariants({
+          optional: showSeparatorLine ? 'separator-line' : null,
+        }),
+      ])}
     >
       <div className="container">
         <div className="flex items-center justify-between">

diff --git a/templates/hydrogen-theme/package.json b/templates/hydrogen-theme/package.json
@@ -29,6 +29,7 @@
     "@shopify/hydrogen": "^2023.10.2",
     "@shopify/remix-oxygen": "^2.0.1",
     "class-variance-authority": "^0.7.0",
+    "cva": "1.0.0-beta.1",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "groq": "^3.20.2",