- {children?.map((child) => {
- return child;
- })}
- {buttonLabel &&
{buttonLabel}}
+
+ {children}
);
@@ -108,58 +104,47 @@ export let schema: HydrogenComponentSchema = {
condition: `enableOverlay.eq.true`
},
{
- type: 'text',
- name: 'sectionHeight',
- label: 'Section height',
- defaultValue: '480px',
- placeholder: 'Example: 100px',
- },
- {
- type: 'text',
- name: 'buttonLabel',
- label: 'Button label',
- defaultValue: 'Button',
- },
- {
- type: 'text',
- name: 'buttonLink',
- label: 'Button link',
- placeholder: 'https://',
+ type: 'range',
+ name: 'sectionHeightDesktop',
+ label: 'Section height desktop',
+ defaultValue: 450,
+ configs: {
+ min: 400,
+ max: 700,
+ step: 10,
+ unit: 'px',
+ },
},
{
- type: 'toggle-group',
- name: 'loading',
- label: 'Background image loading',
- defaultValue: 'eager',
+ type: 'range',
+ name: 'sectionHeightMobile',
+ label: 'Section height mobile',
+ defaultValue: 350,
configs: {
- options: [
- { label: 'Eager', value: 'eager', icon: 'Lightning' },
- {
- label: 'Lazy',
- value: 'lazy',
- icon: 'SpinnerGap',
- weight: 'light',
- },
- ],
+ min: 300,
+ max: 600,
+ step: 10,
+ unit: 'px',
},
- helpText:
- 'Learn more about
image loading strategies.',
},
],
},
],
- childTypes: ['heading--item', 'subheading--item', 'description-text--item'],
+ childTypes: ['subheading--item', 'heading--item', 'description-text--item', 'button-image--item'],
presets: {
children: [
{
- type: 'heading--item',
+ type: 'subheading--item',
},
{
- type: 'subheading--item',
+ type: 'heading--item',
},
{
type: 'description-text--item',
- }
+ },
+ {
+ type: 'button-image--item',
+ },
],
},
};
diff --git a/app/sections/header-image/heading-item.tsx b/app/sections/header-image/heading-item.tsx
index 095893f..a9d893d 100644
--- a/app/sections/header-image/heading-item.tsx
+++ b/app/sections/header-image/heading-item.tsx
@@ -3,22 +3,18 @@ import type {
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
import { forwardRef } from 'react';
-import { CSSProperties } from 'react';
interface HeadingItemProps extends HydrogenComponentProps {
heading: string;
- headingSize: string;
+ headingColor: string;
}
let HeadingItem = forwardRef
((props, ref) => {
- let {heading, headingSize, ...rest } = props;
- let headingStyle: CSSProperties = {
- '--font-size-display': `${headingSize}`,
- } as CSSProperties;
+ let { heading, headingColor, ...rest } = props;
return (
-
-
{heading}
+
+
{heading}
);
});
@@ -40,19 +36,10 @@ export let schema: HydrogenComponentSchema = {
placeholder: 'Heading for image section',
},
{
- type: 'toggle-group',
- label: 'Heading size',
- name: 'headingSize',
- configs: {
- options: [
- { label: 'XS', value: '22px' },
- { label: 'S', value: '24px' },
- { label: 'M', value: '26px' },
- { label: 'L', value: '28px' },
- { label: 'XL', value: '30px' },
- ],
- },
- defaultValue: '24px',
+ type: 'color',
+ name: 'headingColor',
+ label: 'Heading color',
+ defaultValue: '#333333',
},
],
},
diff --git a/app/sections/header-image/subheading-item.tsx b/app/sections/header-image/subheading-item.tsx
index 3916d8a..53ca012 100644
--- a/app/sections/header-image/subheading-item.tsx
+++ b/app/sections/header-image/subheading-item.tsx
@@ -9,16 +9,18 @@ import { CSSProperties } from 'react';
interface SubHeadingItemProps extends HydrogenComponentProps {
subHeading: string;
subHeadingSize: string;
+ subHeadingColor: string;
}
let SubHeadingItem = forwardRef
((props, ref) => {
- let { subHeading, subHeadingSize, ...rest } = props;
+ let { subHeading, subHeadingSize, subHeadingColor, ...rest } = props;
let headingStyle: CSSProperties = {
- '--font-size-heading': `${subHeadingSize}`,
+ fontSize: subHeadingSize,
+ color: subHeadingColor,
} as CSSProperties;
return (
-
-
{subHeading}
+
);
});
@@ -54,6 +56,12 @@ export let schema: HydrogenComponentSchema = {
},
defaultValue: '16px',
},
+ {
+ type: 'color',
+ name: 'subHeadingColor',
+ label: 'Subheading color',
+ defaultValue: '#333333',
+ },
],
},
],
diff --git a/app/sections/image-with-text/content-item/button-item.tsx b/app/sections/image-with-text/content-item/button-item.tsx
index 1c1a009..e12c6cf 100644
--- a/app/sections/image-with-text/content-item/button-item.tsx
+++ b/app/sections/image-with-text/content-item/button-item.tsx
@@ -3,18 +3,21 @@ import type {
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
import { forwardRef } from 'react';
+import clsx from 'clsx';
interface ButtonItemProps extends HydrogenComponentProps {
buttonLabel: string;
buttonLink: string;
+ openInNewTab: boolean;
+ buttonStyle: string;
}
let ImageWTextButtonItem = forwardRef
((props, ref) => {
- let { buttonLabel, buttonLink, ...rest } = props;
+ let { buttonLabel, buttonLink, openInNewTab, buttonStyle, ...rest } = props;
return (
);
});
@@ -41,6 +44,25 @@ export let schema: HydrogenComponentSchema = {
label: 'Button link',
placeholder: 'https://'
},
+ {
+ type: 'switch',
+ name: 'openInNewTab',
+ label: 'Open in new tab',
+ defaultValue: true,
+ },
+ {
+ type: 'toggle-group',
+ label: 'Button style',
+ name: 'buttonStyle',
+ configs: {
+ options: [
+ { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
+ { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
+ { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
+ ],
+ },
+ defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
+ },
],
}
],
diff --git a/app/sections/image-with-text/content-item/description-item.tsx b/app/sections/image-with-text/content-item/description-item.tsx
index 1137a1c..09cff17 100644
--- a/app/sections/image-with-text/content-item/description-item.tsx
+++ b/app/sections/image-with-text/content-item/description-item.tsx
@@ -3,17 +3,24 @@ import type {
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
import { forwardRef } from 'react';
+import { CSSProperties } from 'react';
interface DescriptionItemProps extends HydrogenComponentProps {
descriptionText: string;
+ descriptionSize: string;
+ descriptionColor: string;
}
let ImageWTextDescriptionItem = forwardRef((props, ref) => {
- let { descriptionText, ...rest } = props;
+ let { descriptionText, descriptionSize, descriptionColor, ...rest } = props;
+ let styleDescription: CSSProperties = {
+ fontSize: descriptionSize,
+ color: descriptionColor,
+ } as CSSProperties;
return (
-
{descriptionText}
+
{descriptionText}
-
{heading}
+
+
{heading}
);
});
@@ -41,19 +37,10 @@ export let schema: HydrogenComponentSchema = {
placeholder: 'Heading for image section',
},
{
- type: 'toggle-group',
- label: 'Heading size',
- name: 'headingSize',
- configs: {
- options: [
- { label: 'XS', value: '22px' },
- { label: 'S', value: '24px' },
- { label: 'M', value: '26px' },
- { label: 'L', value: '28px' },
- { label: 'XL', value: '30px' },
- ],
- },
- defaultValue: '24px',
+ type: 'color',
+ name: 'headingColor',
+ label: 'Heading color',
+ defaultValue: '#333333',
},
],
}
diff --git a/app/sections/image-with-text/content-item/subheading-item.tsx b/app/sections/image-with-text/content-item/subheading-item.tsx
new file mode 100644
index 0000000..a93ce8b
--- /dev/null
+++ b/app/sections/image-with-text/content-item/subheading-item.tsx
@@ -0,0 +1,68 @@
+import type {
+ HydrogenComponentProps,
+ HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+import { CSSProperties } from 'react';
+
+interface SubheadingProps extends HydrogenComponentProps {
+ subHeading: string;
+ subHeadingSize: string;
+ subHeadingColor: string;
+}
+
+let ImageWTextSubheadingItem = forwardRef
((props, ref) => {
+ let { subHeading, subHeadingSize, subHeadingColor, ...rest } = props;
+ let styleContent: CSSProperties = {
+ fontSize: subHeadingSize,
+ color: subHeadingColor,
+ } as CSSProperties;
+ return (
+
+ {subHeading &&
{subHeading}
}
+
-
- {children}
+
@@ -37,6 +54,11 @@ export let schema: HydrogenComponentSchema = {
{
group: 'Image',
inputs: [
+ {
+ type: 'image',
+ name: 'image',
+ label: 'Image',
+ },
{
type: 'toggle-group',
label: 'Text alignment',
@@ -50,17 +72,60 @@ export let schema: HydrogenComponentSchema = {
},
defaultValue: 'left',
},
+ {
+ type: 'range',
+ name: 'sectionHeight',
+ label: 'Section height',
+ defaultValue: 450,
+ configs: {
+ min: 400,
+ max: 700,
+ step: 10,
+ unit: 'px',
+ },
+ },
+ {
+ type: 'color',
+ name: 'backgroundColor',
+ label: 'Background color',
+ defaultValue: '#f4f4f4',
+ },
+ {
+ type: 'toggle-group',
+ name: 'loading',
+ label: 'Image loading',
+ defaultValue: 'eager',
+ configs: {
+ options: [
+ { label: 'Eager', value: 'eager', icon: 'Lightning' },
+ {
+ label: 'Lazy',
+ value: 'lazy',
+ icon: 'SpinnerGap',
+ weight: 'light',
+ },
+ ],
+ },
+ helpText:
+ 'Learn more about
image loading strategies.',
+ },
],
},
],
- childTypes: ['Content--Item','Image--Component'],
+ childTypes: ['subheading-image--Item', 'Heading--Item', 'Description--Item', 'Button--Item'],
presets: {
children: [
{
- type: 'Content--Item',
+ type: 'subheading-image--Item',
+ },
+ {
+ type: 'Heading--Item',
+ },
+ {
+ type: 'Description--Item',
},
{
- type: 'Image--Component',
+ type: 'Button--Item',
},
],
},
diff --git a/app/sections/promotion-grid/item.tsx b/app/sections/promotion-grid/item.tsx
new file mode 100644
index 0000000..1cae73a
--- /dev/null
+++ b/app/sections/promotion-grid/item.tsx
@@ -0,0 +1,196 @@
+import type {
+ HydrogenComponentProps,
+ HydrogenComponentSchema,
+ WeaverseImage,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+import { Image } from '@shopify/hydrogen';
+import {IconImageBlank} from '~/components';
+import clsx from 'clsx';
+
+interface PromotionItemProps extends HydrogenComponentProps {
+ backgroundImage: WeaverseImage;
+ subHeading: string;
+ subHeadingSize: string;
+ subHeadingColor: string;
+ heading: string;
+ headingColor: string;
+ descriptionText: string;
+ descriptionSize: string;
+ descriptionColor: string;
+ buttonLabel1: string;
+ buttonLink1: string;
+ buttonLabel2: string;
+ buttonLink2: string;
+ openInNewTab: boolean;
+ buttonStyle1: string;
+ buttonStyle2: string;
+}
+
+let PromotionGridItem = forwardRef
((props, ref) => {
+ let { backgroundImage, subHeading, subHeadingSize, subHeadingColor, heading, headingColor, descriptionText, descriptionSize, descriptionColor, buttonLabel1, buttonLink1, buttonLabel2, buttonLink2, openInNewTab, buttonStyle1, buttonStyle2, ...rest } = props;
+ return (
+
+
+ {backgroundImage ?
:
+
+
+
}
+
+
+
+ {subHeading &&
{subHeading}
}
+ {heading &&
{heading}
}
+ {descriptionText &&
{descriptionText}
}
+
+
+
+