@openwarelabs/blocks 0.8.0 → 0.9.0

package/dist/calls-to-action/Cta01/Cta01.d.cts

@@ -0,0 +1,3 @@
+import type { Cta01Props } from "./Cta01.types.cjs";
+/** A wide panel on a dot grid with a headline on the left and the buttons on the right. */
+export declare function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }: Cta01Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta01/Cta01.d.ts

@@ -0,0 +1,3 @@
+import type { Cta01Props } from "./Cta01.types.js";
+/** A wide panel on a dot grid with a headline on the left and the buttons on the right. */
+export declare function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }: Cta01Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta01/Cta01.types.d.cts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Cta01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** A small line under the buttons, which can start with a 14px icon: "Most teams are set up in ten minutes." */
+    note?: ReactNode;
+}

package/dist/calls-to-action/Cta01/Cta01.types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Cta01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** A small line under the buttons, which can start with a 14px icon: "Most teams are set up in ten minutes." */
+    note?: ReactNode;
+}

package/dist/calls-to-action/Cta02/Cta02.d.cts

@@ -0,0 +1,3 @@
+import type { Cta02Props } from "./Cta02.types.cjs";
+/** A centred call to action on the brand colour, with white text, a white button and a few facts. */
+export declare function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }: Cta02Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta02/Cta02.d.ts

@@ -0,0 +1,3 @@
+import type { Cta02Props } from "./Cta02.types.js";
+/** A centred call to action on the brand colour, with white text, a white button and a few facts. */
+export declare function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }: Cta02Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta02/Cta02.types.d.cts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.cjs";
+export interface Cta02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small pill above the title, drawn for the brand colour: "Ready when you are". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A white button on the brand colour. */
+    primaryAction: BlockAction;
+    /** A text link beside it, with an arrow: "Talk to sales". */
+    secondaryLink?: BlockLink;
+    /** Short facts under the buttons, each with a tick: "No card needed". */
+    facts?: ReactNode[];
+}

package/dist/calls-to-action/Cta02/Cta02.types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.js";
+export interface Cta02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small pill above the title, drawn for the brand colour: "Ready when you are". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A white button on the brand colour. */
+    primaryAction: BlockAction;
+    /** A text link beside it, with an arrow: "Talk to sales". */
+    secondaryLink?: BlockLink;
+    /** Short facts under the buttons, each with a tick: "No card needed". */
+    facts?: ReactNode[];
+}

package/dist/calls-to-action/Cta03/Cta03.d.cts

@@ -0,0 +1,3 @@
+import type { Cta03Props } from "./Cta03.types.cjs";
+/** Words, two buttons and a few points beside a picture. */
+export declare function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }: Cta03Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta03/Cta03.d.ts

@@ -0,0 +1,3 @@
+import type { Cta03Props } from "./Cta03.types.js";
+/** Words, two buttons and a few points beside a picture. */
+export declare function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }: Cta03Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta03/Cta03.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Cta03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** Short points under the buttons, each with a tick. */
+    points?: ReactNode[];
+    /** The picture beside the words (under them on phones), usually a screenshot. */
+    visual: ReactNode;
+}

package/dist/calls-to-action/Cta03/Cta03.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Cta03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** Short points under the buttons, each with a tick. */
+    points?: ReactNode[];
+    /** The picture beside the words (under them on phones), usually a screenshot. */
+    visual: ReactNode;
+}

package/dist/index.cjs

@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // blocks/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Cta01: () => Cta01,
+  Cta02: () => Cta02,
+  Cta03: () => Cta03,
   Features01: () => Features01,
   Features02: () => Features02,
   Features03: () => Features03,
@@ -1619,4 +1622,65 @@ function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-footer04__name", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-footer04__crop", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: wordmark }) }) })
   ] }) });
 }
+
+// blocks/src/calls-to-action/Cta01/Cta01.tsx
+var import_react25 = require("react");
+var import_ui29 = require("@openwarelabs/ui");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }) {
+  const id = (0, import_react25.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("section", { className: (0, import_ui29.cx)("ow-cta01", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.DotGrid, { fade: true, className: "ow-cta01__panel", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { variant: "section-title", id, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { variant: "lead", className: "ow-cta01__lead", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__side", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BlockActions, { className: "ow-cta01__actions", primary: primaryAction, secondary: secondaryAction }),
+      note ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { as: "p", variant: "caption", className: "ow-cta01__note", children: note }) : null
+    ] })
+  ] }) }) });
+}
+
+// blocks/src/calls-to-action/Cta02/Cta02.tsx
+var import_react26 = require("react");
+var import_ui30 = require("@openwarelabs/ui");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }) {
+  const id = (0, import_react26.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("section", { className: (0, import_ui30.cx)("ow-cta02", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.DotGrid, { fade: true, className: "ow-cta02__plate", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-cta02__content", children: [
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { as: "p", variant: "body", className: "ow-cta02__eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { as: "h2", variant: "page-title", id, className: "ow-cta02__title", children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { variant: "lead", className: "ow-cta02__lead", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-cta02__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BlockActionButton, { action: primaryAction, variant: "secondary", className: "ow-cta02__action" }),
+      secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui30.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-cta02__link", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { variant: "label", children: secondaryLink.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowRightIcon, { size: 16 })
+      ] }) : null
+    ] }),
+    facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: "ow-cta02__facts", children: facts.map((fact, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui30.Text, { as: "li", variant: "body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, { size: 15 }),
+      fact
+    ] }, index)) }) : null
+  ] }) }) });
+}
+
+// blocks/src/calls-to-action/Cta03/Cta03.tsx
+var import_react27 = require("react");
+var import_ui31 = require("@openwarelabs/ui");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }) {
+  const id = (0, import_react27.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { className: (0, import_ui31.cx)("ow-cta03", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ow-cta03__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui31.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id, children: title }), intro: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BlockActions, { className: "ow-cta03__actions", primary: primaryAction, secondary: secondaryAction }),
+      points?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "ow-cta03__points", children: points.map((point, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_ui31.Text, { as: "li", variant: "body", tone: "soft", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, { size: 16 }),
+        point
+      ] }, index)) }) : null
+    ] }),
+    visual
+  ] }) });
+}
 //# sourceMappingURL=index.cjs.map