@grantcodes/ui 2.0.2 → 2.1.0

package/src/components/stats/stats.styles.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+
+export const statsStyles = css`
+  :host {
+    display: block;
+  }
+
+  .stats {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+    background: var(--g-theme-color-background-subtle);
+  }
+
+  .stats__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .stats__title {
+    margin: 0 0 var(--g-theme-spacing-xl);
+    font-size: var(--g-theme-typography-headline-sm-font-size);
+    font-weight: var(--g-theme-typography-headline-sm-font-weight);
+    text-align: center;
+    color: var(--g-theme-color-content-default);
+  }
+
+  .stats__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--columns, 4), 1fr);
+    gap: var(--g-theme-spacing-xl);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+  }
+
+  @media (max-width: 640px) {
+    .stats__grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .stats__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-xs);
+  }
+
+  .stats__value {
+    font: var(--g-theme-typography-display-default);
+    white-space: nowrap;
+    line-height: 1;
+    color: var(--g-theme-color-content-brand, #7c3aed);
+  }
+
+  .stats__label {
+    font-size: var(--g-theme-typography-label-default-font-size);
+    font-weight: var(--g-theme-typography-label-default-font-weight);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .stats__context {
+    font-size: var(--g-theme-typography-body-sm-font-size);
+    color: var(--g-theme-color-content-secondary);
+  }
+`;

package/src/components/tabs/index.js

@@ -1,2 +1,2 @@
-export * from "./tabs";
-export * from "./tab";
+export * from "./tabs.js";
+export * from "./tab.js";

package/src/components/tabs/internal/tabs-button.component.js

@@ -30,7 +30,7 @@ export class GrantCodesTabsButton extends GrantCodesTabsItem {
 				aria-selected=${this.active}
 				aria-controls="${this.panelId}"
 				tabindex=${ifDefined(this.active ? undefined : "-1")} 
-				class="tabs__tab ${this.active ? "is-active" : ""}"
+				class="tabs__tab focus-ring ${this.active ? "is-active" : ""}"
 			>
 				<span>${this.label}</span>
 			</button>

package/src/components/tabs/internal/tabs-button.js

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

package/src/components/tabs/tab.js

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

package/src/components/tabs/tabs.js

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

package/src/components/tabs/tabs.styles.js

@@ -1,88 +1,98 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const tabsStyles = css`
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
+  ${focusRingStyles}
 
-.tabs {
-	--border-width: 3px;
-	display: block;
-}
+  *,
+	*::before,
+	*::after {
+    box-sizing: border-box;
+  }
 
-.tabs__tablist {
-	overflow: auto;
-	contain: none;
-}
+  .tabs {
+    --border-width: 3px;
+    display: block;
+  }
 
-.tabs__tablist__inner {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	width: fit-content;
-	min-width: 100%;
-	background-image: linear-gradient(
-		var(--g-theme-color-border-default, var(--g-color-brand-purple-100)),
-		var(--g-theme-color-border-default, var(--g-color-brand-purple-100))
-	);
-	background-size: auto var(--border-width);
-	background-position: bottom;
-	background-repeat: repeat-x;
-}
+  .tabs__tablist {
+    overflow: auto;
+    contain: none;
+  }
 
-.tabs__tab {
-	padding: 0.6em 1.2em;
-	line-height: 1;
-	font-size: 1rem;
-	border: none;
-	border-block-start: var(--border-width) solid transparent;
-	border-block-end: var(--border-width) solid var(--g-theme-color-border-default, var(--g-color-brand-purple-100));
-	background-color: transparent;
-	color: var(--g-theme-color-content-default);
-	opacity: 0.7;
-	white-space: nowrap;
-	cursor: pointer;
-	transition: opacity 0.2s, border-color 0.2s, background-color 0.2s;
-	--component-focus-ring-offset: calc(var(--component-focus-ring-width) * -1);
-}
+  .tabs__tablist__inner {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: fit-content;
+    min-width: 100%;
+    background-image: linear-gradient(
+      var(--g-theme-color-border-default, var(--g-color-brand-purple-100)),
+      var(--g-theme-color-border-default, var(--g-color-brand-purple-100))
+    );
+    background-size: auto var(--border-width);
+    background-position: bottom;
+    background-repeat: repeat-x;
+  }
 
-@media (min-width: 40em) {
-	.tabs__tab {
-		padding-inline: 1rem;
-	}
-}
+  .tabs__tab {
+    padding: 0.6em 1.2em;
+    line-height: 1;
+    font-size: var(--g-theme-typography-body-default-font-size);
+    border: none;
+    border-block-start: var(--border-width) solid transparent;
+    border-block-end: var(--border-width) solid
+      var(--g-theme-color-border-default, var(--g-color-brand-purple-100));
+    background-color: transparent;
+    color: var(--g-theme-color-content-default);
+    opacity: 0.7;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      opacity 0.2s,
+      border-color 0.2s,
+      background-color 0.2s;
+  }
 
-.tabs__tab:hover,
-.tabs__tab:focus-visible {
-	opacity: 1;
-	border-block-end-color: var(--g-theme-color-border-default, var(--g-color-brand-purple-200));
-}
+  @media (min-width: 40em) {
+    .tabs__tab {
+      padding-inline: var(--g-theme-spacing-md);
+    }
+  }
 
-.tabs__tab.is-active {
-	border-block-end-color: var(--g-theme-color-border-brand, var(--g-color-brand-purple-500));
-	background-color: var(--g-theme-color-background-subtle);
-	color: var(--g-theme-color-content-default);
-	z-index: 1;
-	position: relative;
-	opacity: 1;
-}
+  .tabs__tab:hover,
+  .tabs__tab:focus-visible {
+    opacity: 1;
+    border-block-end-color: var(
+      --g-theme-color-border-default,
+      var(--g-color-brand-purple-200)
+    );
+  }
 
-.tabs__tab:focus-visible {
-	outline: 2px solid var(--component-focus-ring-color, rgba(106, 91, 197, 0.4));
-	outline-offset: 2px;
-}
+  .tabs__tab.is-active {
+    border-block-end-color: var(
+      --g-theme-color-border-brand,
+      var(--g-color-brand-purple-500)
+    );
+    background-color: var(--g-theme-color-background-subtle);
+    color: var(--g-theme-color-content-default);
+    z-index: 1;
+    position: relative;
+    opacity: 1;
+  }
 
-.tabs__panel {
-	margin-block-start: 1rem;
-	outline-color: var(--g-theme-color-border-brand, var(--g-color-brand-purple-500));
-	outline-offset: 1rem;
-	display: none;
-}
+  .tabs__panel {
+    margin-block-start: var(--g-theme-spacing-md);
+    outline-color: var(
+      --g-theme-color-border-brand,
+      var(--g-color-brand-purple-500)
+    );
+    outline-offset: 1rem;
+    display: none;
+  }
 
-.tabs__panel.is-active {
-	display: block;
-}
+  .tabs__panel.is-active {
+    display: block;
+  }
 `;

package/src/components/testimonials/index.js

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

package/src/components/testimonials/testimonials.component.js

@@ -0,0 +1,97 @@
+import { LitElement, html } from "lit";
+import { testimonialsStyles } from "./testimonials.styles.js";
+import "../card/card.js";
+import "../avatar/avatar.js";
+
+export class GrantCodesTestimonials extends LitElement {
+	static styles = [testimonialsStyles];
+
+	static properties = {
+		/**
+		 * Optional section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Testimonial items as a JSON string array: `[{"quote":"...","name":"...","role":"...","company":"...","avatar":"..."}]`.
+		 * @type {string}
+		 */
+		items: { type: String },
+		/**
+		 * Display layout of the testimonials.
+		 * @type {'cards' | 'list'}
+		 */
+		layout: { type: String, reflect: true },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.items = "[]";
+		this.layout = "cards";
+	}
+
+	get _items() {
+		try {
+			return JSON.parse(this.items);
+		} catch {
+			return [];
+		}
+	}
+
+	render() {
+		const items = this._items;
+		return html`
+			<section class="testimonials">
+				<div class="testimonials__container">
+					${
+						this.title
+							? html`<h2 class="testimonials__title">${this.title}</h2>`
+							: null
+					}
+					<ul
+						class="testimonials__grid testimonials__grid--${this.layout}"
+						role="list"
+					>
+						${items.map(
+							(item) => html`
+								<li class="testimonials__item">
+									<grantcodes-card>
+										<blockquote class="testimonials__quote" slot="header">
+											<p class="testimonials__text">
+												&ldquo;${item.quote}&rdquo;
+											</p>
+										</blockquote>
+										<footer class="testimonials__attribution" slot="footer">
+											${
+												item.avatar
+													? html`<grantcodes-avatar
+														src=${item.avatar}
+														name=${item.name}
+														size="small"
+													></grantcodes-avatar>`
+													: null
+											}
+											<div class="testimonials__meta">
+												<cite class="testimonials__name">${item.name}</cite>
+												${
+													item.role || item.company
+														? html`<span class="testimonials__role">
+															${[item.role, item.company]
+																.filter(Boolean)
+																.join(", ")}
+														</span>`
+														: null
+												}
+											</div>
+										</footer>
+									</grantcodes-card>
+								</li>
+							`,
+						)}
+					</ul>
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/testimonials/testimonials.js

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

package/src/components/testimonials/testimonials.stories.js

@@ -0,0 +1,78 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./testimonials.js";
+
+const { events, args, argTypes } = getStorybookHelpers(
+	"grantcodes-testimonials",
+);
+
+const meta = {
+	title: "Blocks/Testimonials",
+	component: "grantcodes-testimonials",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const sampleItems = JSON.stringify([
+	{
+		quote:
+			"This component library saved us weeks of design work. The theming system is incredibly flexible.",
+		name: "Sarah Chen",
+		role: "Lead Engineer",
+		company: "Acme Corp",
+		avatar: "https://i.pravatar.cc/64?img=1",
+	},
+	{
+		quote: "Accessibility out of the box. Our audits pass first time now.",
+		name: "Marcus Webb",
+		role: "Frontend Developer",
+		company: "Globex",
+		avatar: "https://i.pravatar.cc/64?img=2",
+	},
+	{
+		quote: "The design tokens make it trivial to match our brand guidelines.",
+		name: "Priya Sharma",
+		role: "Design Systems Lead",
+		company: "Initech",
+		avatar: "https://i.pravatar.cc/64?img=3",
+	},
+]);
+
+/**
+ * Default card layout testimonials.
+ */
+export const Cards = {
+	args: {
+		title: "What people are saying",
+		items: sampleItems,
+		layout: "cards",
+	},
+};
+
+/**
+ * List layout — stacked testimonials with more visual prominence.
+ */
+export const List = {
+	args: {
+		title: "Customer stories",
+		items: sampleItems,
+		layout: "list",
+	},
+};
+
+/**
+ * Testimonials without a section heading.
+ */
+export const NoHeading = {
+	args: {
+		items: sampleItems,
+		layout: "cards",
+	},
+};

package/src/components/testimonials/testimonials.styles.js

@@ -0,0 +1,82 @@
+import { css } from "lit";
+
+export const testimonialsStyles = css`
+  :host {
+    display: block;
+  }
+
+  .testimonials {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  .testimonials__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .testimonials__title {
+    margin: 0 0 var(--g-theme-spacing-2xl);
+    font-size: var(--g-theme-typography-headline-sm-font-size);
+    font-weight: var(--g-theme-typography-headline-sm-font-weight);
+    text-align: center;
+    color: var(--g-theme-color-content-default);
+  }
+
+  .testimonials__grid--cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--g-theme-spacing-lg);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .testimonials__grid--list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-xl);
+    max-width: 65ch;
+    margin: 0 auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  .testimonials__quote {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-lg);
+    height: 100%;
+  }
+
+  .testimonials__text {
+    margin: 0;
+    font: var(--g-theme-typography-body-default);
+    color: var(--g-theme-color-content-default);
+    flex: 1;
+  }
+
+  .testimonials__attribution {
+    display: flex;
+    align-items: center;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  .testimonials__meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-xs);
+  }
+
+  .testimonials__name {
+    font: var(--g-theme-typography-label-default);
+    font-style: normal;
+    color: var(--g-theme-color-content-default);
+  }
+
+  .testimonials__role {
+    font-size: var(--g-theme-typography-body-sm-font-size);
+    color: var(--g-theme-color-content-secondary);
+  }
+`;

package/src/components/toast/index.js

@@ -1,3 +1 @@
 export * from "./toast.js";
-
-

package/src/components/toast/toast.component.js

@@ -117,7 +117,7 @@ export class GrantCodesToast extends LitElement {
 		return html`
 			<button
 				type="button"
-				class="toast__close"
+				class="toast__close focus-ring"
 				@click=${this._handleDismiss}
 				aria-label="Dismiss notification"
 			>
@@ -183,5 +183,3 @@ export class GrantCodesToastContainer extends LitElement {
 		`;
 	}
 }
-
-

package/src/components/toast/toast.js

@@ -1,9 +1,14 @@
-import { GrantCodesToast, GrantCodesToastContainer } from "./toast.component.js";
+import {
+	GrantCodesToast,
+	GrantCodesToastContainer,
+} from "./toast.component.js";
 
 export * from "./toast.component.js";
 export default GrantCodesToast;
 
-customElements.define("grantcodes-toast", GrantCodesToast);
-customElements.define("grantcodes-toast-container", GrantCodesToastContainer);
-
-
+if (!customElements.get("grantcodes-toast")) {
+	customElements.define("grantcodes-toast", GrantCodesToast);
+}
+if (!customElements.get("grantcodes-toast-container")) {
+	customElements.define("grantcodes-toast-container", GrantCodesToastContainer);
+}

package/src/components/toast/toast.stories.js

@@ -141,9 +141,13 @@ export const Interactive = {
 		<div>
 			<button
 				@click=${() => {
-					const container = document.querySelector("grantcodes-toast-container");
+					const container = document.querySelector(
+						"grantcodes-toast-container",
+					);
 					if (!container) {
-						const newContainer = document.createElement("grantcodes-toast-container");
+						const newContainer = document.createElement(
+							"grantcodes-toast-container",
+						);
 						newContainer.position = "top-right";
 						document.body.appendChild(newContainer);
 					}
@@ -156,7 +160,9 @@ export const Interactive = {
 
 					const finalContainer =
 						document.querySelector("grantcodes-toast-container") ||
-						document.body.appendChild(document.createElement("grantcodes-toast-container"));
+						document.body.appendChild(
+							document.createElement("grantcodes-toast-container"),
+						);
 					finalContainer.appendChild(toast);
 				}}
 			>
@@ -165,5 +171,3 @@ export const Interactive = {
 		</div>
 	`,
 };
-
-