@grantcodes/ui 2.0.2 → 2.1.1

package/src/components/pricing/pricing.stories.js

@@ -0,0 +1,123 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./pricing.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-pricing");
+
+const meta = {
+	title: "Blocks/Pricing",
+	component: "grantcodes-pricing",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const tiers = JSON.stringify([
+	{
+		name: "Starter",
+		price: "$0",
+		period: "month",
+		description: "Perfect for side projects and open source.",
+		features: [
+			{ text: "5 projects", included: true },
+			{ text: "Community support", included: true },
+			{ text: "Basic analytics", included: true },
+			{ text: "Custom domain", included: false },
+			{ text: "Priority support", included: false },
+		],
+		cta: { label: "Get started free", href: "/signup" },
+		highlighted: false,
+	},
+	{
+		name: "Pro",
+		price: "$19",
+		period: "month",
+		description: "Everything you need for a growing team.",
+		features: [
+			{ text: "Unlimited projects", included: true },
+			{ text: "Priority support", included: true },
+			{ text: "Advanced analytics", included: true },
+			{ text: "Custom domain", included: true },
+			{ text: "SLA guarantee", included: false },
+		],
+		cta: { label: "Start free trial", href: "/signup?plan=pro" },
+		highlighted: true,
+	},
+	{
+		name: "Enterprise",
+		price: "$99",
+		period: "month",
+		description: "Dedicated support and compliance features.",
+		features: [
+			{ text: "Unlimited projects", included: true },
+			{ text: "Dedicated support", included: true },
+			{ text: "Advanced analytics", included: true },
+			{ text: "Custom domain", included: true },
+			{ text: "SLA guarantee", included: true },
+		],
+		cta: { label: "Contact sales", href: "/contact" },
+		highlighted: false,
+	},
+]);
+
+/**
+ * Three-tier pricing with one highlighted plan.
+ */
+export const Default = {
+	args: {
+		title: "Simple, transparent pricing",
+		subtitle: "No hidden fees. Cancel any time.",
+		tiers,
+	},
+};
+
+/**
+ * Pricing without the section heading.
+ */
+export const NoHeading = {
+	args: {
+		tiers,
+	},
+};
+
+/**
+ * Two-tier pricing — free vs paid.
+ */
+export const TwoTiers = {
+	args: {
+		title: "Choose a plan",
+		tiers: JSON.stringify([
+			{
+				name: "Free",
+				price: "$0",
+				description: "Get started at no cost.",
+				features: [
+					{ text: "3 projects", included: true },
+					{ text: "Community support", included: true },
+					{ text: "Custom domain", included: false },
+				],
+				cta: { label: "Sign up free", href: "/signup" },
+				highlighted: false,
+			},
+			{
+				name: "Paid",
+				price: "$9",
+				period: "month",
+				description: "Unlock the full platform.",
+				features: [
+					{ text: "Unlimited projects", included: true },
+					{ text: "Email support", included: true },
+					{ text: "Custom domain", included: true },
+				],
+				cta: { label: "Upgrade", href: "/upgrade" },
+				highlighted: true,
+			},
+		]),
+	},
+};

package/src/components/pricing/pricing.styles.js

@@ -0,0 +1,135 @@
+import { css } from "lit";
+
+export const pricingStyles = css`
+  :host {
+    display: block;
+  }
+
+  .pricing {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  .pricing__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .pricing__title {
+    margin: 0 0 var(--g-theme-spacing-sm);
+    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);
+  }
+
+  .pricing__subtitle {
+    margin: 0 auto var(--g-theme-spacing-2xl);
+    font-size: var(--g-theme-typography-body-lg-font-size);
+    text-align: center;
+    color: var(--g-theme-color-content-secondary);
+    max-width: 55ch;
+  }
+
+  .pricing__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: var(--g-theme-spacing-lg);
+    align-items: start;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .pricing__tier {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-lg);
+    padding: var(--g-theme-spacing-xl);
+    border: 1px solid var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
+    background: var(--g-theme-color-background-default);
+  }
+
+  .pricing__tier--highlighted {
+    border-color: var(--g-theme-color-border-brand, #7c3aed);
+    background: var(--g-theme-color-background-subtle);
+    box-shadow: var(--g-theme-shadow-lg);
+  }
+
+  .pricing__tier-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  .pricing__tier-name {
+    margin: 0;
+    font-size: var(--g-theme-typography-body-lg-font-size);
+    font-weight: var(--g-theme-typography-label-lg-font-weight);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .pricing__price-wrap {
+    display: flex;
+    align-items: baseline;
+    gap: var(--g-theme-spacing-xs);
+  }
+
+  .pricing__price {
+    font: var(--g-theme-typography-headline-lg);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .pricing__period {
+    font-size: var(--g-theme-typography-body-default-font-size);
+    color: var(--g-theme-color-content-secondary);
+  }
+
+  .pricing__tier-desc {
+    margin: 0;
+    font: var(--g-theme-typography-body-sm);
+    color: var(--g-theme-color-content-secondary);
+  }
+
+  .pricing__features {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex: 1;
+  }
+
+  .pricing__feature {
+    display: flex;
+    align-items: center;
+    gap: var(--g-theme-spacing-sm);
+    font-size: var(--g-theme-typography-body-default-font-size);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .pricing__feature--excluded {
+    color: var(--g-theme-color-content-secondary);
+    text-decoration: line-through;
+  }
+
+  .pricing__feature-icon {
+    font: var(--g-theme-typography-body-sm);
+    color: var(--g-theme-color-content-brand, #7c3aed);
+    flex-shrink: 0;
+  }
+
+  .pricing__feature--excluded .pricing__feature-icon {
+    color: var(--g-theme-color-content-secondary);
+  }
+
+  .pricing__cta {
+    margin-top: auto;
+  }
+
+  .pricing__cta grantcodes-button {
+    width: 100%;
+  }
+`;

package/src/components/sidebar/index.js

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

package/src/components/sidebar/sidebar.component.js

@@ -114,7 +114,7 @@ export class GrantCodesSidebar extends LitElement {
 			<!-- Mobile Toggle Button -->
 			<button
 				type="button"
-				class="sidebar__mobile-toggle"
+				class="sidebar__mobile-toggle focus-ring"
 				@click=${this._toggleDrawer}
 				aria-label="${this._drawerOpen ? "Close sidebar" : "Open sidebar"}"
 			>
@@ -122,8 +122,9 @@ export class GrantCodesSidebar extends LitElement {
 			</button>
 
 			<!-- Overlay for mobile -->
-			${this._drawerOpen
-				? html`
+			${
+				this._drawerOpen
+					? html`
 					<div
 						class="sidebar__overlay"
 						@click=${() => {
@@ -131,7 +132,8 @@ export class GrantCodesSidebar extends LitElement {
 						}}
 					></div>
 				`
-				: ""}
+					: ""
+			}
 
 			<!-- Sidebar -->
 			<aside
@@ -139,11 +141,12 @@ export class GrantCodesSidebar extends LitElement {
 				style="--sidebar-width: ${this.width}"
 			>
 				<!-- Collapse Toggle (Desktop) -->
-				${this.collapsible
-					? html`
+				${
+					this.collapsible
+						? html`
 						<button
 							type="button"
-							class="sidebar__toggle"
+							class="sidebar__toggle focus-ring"
 							@click=${this._toggleCollapsed}
 							aria-label="${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}"
 							aria-expanded="${!this.collapsed}"
@@ -151,7 +154,8 @@ export class GrantCodesSidebar extends LitElement {
 							${this.position === "left" ? (this.collapsed ? "→" : "←") : this.collapsed ? "←" : "→"}
 						</button>
 					`
-					: ""}
+						: ""
+				}
 
 				<!-- Content -->
 				<div class="sidebar__content">
@@ -161,5 +165,3 @@ export class GrantCodesSidebar extends LitElement {
 		`;
 	}
 }
-
-

package/src/components/sidebar/sidebar.js

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

package/src/components/sidebar/sidebar.stories.js

@@ -151,5 +151,3 @@ export const MobileResponsive = {
 		</div>
 	`,
 };
-
-