@netlify/spark-ui 1.12.4 → 1.13.0

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

@@ -1,10 +1,11 @@
 import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as f } from "../../../chunks/AskNetlify.1ejGUA_O.js";
+import { A as d } from "../../../chunks/AskNetlify.CNYCiNSp.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";
 import "./components/ChatMessages.js";
+import "../Popover/Popover.js";
 export {
-  f as default
+  d as default
 };

package/dist/components/preact/Popover/Popover.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'preact';
+interface Props {
+    id?: string;
+    content: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+    children: preact.ComponentChildren;
+}
+declare const Popover: FunctionComponent<Props>;
+export default Popover;

package/dist/components/preact/Popover/Popover.js

@@ -0,0 +1,27 @@
+import { u as r } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { g as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
+import '../../../assets/Popover.css';const v = ({
+  id: e,
+  content: t,
+  position: p = "top",
+  class: n = "",
+  children: s,
+  ...i
+}) => {
+  const d = a(), o = e || d;
+  return /* @__PURE__ */ r("div", { id: o, class: `n-popover-container n-popover-${p} ${n}`, ...i, children: [
+    /* @__PURE__ */ r("button", { class: "n-popover-trigger", "aria-describedby": `${o}-popover`, type: "button", children: s }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        id: `${o}-popover`,
+        class: "n-popover",
+        role: "tooltip",
+        dangerouslySetInnerHTML: { __html: t }
+      }
+    )
+  ] });
+};
+export {
+  v as default
+};

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as g, y as h, d as k } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as w, K as b } from "../../../../../chunks/AskNetlify.1ejGUA_O.js";
+import { A as w, K as b } from "../../../../../chunks/AskNetlify.CNYCiNSp.js";
 import K from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
 import L from "../SearchWindow.js";

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.1ejGUA_O.js";
+import { A as S } from "../../chunks/AskNetlify.CNYCiNSp.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/package.json

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

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

@@ -3,6 +3,10 @@
 /* ----------------------------- */
 /* Layout Containers             */
 /* ----------------------------- */
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
 .n-ask-chat-container {
   opacity: 0;
   animation: appearContainer 120ms ease-in-out forwards;
@@ -10,6 +14,7 @@
 }
 
 .n-ask-conversation {
+  position: relative;
   display: grid;
   align-items: flex-end;
   gap: var(--space-s);
@@ -23,6 +28,7 @@
 .n-ask-form {
   display: flex;
   align-items: center;
+  gap: var(--space-s);
   position: relative;
   height: var(--n-search-input-height);
   background-color: var(--search-input-bg-color);

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -5,6 +5,8 @@ import { QuestionList } from './components/QuestionList/QuestionList';
 import { BackButton } from './components/BackButton';
 import { ChatMessages } from './components/ChatMessages';
 
+import Popover from '../Popover/Popover';
+
 import './AskNetlify.css';
 
 interface Props {
@@ -78,6 +80,18 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
           placeholder="Ask a question..."
           disabled={isPreparingAnswer || isGeneratingAnswer}
         />
+        {
+          <Popover
+            id="recaptcha"
+            content={`<p>
+                This site is protected by reCAPTCHA and the Google
+                <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+                <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+              </p>`}
+          >
+            protected by reCAPTCHA
+          </Popover>
+        }
 
         {isGeneratingAnswer ? (
           <button

package/packages/components/preact/Popover/Popover.css

@@ -0,0 +1,101 @@
+.n-popover-container {
+  position: relative;
+  display: inline-block;
+  font-size: var(--font-size-text-xs);
+}
+
+.n-popover-trigger {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--color-text-weak);
+  cursor: pointer;
+}
+
+.n-popover {
+  position: absolute;
+  background-color: var(--color-bg-2);
+  color: var(--color-text);
+  padding: var(--space-xs) var(--space-s);
+  border-radius: var(--radius-s);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 10;
+}
+
+.n-popover::after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+}
+
+.n-popover-container:focus-within .n-popover,
+.n-popover-container:hover .n-popover {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.n-popover-container:focus-within .n-popover-trigger,
+.n-popover-container:hover .n-popover-trigger {
+  box-shadow: 0px 1px 0px 0px var(--neutral-300);
+}
+
+.n-popover-top .n-popover {
+  bottom: 145%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 260px;
+  box-shadow: var(--shadow-light);
+}
+
+.n-popover-top .n-popover::after {
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: var(--color-bg-2) transparent transparent transparent;
+}
+
+.n-popover-bottom .n-popover {
+  top: 145%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.n-popover-bottom .n-popover::after {
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent var(--color-bg-2) transparent;
+}
+
+.n-popover-left .n-popover {
+  right: 125%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.n-popover-left .n-popover::after {
+  top: 50%;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent var(--color-bg-2);
+}
+
+.n-popover-right .n-popover {
+  left: 125%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.n-popover-right .n-popover::after {
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent var(--color-bg-2) transparent transparent;
+}

package/packages/components/preact/Popover/Popover.tsx

@@ -0,0 +1,40 @@
+import { useId } from 'preact/hooks';
+import type { FunctionComponent } from 'preact';
+
+import './Popover.css';
+
+interface Props {
+  id?: string;
+  content: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  class?: string;
+  children: preact.ComponentChildren;
+}
+
+const Popover: FunctionComponent<Props> = ({
+  id,
+  content,
+  position = 'top',
+  class: className = '',
+  children,
+  ...rest
+}) => {
+  const generatedId = useId();
+  const tooltipId = id || generatedId;
+
+  return (
+    <div id={tooltipId} class={`n-popover-container n-popover-${position} ${className}`} {...rest}>
+      <button class="n-popover-trigger" aria-describedby={`${tooltipId}-popover`} type="button">
+        {children}
+      </button>
+      <div
+        id={`${tooltipId}-popover`}
+        class="n-popover"
+        role="tooltip"
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+    </div>
+  );
+};
+
+export default Popover;