@netlify/spark-ui 1.8.7 → 1.9.0

package/dist/utils/theme.d.ts

@@ -1,3 +1,3 @@
-export type Theme = 'light' | 'dark';
-export declare const ThemeMap: Record<Theme, Theme>;
-export declare const handleThemeChange: (value: Theme) => void;
+import { THEMES } from './types';
+export declare const ThemeMap: Record<THEMES, THEMES>;
+export declare const handleThemeChange: (value: THEMES) => void;

package/dist/utils/types.d.ts

@@ -1,3 +1,4 @@
+export type THEMES = 'light' | 'dark';
 export type BUTTON_VARIANTS = 'primary' | 'secondary' | 'outline' | 'ghost';
 export interface CallToActionProps {
     id?: string;
@@ -5,3 +6,9 @@ export interface CallToActionProps {
     href: string;
     variant?: BUTTON_VARIANTS;
 }
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width: string;
+    height: string;
+}

package/package.json

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

package/packages/components/Card.astro

@@ -16,7 +16,7 @@ interface Props {
 }
 
 const {
-  as = 'div',
+  as: Element = 'div',
   eyebrow,
   paragraph,
   headline,
@@ -25,8 +25,6 @@ const {
   class: className,
   ...rest
 } = Astro.props;
-
-const Element = as;
 ---
 
 <Element class:list={['n-card n-flow', isCardClickable && 'n-card-clickable', className]} {...rest}>
@@ -66,6 +64,14 @@ const Element = as;
     border-radius: var(--radius-m);
   }
 
+  .n-card-eyebrow {
+    --n-flow-space: var(--space-l);
+  }
+
+  .n-card-eyebrow + .n-card-headline {
+    --n-flow-space: var(--space-s);
+  }
+
   .n-card-headline {
     font-size: var(--font-size-display-sm);
     font-family: var(--font-family-display);
@@ -78,10 +84,6 @@ const Element = as;
     line-height: var(--line-height-text);
   }
 
-  .n-card-eyebrow {
-    --n-flow-space: var(--space-l);
-  }
-
   .n-card-paragraph:nth-last-child(2) {
     margin-block-end: auto;
   }

package/packages/components/Eyebrow.astro

@@ -1,7 +1,5 @@
 ---
-const { as = 'div', class: className, ...rest } = Astro.props;
-
-const Element = as;
+const { as: Element = 'div', class: className, ...rest } = Astro.props;
 ---
 
 <Element class:list={['eyebrow', className]} {...rest}>
@@ -12,7 +10,7 @@ const Element = as;
   .eyebrow {
     font-size: var(--font-size-text-sm);
     font-family: var(--font-family-mono);
-    line-height: var(--line-height-none);
+    line-height: var(--line-height-heading);
     color: var(--eyebrow-text-color);
     text-transform: uppercase;
   }

package/packages/components/HeadingBlock.astro

@@ -53,7 +53,7 @@ const customStyles =
   {...rest}
 >
   {eyebrow && <Eyebrow class="n-heading-block-eyebrow">{eyebrow}</Eyebrow>}
-  {heading && <Heading class="n-heading-block-heading h1">{heading}</Heading>}
+  {heading && <Heading class="n-heading-block-heading h1" set:html={heading} />}
   {text && <p class="n-heading-block-text" set:html={text} />}
   {
     ctas && ctas.length > 0 && (
@@ -69,10 +69,6 @@ const customStyles =
 </div>
 
 <style>
-  .n-heading-block {
-    padding-block: var(--space-xl);
-  }
-
   .n-heading-block-center {
     --n-cluster-justify: center;
     text-align: center;
@@ -84,11 +80,14 @@ const customStyles =
   }
 
   .n-heading-block-heading {
+    font-size: var(--n-heading-block-heading-font-size, var(--font-size-display-2xl));
     inline-size: min(100%, var(--n-heading-block-heading-max-width, 50rem));
     text-wrap: balance;
+    color: var(--heading-text-color);
   }
 
   .n-heading-block-text {
+    font-size: var(--n-heading-block-text-font-size, var(--font-size-text-lg));
     inline-size: min(100%, var(--n-heading-block-text-max-width, 35rem));
     text-wrap: pretty;
   }

package/packages/components/PageHero.astro

@@ -0,0 +1,20 @@
+---
+import HeadingBlock from './HeadingBlock.astro';
+import PageSection from './PageSection.astro';
+
+const { class: className, heading, text, ctas, ...rest } = Astro.props;
+---
+
+<PageSection class:list={['n-page-hero', className]} {...rest}>
+  <HeadingBlock heading={heading} headingLevel="1" text={text} alignment="center" ctas={ctas} />
+  <slot />
+</PageSection>
+
+<style>
+  .n-page-hero {
+    --n-page-section-space: var(--space-4xl);
+    --n-page-section-bg-color: linear-gradient(to bottom, var(--color-bg) 50%, var(--teal-800));
+    --n-heading-block-heading-font-size: var(--font-size-display-3xl);
+    --n-heading-block-text-font-size: var(--font-size-text-xl);
+  }
+</style>

package/packages/components/PageSection.astro

@@ -0,0 +1,45 @@
+---
+import { THEMES } from '@utils/types';
+
+interface Props {
+  id?: string;
+  class?: string;
+  spaceTop?: string;
+  spaceBottom?: string;
+  theme?: THEMES;
+}
+
+const { id, class: className, spaceTop, spaceBottom, theme, ...rest } = Astro.props;
+
+const customStyles =
+  spaceTop || spaceBottom
+    ? {
+        ...(spaceTop && { '--n-page-section-space-top': spaceTop }),
+        ...(spaceBottom && { '--n-page-section-space-bottom': spaceBottom }),
+      }
+    : null;
+---
+
+<section
+  id={id}
+  data-theme={theme}
+  class:list={['n-page-section n-breakout', className]}
+  style={customStyles}
+  {...rest}
+>
+  <slot />
+</section>
+
+<style>
+  .n-page-section {
+    --_space: var(--space-3xl);
+    color: var(--n-page-section-text-color, var(--color-text));
+    background: var(--n-page-section-bg-color, var(--color-bg));
+    padding-block-start: var(--n-page-section-space-top, var(--_space));
+    padding-block-end: var(--n-page-section-space-bottom, var(--_space));
+  }
+
+  .n-page-section :global(> * + *) {
+    margin-block-start: var(--n-page-section-item-space, var(--space-2xl));
+  }
+</style>

package/packages/components/Switchback.astro

@@ -12,7 +12,7 @@ interface Props {
   text?: string;
   list?: string[];
   cta?: CallToActionProps;
-  mediaPattern?: 1 | 2;
+  mediaPattern?: number;
 }
 
 const {
@@ -69,7 +69,7 @@ const {
 
 <style>
   .n-switchback {
-    --n-sidebar-size: 25rem;
+    --n-sidebar-size: 28.75rem;
     --n-sidebar-min: 50%;
     --n-sidebar-gap: 0;
     overflow: hidden;

package/packages/components/SwitchbackGroup.astro

@@ -0,0 +1,13 @@
+---
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={['n-switchback-group', className]} {...rest}>
+  <slot />
+</div>
+
+<style>
+  .n-switchback-group :global(> * + *) {
+    margin-block-start: var(--n-switchback-group-space, var(--space-xl));
+  }
+</style>

package/packages/components/TabbedContent.astro

@@ -19,6 +19,7 @@ const { id, class: className, ...rest } = Astro.props;
     --_border-style: solid;
     --_border-color-inactive: var(--color-bg-3);
     --_border-color-active: var(--color-icon);
+    display: block;
   }
 
   .n-tabbed-content :global([role='tablist']) {

package/packages/components/TabbedContentPanel.astro

@@ -0,0 +1,158 @@
+---
+import { CallToActionProps } from '@utils/types';
+import CodeBlock from './CodeBlock.astro';
+import Button from './Button.astro';
+import TabPanel from './TabPanel.astro';
+
+interface CodeBlockProps {
+  heading?: string;
+  icon?: string;
+  code: string;
+  lang: string;
+}
+
+interface Props {
+  id?: string;
+  class?: string;
+  isHidden?: boolean;
+  heading?: string;
+  text?: string;
+  list?: string[];
+  ctas?: CallToActionProps[];
+  codeBlock?: CodeBlockProps;
+}
+
+const {
+  id,
+  class: className,
+  heading,
+  list,
+  text,
+  ctas,
+  codeBlock,
+  isHidden,
+  ...rest
+} = Astro.props;
+---
+
+<TabPanel id={id} class:list={['n-tabbed-content-panel', className]} isHidden={isHidden} {...rest}>
+  <div class:list={['n-tabbed-content-wrapper', codeBlock && 'n-tabbed-content-wrapper-split']}>
+    <div class="n-tabbed-content-body n-flow">
+      {heading && <h3 class="h4">{heading}</h3>}
+      {text && <p set:html={text} />}
+      {
+        list && list.length > 0 && (
+          <ul data-list-variant="checklist">
+            {list.map((item: string) => (
+              <li set:html={item} />
+            ))}
+          </ul>
+        )
+      }
+      {
+        ctas && ctas.length > 0 && (
+          <div class="n-tabbed-content-ctas">
+            {ctas?.map((cta: CallToActionProps) => (
+              <Button id={cta.id} href={cta.href} variant={cta.variant}>
+                {cta.text}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+    {
+      codeBlock && (
+        <div class="n-tabbed-content-code">
+          {codeBlock.heading && (
+            <div class="n-tabbed-content-code-heading">
+              {codeBlock.icon && (
+                <img
+                  class="n-tabbed-content-code-icon"
+                  src={codeBlock.icon}
+                  alt=""
+                  width="16"
+                  height="16"
+                  aria-hidden="true"
+                />
+              )}
+              {codeBlock.heading}
+            </div>
+          )}
+          <CodeBlock
+            class="n-tabbed-content-code-block"
+            code={codeBlock.code}
+            lang={codeBlock.lang}
+            showCopyOnHover
+          />
+        </div>
+      )
+    }
+  </div>
+</TabPanel>
+
+<style>
+  .n-tabbed-content-panel {
+    container-type: inline-size;
+    height: 100%;
+  }
+
+  .n-tabbed-content-wrapper-split {
+    display: grid;
+    gap: var(--_border-size);
+    height: 100%;
+    background-color: var(--color-icon); /** Shows through grid gaps to create inner borders */
+
+    @container (width > 55rem) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .n-tabbed-content-body {
+    padding: var(--space-xl);
+    background-color: var(--card-bg-color);
+  }
+
+  .n-tabbed-content-code {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: var(--_border-size);
+    background-color: var(--tabbed-content-code-bg-color);
+  }
+
+  .n-tabbed-content-code-heading {
+    display: flex;
+    gap: var(--space-xs);
+    align-items: center;
+    padding: var(--space-xs);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-text-md);
+    text-transform: uppercase;
+    background-color: var(--tabbed-content-code-bg-color);
+    border-block-end: var(--_border-size) var(--_border-style) var(--_border-color-active);
+  }
+
+  .n-tabbed-content-code-icon {
+    flex-shrink: 0;
+    width: 1em;
+    height: auto;
+  }
+
+  .n-tabbed-content-code-block {
+    --n-code-block-border: none;
+    --n-code-block-radius: 0;
+    --n-code-bg-color: var(--tabbed-content-code-bg-color);
+    flex-grow: 1;
+  }
+
+  .n-tabbed-content-ctas {
+    display: grid;
+    gap: var(--space-s);
+  }
+
+  @media (min-width: 30rem) {
+    .n-tabbed-content-ctas {
+      justify-items: start;
+    }
+  }
+</style>

package/packages/components/Ticker.astro

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const {
-  as = 'div',
+  as: Element = 'div',
   id,
   class: className,
   gap,
@@ -22,18 +22,19 @@ const {
   ...rest
 } = Astro.props;
 
-const customStyles = {
-  ...(gap && { '--n-ticker-gap': gap }),
-  ...(pauseOnHover && { '--n-ticker-hover-play-state': 'paused' }),
-  ...(speed && { '--n-ticker-duration': speed + 's' }),
-  ...(scrollY && {
-    '--n-ticker-animation': 'scroll-y',
-    '--n-ticker-direction': 'column',
-    '--n-ticker-mask-direction': 'to bottom',
-  }),
-};
-
-const Element = as;
+const customStyles =
+  gap || pauseOnHover || speed || scrollY
+    ? {
+        ...(gap && { '--n-ticker-gap': gap }),
+        ...(pauseOnHover && { '--n-ticker-hover-play-state': 'paused' }),
+        ...(speed && { '--n-ticker-duration': speed + 's' }),
+        ...(scrollY && {
+          '--n-ticker-animation': 'scroll-y',
+          '--n-ticker-direction': 'column',
+          '--n-ticker-mask-direction': 'to bottom',
+        }),
+      }
+    : null;
 ---
 
 <Element

package/packages/components/TrustBarTickerItem.astro

@@ -9,9 +9,7 @@ interface Props {
   class?: string;
 }
 
-const { as = 'div', id, iconSrc, text, class: className, ...rest } = Astro.props;
-
-const Element = as;
+const { as: Element = 'div', id, iconSrc, text, class: className, ...rest } = Astro.props;
 ---
 
 <Element {id} class:list={['n-trust-bar-ticker-item', className]} {...rest}>

package/packages/styles/fonts.css

@@ -173,7 +173,7 @@ ol li::marker {
   }
 
   li + li {
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--space-2xs);
   }
 }
 

package/packages/styles/layout.css

@@ -61,3 +61,28 @@
   flex-grow: 999;
   min-inline-size: var(--n-sidebar-min, 60%);
 }
+
+.n-breakout {
+  --_full: minmax(var(--page-gutter), 1fr);
+  --_content: min(
+    var(--n-breakout-max, var(--page-content-max-width)),
+    100% - var(--page-gutter) * 2
+  );
+  --_popout: minmax(0, 2rem);
+  --_feature: minmax(0, 5rem);
+
+  display: grid;
+  place-content: start;
+  grid-template-columns:
+    [full-start] var(--_full)
+    [feature-start] var(--_feature)
+    [popout-start] var(--_popout)
+    [content-start] var(--_content) [content-end]
+    var(--_popout) [popout-end]
+    var(--_feature) [feature-end]
+    var(--_full) [full-end];
+}
+
+.n-breakout > * {
+  grid-column: var(--n-breakout-area, content);
+}

package/packages/styles/tokens.css

@@ -119,6 +119,8 @@
   --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
   --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
   --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --page-content-max-width: 80rem;
+  --page-gutter: var(--space-l);
   --pink-000: color(srgb 0.9882352941176471 0.9411764705882353 0.984313725490196);
   --pink-100: color(srgb 0.9647058823529412 0.8235294117647058 0.9490196078431372);
   --pink-200: color(srgb 0.9686274509803922 0.7372549019607844 0.9529411764705882);

package/packages/utils/theme.ts

@@ -1,11 +1,11 @@
-export type Theme = 'light' | 'dark';
+import { THEMES } from './types';
 
-export const ThemeMap: Record<Theme, Theme> = {
+export const ThemeMap: Record<THEMES, THEMES> = {
   light: 'dark',
   dark: 'light',
 };
 
-export const handleThemeChange = (value: Theme) => {
+export const handleThemeChange = (value: THEMES) => {
   const themeSelect = document.getElementById('site-theme-select') as HTMLSelectElement;
   if (themeSelect) {
     themeSelect.value = value;

package/packages/utils/types.ts

@@ -1,3 +1,4 @@
+export type THEMES = 'light' | 'dark';
 export type BUTTON_VARIANTS = 'primary' | 'secondary' | 'outline' | 'ghost';
 
 export interface CallToActionProps {
@@ -6,3 +7,10 @@ export interface CallToActionProps {
   href: string;
   variant?: BUTTON_VARIANTS;
 }
+
+export interface ImageProps {
+  src: string;
+  alt: string;
+  width: string;
+  height: string;
+}

package/packages/components/SectionTabbedContent.astro

@@ -1,185 +0,0 @@
----
-import { CallToActionProps } from '@utils/types';
-import TabbedContent from '@netlify/spark-ui/components/TabbedContent.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';
-import TabPanelGroup from '@netlify/spark-ui/components/TabPanelGroup.astro';
-import Button from '@netlify/spark-ui/components/Button.astro';
-import HeadingBlock from '@netlify/spark-ui/components/HeadingBlock.astro';
-import CodeBlock from './CodeBlock.astro';
-
-interface CodeBlockProps {
-  heading?: string;
-  icon?: string;
-  code: string;
-  lang: string;
-}
-
-interface ItemProps {
-  title: string;
-  icon?: string;
-  isSelected?: boolean;
-  heading?: string;
-  text?: string;
-  list?: string[];
-  ctas?: CallToActionProps[];
-  codeBlock?: CodeBlockProps;
-}
-
-interface Props {
-  class?: string;
-  id?: string;
-  eyebrow?: string;
-  heading?: string;
-  items: ItemProps[];
-}
-
-const { id, eyebrow, heading, items, class: className, ...rest } = Astro.props;
----
-
-<section id={id} class:list={['n-section-tabbed-content', className]} {...rest}>
-  <HeadingBlock eyebrow={eyebrow} heading={heading} />
-  <TabbedContent>
-    <TabList>
-      {
-        items.map(({ title, icon, isSelected }: ItemProps) => (
-          <Tab isSelected={isSelected}>
-            <img src={`${icon}`} alt="" width="16" height="16" />
-            {title}
-          </Tab>
-        ))
-      }
-    </TabList>
-    <TabPanelGroup isUniformHeight noPadding>
-      {
-        items.map(({ heading, list, text, ctas, codeBlock, isSelected }: ItemProps) => (
-          <TabPanel class="n-section-tabbed-content-panel" isHidden={!isSelected}>
-            <div
-              class:list={[
-                'n-section-tabbed-content-panel-content',
-                codeBlock && 'n-section-tabbed-content-wrapper-split',
-              ]}
-            >
-              <div class="n-section-tabbed-content-body n-flow">
-                {heading && <h3 class="h4">{heading}</h3>}
-                {text && <p set:html={text} />}
-                {list && list.length > 0 && (
-                  <ul data-list-variant="checklist">
-                    {list.map(item => (
-                      <li set:html={item} />
-                    ))}
-                  </ul>
-                )}
-                {ctas && ctas.length > 0 && (
-                  <div class="n-section-tabbed-content-ctas">
-                    {ctas?.map((cta: CallToActionProps) => (
-                      <Button id={cta.id} href={cta.href} variant={cta.variant}>
-                        {cta.text}
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-              {codeBlock && (
-                <div class="n-section-tabbed-content-code">
-                  {codeBlock.heading && (
-                    <div class="n-section-tabbed-content-code-heading">
-                      {codeBlock.icon && (
-                        <img
-                          class="n-section-tabbed-content-code-icon"
-                          src={codeBlock.icon}
-                          alt=""
-                          width="16"
-                          height="16"
-                          aria-hidden="true"
-                        />
-                      )}
-                      {codeBlock.heading}
-                    </div>
-                  )}
-                  <CodeBlock
-                    class="n-section-tabbed-content-code-block"
-                    code={codeBlock.code}
-                    lang={codeBlock.lang}
-                    showCopyOnHover
-                  />
-                </div>
-              )}
-            </div>
-          </TabPanel>
-        ))
-      }
-    </TabPanelGroup>
-  </TabbedContent>
-</section>
-
-<style>
-  .n-section-tabbed-content-panel {
-    container-type: inline-size;
-  }
-
-  .n-section-tabbed-content-wrapper-split {
-    display: grid;
-    grid-template-rows: auto 1fr;
-    height: 100%;
-  }
-
-  .n-section-tabbed-content-body {
-    padding: var(--space-xl);
-  }
-
-  .n-section-tabbed-content-code {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .n-section-tabbed-content-code-heading {
-    display: flex;
-    gap: var(--space-xs);
-    align-items: center;
-    margin-block-start: calc(var(--_border-size) * -1); /* overlap the parent border */
-    padding: var(--space-xs);
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-text-md);
-    text-transform: uppercase;
-    background-color: var(--tabbed-content-code-bg-color);
-    border-block: var(--_border-size) var(--_border-style) var(--tabbed-content-border-color);
-  }
-
-  .n-section-tabbed-content-code-icon {
-    flex-shrink: 0;
-    width: 1em;
-    height: auto;
-  }
-
-  .n-section-tabbed-content-code-block {
-    --n-code-block-border: none;
-    --n-code-block-radius: 0;
-    --n-code-block-bg-color: var(--tabbed-content-code-bg-color);
-    flex-grow: 1;
-  }
-
-  .n-section-tabbed-content-ctas {
-    display: grid;
-    gap: var(--space-s);
-  }
-
-  @media (min-width: 30rem) {
-    .n-section-tabbed-content-ctas {
-      justify-items: start;
-    }
-  }
-
-  @container (width > 55rem) {
-    .n-section-tabbed-content-wrapper-split {
-      grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr;
-    }
-
-    .n-section-tabbed-content-code {
-      border-inline-start: var(--_border-size) var(--_border-style)
-        var(--tabbed-content-border-color);
-    }
-  }
-</style>