@grantcodes/ui 2.15.6 → 2.16.0

package/src/pages/agency.stories.js

@@ -1,19 +1,19 @@
-import { html } from "lit";
-import "../components/app-bar/app-bar.js";
-import "../components/app-bar/nav-link.js"
-import "../components/button/button.js";
-import "../components/hero/hero.js";
-import "../components/media-text/media-text.js";
-import "../components/feature-list/feature-list.js";
-import "../components/cta/cta.js";
-import "../components/testimonials/testimonials.js";
-import "../components/footer/footer.js";
+import { html } from 'lit';
+import '../components/app-bar/app-bar.js';
+import '../components/app-bar/nav-link.js';
+import '../components/button/button.js';
+import '../components/hero/hero.js';
+import '../components/media-text/media-text.js';
+import '../components/feature-list/feature-list.js';
+import '../components/cta/cta.js';
+import '../components/testimonials/testimonials.js';
+import '../components/footer/footer.js';
 
 const meta = {
-	title: "Pages/Agency",
-	parameters: {
-		layout: "fullscreen",
-	},
+  title: 'Pages/Agency',
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -49,7 +49,7 @@ const footerContent = html`
  * the studio's offering, with a CTA section and testimonials from clients.
  */
 export const Default = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-app-bar>
 			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit;">
 				Studio North
@@ -76,78 +76,78 @@ export const Default = {
 			title="What we do"
 			columns="3"
 			items=${JSON.stringify([
-				{
-					title: "Product design",
-					description:
-						"UX research, interaction design, and visual design from concept to delivery.",
-					icon: "pen-tool",
-				},
-				{
-					title: "Web development",
-					description:
-						"Fast, accessible front-ends built with modern tooling and a focus on longevity.",
-					icon: "code",
-				},
-				{
-					title: "Brand identity",
-					description:
-						"Naming, logo, and visual language for startups that want to stand out from day one.",
-					icon: "layers",
-				},
-			])}
+        {
+          title: 'Product design',
+          description:
+            'UX research, interaction design, and visual design from concept to delivery.',
+          icon: 'pen-tool',
+        },
+        {
+          title: 'Web development',
+          description:
+            'Fast, accessible front-ends built with modern tooling and a focus on longevity.',
+          icon: 'code',
+        },
+        {
+          title: 'Brand identity',
+          description:
+            'Naming, logo, and visual language for startups that want to stand out from day one.',
+          icon: 'layers',
+        },
+      ])}
 		></grantcodes-feature-list>
 
 		<grantcodes-media-text
 			title="We start by understanding the problem, not the brief"
 			text="Before we open Figma, we spend time with your users, your data, and your team. Good design solves real problems — that only happens when we deeply understand the context. Our discovery phase isn't a box-ticking exercise; it's where the real work starts."
-			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Discovery+Workshop", alt: "A team working through a discovery workshop on a whiteboard", kind: "image" })}
-			cta=${JSON.stringify({ label: "Our process", href: "/process" })}
+			media=${JSON.stringify({ src: 'https://placehold.co/640x480?text=Discovery+Workshop', alt: 'A team working through a discovery workshop on a whiteboard', kind: 'image' })}
+			cta=${JSON.stringify({ label: 'Our process', href: '/process' })}
 		></grantcodes-media-text>
 
 		<grantcodes-media-text
 			title="Design and engineering working side by side"
 			text="We don't throw designs over a wall. Our designers and engineers work in the same room (or the same Slack channel) from day one. That means fewer surprises, faster iteration, and a product that actually looks like the designs."
-			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Design+%26+Eng", alt: "Designers and engineers collaborating on a project", kind: "image" })}
-			cta=${JSON.stringify({ label: "How we work", href: "/about" })}
+			media=${JSON.stringify({ src: 'https://placehold.co/640x480?text=Design+%26+Eng', alt: 'Designers and engineers collaborating on a project', kind: 'image' })}
+			cta=${JSON.stringify({ label: 'How we work', href: '/about' })}
 			reverse
 		></grantcodes-media-text>
 
 		<grantcodes-media-text
 			title="We ship, then we stick around"
 			text="Launch is not the finish line. We offer ongoing retainers for teams who want a trusted design and engineering partner after go-live — whether that's iterating on feedback, scaling the product, or training your internal team."
-			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Ongoing+Support", alt: "A chart showing continuous product iteration over time", kind: "image" })}
-			cta=${JSON.stringify({ label: "Engagement options", href: "/services" })}
+			media=${JSON.stringify({ src: 'https://placehold.co/640x480?text=Ongoing+Support', alt: 'A chart showing continuous product iteration over time', kind: 'image' })}
+			cta=${JSON.stringify({ label: 'Engagement options', href: '/services' })}
 		></grantcodes-media-text>
 
 		<grantcodes-testimonials
 			title="From our clients"
 			layout="list"
 			items=${JSON.stringify([
-				{
-					quote:
-						"Studio North turned a very messy brief into a product that exceeded what we imagined. They pushed back in the right places and delivered something genuinely special.",
-					name: "Leo Hartmann",
-					role: "Founder",
-					company: "Archvault",
-					avatar: "https://i.pravatar.cc/80?img=53",
-				},
-				{
-					quote:
-						"Their process is tight. We always knew what was happening, what was coming next, and why. That clarity is rare in agency relationships.",
-					name: "Chloe Bergstrom",
-					role: "VP Product",
-					company: "Meridian Health",
-					avatar: "https://i.pravatar.cc/80?img=25",
-				},
-			])}
+        {
+          quote:
+            'Studio North turned a very messy brief into a product that exceeded what we imagined. They pushed back in the right places and delivered something genuinely special.',
+          name: 'Leo Hartmann',
+          role: 'Founder',
+          company: 'Archvault',
+          avatar: 'https://i.pravatar.cc/80?img=53',
+        },
+        {
+          quote:
+            'Their process is tight. We always knew what was happening, what was coming next, and why. That clarity is rare in agency relationships.',
+          name: 'Chloe Bergstrom',
+          role: 'VP Product',
+          company: 'Meridian Health',
+          avatar: 'https://i.pravatar.cc/80?img=25',
+        },
+      ])}
 		></grantcodes-testimonials>
 
 		<grantcodes-cta
 			eyebrow="Let's talk"
 			title="Have a project in mind?"
 			text="We take on a small number of projects each quarter so we can give each one the attention it deserves. If you're building something meaningful, we'd love to hear about it."
-			primary-action=${JSON.stringify({ label: "Start a conversation", href: "/contact" })}
-			secondary-action=${JSON.stringify({ label: "See case studies", href: "/work" })}
+			primary-action=${JSON.stringify({ label: 'Start a conversation', href: '/contact' })}
+			secondary-action=${JSON.stringify({ label: 'See case studies', href: '/work' })}
 			align="center"
 		></grantcodes-cta>
 

package/src/pages/blog-post.stories.js

@@ -1,55 +1,55 @@
-import { html } from "lit";
-import "../components/app-bar/app-bar.js";
-import "../components/app-bar/nav-link.js";
-import "../components/button/button.js";
-import "../components/breadcrumb/breadcrumb.js";
-import "../components/container/container.js";
-import "../components/badge/badge.js";
-import "../components/person/person.js";
-import "../components/card/card.js";
-import "../components/cta/cta.js";
-import "../components/footer/footer.js";
+import { html } from 'lit';
+import '../components/app-bar/app-bar.js';
+import '../components/app-bar/nav-link.js';
+import '../components/button/button.js';
+import '../components/breadcrumb/breadcrumb.js';
+import '../components/container/container.js';
+import '../components/badge/badge.js';
+import '../components/person/person.js';
+import '../components/card/card.js';
+import '../components/cta/cta.js';
+import '../components/footer/footer.js';
 
 const meta = {
-	title: "Pages/Blog Post",
-	parameters: {
-		layout: "fullscreen",
-	},
+  title: 'Pages/Blog Post',
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
 
 const relatedPosts = [
-	{
-		category: "Engineering",
-		title: "How we cut our build times by 60% with better caching",
-		excerpt:
-			"A deep dive into the caching strategies we adopted across our CI pipeline and how they compound over time.",
-		author: { name: "Priya Nair", avatar: "https://i.pravatar.cc/80?img=32" },
-		date: "Feb 28, 2025",
-		href: "/blog/build-cache",
-	},
-	{
-		category: "Design",
-		title: "Writing design tokens that scale across themes",
-		excerpt:
-			"Tokens are only as good as the naming conventions behind them. Here's what we learned from three rewrites.",
-		author: { name: "Leo Hartmann", avatar: "https://i.pravatar.cc/80?img=53" },
-		date: "Feb 14, 2025",
-		href: "/blog/design-tokens",
-	},
-	{
-		category: "Culture",
-		title: "Small teams ship better software — here's why",
-		excerpt:
-			"Coordination cost grows faster than headcount. We explore the research and what it means for how we hire.",
-		author: {
-			name: "Chloe Bergstrom",
-			avatar: "https://i.pravatar.cc/80?img=25",
-		},
-		date: "Jan 30, 2025",
-		href: "/blog/small-teams",
-	},
+  {
+    category: 'Engineering',
+    title: 'How we cut our build times by 60% with better caching',
+    excerpt:
+      'A deep dive into the caching strategies we adopted across our CI pipeline and how they compound over time.',
+    author: { name: 'Priya Nair', avatar: 'https://i.pravatar.cc/80?img=32' },
+    date: 'Feb 28, 2025',
+    href: '/blog/build-cache',
+  },
+  {
+    category: 'Design',
+    title: 'Writing design tokens that scale across themes',
+    excerpt:
+      "Tokens are only as good as the naming conventions behind them. Here's what we learned from three rewrites.",
+    author: { name: 'Leo Hartmann', avatar: 'https://i.pravatar.cc/80?img=53' },
+    date: 'Feb 14, 2025',
+    href: '/blog/design-tokens',
+  },
+  {
+    category: 'Culture',
+    title: "Small teams ship better software — here's why",
+    excerpt:
+      'Coordination cost grows faster than headcount. We explore the research and what it means for how we hire.',
+    author: {
+      name: 'Chloe Bergstrom',
+      avatar: 'https://i.pravatar.cc/80?img=25',
+    },
+    date: 'Jan 30, 2025',
+    href: '/blog/small-teams',
+  },
 ];
 
 const footerContent = html`
@@ -84,7 +84,7 @@ const footerContent = html`
  * cards for related posts at the bottom.
  */
 export const Default = {
-	render: () => html`
+  render: () => html`
     <grantcodes-app-bar sticky>
       <a
         slot="logo"
@@ -264,7 +264,7 @@ export const Default = {
         <h2>More from the blog</h2>
         <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-spacing-lg);">
           ${relatedPosts.map(
-						(post) => html`
+            (post) => html`
               <grantcodes-card>
                 <div
                   slot="header"
@@ -301,7 +301,7 @@ export const Default = {
                 </div>
               </grantcodes-card>
             `,
-					)}
+          )}
         </div>
       </grantcodes-container>
     </div>