@grantcodes/ui 2.0.2 → 2.1.0

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

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

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

@@ -0,0 +1,69 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./media-text.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-media-text");
+
+const meta = {
+	title: "Blocks/MediaText",
+	component: "grantcodes-media-text",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+/**
+ * Default media-text — image on the left, text on the right.
+ */
+export const Default = {
+	args: {
+		title: "Design tokens done right",
+		text: "Our style dictionary generates CSS custom properties, JS tokens, and JSON outputs from a single source of truth — keeping every theme in perfect sync.",
+		media: JSON.stringify({
+			src: "https://placehold.co/640x480",
+			alt: "Design tokens diagram",
+			kind: "image",
+		}),
+		cta: JSON.stringify({ label: "Read the docs", href: "/docs/tokens" }),
+		reverse: false,
+	},
+};
+
+/**
+ * Reversed layout — image on the right, text on the left.
+ */
+export const Reversed = {
+	args: {
+		title: "Accessible by default",
+		text: "Every component ships with ARIA attributes, keyboard navigation, and focus management built in. No extra configuration required.",
+		media: JSON.stringify({
+			src: "https://placehold.co/640x480",
+			alt: "Accessibility diagram",
+			kind: "image",
+		}),
+		reverse: true,
+	},
+};
+
+/**
+ * Video media variant.
+ */
+export const Video = {
+	args: {
+		title: "See it in action",
+		text: "Watch how quickly you can spin up a fully-themed UI with our component library.",
+		media: JSON.stringify({
+			src: "https://www.w3schools.com/html/mov_bbb.mp4",
+			alt: "Demo video",
+			kind: "video",
+		}),
+		cta: JSON.stringify({ label: "Try it yourself", href: "/playground" }),
+		reverse: false,
+	},
+};

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

@@ -0,0 +1,66 @@
+import { css } from "lit";
+
+export const mediaTextStyles = css`
+  :host {
+    display: block;
+  }
+
+  .media-text {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  .media-text__container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--g-theme-spacing-3xl);
+    align-items: center;
+  }
+
+  :host([reverse]) .media-text__container {
+    direction: rtl;
+  }
+
+  :host([reverse]) .media-text__content,
+  :host([reverse]) .media-text__media {
+    direction: ltr;
+  }
+
+  @media (max-width: 768px) {
+    .media-text__container {
+      grid-template-columns: 1fr;
+      gap: var(--g-theme-spacing-xl);
+      direction: ltr;
+    }
+  }
+
+  .media-text__image,
+  .media-text__video {
+    inline-size: 100%;
+    block-size: auto;
+    display: block;
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
+    object-fit: cover;
+    aspect-ratio: 4 / 3;
+  }
+
+  .media-text__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-lg);
+  }
+
+  .media-text__title {
+    margin: 0;
+    font: var(--g-theme-typography-headline-sm);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .media-text__text {
+    margin: 0;
+    font: var(--g-theme-typography-body-lg);
+    color: var(--g-theme-color-content-secondary);
+  }
+`;

package/src/components/newsletter/index.js

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

package/src/components/newsletter/newsletter.component.js

@@ -0,0 +1,101 @@
+import { LitElement, html } from "lit";
+import { newsletterStyles } from "./newsletter.styles.js";
+import "../button/button.js";
+
+export class GrantCodesNewsletter extends LitElement {
+	static styles = [newsletterStyles];
+
+	static properties = {
+		/**
+		 * Section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Optional supporting paragraph.
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Form action URL.
+		 * @type {string}
+		 */
+		action: { type: String },
+		/**
+		 * Form submission method.
+		 * @type {'get' | 'post'}
+		 */
+		method: { type: String },
+		/**
+		 * Email input placeholder.
+		 * @type {string}
+		 */
+		placeholder: { type: String },
+		/**
+		 * Submit button label.
+		 * @type {string}
+		 */
+		buttonLabel: { type: String, attribute: "button-label" },
+		/**
+		 * Optional small disclaimer text below the form.
+		 * @type {string}
+		 */
+		disclaimer: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.text = "";
+		this.action = "";
+		this.method = "post";
+		this.placeholder = "Your email address";
+		this.buttonLabel = "Subscribe";
+		this.disclaimer = "";
+	}
+
+	render() {
+		return html`
+			<section class="newsletter">
+				<div class="newsletter__container">
+					<h2 class="newsletter__title">${this.title}</h2>
+					${
+						this.text
+							? html`<p class="newsletter__text">${this.text}</p>`
+							: null
+					}
+					<form
+						class="newsletter__form"
+						action=${this.action}
+						method=${this.method}
+					>
+						<div class="newsletter__field">
+							<label for="newsletter-email" class="newsletter__label"
+								>Email address</label
+							>
+							<div class="newsletter__input-wrap">
+								<input
+									id="newsletter-email"
+									type="email"
+									name="email"
+									class="newsletter__input"
+									placeholder=${this.placeholder}
+									required
+									autocomplete="email"
+								/>
+							<grantcodes-button type="submit">
+								${this.buttonLabel}
+							</grantcodes-button>
+							</div>
+						</div>
+					</form>
+					${
+						this.disclaimer
+							? html`<p class="newsletter__disclaimer">${this.disclaimer}</p>`
+							: null
+					}
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/newsletter/newsletter.js

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

package/src/components/newsletter/newsletter.stories.js

@@ -0,0 +1,59 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./newsletter.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-newsletter");
+
+const meta = {
+	title: "Blocks/Newsletter",
+	component: "grantcodes-newsletter",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+/**
+ * Default newsletter signup with disclaimer.
+ */
+export const Default = {
+	args: {
+		title: "Stay in the loop",
+		text: "Get the latest updates, articles, and resources delivered straight to your inbox.",
+		action: "/subscribe",
+		method: "post",
+		placeholder: "you@example.com",
+		"button-label": "Subscribe",
+		disclaimer: "No spam. Unsubscribe at any time.",
+	},
+};
+
+/**
+ * Minimal newsletter — title and input only.
+ */
+export const Minimal = {
+	args: {
+		title: "Subscribe for updates",
+		action: "/subscribe",
+		"button-label": "Subscribe",
+	},
+};
+
+/**
+ * Newsletter with a custom button label and placeholder.
+ */
+export const CustomLabels = {
+	args: {
+		title: "Join the newsletter",
+		text: "Weekly tips on building great web experiences.",
+		action: "/newsletter",
+		placeholder: "Enter your email",
+		"button-label": "Join now",
+		disclaimer: "We respect your privacy.",
+	},
+};

package/src/components/newsletter/newsletter.styles.js

@@ -0,0 +1,89 @@
+import { css } from "lit";
+
+export const newsletterStyles = css`
+  :host {
+    display: block;
+  }
+
+  .newsletter {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+    background: var(--g-theme-color-background-brand-knockout, #7c3aed);
+    text-align: center;
+  }
+
+  .newsletter__container {
+    max-width: 55ch;
+    margin: 0 auto;
+  }
+
+  .newsletter__title {
+    margin: 0 0 var(--g-theme-spacing-sm);
+    font: var(--g-theme-typography-headline-sm);
+    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+  }
+
+  .newsletter__text {
+    margin: 0 0 var(--g-theme-spacing-xl);
+    font: var(--g-theme-typography-body-lg);
+    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+    opacity: 0.9;
+  }
+
+  .newsletter__form {
+    width: 100%;
+  }
+
+  .newsletter__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .newsletter__field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  .newsletter__input-wrap {
+    display: flex;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  .newsletter__input {
+    flex: 1;
+    min-width: 0;
+    padding-block: var(--g-theme-spacing-sm);
+    padding-inline: var(--g-theme-spacing-md);
+    font-size: var(--g-theme-typography-body-default-font-size);
+    border: 2px solid transparent;
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
+    background: var(--g-theme-color-background-default);
+    color: var(--g-theme-color-content-default);
+    outline: none;
+  }
+
+  .newsletter__input:focus {
+    border-color: var(--g-theme-color-border-default);
+  }
+
+  .newsletter__disclaimer {
+    margin: var(--g-theme-spacing-md) 0 0;
+    font: var(--g-theme-typography-body-sm);
+    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+    opacity: 0.75;
+  }
+
+  @media (max-width: 480px) {
+    .newsletter__input-wrap {
+      flex-direction: column;
+    }
+  }
+`;

package/src/components/notice/index.js

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

package/src/components/notice/notice.js

@@ -4,4 +4,3 @@ export * from "./notice.component.js";
 export default GrantCodesNotice;
 
 customElements.define("grantcodes-notice", GrantCodesNotice);
-

package/src/components/notice/notice.styles.js

@@ -6,9 +6,9 @@ export const noticeStyles = css`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  border-radius: 0.25rem;
+  gap: var(--g-theme-spacing-md);
+  padding: var(--g-theme-spacing-md);
+  border-radius: var(--g-theme-border-radius-sm, 0.25rem);
   view-transition-name: notice;
   transition: opacity 0.5s;
 }
@@ -34,7 +34,7 @@ export const noticeStyles = css`
 }
 
 .notice__title {
-  font-size: 1rem;
+  font-size: var(--g-theme-typography-body-default-font-size);
   margin: 0;
 }
 
@@ -53,8 +53,8 @@ export const noticeStyles = css`
   transition: 0.2s;
   font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
   line-height: 1;
-  padding: 0.5rem;
-  margin: -0.5rem -0.5rem 0 0;
+  padding: var(--g-theme-spacing-sm);
+  margin: calc(-1 * var(--g-theme-spacing-sm)) calc(-1 * var(--g-theme-spacing-sm)) 0 0;
   border: 0;
 
   &:hover,
@@ -69,4 +69,4 @@ export const noticeStyles = css`
   margin: 0;
 }
 
-`;
+`;

package/src/components/notice/notice.test.js

@@ -18,7 +18,11 @@ describe("Notice Component", () => {
 
 	it("should have info variant by default", async () => {
 		element = await fixture("grantcodes-notice");
-		assert.strictEqual(element.variant, "info", "Default variant should be info");
+		assert.strictEqual(
+			element.variant,
+			"info",
+			"Default variant should be info",
+		);
 	});
 
 	it("should render with info variant class", async () => {
@@ -64,7 +68,11 @@ describe("Notice Component", () => {
 
 		const title = element.shadowRoot.querySelector(".notice__title");
 		assert.ok(title, "Title element should exist");
-		assert.strictEqual(title.textContent, "Important Notice", "Title text should match");
+		assert.strictEqual(
+			title.textContent,
+			"Important Notice",
+			"Title text should match",
+		);
 	});
 
 	it("should not display title when not provided", async () => {
@@ -76,7 +84,11 @@ describe("Notice Component", () => {
 
 	it("should not be dismissable by default", async () => {
 		element = await fixture("grantcodes-notice");
-		assert.strictEqual(element.dismissable, false, "Should not be dismissable by default");
+		assert.strictEqual(
+			element.dismissable,
+			false,
+			"Should not be dismissable by default",
+		);
 	});
 
 	it("should render dismiss button when dismissable", async () => {
@@ -142,5 +154,3 @@ describe("Notice Component", () => {
 		await new Promise((resolve) => setTimeout(resolve, 10));
 	});
 });
-
-

package/src/components/pagination/index.js

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

package/src/components/pagination/pagination.stories.js

@@ -1,8 +1,6 @@
 import { html } from "lit/static-html.js";
 import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes } = getStorybookHelpers(
-	"grantcodes-pagination",
-);
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-pagination");
 import "./pagination.js";
 
 const meta = {

package/src/components/pagination/pagination.styles.js

@@ -16,4 +16,4 @@ export const paginationStyles = css`
   margin-inline-end: auto;
 }
 
-`;
+`;

package/src/components/pagination/pagination.test.js

@@ -51,7 +51,11 @@ describe("Pagination Component", () => {
 			href: "/page/{page}",
 		});
 
-		assert.strictEqual(element.href, "/page/{page}", "Href property should be set");
+		assert.strictEqual(
+			element.href,
+			"/page/{page}",
+			"Href property should be set",
+		);
 	});
 
 	it("should indicate current page", async () => {
@@ -91,8 +95,9 @@ describe("Pagination Component", () => {
 
 		// The component should allow navigating to previous and next pages
 		assert.ok(element.page > 1, "Should be able to go to previous page");
-		assert.ok(element.page < element.pages, "Should be able to go to next page");
+		assert.ok(
+			element.page < element.pages,
+			"Should be able to go to next page",
+		);
 	});
 });
-
-

package/src/components/pricing/index.js

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

package/src/components/pricing/pricing.component.js

@@ -0,0 +1,119 @@
+import { LitElement, html } from "lit";
+import { pricingStyles } from "./pricing.styles.js";
+import "../button/button.js";
+
+export class GrantCodesPricing extends LitElement {
+	static styles = [pricingStyles];
+
+	static properties = {
+		/**
+		 * Optional section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Optional supporting text below the heading.
+		 * @type {string}
+		 */
+		subtitle: { type: String },
+		/**
+		 * Pricing tiers as a JSON string array.
+		 * Each tier: `{"name":"...","price":"...","period":"...","description":"...","features":[{"text":"...","included":true}],"cta":{"label":"...","href":"..."},"highlighted":false}`.
+		 * @type {string}
+		 */
+		tiers: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.subtitle = "";
+		this.tiers = "[]";
+	}
+
+	get _tiers() {
+		try {
+			return JSON.parse(this.tiers);
+		} catch {
+			return [];
+		}
+	}
+
+	render() {
+		const tiers = this._tiers;
+		return html`
+			<section class="pricing">
+				<div class="pricing__container">
+					${
+						this.title
+							? html`<h2 class="pricing__title">${this.title}</h2>`
+							: null
+					}
+					${
+						this.subtitle
+							? html`<p class="pricing__subtitle">${this.subtitle}</p>`
+							: null
+					}
+					<ul class="pricing__grid" role="list">
+						${tiers.map(
+							(tier) => html`
+								<li
+									class="pricing__tier${
+										tier.highlighted ? " pricing__tier--highlighted" : ""
+									}"
+								>
+									<div class="pricing__tier-header">
+										<h3 class="pricing__tier-name">${tier.name}</h3>
+										<div class="pricing__price-wrap">
+											<span class="pricing__price">${tier.price}</span>
+											${
+												tier.period
+													? html`<span class="pricing__period"
+														>/${tier.period}</span
+													>`
+													: null
+											}
+										</div>
+										${
+											tier.description
+												? html`<p class="pricing__tier-desc">
+													${tier.description}
+												</p>`
+												: null
+										}
+									</div>
+									<ul class="pricing__features" role="list">
+										${(tier.features ?? []).map(
+											(feature) => html`
+												<li
+													class="pricing__feature${
+														feature.included
+															? ""
+															: " pricing__feature--excluded"
+													}"
+												>
+													<span
+														class="pricing__feature-icon"
+														aria-hidden="true"
+													>
+														${feature.included ? "✓" : "✗"}
+													</span>
+													${feature.text}
+												</li>
+											`,
+										)}
+									</ul>
+									<div class="pricing__cta">
+										<grantcodes-button href=${tier.cta.href}
+											>${tier.cta.label}</grantcodes-button
+										>
+									</div>
+								</li>
+							`,
+						)}
+					</ul>
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/pricing/pricing.js

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