+ );
+};
+
+export default Accordion;
diff --git a/app/components/hydrogen/new/Layout.tsx b/app/components/hydrogen/new/Layout.tsx
new file mode 100644
index 0000000..98473d8
--- /dev/null
+++ b/app/components/hydrogen/new/Layout.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import configured class names generator functions with predetermined styles.
+import {cx, cva} from './cva.config';
+
+/**
+ * Type definitions for the Flex component props enriched with Tailwind CSS class and CSS mapping details.
+ */
+interface FlexProps {
+ as?: React.ElementType;
+ asChild?: boolean;
+ children?: React.ReactNode;
+ className?: string;
+ /**
+ * Controls the flex-direction CSS property.
+ * - `'row'`: `flex-row` (CSS: `flex-direction: row`)
+ * - `'column'`: `flex-col` (CSS: `flex-direction: column`)
+ */
+ direction?: 'row' | 'column';
+ /**
+ * Controls the align-items CSS property.
+ * - `'start'`: `items-start` (CSS: `align-items: flex-start`)
+ * - `'center'`: `items-center` (CSS: `align-items: center`)
+ * - `'end'`: `items-end` (CSS: `align-items: flex-end`)
+ * - `'baseline'`: `items-baseline` (CSS: `align-items: baseline`)
+ * - `'stretch'`: `items-stretch` (CSS: `align-items: stretch`)
+ */
+ align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+ /**
+ * Controls the justify-content CSS property.
+ * - `'center'`: `justify-center` (CSS: `justify-content: center`)
+ * - `'start'`: `justify-start` (CSS: `justify-content: flex-start`)
+ * - `'end'`: `justify-end` (CSS: `justify-content: flex-end`)
+ * - `'between'`: `justify-between` (CSS: `justify-content: space-between`)
+ */
+ justify?: 'center' | 'start' | 'end' | 'between';
+ /**
+ * Controls the gap CSS property.
+ * - `1`: `gap-1` (CSS: `gap: 0.25rem`)
+ * - `2`: `gap-2` (CSS: `gap: 0.5rem`)
+ * - `3`: `gap-3` (CSS: `gap: 0.75rem`)
+ * - `4`: `gap-4` (CSS: `gap: 1rem`)
+ * - `5`: `gap-5` (CSS: `gap: 1.25rem`)
+ */
+ gap?: 1 | 2 | 3 | 4 | 5;
+}
+
+/**
+ * Configuration for "cva" to generate a dynamic class string based on the provided flex configuration.
+ */
+const flex = cva({
+ base: 'flex',
+ variants: {
+ direction: {
+ row: 'flex-row',
+ column: 'flex-col',
+ },
+ align: {
+ start: 'items-start',
+ center: 'items-center',
+ end: 'items-end',
+ baseline: 'items-baseline',
+ stretch: 'items-stretch',
+ },
+ justify: {
+ center: 'justify-center',
+ start: 'justify-start',
+ end: 'justify-end',
+ between: 'justify-between',
+ },
+ gap: {
+ 1: 'gap-1',
+ 2: 'gap-2',
+ 3: 'gap-3',
+ 4: 'gap-4',
+ 5: 'gap-5',
+ },
+ },
+});
+
+/**
+ * A highly customizable Flex component designed to facilitate the easier use of CSS flexbox layout
+ * with additional options to control alignment, distribution, and direction of child components.
+ *
+ * @component
+ * @param {React.ElementType} [as='div'] - The element type to be rendered as the Flex container.
+ * @param {React.ReactNode} children - Elements to be included inside the Flex container.
+ * @param {string} className - Additional custom classes to enhance or modify the default styling.
+ * @param {'row' | 'column'} direction - Direction which children are laid out in the Flex container.
+ * @param {'start' | 'center' | 'end' | 'baseline' | 'stretch'} align - Align children vertically or horizontally (dependent on `direction`).
+ * @param {'center' | 'start' | 'end' | 'between'} justify - Control the distribution of children along main axis.
+ * @returns {React.ReactNode} The React component rendering the Flex container with applied styles.
+ */
+export const Flex = React.forwardRef(
+ ({as: Component = 'div', children, className = '', ...props}, ref) => {
+ const classes = cx(flex(props), className);
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+interface BackgroundProps {
+ as?: React.ElementType;
+ asChild?: boolean;
+ children?: React.ReactNode;
+ className?: string;
+ columns?: 1 | 2 | 3 | 4 | 5;
+ rows?: 1 | 2 | 3 | 4 | 5;
+}
+
+const background = cva({
+ base: ['grid', 'absolute', 'z-0', 'inset-0', 'pointer-events-none'],
+ variants: {
+ columns: {
+ 1: 'grid-cols-1',
+ 2: 'grid-cols-2',
+ 3: 'grid-cols-3',
+ 4: 'grid-cols-4',
+ 5: 'grid-cols-5',
+ },
+ rows: {
+ 1: 'grid-rows-1',
+ 2: 'grid-rows-2',
+ 3: 'grid-rows-3',
+ 4: 'grid-rows-4',
+ 5: 'grid-rows-5',
+ },
+ },
+ defaultVariants: {
+ columns: 2,
+ },
+});
+
+export const Background = React.forwardRef(
+ ({children, className, ...props}, ref) => {
+ const classes = cx(background(props), className);
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+// /**
+// * Grid
+// */
+// const grid = cva({
+// base: 'grid',
+// variants: {
+// gridTemplateColumns: {
+// three: 'grid-cols-3',
+// },
+// },
+// defaultVariants: {
+// gridTemplateColumns: 'three',
+// },
+// });
+
+// export const Grid = React.forwardRef((props, ref) => (
+//
+// ));
+
+// // export const Section = React.forwardRef((props, ref) => (
+// //
+// // ));
+
+// const container = cva({
+// base: 'container mx-auto px-4',
+// variants: {
+// size: {
+// small: 'max-w-sm',
+// large: 'max-w-7xl',
+// },
+// },
+// defaultVariants: {
+// size: 'large',
+// },
+// });
+
+// export const Container = React.forwardRef((props, ref) => (
+//
+// ));
diff --git a/app/components/hydrogen/new/cva.config.js b/app/components/hydrogen/new/cva.config.js
new file mode 100644
index 0000000..7b6a37f
--- /dev/null
+++ b/app/components/hydrogen/new/cva.config.js
@@ -0,0 +1,8 @@
+import {defineConfig} from 'cva';
+import {twMerge} from 'tailwind-merge';
+
+export const {cva, cx, compose} = defineConfig({
+ hooks: {
+ onComplete: (className) => twMerge(className),
+ },
+});
diff --git a/app/components/hydrogen/new/scratch-pad.jsx b/app/components/hydrogen/new/scratch-pad.jsx
new file mode 100644
index 0000000..0095145
--- /dev/null
+++ b/app/components/hydrogen/new/scratch-pad.jsx
@@ -0,0 +1,175 @@
+import React from 'react';
+import {cva} from 'cva';
+
+/**
+ * Trying a new thing — starting from what I actually need
+ */
+
+function Dx({props}) {
+ return {props.children};
+}
+
+/**
+ * Components:
+ * - Box
+ * - Flex
+ * - Grid
+ * - Section
+ * - Container
+ *
+ * Common layout props:
+ * - Padding:
+ * - p, px, py, pt, pr, pb, pl
+ * - Responsive 0 to 9, or any CSS value
+ * - Margin
+ * - m, mx, my, mt, mr, mb, ml
+ * - Responsive -9 to 9, or any CSS value
+ * - Width: width, minWidth, maxWidth
+ * - https://tailwindcss.com/docs/width
+ * - Height:
+ * - height: https://tailwindcss.com/docs/height
+ * - minHeight: https://tailwindcss.com/docs/min-height
+ * - maxHeight: https://tailwindcss.com/docs/max-height
+ * - Position:
+ * - position: static | relative | absolute | fixed | sticky
+ * - inset: Responsive: -9 - 9, or any CSS value
+ * - top: Responsive: -9 - 9, or any CSS value
+ * - right: Responsive: -9 - 9, or any CSS value
+ * - bottom: Responsive: -9 - 9, or any CSS value
+ * - left: Responsive: -9 - 9, or any CSS value
+ * - Flex children
+ * - flexBasis: Responsive (e.g. 100%)
+ * - flexShrink: Responsive>
+ * - flexGrow: Responsive>
+ * - Grid children
+ * - gridColumn: Responsive
+ * - gridColumnStart: Responsive
+ * - gridColumnEnd: Responsive
+ * - gridRow: Responsive
+ * - gridRowStart: Responsive
+ * - gridRowEnd: Responsive
+ */
+
+const flex = cva({
+ base: 'flex',
+ variants: {},
+});
+
+const Flex = React.forwardRef(
+ ({as: Component = 'div', asChild, children, ...props}, ref) => {
+ const className = flex(props); // Apply CVA-generated class
+
+ if (asChild) {
+ // If asChild is true, clone the only child and pass all props
+ return React.cloneElement(React.Children.only(children), {
+ ...props,
+ ref,
+ className: `${children.props.className || ''} ${className}`,
+ });
+ }
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+function DemoDX(props) {
+ /**
+ * Use Tailwind values for all prop values —
+ * ideally dynamically via [`resolveConfig`](https://tailwindcss.com/docs/configuration#referencing-in-java-script);
+ * if we need to [hard code it at the start](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js)
+ * that's OK too. */
+ return (
+ <>
+ {/* Strict Utopia… not thinking about naming, just using what's there */}
+
+ {props.children}
+
+ {/* Basic*/}
+
+ {props.children}
+
+ {/* Other ideas… */}
+ {/* Responsive styles: `default, tablet, laptop, desktop` */}
+
+ {props.children}
+
+ {/* With min-max, array of objects for responsive */}
+
+ {props.children}
+
+ {/* Prop shorthands */}
+
+ {props.children}
+
+
+ );
+}
+
+// Define possible style variants and default props if needed
+const box = cva({
+ base: 'box-border p-0 m-0', // base classes including resetting padding and margin
+ variants: {
+ display: {
+ none: 'hidden',
+ block: 'block',
+ inline: 'inline',
+ inlineBlock: 'inline-block',
+ flex: 'flex',
+ inlineFlex: 'inline-flex',
+ },
+ position: {
+ static: 'static',
+ fixed: 'fixed',
+ absolute: 'absolute',
+ relative: 'relative',
+ sticky: 'sticky',
+ },
+ // Add more Tailwind variants for other CSS properties as needed
+ },
+ compoundVariants: [
+ // Compound variants can be used for responsive or state-based styling
+ ],
+ defaultVariants: {
+ display: 'block',
+ },
+});
+
+const Box = React.forwardRef(
+ ({as: Component = 'div', asChild, children, ...props}, ref) => {
+ const className = box(props); // Apply CVA-generated class
+
+ if (asChild) {
+ // If asChild is true, clone the only child and pass all props
+ return React.cloneElement(React.Children.only(children), {
+ ...props,
+ ref,
+ className: `${children.props.className || ''} ${className}`,
+ });
+ }
+
+ return (
+
+ {children}
+
+ );
+ },
+);
diff --git a/app/components/hydrogen/new/tokens.js b/app/components/hydrogen/new/tokens.js
new file mode 100644
index 0000000..b6628fd
--- /dev/null
+++ b/app/components/hydrogen/new/tokens.js
@@ -0,0 +1,30 @@
+/**
+ * Palette + Dark Mode:
+ * - text
+ * - background
+ * - primary
+ * - secondary
+ * - accent
+ * - highlight
+ * - muted
+ *
+ * Colours: RGB + Alpha
+ */
+
+/**
+ * Typography
+ *
+ * fonts: (for each: typeface, weight, line height, emphasis + bold alts)
+ * - display
+ * - heading
+ * - body
+ * - code
+ *
+ * fontSizes:
+ * - 1: 12
+ * - 2: 14
+ * - 3: 16
+ * - 4: 20
+ * - 5: 24
+ * - 6: 32
+ */
diff --git a/app/routes/products.$handle/route.jsx b/app/routes/products.$handle/route.jsx
index 50afa31..b285088 100644
--- a/app/routes/products.$handle/route.jsx
+++ b/app/routes/products.$handle/route.jsx
@@ -8,6 +8,7 @@ import Reviews from './sections/reviews';
import Spotlight from './sections/spotlight';
import Recommended from './sections/recommended';
import Marquee from './sections/marquee';
+import {Flex} from '@h2/new/Layout';
export const meta = ({data}) => {
return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
diff --git a/app/routes/products.$handle/sections/hero.jsx b/app/routes/products.$handle/sections/hero.jsx
index 25da5cc..39ba590 100644
--- a/app/routes/products.$handle/sections/hero.jsx
+++ b/app/routes/products.$handle/sections/hero.jsx
@@ -5,6 +5,9 @@ import {AddToCartButton} from '@h2/Button';
import {Heading, Text} from '@h2/Text';
import {Price, PriceCompareAt} from '@h2/Price';
import {ShopPayButton} from '@h2/ShopPayButton';
+import {Background, Flex} from '@h2/new/Layout';
+import Link from '@h2/Link';
+import Accordion from '@h2/new/Accordion';
export default function Hero() {
const {product} = useLoaderData();
@@ -23,18 +26,20 @@ export default function Hero() {
sizes="(min-width: 45em) 50vw, 100vw"
/>
-
+
-
+
-
-
+
+
+
+
);
@@ -44,6 +49,27 @@ function ProductSummary() {
const {product, variants} = useLoaderData();
const {selectedVariant, title, description} = product;
+ const accordionData = [
+ {
+ id: '1',
+ title: 'Materials',
+ content:
+ 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias debitis illo unde itaque eius eos necessitatibus assumenda, quos nisi cum reprehenderit aut placeat modi corrupti repudiandae mollitia corporis et labore?',
+ },
+ {
+ id: '2',
+ title: 'Care Instructions',
+ content:
+ 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias debitis illo unde itaque eius eos necessitatibus assumenda, quos nisi cum reprehenderit aut placeat modi corrupti repudiandae mollitia corporis et labore?',
+ },
+ {
+ id: '3',
+ title: 'Fit',
+ content:
+ 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias debitis illo unde itaque eius eos necessitatibus assumenda, quos nisi cum reprehenderit aut placeat modi corrupti repudiandae mollitia corporis et labore?',
+ },
+ ];
+
return (
-
*/}
+
-
+
{/* */}
Receive it by{' '}
{businessDaysFromNow(7)}
-