@netlify/spark-ui 1.9.0 → 1.10.0

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,6 +1,6 @@
 import { u as t } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as s, K as i } from "../../../chunks/ChatInterface.BD7rlv4H.js";
+import { C as s, K as i } from "../../../chunks/ChatInterface.EQAPs01R.js";
 import { A as c } from "../../../chunks/analytics.Ch1vuuOl.js";
 import '../../../assets/AskNetlify.css';function k(o) {
   const e = a(new c());

package/dist/components/preact/AskNetlify/components/ChatInterface.js

@@ -1,6 +1,6 @@
 import "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as f } from "../../../../chunks/ChatInterface.BD7rlv4H.js";
+import { C as f } from "../../../../chunks/ChatInterface.EQAPs01R.js";
 import "./QuestionList/questions.js";
 import "./QuestionList/QuestionList.js";
 import "./BackButton.js";

package/dist/utils/fetch-svg.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Fetches an SVG from a remote URL and strips any `fill` attributes
+ * to allow styling the SVG via CSS (e.g., using `currentColor` or masks).
+ *
+ * If the fetch fails or the response is not OK, logs the error and returns an empty string.
+ *
+ * @param {string} url - The URL of the SVG to fetch.
+ * @returns {Promise<string>} The cleaned SVG markup with `fill` attributes removed,
+ *                            or an empty string if the fetch fails.
+ */
+export declare function fetchSvg(url: string): Promise<string>;

package/dist/utils/kebab.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a given string to kebab-case.
+ *
+ * - Converts camelCase to kebab-case.
+ * - Replaces spaces and underscores with dashes.
+ * - Removes all non-alphanumeric characters except dashes.
+ * - Converts the entire string to lowercase.
+ *
+ * @param {string} str - The input string to convert.
+ * @returns {string} The kebab-cased version of the input string.
+ *
+ * @example
+ * kebabCase('HelloWorld')         // 'hello-world'
+ * kebabCase('some_text Here')     // 'some-text-here'
+ * kebabCase('already-kebab-case') // 'already-kebab-case'
+ */
+export declare const kebabCase: (str: string) => string;

package/dist/utils/types.d.ts

@@ -12,3 +12,16 @@ export interface ImageProps {
     width: string;
     height: string;
 }
+export interface Testimonial {
+    quote?: string;
+    author?: string;
+    title?: string;
+    company?: string;
+    logoSrc?: string;
+    avatarSrc?: string;
+    cta?: {
+        id?: string;
+        url?: string;
+        label?: string;
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/Blockquote.astro

@@ -3,10 +3,20 @@ interface Props {
   quote?: string;
   author?: string;
   title?: string;
-  variant?: 'default' | 'simple';
+  avatarSrc?: string;
+  class?: string;
+  variant?: 'default' | 'simple' | 'testimonial';
 }
 
-const { quote, variant = 'default', author, title, class: className, ...rest } = Astro.props;
+const {
+  quote,
+  variant = 'default',
+  author,
+  title,
+  avatarSrc,
+  class: className,
+  ...rest
+} = Astro.props as Props;
 
 /**
  * If quote is added via <slot />, trim surrounding whitespace so that quotation marks properly wrap inline with the text string.
@@ -25,8 +35,11 @@ if (Astro.slots.has('default')) {
   {
     author || title ? (
       <figcaption>
-        {author && <span>{author}</span>}
-        {title && <span>{title}</span>}
+        {avatarSrc && <img src={avatarSrc} alt={`Avatar of ${author}`} />}
+        <div class="n-blockquote-author-info">
+          {author && <span class="n-blockquote-author">{author}</span>}
+          {title && <span class="n-blockquote-title">{title}</span>}
+        </div>
       </figcaption>
     ) : null
   }
@@ -60,13 +73,15 @@ if (Astro.slots.has('default')) {
 
   blockquote::before {
     content: open-quote;
+    color: var(--blockquote-accent-color);
   }
 
   blockquote::after {
     content: close-quote;
+    color: var(--blockquote-accent-color);
   }
 
-  figcaption {
+  .n-blockquote-author-info {
     display: flex;
     gap: 0.2em;
     font-size: var(--font-size-text-xs);
@@ -75,29 +90,67 @@ if (Astro.slots.has('default')) {
 
   /* Variants */
   [data-blockquote-variant='default'] {
-    figcaption {
+    .n-blockquote-author-info {
       flex-direction: column;
       font-weight: var(--font-weight-regular);
     }
 
-    figcaption > * {
+    .n-blockquote-author-info > * {
       display: block;
       font-family: var(--font-family-mono);
       text-transform: uppercase;
     }
 
-    figcaption > *:last-child:not(:only-child) {
+    .n-blockquote-author-info > *:last-child:not(:only-child) {
       color: var(--color-text-weak);
     }
   }
 
   [data-blockquote-variant='simple'] {
-    figcaption > * {
+    .n-blockquote-author-info > * {
       font-size: var(--font-size-text-sm);
     }
 
-    figcaption > *:not(:last-child)::after {
+    .n-blockquote-author-info > *:not(:last-child)::after {
       content: ',';
     }
   }
+
+  [data-blockquote-variant='testimonial'] {
+    border-inline-start: none;
+
+    font-size: var(--font-size-display-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-heading);
+
+    .n-blockquote-author-info {
+      flex-direction: column;
+      font-weight: var(--font-weight-regular);
+      font-family: var(--font-family-mono);
+    }
+
+    figcaption {
+      display: flex;
+      align-items: center;
+      gap: var(--_gap);
+    }
+
+    figcaption img {
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+      width: 3.125rem;
+      height: auto;
+      clip-path: circle();
+    }
+
+    .n-blockquote-author-info {
+      font-size: var(--font-size-text-sm);
+      font-weight: var(--font-weight-regular);
+      text-transform: uppercase;
+    }
+
+    .n-blockquote-title {
+      color: var(--color-text-weak);
+    }
+  }
 </style>

package/packages/components/TabbedContent.astro

@@ -20,6 +20,7 @@ const { id, class: className, ...rest } = Astro.props;
     --_border-color-inactive: var(--color-bg-3);
     --_border-color-active: var(--color-icon);
     display: block;
+    isolation: isolate;
   }
 
   .n-tabbed-content :global([role='tablist']) {
@@ -48,6 +49,7 @@ const { id, class: className, ...rest } = Astro.props;
     color: var(--body-text-color);
     background: var(--tabbed-content-bg-color);
     border: var(--_border-size) var(--_border-style) var(--_border-color-inactive);
+    border-radius: 0;
     border-block-end: unset;
 
     > :is(svg, img) {
@@ -56,10 +58,6 @@ const { id, class: className, ...rest } = Astro.props;
       height: auto;
     }
 
-    + [role='tab'] {
-      margin-inline-start: -1px;
-    }
-
     &[aria-selected='true'] {
       --_radius: var(--radius-s);
       color: var(--tabbed-content-tab-text-color-active);
@@ -70,4 +68,8 @@ const { id, class: className, ...rest } = Astro.props;
       z-index: 1;
     }
   }
+
+  .n-tabbed-content :global([role='tab'] + [role='tab']) {
+    margin-inline-start: -1px;
+  }
 </style>

package/packages/components/TestimonialSlider.astro

@@ -0,0 +1,110 @@
+---
+import { fetchSvg } from '../utils/fetch-svg.ts';
+import { kebabCase } from '../utils/kebab';
+import Blockquote from './Blockquote.astro';
+import Button from './Button.astro';
+import { Testimonial } from '../utils/types';
+
+import Tabs from '@netlify/spark-ui/components/Tabs.astro';
+import Tab from '@netlify/spark-ui/components/Tab.astro';
+import TabList from '@netlify/spark-ui/components/TabList.astro';
+import TabPanel from '@netlify/spark-ui/components/TabPanel.astro';
+
+interface Props {
+  items?: Testimonial[];
+}
+
+const { items } = Astro.props as Props;
+---
+
+<Tabs class="n-testimonial-slider">
+  <TabList class="n-testimonial-logos n-cluster">
+    {
+      items?.map(({ company, logoSrc }, index) => (
+        <Tab
+          class="n-logo-btn"
+          data-id={company && kebabCase(company)}
+          isSelected={index === 0}
+          aria-label={`Show testimonial from ${company}`}
+        >
+          {logoSrc && <slot set:html={fetchSvg(logoSrc)} />}
+        </Tab>
+      ))
+    }
+  </TabList>
+  {
+    items?.map((testimonial, index) => (
+      <TabPanel>
+        <div class="n-testimonial-quote-body n-flow">
+          <Blockquote
+            variant="testimonial"
+            aria-hidden={index !== 0}
+            class={`n-testimonial-quote n-fadeInUp ${index === 0 ? 'is-active' : ''}`}
+            quote={testimonial.quote}
+            author={testimonial.author}
+            title={testimonial.title}
+            avatarSrc={testimonial.avatarSrc}
+          />
+          {testimonial.cta && (
+            <Button
+              id={`cta-${testimonial.cta.id}`}
+              href={testimonial.cta.url}
+              class="n-testimonial-cta n-fadeIn"
+            >
+              {testimonial.cta.label}
+            </Button>
+          )}
+        </div>
+      </TabPanel>
+    ))
+  }
+</Tabs>
+
+<style>
+  @import url('../styles/animations.css');
+
+  .n-testimonial-slider {
+    --_spacing: var(--space-xl);
+  }
+
+  .n-testimonial-quote-body {
+    --n-flow-space: var(--_spacing);
+  }
+
+  .n-testimonial-logos {
+    --n-cluster-column-gap: var(--space-l);
+  }
+
+  [role='tablist'] {
+    margin-block-end: var(--_spacing);
+  }
+
+  .n-testimonial-cta {
+    width: fit-content;
+    animation-delay: 200ms;
+  }
+
+  .n-logo-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    place-items: center;
+    outline-offset: 0.5rem;
+  }
+
+  .n-logo-btn :global(svg) {
+    width: 6.25rem;
+    height: auto;
+    fill: var(--testimonial-logo-inactive-color);
+    transition: fill 300ms ease-out;
+  }
+
+  .n-logo-btn:hover :global(svg) {
+    fill: var(--testimonial-logo-hover-color);
+  }
+
+  .n-logo-btn[aria-selected='true'] :global(svg) {
+    fill: var(--blockquote-accent-color);
+  }
+</style>

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -1,3 +1,5 @@
+@import url('../../../styles/animations.css');
+
 /* ----------------------------- */
 /* Layout Containers             */
 /* ----------------------------- */
@@ -242,21 +244,6 @@
 /* ----------------------------- */
 /* Animations and Keyframes     */
 /* ----------------------------- */
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
 @keyframes askEyeBlink {
   0%,

package/packages/styles/animations.css

@@ -0,0 +1,26 @@
+.n-fadeIn {
+  opacity: 0;
+  animation: fadeIn var(--animation-duration, 300ms) ease-out forwards;
+}
+
+.n-fadeInUp {
+  opacity: 0;
+  transform: translateY(var(--animation-transformY, 5px));
+  animation: fadeInUp var(--animation-duration, 300ms) ease-out forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/packages/styles/tokens.css

@@ -7,6 +7,7 @@
   --badge-bg-color: var(--neutral-100);
   --badge-border-color: var(--neutral-300);
   --badge-text-color: var(--neutral-500);
+  --blockquote-accent-color: var(--blue-700);
   --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
   --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
   --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -196,6 +197,8 @@
   --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
   --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
   --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --testimonial-logo-hover-color: var(--neutral-500);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 
@@ -205,6 +208,7 @@
     --badge-bg-color: var(--neutral-700);
     --badge-border-color: var(--neutral-600);
     --badge-text-color: var(--neutral-100);
+    --blockquote-accent-color: var(--teal-200);
     --button-outline-bg-color: color(srgb 0 0 0 / 0);
     --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
     --button-outline-stroke-color: var(--teal-200);
@@ -277,6 +281,8 @@
     --tabbed-content-border-color: var(--color-icon);
     --tabbed-content-code-bg-color: var(--neutral-900);
     --tabbed-content-tab-text-color-active: var(--color-icon);
+    --testimonial-logo-hover-color: var(--neutral-300);
+    --testimonial-logo-inactive-color: var(--neutral-400);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
 }
@@ -286,6 +292,7 @@
   --badge-bg-color: var(--neutral-700);
   --badge-border-color: var(--neutral-600);
   --badge-text-color: var(--neutral-100);
+  --blockquote-accent-color: var(--teal-200);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
   --button-outline-stroke-color: var(--teal-200);
@@ -358,6 +365,8 @@
   --tabbed-content-border-color: var(--color-icon);
   --tabbed-content-code-bg-color: var(--neutral-900);
   --tabbed-content-tab-text-color-active: var(--color-icon);
+  --testimonial-logo-hover-color: var(--neutral-300);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }
 
@@ -366,6 +375,7 @@
   --badge-bg-color: var(--neutral-100);
   --badge-border-color: var(--neutral-300);
   --badge-text-color: var(--neutral-500);
+  --blockquote-accent-color: var(--blue-700);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
   --button-outline-stroke-color: var(--neutral-800);
@@ -437,6 +447,8 @@
   --tabbed-content-border-color: var(--color-icon);
   --tabbed-content-code-bg-color: var(--neutral-900);
   --tabbed-content-tab-text-color-active: var(--color-icon);
+  --testimonial-logo-hover-color: var(--neutral-500);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 

package/packages/utils/fetch-svg.ts

@@ -0,0 +1,28 @@
+/**
+ * Fetches an SVG from a remote URL and strips any `fill` attributes
+ * to allow styling the SVG via CSS (e.g., using `currentColor` or masks).
+ *
+ * If the fetch fails or the response is not OK, logs the error and returns an empty string.
+ *
+ * @param {string} url - The URL of the SVG to fetch.
+ * @returns {Promise<string>} The cleaned SVG markup with `fill` attributes removed,
+ *                            or an empty string if the fetch fails.
+ */
+export async function fetchSvg(url: string): Promise<string> {
+  function stripFillAttributes(svg: string): string {
+    return svg.replace(/fill\s*=\s*["'][^"']*["']/gi, '');
+  }
+
+  try {
+    const res = await fetch(url);
+    if (!res.ok) {
+      console.error(`[fetchSvg] Failed to fetch: ${url}`);
+      return '';
+    }
+    const raw = await res.text();
+    return stripFillAttributes(raw);
+  } catch (err) {
+    console.error(`[fetchSvg] Error fetching ${url}:`, err);
+    return '';
+  }
+}

package/packages/utils/kebab.ts

@@ -0,0 +1,22 @@
+/**
+ * Converts a given string to kebab-case.
+ *
+ * - Converts camelCase to kebab-case.
+ * - Replaces spaces and underscores with dashes.
+ * - Removes all non-alphanumeric characters except dashes.
+ * - Converts the entire string to lowercase.
+ *
+ * @param {string} str - The input string to convert.
+ * @returns {string} The kebab-cased version of the input string.
+ *
+ * @example
+ * kebabCase('HelloWorld')         // 'hello-world'
+ * kebabCase('some_text Here')     // 'some-text-here'
+ * kebabCase('already-kebab-case') // 'already-kebab-case'
+ */
+export const kebabCase = (str: string) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // camelCase → kebab-case
+    .replace(/[\s_]+/g, '-') // spaces & underscores → dashes
+    .replace(/[^a-zA-Z0-9-]/g, '') // remove non-alphanumeric except dash
+    .toLowerCase();

package/packages/utils/types.ts

@@ -14,3 +14,17 @@ export interface ImageProps {
   width: string;
   height: string;
 }
+
+export interface Testimonial {
+  quote?: string;
+  author?: string;
+  title?: string;
+  company?: string;
+  logoSrc?: string;
+  avatarSrc?: string;
+  cta?: {
+    id?: string;
+    url?: string;
+    label?: string;
+  };
+}