@grantcodes/ui 2.0.2 → 2.1.0

package/src/components/gallery/gallery.test.js

@@ -51,8 +51,10 @@ describe("Gallery Component", () => {
 	it("should initialize images array", async () => {
 		element = await fixture("grantcodes-gallery");
 		assert.ok(Array.isArray(element.images), "Images should be an array");
-		assert.strictEqual(element.images.length, 0, "Images array should be empty initially");
+		assert.strictEqual(
+			element.images.length,
+			0,
+			"Images array should be empty initially",
+		);
 	});
 });
-
-

package/src/components/gallery/index.js

@@ -1,2 +1,2 @@
-export * from "./gallery";
-export * from "./gallery-image";
+export * from "./gallery.js";
+export * from "./gallery-image.js";

package/src/components/hero/hero.component.js

@@ -0,0 +1,66 @@
+import { LitElement, html } from "lit";
+import { heroStyles } from "./hero.styles.js";
+import "../button/button.js";
+
+export class GrantCodesHero extends LitElement {
+	static styles = [heroStyles];
+
+	static properties = {
+		/**
+		 * Main heading text.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Supporting paragraph text shown below the title.
+		 * @type {string}
+		 */
+		subtitle: { type: String },
+		/**
+		 * Label for the CTA button. Only rendered when `href` is also set.
+		 * @type {string}
+		 */
+		button: { type: String },
+		/**
+		 * URL the CTA button links to.
+		 * @type {string}
+		 */
+		href: { type: String },
+		/**
+		 * Controls the vertical height of the hero section.
+		 * @type {'sm' | 'md' | 'lg'}
+		 */
+		size: { type: String, reflect: true },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.subtitle = "";
+		this.button = "";
+		this.href = "";
+		this.size = "md";
+	}
+
+	render() {
+		return html`
+			<section class="hero">
+				<div class="hero__container">
+					<h1 class="hero__title">${this.title}</h1>
+					${
+						this.subtitle
+							? html`<p class="hero__text">${this.subtitle}</p>`
+							: null
+					}
+					${
+						this.href && this.button
+							? html`<grantcodes-button href=${this.href}
+								>${this.button}</grantcodes-button
+							>`
+							: null
+					}
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/hero/hero.js

@@ -0,0 +1,6 @@
+import { GrantCodesHero } from "./hero.component.js";
+
+export * from "./hero.component.js";
+export default GrantCodesHero;
+
+customElements.define("grantcodes-hero", GrantCodesHero);

package/src/components/hero/hero.stories.js

@@ -0,0 +1,53 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./hero.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-hero");
+
+const meta = {
+	title: "Blocks/Hero",
+	component: "grantcodes-hero",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+/**
+ * Default hero with title, subtitle, and CTA.
+ */
+export const Default = {
+	args: {
+		title: "Build something great",
+		subtitle: "A personal web component library with a custom design system.",
+		button: "Get started",
+		href: "/docs",
+		size: "md",
+	},
+};
+
+/**
+ * Small hero — useful for inner page headers.
+ */
+export const Small = {
+	args: {
+		title: "About this project",
+		subtitle: "A brief overview of what we're building.",
+		size: "sm",
+	},
+};
+
+/**
+ * Large hero with no CTA.
+ */
+export const Large = {
+	args: {
+		title: "Welcome",
+		size: "lg",
+	},
+};

package/src/components/hero/hero.styles.js

@@ -0,0 +1,46 @@
+import { css } from "lit";
+
+export const heroStyles = css`
+	:host {
+		display: block;
+	}
+
+	.hero {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+		min-height: 50vh;
+		text-align: center;
+		padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
+		background: var(--g-theme-color-background-brand-knockout, #7c3aed);
+	}
+
+	.hero__container {
+		width: 100%;
+		max-width: 65ch;
+	}
+
+	.hero__title {
+		margin: 0 0 var(--g-theme-spacing-md);
+		font-weight: var(--g-typography-font-weight-900);
+		font-size: clamp(2rem, 5vw, 4rem);
+		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+	}
+
+	.hero__text {
+		font-size: var(--g-theme-typography-title-default-font-size);
+		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+		margin: 0 0 var(--g-theme-spacing-lg);
+	}
+
+	:host([size="sm"]) .hero {
+		min-height: 30vh;
+		padding: var(--g-theme-spacing-xl) var(--g-theme-spacing-md);
+	}
+
+	:host([size="lg"]) .hero {
+		min-height: 70vh;
+		padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
+	}
+`;

package/src/components/hero/index.js

@@ -0,0 +1 @@
+export * from "./hero.js";

package/src/components/icon/icon.js

@@ -3,5 +3,6 @@ import { GrantCodesIcon } from "./icon.component.js";
 export * from "./icon.component.js";
 export default GrantCodesIcon;
 
-customElements.define("grantcodes-icon", GrantCodesIcon);
-
+if (!customElements.get("grantcodes-icon")) {
+	customElements.define("grantcodes-icon", GrantCodesIcon);
+}

package/src/components/icon/icon.stories.js

@@ -11,7 +11,8 @@ const meta = {
 export default meta;
 
 export const Icon = {
-	render: () => html`<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>`,
+	render: () =>
+		html`<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>`,
 };
 
 export const MultipleIcons = {

package/src/components/icon/icon.styles.js

@@ -1,28 +1,30 @@
 import { css } from "lit";
 
 export const iconStyles = css`
+  :host {
+    display: block;
+  }
 
-.icon {
-  display: inline-block;
-  color: inherit;
-  width: 1em;
-  height: 1em;
-}
+  .icon {
+    display: block;
+    color: inherit;
+    width: 1em;
+    height: 1em;
+  }
 
-.icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
-}
+  .icon ::slotted(svg) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
 
-.icon svg:not([fill]) {
-  fill: currentColor;
-}
+  .icon ::slotted(svg:not([fill])) {
+    fill: currentColor;
+  }
 
-.icon svg:not([stoke]) {
-  stroke: currentColor;
-}
-
-`;
+  .icon ::slotted(svg:not([stoke])) {
+    stroke: currentColor;
+  }
+`;

package/src/components/icon/icon.test.js

@@ -44,7 +44,8 @@ describe("Icon Component", () => {
 
 	it("should accept any SVG as slot content", async () => {
 		element = await fixture("grantcodes-icon");
-		element.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
+		element.innerHTML =
+			'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
 
 		await element.updateComplete;
 
@@ -53,5 +54,3 @@ describe("Icon Component", () => {
 		assert.ok(svg.querySelector("circle"), "SVG content should be preserved");
 	});
 });
-
-

package/src/components/icon/index.js

@@ -1 +1 @@
-export * from "./icon";
+export * from "./icon.js";

package/src/components/loading/index.js

@@ -1 +1 @@
-export * from "./loading";
+export * from "./loading.js";

package/src/components/loading/loading.js

@@ -3,5 +3,6 @@ import { GrantCodesLoading } from "./loading.component.js";
 export * from "./loading.component.js";
 export default GrantCodesLoading;
 
-customElements.define("grantcodes-loading", GrantCodesLoading);
-
+if (!customElements.get("grantcodes-loading")) {
+	customElements.define("grantcodes-loading", GrantCodesLoading);
+}

package/src/components/loading/loading.styles.js

@@ -40,4 +40,4 @@ export const loadingStyles = css`
   }
 }
 
-`;
+`;

package/src/components/loading/loading.test.js

@@ -53,5 +53,3 @@ describe("Loading Component", () => {
 		assert.ok(customSpinner, "Custom spinner should be slotted");
 	});
 });
-
-

package/src/components/logo-cloud/index.js

@@ -0,0 +1 @@
+export * from "./logo-cloud.js";

package/src/components/logo-cloud/logo-cloud.component.js

@@ -0,0 +1,81 @@
+import { LitElement, html } from "lit";
+import { logoCloudStyles } from "./logo-cloud.styles.js";
+
+export class GrantCodesLogoCloud extends LitElement {
+	static styles = [logoCloudStyles];
+
+	static properties = {
+		/**
+		 * Optional label shown above the logos.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Logo items as a JSON string array: `[{"name":"...","src":"...","alt":"...","href":"..."}]`.
+		 * @type {string}
+		 */
+		logos: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.logos = "[]";
+	}
+
+	get _logos() {
+		try {
+			return JSON.parse(this.logos);
+		} catch {
+			return [];
+		}
+	}
+
+	render() {
+		const logos = this._logos;
+		return html`
+			<section class="logo-cloud">
+				<div class="logo-cloud__container">
+					${
+						this.title
+							? html`<p class="logo-cloud__title">${this.title}</p>`
+							: null
+					}
+					<ul class="logo-cloud__grid" role="list">
+						${logos.map(
+							(logo) => html`
+								<li class="logo-cloud__item">
+									${
+										logo.href
+											? html`
+												<a
+													href=${logo.href}
+													class="logo-cloud__link"
+													aria-label=${logo.name}
+												>
+													<img
+														src=${logo.src}
+														alt=${logo.alt ?? logo.name}
+														class="logo-cloud__logo"
+														loading="lazy"
+													/>
+												</a>
+											`
+											: html`
+												<img
+													src=${logo.src}
+													alt=${logo.alt ?? logo.name}
+													class="logo-cloud__logo"
+													loading="lazy"
+												/>
+											`
+									}
+								</li>
+							`,
+						)}
+					</ul>
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/logo-cloud/logo-cloud.js

@@ -0,0 +1,6 @@
+import { GrantCodesLogoCloud } from "./logo-cloud.component.js";
+
+export * from "./logo-cloud.component.js";
+export default GrantCodesLogoCloud;
+
+customElements.define("grantcodes-logo-cloud", GrantCodesLogoCloud);

package/src/components/logo-cloud/logo-cloud.stories.js

@@ -0,0 +1,107 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./logo-cloud.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-logo-cloud");
+
+const meta = {
+	title: "Blocks/LogoCloud",
+	component: "grantcodes-logo-cloud",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const sampleLogos = JSON.stringify([
+	{
+		name: "Acme Corp",
+		src: "https://placehold.co/120x40?text=Acme",
+		alt: "Acme Corp logo",
+	},
+	{
+		name: "Globex",
+		src: "https://placehold.co/120x40?text=Globex",
+		alt: "Globex logo",
+	},
+	{
+		name: "Initech",
+		src: "https://placehold.co/120x40?text=Initech",
+		alt: "Initech logo",
+	},
+	{
+		name: "Umbrella",
+		src: "https://placehold.co/120x40?text=Umbrella",
+		alt: "Umbrella Corp logo",
+	},
+	{
+		name: "Hooli",
+		src: "https://placehold.co/120x40?text=Hooli",
+		alt: "Hooli logo",
+	},
+]);
+
+/**
+ * Logo cloud with a label and linked logos.
+ */
+export const Default = {
+	args: {
+		title: "Trusted by teams at",
+		logos: JSON.stringify([
+			{
+				name: "Acme Corp",
+				src: "https://placehold.co/120x40?text=Acme",
+				alt: "Acme Corp logo",
+				href: "https://example.com",
+			},
+			{
+				name: "Globex",
+				src: "https://placehold.co/120x40?text=Globex",
+				alt: "Globex logo",
+				href: "https://example.com",
+			},
+			{
+				name: "Initech",
+				src: "https://placehold.co/120x40?text=Initech",
+				alt: "Initech logo",
+				href: "https://example.com",
+			},
+			{
+				name: "Umbrella",
+				src: "https://placehold.co/120x40?text=Umbrella",
+				alt: "Umbrella Corp logo",
+				href: "https://example.com",
+			},
+			{
+				name: "Hooli",
+				src: "https://placehold.co/120x40?text=Hooli",
+				alt: "Hooli logo",
+				href: "https://example.com",
+			},
+		]),
+	},
+};
+
+/**
+ * Logo cloud without a title heading.
+ */
+export const NoTitle = {
+	args: {
+		logos: sampleLogos,
+	},
+};
+
+/**
+ * Logo cloud with unlinked logos — read-only brand display.
+ */
+export const Unlinked = {
+	args: {
+		title: "Built with",
+		logos: sampleLogos,
+	},
+};

package/src/components/logo-cloud/logo-cloud.styles.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+
+export const logoCloudStyles = css`
+  :host {
+    display: block;
+  }
+
+  .logo-cloud {
+    padding-block: var(--g-theme-spacing-2xl);
+    padding-inline: var(--g-theme-spacing-md);
+    border-top: 1px solid var(--g-theme-color-border-default);
+    border-bottom: 1px solid var(--g-theme-color-border-default);
+  }
+
+  .logo-cloud__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .logo-cloud__title {
+    margin: 0 0 var(--g-theme-spacing-xl);
+    font-size: var(--g-theme-typography-meta-default-font-size);
+    font-weight: var(--g-theme-typography-meta-default-font-weight);
+    letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
+    text-transform: uppercase;
+    text-align: center;
+    color: var(--g-theme-color-content-secondary);
+  }
+
+  .logo-cloud__grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--g-theme-spacing-lg) var(--g-theme-spacing-2xl);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .logo-cloud__link {
+    display: block;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+  }
+
+  .logo-cloud__link:hover {
+    opacity: 1;
+  }
+
+  .logo-cloud__logo {
+    display: block;
+    block-size: var(--g-theme-spacing-xl);
+    inline-size: auto;
+    max-inline-size: 140px;
+    object-fit: contain;
+    filter: grayscale(1);
+    transition: filter 0.2s;
+  }
+
+  .logo-cloud__link:hover .logo-cloud__logo {
+    filter: none;
+  }
+
+  .logo-cloud__item:not(:has(.logo-cloud__link)) .logo-cloud__logo {
+    filter: none;
+  }
+`;

package/src/components/media-text/index.js

@@ -0,0 +1 @@
+export * from "./media-text.js";

package/src/components/media-text/media-text.component.js

@@ -0,0 +1,100 @@
+import { LitElement, html } from "lit";
+import { mediaTextStyles } from "./media-text.styles.js";
+import "../button/button.js";
+
+export class GrantCodesMediaText extends LitElement {
+	static styles = [mediaTextStyles];
+
+	static properties = {
+		/**
+		 * Section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Body text paragraph.
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Media object as a JSON string: `{"src":"...","alt":"...","kind":"image|video"}`.
+		 * @type {string}
+		 */
+		media: { type: String },
+		/**
+		 * When true, the media appears on the right and text on the left.
+		 * @type {boolean}
+		 */
+		reverse: { type: Boolean, reflect: true },
+		/**
+		 * Optional CTA as a JSON string: `{"label":"...","href":"..."}`.
+		 * @type {string}
+		 */
+		cta: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.text = "";
+		this.media = "";
+		this.reverse = false;
+		this.cta = "";
+	}
+
+	get _media() {
+		try {
+			return this.media ? JSON.parse(this.media) : null;
+		} catch {
+			return null;
+		}
+	}
+
+	get _cta() {
+		try {
+			return this.cta ? JSON.parse(this.cta) : null;
+		} catch {
+			return null;
+		}
+	}
+
+	render() {
+		const media = this._media;
+		const cta = this._cta;
+		return html`
+			<section class="media-text">
+				<div class="media-text__container">
+					<div class="media-text__media">
+						${
+							media?.kind === "video"
+								? html`<video
+									src=${media.src}
+									class="media-text__video"
+									controls
+									preload="metadata"
+									aria-label=${media.alt ?? ""}
+								></video>`
+								: html`<img
+									src=${media?.src ?? ""}
+									alt=${media?.alt ?? ""}
+									class="media-text__image"
+									loading="lazy"
+								/>`
+						}
+					</div>
+					<div class="media-text__content">
+						<h2 class="media-text__title">${this.title}</h2>
+						<p class="media-text__text">${this.text}</p>
+						${
+							cta
+								? html`<grantcodes-button href=${cta.href}
+									>${cta.label}</grantcodes-button
+								>`
+								: null
+						}
+					</div>
+				</div>
+			</section>
+		`;
+	}
+}