@netlify/spark-ui 1.6.0 → 1.8.1

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -15,20 +15,23 @@ import {
   useSearchLogger,
 } from '../../hooks';
 
+import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
+
 import './SearchModal.css';
 
 interface Props {
   children: ComponentChildren;
   className?: string;
-  debug?: boolean
+  debug?: boolean;
 }
 
-function SearchModal(props: Props = {className: '', children: null, debug: false }) {
+function SearchModal(props: Props = { className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
+  const [modalState, setModalState] = useState({ current: 'search' });
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {
-    let intervalId:number;
+    let intervalId: number;
 
     const checkForPagefind = () => {
       if (window.pagefind) {
@@ -45,19 +48,18 @@ function SearchModal(props: Props = {className: '', children: null, debug: false
     return () => clearInterval(intervalId);
   }, []);
 
-
   const { children, className, debug, ...rest } = props;
   const { state, actions } = useSearch();
-  const [searchOpen, setSearchOpen] = useState(false);
 
+  const [searchOpen, setSearchOpen] = useState(false);
   const openSearch = () => setSearchOpen(true);
   const closeSearch = () => setSearchOpen(false);
 
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchLogger(state, debug)
-  useSearchToggles(isPagefindLoaded,  openSearch);
+  useSearchLogger(state, debug);
+  useSearchToggles(isPagefindLoaded, openSearch, setModalState);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
@@ -67,31 +69,58 @@ function SearchModal(props: Props = {className: '', children: null, debug: false
     searchOpen ? modalRef.current.showModal() : modalRef.current.close();
   }, [searchOpen]);
 
+  useEffect(() => {
+    const input = modalRef.current?.querySelector('input');
+
+    if (input) input.focus();
+
+    if (modalState.current === 'ask') {
+      setTimeout(() => {
+        modalRef.current.classList.add('n-search-modal-ask');
+      }, 150);
+    } else if (modalState.current === 'search') {
+      setTimeout(() => {
+        modalRef.current.classList.remove('n-search-modal-ask');
+      }, 150);
+    }
+  }, [modalState.current]);
+
   return (
-    <Modal ref={modalRef} className={`n-search-modal ${className ? className : ''}`} {...rest}>
+    <Modal
+      ref={modalRef}
+      className={`n-search-modal ${className ? className : ''}`}
+      data-state={modalState.current}
+      {...rest}
+    >
       <div ref={containerRef} className="n-search-container">
-          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-
-        <SearchWindow
-          searchLoading={state.isLoading}
-          searchTerm={state.searchTerm}
-          results={state.results}
-        >
-          {children}
-        </SearchWindow>
-
-        <div className="n-search-footer">
-          <p className="n-search-footer-tip">
-            <KeyboardKey keyNames={['Esc']} />
-            to close
-          </p>
-          <p className="n-search-footer-tip">
-            <KeyboardKey keyNames={['Tab']} />
-            <span>or</span>
-            <KeyboardKey keyNames={['↑', '↓']} />
-            to navigate
-          </p>
-        </div>
+        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
+        {modalState.current === 'search' && (
+          <>
+            <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+
+            <SearchWindow
+              setModalState={setModalState}
+              searchLoading={state.isLoading}
+              searchTerm={state.searchTerm}
+              results={state.results}
+            >
+              {children}
+            </SearchWindow>
+
+            <div className="n-search-footer">
+              <p className="n-search-footer-tip">
+                <KeyboardKey keyNames={['Esc']} />
+                to close
+              </p>
+              <p className="n-search-footer-tip">
+                <KeyboardKey keyNames={['Tab']} />
+                <span>or</span>
+                <KeyboardKey keyNames={['↑', '↓']} />
+                to navigate
+              </p>
+            </div>
+          </>
+        )}
       </div>
     </Modal>
   );

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -1,9 +1,11 @@
 import type { FunctionComponent } from 'preact';
-import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import type { SearchResultsProps, SearchWindowProps } from '../types/search.types';
 import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
+import { handleThemeChange, ThemeMap, Theme } from '../../../../utils/theme';
+
 /* --- Search Results Window (for active searches) --- */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchLoading,
@@ -20,9 +22,9 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
   if (!results || results.length === 0) {
     return (
-        <SearchHeading>
-          0 results for <span className="n-search-term">{searchTerm}</span>
-        </SearchHeading>
+      <SearchHeading>
+        0 results for <span className="n-search-term">{searchTerm}</span>
+      </SearchHeading>
     );
   }
 
@@ -43,29 +45,43 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
 /* --- Main Search Results Component --- */
 export default function SearchWindow({
+  setModalState,
   searchLoading,
   searchTerm,
   results,
   children: DefaultWindow,
 }: SearchWindowProps) {
-  const askNetlify: SearchLinkProps = {
-    icon: 'sparkles',
-    label: 'Ask Netlify AI',
-    url: 'https://docs.netlify.com/ask-netlify/',
-  };
-
   return (
     <div className="n-search-window">
-      <div className="search-links">
-        <SearchLink {...askNetlify} />
+      <div className="n-search-links">
         {searchTerm && searchTerm.length > 1 ? (
-          <SearchResults
-            searchLoading={searchLoading}
-            searchTerm={searchTerm}
-            results={results}
-          />
+          <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
         ) : DefaultWindow ? (
-          DefaultWindow
+          <>
+            <SearchLink
+              as="button"
+              icon="askNetlify"
+              label="Ask Netlify AI"
+              onClick={() => {
+                setModalState({ current: 'ask' });
+              }}
+            />
+
+            {DefaultWindow}
+
+            <SearchHeading>Actions</SearchHeading>
+            <SearchLink
+              as="button"
+              icon="lightbulb"
+              label="Toggle theme"
+              onClick={() => {
+                const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const theme = isDarkTheme ? 'dark' : currentTheme ? currentTheme : 'light';
+                theme && handleThemeChange(ThemeMap[theme as Theme]);
+              }}
+            />
+          </>
         ) : null}
       </div>
     </div>

package/packages/components/preact/SearchModal/hooks/useKeyboardNav.ts

@@ -21,7 +21,7 @@ export function useKeyboardNav(
   onClose: () => void
 ) {
   useEffect(() => {
-    if (!isPagefindLoaded) return 
+    if (!isPagefindLoaded) return;
     const handleKeydown = (e: KeyboardEvent) => {
       if (!isOpen) return;
 
@@ -35,7 +35,7 @@ export function useKeyboardNav(
         const container = containerRef.current;
         if (!container) return;
 
-        const links = Array.from(container.querySelectorAll('a'));
+        const links = Array.from(container.querySelectorAll('.n-search-link'));
         const currentIndex = links.findIndex(link => link === document.activeElement);
         const nextIndex =
           e.key === 'ArrowDown'

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -12,16 +12,24 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
+export function useSearchToggles(
+  isPagefindLoaded: boolean,
+  onOpen: () => void,
+  setState: (state: { current: string }) => void
+) {
   useEffect(() => {
-    if (!isPagefindLoaded) return
+    if (!isPagefindLoaded) return;
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
 
     toggles.forEach(t => {
+      const current = t.dataset.ntlSearchToggle ? t.dataset.ntlSearchToggle : 'search';
       t.removeAttribute('disabled');
-      t.addEventListener('click', onOpen);
+      t.addEventListener('click', () => {
+        onOpen();
+        setState({ current });
+      });
     });
 
     return () => {

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -2,14 +2,17 @@ import type { ComponentChildren } from 'preact';
 import type { IconName } from '../../Icon';
 
 export interface SearchLinkProps {
+  as?: any;
   icon: IconName;
   label: string;
   resource?: 'blog' | 'changelog' | 'docs' | 'guide';
-  url: string;
+  url?: string;
   excerpt?: string;
+  onClick?: () => void;
 }
 
 export interface SearchWindowProps {
+  setModalState: (e: { current: string }) => void;
   searchLoading: boolean;
   searchTerm?: string;
   results?: SearchLinkProps[];
@@ -33,4 +36,4 @@ export interface SearchGTMObjectProps {
   resultUrl?: string;
   query?: string;
   debug_mode?: boolean;
-}
+}

package/packages/components/preact/SpriteIcon/index.tsx

@@ -0,0 +1,13 @@
+interface IconProps {
+  name: string; // ID of the symbol in the sprite
+  size?: number;
+  className?: string;
+}
+
+export function SpriteIcon({ name, size = 24, className = '' }: IconProps) {
+  return (
+    <svg className={`icon-${name} ${className ? className : ''}`} aria-hidden="true">
+      <use href={`/icons.svg#icon-${name}`} />
+    </svg>
+  );
+}

package/packages/components/preact/index.ts

@@ -4,6 +4,7 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
+export { default as AskNetlify } from "./AskNetlify/AskNetlify"
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/packages/styles/tokens.css

@@ -3,6 +3,10 @@
  * ------------------------------------------- */
 
 :root {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+  --badge-bg-color: var(--neutral-100);
+  --badge-border-color: var(--neutral-300);
+  --badge-text-color: var(--neutral-500);
   --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);
@@ -152,8 +156,15 @@
   --red-700: color(srgb 0.6862745098039216 0.1450980392156863 0.21176470588235294);
   --red-800: color(srgb 0.5019607843137255 0.0392156862745098 0.12549019607843137);
   --red-900: color(srgb 0.23921568627450981 0.10980392156862745 0.10588235294117647);
+  --search-answer-message-color: var(--neutral-200);
+  --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
+  --search-icon-color: var(--neutral-400);
+  --search-input-bg-color: var(--neutral-100);
+  --search-loading-color: var(--teal-700);
+  --search-submit-btn-bg-color: var(--teal-200);
+  --search-user-message-color: var(--teal-000);
   --shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
   --shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
   --shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
@@ -168,11 +179,13 @@
   --space-s: 1rem;
   --space-xl: 3rem;
   --space-xs: 0.75rem;
-  --tabbed-content-bg-color: var(--neutral-000);
-  --tabbed-content-bg-color-active: var(--neutral-000);
-  --tabbed-content-border-color: var(--color-icon);
-  --tabbed-content-code-bg-color: var(--neutral-900);
-  --tabbed-content-tab-text-color-active: var(--color-icon);
+  --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
+  --switcher-tab-bg-color-tabbed-content-bg-color: var(--neutral-000);
+  --switcher-tab-bg-color-tabbed-content-bg-color-active: var(--neutral-000);
+  --switcher-tab-bg-color-tabbed-content-border-color: var(--color-icon);
+  --switcher-tab-bg-color-tabbed-content-code-bg-color: var(--neutral-900);
+  --switcher-tab-bg-color-tabbed-content-tab-text-color-active: var(--color-icon);
+  --switcher-tab-bg-color-title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
   --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
   --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
   --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
@@ -183,11 +196,14 @@
   --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);
-  --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+    --badge-bg-color: var(--neutral-700);
+    --badge-border-color: var(--neutral-600);
+    --badge-text-color: var(--neutral-100);
     --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);
@@ -234,6 +250,7 @@
     --color-warning-border: var(--gold-400);
     --color-warning-text: var(--gold-900);
     --eyebrow-text-color: var(--teal-200);
+    --filter-invert: invert(1);
     --heading-text-color: var(--neutral-100);
     --neutral-000: color(srgb 0 0 0);
     --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
@@ -245,18 +262,29 @@
     --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
     --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
     --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+    --search-answer-message-color: var(--neutral-600);
+    --search-back-btn-bg-color: var(--neutral-500);
     --search-bg-color: var(--neutral-700);
     --search-highlight-color: var(--teal-800);
-    --tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
-    --tabbed-content-bg-color-active: var(--teal-900);
-    --tabbed-content-border-color: var(--color-icon);
-    --tabbed-content-code-bg-color: var(--neutral-900);
-    --tabbed-content-tab-text-color-active: var(--color-icon);
-    --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
+    --search-icon-color: var(--neutral-300);
+    --search-input-bg-color: var(--neutral-600);
+    --search-loading-color: var(--teal-200);
+    --search-submit-btn-bg-color: var(--teal-200);
+    --search-user-message-color: var(--teal-800);
+    --switcher-tab-bg-color-tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+    --switcher-tab-bg-color-tabbed-content-bg-color-active: var(--teal-900);
+    --switcher-tab-bg-color-tabbed-content-border-color: var(--color-icon);
+    --switcher-tab-bg-color-tabbed-content-code-bg-color: var(--neutral-900);
+    --switcher-tab-bg-color-tabbed-content-tab-text-color-active: var(--color-icon);
+    --switcher-tab-bg-color-title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
 }
 
 [data-theme="dark"] {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --badge-bg-color: var(--neutral-700);
+  --badge-border-color: var(--neutral-600);
+  --badge-text-color: var(--neutral-100);
   --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);
@@ -303,6 +331,7 @@
   --color-warning-border: var(--gold-400);
   --color-warning-text: var(--gold-900);
   --eyebrow-text-color: var(--teal-200);
+  --filter-invert: invert(1);
   --heading-text-color: var(--neutral-100);
   --neutral-000: color(srgb 0 0 0);
   --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
@@ -314,17 +343,28 @@
   --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
   --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
   --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --search-answer-message-color: var(--neutral-600);
+  --search-back-btn-bg-color: var(--neutral-500);
   --search-bg-color: var(--neutral-700);
   --search-highlight-color: var(--teal-800);
-  --tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
-  --tabbed-content-bg-color-active: var(--teal-900);
-  --tabbed-content-border-color: var(--color-icon);
-  --tabbed-content-code-bg-color: var(--neutral-900);
-  --tabbed-content-tab-text-color-active: var(--color-icon);
-  --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
+  --search-icon-color: var(--neutral-300);
+  --search-input-bg-color: var(--neutral-600);
+  --search-loading-color: var(--teal-200);
+  --search-submit-btn-bg-color: var(--teal-200);
+  --search-user-message-color: var(--teal-800);
+  --switcher-tab-bg-color-tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+  --switcher-tab-bg-color-tabbed-content-bg-color-active: var(--teal-900);
+  --switcher-tab-bg-color-tabbed-content-border-color: var(--color-icon);
+  --switcher-tab-bg-color-tabbed-content-code-bg-color: var(--neutral-900);
+  --switcher-tab-bg-color-tabbed-content-tab-text-color-active: var(--color-icon);
+  --switcher-tab-bg-color-title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }
 
 [data-theme="light"] {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+  --badge-bg-color: var(--neutral-100);
+  --badge-border-color: var(--neutral-300);
+  --badge-text-color: var(--neutral-500);
   --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);
@@ -371,6 +411,7 @@
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
   --eyebrow-text-color: var(--blue-700);
+  --filter-invert: none;
   --heading-text-color: var(--neutral-800);
   --neutral-000: color(srgb 1 1 1);
   --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
@@ -381,13 +422,20 @@
   --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
   --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
   --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --search-answer-message-color: var(--neutral-200);
+  --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
-  --tabbed-content-bg-color: var(--neutral-000);
-  --tabbed-content-bg-color-active: var(--neutral-000);
-  --tabbed-content-border-color: var(--color-icon);
-  --tabbed-content-code-bg-color: var(--neutral-900);
-  --tabbed-content-tab-text-color-active: var(--color-icon);
-  --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
+  --search-icon-color: var(--neutral-400);
+  --search-input-bg-color: var(--neutral-100);
+  --search-loading-color: var(--teal-700);
+  --search-submit-btn-bg-color: var(--teal-200);
+  --search-user-message-color: var(--teal-000);
+  --switcher-tab-bg-color-tabbed-content-bg-color: var(--neutral-000);
+  --switcher-tab-bg-color-tabbed-content-bg-color-active: var(--neutral-000);
+  --switcher-tab-bg-color-tabbed-content-border-color: var(--color-icon);
+  --switcher-tab-bg-color-tabbed-content-code-bg-color: var(--neutral-900);
+  --switcher-tab-bg-color-tabbed-content-tab-text-color-active: var(--color-icon);
+  --switcher-tab-bg-color-title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 

package/packages/utils/theme.ts

@@ -0,0 +1,16 @@
+export type Theme = 'light' | 'dark';
+
+export const ThemeMap: Record<Theme, Theme> = {
+  light: 'dark',
+  dark: 'light',
+};
+
+export const handleThemeChange = (value: Theme) => {
+  const themeSelect = document.getElementById('site-theme-select') as HTMLSelectElement;
+  if (themeSelect) {
+    themeSelect.value = value;
+  }
+  const element = document.documentElement;
+  element.setAttribute('data-theme', value);
+  localStorage.setItem('theme', value);
+};