@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/stats/Stats02/Stats02.types.d.cts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Stats02Stat {
+    /** What it counts: "Deploys a week". */
+    label: ReactNode;
+    /** The figure, at a display size: "86,400". */
+    value: ReactNode;
+    /** A 14px icon before the label. */
+    icon?: ReactNode;
+    /** The change against the period before: "+12%". */
+    change?: string;
+    /** Whether the change is good or bad. Worked out from a leading + or − when left out; set it when a fall is good news ("−18%" in review time). */
+    changeTone?: "positive" | "negative" | "neutral";
+    /** A line after the change: "vs the quarter before". */
+    description?: ReactNode;
+    /** Values for a small trend line along the card's foot, oldest first. */
+    trend?: number[];
+}
+export interface Stats02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip 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;
+    /** A link on the right of the heading, such as how the numbers are counted. */
+    link?: BlockLink;
+    /** The numbers, each on its own card: four to a row, two on tablets, one on phones. */
+    stats: Stats02Stat[];
+}

package/dist/stats/Stats02/Stats02.types.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Stats02Stat {
+    /** What it counts: "Deploys a week". */
+    label: ReactNode;
+    /** The figure, at a display size: "86,400". */
+    value: ReactNode;
+    /** A 14px icon before the label. */
+    icon?: ReactNode;
+    /** The change against the period before: "+12%". */
+    change?: string;
+    /** Whether the change is good or bad. Worked out from a leading + or − when left out; set it when a fall is good news ("−18%" in review time). */
+    changeTone?: "positive" | "negative" | "neutral";
+    /** A line after the change: "vs the quarter before". */
+    description?: ReactNode;
+    /** Values for a small trend line along the card's foot, oldest first. */
+    trend?: number[];
+}
+export interface Stats02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip 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;
+    /** A link on the right of the heading, such as how the numbers are counted. */
+    link?: BlockLink;
+    /** The numbers, each on its own card: four to a row, two on tablets, one on phones. */
+    stats: Stats02Stat[];
+}

package/dist/stats/Stats03/Stats03.d.cts

@@ -0,0 +1,3 @@
+import type { Stats03Props } from "./Stats03.types.cjs";
+/** A heading and a paragraph on the left, numbers on the right. */
+export declare function Stats03({ eyebrow, title, description, link, stats, className, ...props }: Stats03Props): import("react").JSX.Element;

package/dist/stats/Stats03/Stats03.d.ts

@@ -0,0 +1,3 @@
+import type { Stats03Props } from "./Stats03.types.js";
+/** A heading and a paragraph on the left, numbers on the right. */
+export declare function Stats03({ eyebrow, title, description, link, stats, className, ...props }: Stats03Props): import("react").JSX.Element;

package/dist/stats/Stats03/Stats03.types.d.cts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Stats03Stat {
+    /** The figure: "3.1", "1 in 4". */
+    value: ReactNode;
+    /** A unit after it at just under half its size, in the muted colour: "×", "%", "days". */
+    unit?: ReactNode;
+    /** What it counts, under the figure: "more deploys a week". */
+    label: ReactNode;
+    /** A sentence under the label that puts the number in context. */
+    detail?: ReactNode;
+}
+export interface Stats03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left. */
+    title: ReactNode;
+    /** A paragraph under the title. */
+    description?: ReactNode;
+    /** A link under the paragraph, such as a customer's story. */
+    link?: BlockLink;
+    /** The numbers, two to a row on the right, each under a hairline (the first with a brass tick). Four look best. */
+    stats: Stats03Stat[];
+}

package/dist/stats/Stats03/Stats03.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Stats03Stat {
+    /** The figure: "3.1", "1 in 4". */
+    value: ReactNode;
+    /** A unit after it at just under half its size, in the muted colour: "×", "%", "days". */
+    unit?: ReactNode;
+    /** What it counts, under the figure: "more deploys a week". */
+    label: ReactNode;
+    /** A sentence under the label that puts the number in context. */
+    detail?: ReactNode;
+}
+export interface Stats03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left. */
+    title: ReactNode;
+    /** A paragraph under the title. */
+    description?: ReactNode;
+    /** A link under the paragraph, such as a customer's story. */
+    link?: BlockLink;
+    /** The numbers, two to a row on the right, each under a hairline (the first with a brass tick). Four look best. */
+    stats: Stats03Stat[];
+}