@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/countdown/countdown.stories.js

@@ -1,18 +1,18 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./countdown.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './countdown.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-countdown");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-countdown');
 
 const meta = {
-	title: "Components/Countdown",
-	component: "grantcodes-countdown",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/Countdown',
+  component: 'grantcodes-countdown',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -21,44 +21,44 @@ export default meta;
  * Default countdown to a future date.
  */
 export const Default = {
-	args: {
-		target: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString(),
-		"days-label": "days",
-		"hours-label": "hours",
-		"minutes-label": "minutes",
-	},
+  args: {
+    target: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString(),
+    'days-label': 'days',
+    'hours-label': 'hours',
+    'minutes-label': 'minutes',
+  },
 };
 
 /**
  * Countdown with seconds visible.
  */
 export const WithSeconds = {
-	args: {
-		target: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
-		"show-seconds": true,
-	},
+  args: {
+    target: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
+    'show-seconds': true,
+  },
 };
 
 /**
  * Countdown with custom Spanish labels.
  */
 export const SpanishLabels = {
-	args: {
-		target: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString(),
-		"days-label": "días",
-		"hours-label": "horas",
-		"minutes-label": "minutos",
-		"seconds-label": "segundos",
-		"past-message": "¡El evento ha comenzado!",
-	},
+  args: {
+    target: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString(),
+    'days-label': 'días',
+    'hours-label': 'horas',
+    'minutes-label': 'minutos',
+    'seconds-label': 'segundos',
+    'past-message': '¡El evento ha comenzado!',
+  },
 };
 
 /**
  * Countdown that has already passed — shows the past message.
  */
 export const PastEvent = {
-	args: {
-		target: "2020-01-01T00:00:00Z",
-		"past-message": "This event has already happened!",
-	},
+  args: {
+    target: '2020-01-01T00:00:00Z',
+    'past-message': 'This event has already happened!',
+  },
 };

package/src/components/countdown/index.js

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

package/src/components/cta/cta.component.js

@@ -1,109 +1,105 @@
-import { LitElement, html } from "lit";
-import ctaStyles from "./cta.css" with { type: "css" };
-import "../button/button.js";
-import "../container/container.js";
+import { html, LitElement } from 'lit';
+import ctaStyles from './cta.css' with { type: 'css' };
+import '../button/button.js';
+import '../container/container.js';
 
 export class GrantCodesCta extends LitElement {
-	static styles = [ctaStyles];
+  static styles = [ctaStyles];
 
-	static properties = {
-		/**
-		 * Small label shown above the title.
-		 * @type {string}
-		 */
-		eyebrow: { type: String },
-		/**
-		 * Main heading text.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Supporting paragraph text.
-		 * @type {string}
-		 */
-		text: { type: String },
-		/**
-		 * Primary CTA as a JSON string: `{"label":"...","href":"..."}`.
-		 * @type {string}
-		 */
-		primaryAction: { type: String, attribute: "primary-action" },
-		/**
-		 * Secondary CTA as a JSON string: `{"label":"...","href":"..."}`.
-		 * @type {string}
-		 */
-		secondaryAction: { type: String, attribute: "secondary-action" },
-		/**
-		 * Text alignment of the block.
-		 * @type {'left' | 'center'}
-		 */
-		align: { type: String, reflect: true },
-	};
+  static properties = {
+    /**
+     * Small label shown above the title.
+     * @type {string}
+     */
+    eyebrow: { type: String },
+    /**
+     * Main heading text.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Supporting paragraph text.
+     * @type {string}
+     */
+    text: { type: String },
+    /**
+     * Primary CTA as a JSON string: `{"label":"...","href":"..."}`.
+     * @type {string}
+     */
+    primaryAction: { type: String, attribute: 'primary-action' },
+    /**
+     * Secondary CTA as a JSON string: `{"label":"...","href":"..."}`.
+     * @type {string}
+     */
+    secondaryAction: { type: String, attribute: 'secondary-action' },
+    /**
+     * Text alignment of the block.
+     * @type {'left' | 'center'}
+     */
+    align: { type: String, reflect: true },
+  };
 
-	constructor() {
-		super();
-		this.eyebrow = "";
-		this.title = "";
-		this.text = "";
-		this.primaryAction = "";
-		this.secondaryAction = "";
-		this.align = "center";
-	}
+  constructor() {
+    super();
+    this.eyebrow = '';
+    this.title = '';
+    this.text = '';
+    this.primaryAction = '';
+    this.secondaryAction = '';
+    this.align = 'center';
+  }
 
-	get _primaryAction() {
-		try {
-			return this.primaryAction ? JSON.parse(this.primaryAction) : null;
-		} catch {
-			return null;
-		}
-	}
+  get _primaryAction() {
+    try {
+      return this.primaryAction ? JSON.parse(this.primaryAction) : null;
+    } catch {
+      return null;
+    }
+  }
 
-	get _secondaryAction() {
-		try {
-			return this.secondaryAction ? JSON.parse(this.secondaryAction) : null;
-		} catch {
-			return null;
-		}
-	}
+  get _secondaryAction() {
+    try {
+      return this.secondaryAction ? JSON.parse(this.secondaryAction) : null;
+    } catch {
+      return null;
+    }
+  }
 
-	render() {
-		const primary = this._primaryAction;
-		const secondary = this._secondaryAction;
-		return html`
+  render() {
+    const primary = this._primaryAction;
+    const secondary = this._secondaryAction;
+    return html`
 			<section class="cta">
 				<grantcodes-container align="prose">
-					${
-						this.eyebrow
-							? html`<p class="cta__eyebrow">${this.eyebrow}</p>`
-							: null
-					}
+					${this.eyebrow ? html`<p class="cta__eyebrow">${this.eyebrow}</p>` : null}
 					<h2 class="cta__title">${this.title}</h2>
 					${this.text ? html`<p class="cta__text">${this.text}</p>` : null}
 					${
-						primary || secondary
-							? html`
+            primary || secondary
+              ? html`
 								<div class="cta__actions">
 									${
-										primary
-											? html`<grantcodes-button href=${primary.href}
+                    primary
+                      ? html`<grantcodes-button href=${primary.href}
 												>${primary.label}</grantcodes-button
 											>`
-											: null
-									}
+                      : null
+                  }
 									${
-										secondary
+                    secondary
                       ? html`<grantcodes-button
 											  variant="ghost"
 												href=${secondary.href}
 												>${secondary.label}</grantcodes-button
 											>`
-											: null
-									}
+                      : null
+                  }
 								</div>
 							`
-							: null
-					}
+              : null
+          }
 				</grantcodes-container>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/cta/cta.css

@@ -1,58 +1,58 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .cta {
-	padding-block: var(--g-spacing-3xl);
-	background: var(--g-color-background-subtle);
+  padding-block: var(--g-spacing-3xl);
+  background: var(--g-color-background-subtle);
 }
 
 :host([align="center"]) .cta {
-	text-align: center;
+  text-align: center;
 }
 
 :host([align="center"]) .cta__actions {
-	justify-content: center;
+  justify-content: center;
 }
 
 .cta__eyebrow {
-	margin: 0 0 var(--g-spacing-sm);
-	font: var(--g-typography-body-sm-font);
-	text-transform: uppercase;
-	color: var(--g-color-content-primary);
+  margin: 0 0 var(--g-spacing-sm);
+  font: var(--g-typography-body-sm-font);
+  text-transform: uppercase;
+  color: var(--g-color-content-primary);
 }
 
 .cta__title {
-	margin: 0 0 var(--g-spacing-md);
-	font: var(--g-typography-h2-font);
-	color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-md);
+  font: var(--g-typography-h2-font);
+  color: var(--g-color-content-default);
 }
 
 .cta__text {
-	margin: 0 0 var(--g-spacing-xl);
-	font: var(--g-typography-body-lg);
-	color: var(--g-color-content-subtle);
+  margin: 0 0 var(--g-spacing-xl);
+  font: var(--g-typography-body-lg);
+  color: var(--g-color-content-subtle);
 }
 
 .cta__actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--g-spacing-md);
-	align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-md);
+  align-items: center;
 }
 
 .cta__secondary-link {
-	font-size: var(--g-typography-body-default-font-size);
-	font-weight: var(--g-typography-body-font-weight);
-	color: var(--g-color-content-default);
+  font-size: var(--g-typography-body-default-font-size);
+  font-weight: var(--g-typography-body-font-weight);
+  color: var(--g-color-content-default);
 }
 
 .cta__secondary-link:hover {
-	color: var(--g-color-content-primary);
+  color: var(--g-color-content-primary);
 }

package/src/components/cta/cta.js

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

package/src/components/cta/cta.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesCta } from "./cta.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesCta } from './cta.js';
 
 export const Cta = createComponent({
-	tagName: "grantcodes-cta",
-	elementClass: GrantCodesCta,
-	react: React,
+  tagName: 'grantcodes-cta',
+  elementClass: GrantCodesCta,
+  react: React,
 });

package/src/components/cta/cta.stories.js

@@ -1,19 +1,19 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./cta.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './cta.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-cta");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-cta');
 
 const meta = {
-	title: "Blocks/CTA",
-	component: "grantcodes-cta",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/CTA',
+  component: 'grantcodes-cta',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -22,35 +22,35 @@ export default meta;
  * Default centered CTA with primary and secondary actions.
  */
 export const Default = {
-	args: {
-		eyebrow: "Get started today",
-		title: "Build something remarkable",
-		text: "A personal web component library with a custom design system, ready for your next project.",
-		"primary-action": JSON.stringify({ label: "Get started", href: "/docs" }),
-		"secondary-action": JSON.stringify({ label: "Learn more", href: "/about" }),
-		align: "center",
-	},
+  args: {
+    eyebrow: 'Get started today',
+    title: 'Build something remarkable',
+    text: 'A personal web component library with a custom design system, ready for your next project.',
+    'primary-action': JSON.stringify({ label: 'Get started', href: '/docs' }),
+    'secondary-action': JSON.stringify({ label: 'Learn more', href: '/about' }),
+    align: 'center',
+  },
 };
 
 /**
  * Left-aligned CTA, no secondary action.
  */
 export const LeftAligned = {
-	args: {
-		title: "Ready to ship?",
-		text: "Deploy your components today with zero configuration.",
-		"primary-action": JSON.stringify({ label: "Deploy now", href: "/deploy" }),
-		align: "left",
-	},
+  args: {
+    title: 'Ready to ship?',
+    text: 'Deploy your components today with zero configuration.',
+    'primary-action': JSON.stringify({ label: 'Deploy now', href: '/deploy' }),
+    align: 'left',
+  },
 };
 
 /**
  * Minimal CTA — title only with a single action.
  */
 export const Minimal = {
-	args: {
-		title: "Join the community",
-		"primary-action": JSON.stringify({ label: "Sign up", href: "/signup" }),
-		align: "center",
-	},
+  args: {
+    title: 'Join the community',
+    'primary-action': JSON.stringify({ label: 'Sign up', href: '/signup' }),
+    align: 'center',
+  },
 };

package/src/components/cta/index.js

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