@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/team/Team01/Team01.d.cts

@@ -0,0 +1,3 @@
+import type { Team01Props } from "./Team01.types.cjs";
+/** A centred grid of faces, each with a name and what they do, and a line at the end such as a link to open roles. */
+export declare function Team01({ eyebrow, title, description, people, note, className, ...props }: Team01Props): import("react").JSX.Element;

package/dist/team/Team01/Team01.d.ts

@@ -0,0 +1,3 @@
+import type { Team01Props } from "./Team01.types.js";
+/** A centred grid of faces, each with a name and what they do, and a line at the end such as a link to open roles. */
+export declare function Team01({ eyebrow, title, description, people, note, className, ...props }: Team01Props): import("react").JSX.Element;

package/dist/team/Team01/Team01.types.d.cts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** A person in the grid. */
+export interface Team01Person {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** What they do: "Head of engineering". */
+    jobTitle: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+    /** The colour of their initials' circle: the brand colour, a soft wash of it, or ink. Mix them so a row of initials doesn't read as one shape repeated.
+     * @default "brand" */
+    tone?: "brand" | "soft" | "ink";
+}
+export interface Team01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Team". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The people, four to a row (two on phones). */
+    people: Team01Person[];
+    /** A line under a hairline at the end, which can hold a link: "We're hiring for four roles. See open roles". */
+    note?: ReactNode;
+}

package/dist/team/Team01/Team01.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** A person in the grid. */
+export interface Team01Person {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** What they do: "Head of engineering". */
+    jobTitle: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+    /** The colour of their initials' circle: the brand colour, a soft wash of it, or ink. Mix them so a row of initials doesn't read as one shape repeated.
+     * @default "brand" */
+    tone?: "brand" | "soft" | "ink";
+}
+export interface Team01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Team". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The people, four to a row (two on phones). */
+    people: Team01Person[];
+    /** A line under a hairline at the end, which can hold a link: "We're hiring for four roles. See open roles". */
+    note?: ReactNode;
+}

package/dist/team/Team02/Team02.d.cts

@@ -0,0 +1,3 @@
+import type { Team02Props } from "./Team02.types.cjs";
+/** A card for each person: their face, name and job, a line about what they do, and where they are with ways to reach them. */
+export declare function Team02({ eyebrow, title, description, people, labels, className, ...props }: Team02Props): import("react").JSX.Element;

package/dist/team/Team02/Team02.d.ts

@@ -0,0 +1,3 @@
+import type { Team02Props } from "./Team02.types.js";
+/** A card for each person: their face, name and job, a line about what they do, and where they are with ways to reach them. */
+export declare function Team02({ eyebrow, title, description, people, labels, className, ...props }: Team02Props): import("react").JSX.Element;

package/dist/team/Team02/Team02.types.d.cts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** A person's card. */
+export interface Team02Person {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** What they do: "Head of engineering". */
+    jobTitle: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+    /** A line about what they do, in the card's middle. */
+    bio?: ReactNode;
+    /** Where they work from, with a pin, at the card's foot: "Dublin". */
+    location?: ReactNode;
+    /** Their email address, for a mail button at the foot. */
+    email?: string;
+    /** A link to their site or profile, for a link button beside it. */
+    website?: string;
+}
+/** The words on the cards that aren't content, in English unless you pass your own. */
+export interface Team02Labels {
+    /** The mail button's accessible name, given the person's name. @default `Email ${name}` */
+    email?(name: string): string;
+    /** The link button's accessible name, given the person's name. @default `${name}'s website` */
+    website?(name: string): string;
+}
+export interface Team02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Team". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The people, a card each, three to a row. */
+    people: Team02Person[];
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Team02Labels;
+}

package/dist/team/Team02/Team02.types.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** A person's card. */
+export interface Team02Person {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** What they do: "Head of engineering". */
+    jobTitle: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+    /** A line about what they do, in the card's middle. */
+    bio?: ReactNode;
+    /** Where they work from, with a pin, at the card's foot: "Dublin". */
+    location?: ReactNode;
+    /** Their email address, for a mail button at the foot. */
+    email?: string;
+    /** A link to their site or profile, for a link button beside it. */
+    website?: string;
+}
+/** The words on the cards that aren't content, in English unless you pass your own. */
+export interface Team02Labels {
+    /** The mail button's accessible name, given the person's name. @default `Email ${name}` */
+    email?(name: string): string;
+    /** The link button's accessible name, given the person's name. @default `${name}'s website` */
+    website?(name: string): string;
+}
+export interface Team02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Team". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The people, a card each, three to a row. */
+    people: Team02Person[];
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Team02Labels;
+}

package/dist/testimonials/Testimonial01/Testimonial01.d.cts

@@ -0,0 +1,3 @@
+import type { Testimonial01Props } from "./Testimonial01.types.cjs";
+/** One large quote with the person under it. */
+export declare function Testimonial01({ quote, highlight, name, jobTitle, avatar, badge, labels, className, ...props }: Testimonial01Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial01/Testimonial01.d.ts

@@ -0,0 +1,3 @@
+import type { Testimonial01Props } from "./Testimonial01.types.js";
+/** One large quote with the person under it. */
+export declare function Testimonial01({ quote, highlight, name, jobTitle, avatar, badge, labels, className, ...props }: Testimonial01Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial01/Testimonial01.types.d.cts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial01Labels {
+    /** The section's heading, for screen readers only. @default "What customers say" */
+    title?: string;
+}
+export interface Testimonial01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The quote, large and centred, in the muted colour: the setup. */
+    quote: ReactNode;
+    /** The part worth remembering, after the quote in full colour. */
+    highlight?: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "VP of engineering, Basalt". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+    /** A small badge under the person, such as "Sample quote". */
+    badge?: ReactNode;
+    /** Words that aren't content, in English unless you pass your own. */
+    labels?: Testimonial01Labels;
+}

package/dist/testimonials/Testimonial01/Testimonial01.types.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial01Labels {
+    /** The section's heading, for screen readers only. @default "What customers say" */
+    title?: string;
+}
+export interface Testimonial01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The quote, large and centred, in the muted colour: the setup. */
+    quote: ReactNode;
+    /** The part worth remembering, after the quote in full colour. */
+    highlight?: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "VP of engineering, Basalt". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+    /** A small badge under the person, such as "Sample quote". */
+    badge?: ReactNode;
+    /** Words that aren't content, in English unless you pass your own. */
+    labels?: Testimonial01Labels;
+}

package/dist/testimonials/Testimonial02/Testimonial02.d.cts

@@ -0,0 +1,3 @@
+import type { Testimonial02Props } from "./Testimonial02.types.cjs";
+/** Several quotes in cards, in columns like a wall of notes. */
+export declare function Testimonial02({ eyebrow, title, description, badge, quotes, className, ...props }: Testimonial02Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial02/Testimonial02.d.ts

@@ -0,0 +1,3 @@
+import type { Testimonial02Props } from "./Testimonial02.types.js";
+/** Several quotes in cards, in columns like a wall of notes. */
+export declare function Testimonial02({ eyebrow, title, description, badge, quotes, className, ...props }: Testimonial02Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial02/Testimonial02.types.d.cts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial02Quote {
+    /** What they said. */
+    quote: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "Staff engineer, Quarry". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+    /** A quote of a line or two, set larger, as a headline. */
+    short?: boolean;
+}
+export interface Testimonial02Props 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 small badge on the right of the heading, such as "Sample quotes". */
+    badge?: ReactNode;
+    /** The quotes, each on a card, in three columns of different heights (two on tablets, one on phones). */
+    quotes: Testimonial02Quote[];
+}

package/dist/testimonials/Testimonial02/Testimonial02.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial02Quote {
+    /** What they said. */
+    quote: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "Staff engineer, Quarry". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+    /** A quote of a line or two, set larger, as a headline. */
+    short?: boolean;
+}
+export interface Testimonial02Props 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 small badge on the right of the heading, such as "Sample quotes". */
+    badge?: ReactNode;
+    /** The quotes, each on a card, in three columns of different heights (two on tablets, one on phones). */
+    quotes: Testimonial02Quote[];
+}

package/dist/testimonials/Testimonial03/Testimonial03.d.cts

@@ -0,0 +1,3 @@
+import type { Testimonial03Props } from "./Testimonial03.types.cjs";
+/** Customers' logos as tabs, each showing a quote, the person, and a panel about their company. */
+export declare function Testimonial03({ eyebrow, title, stories, defaultStory, note, labels, className, ...props }: Testimonial03Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial03/Testimonial03.d.ts

@@ -0,0 +1,3 @@
+import type { Testimonial03Props } from "./Testimonial03.types.js";
+/** Customers' logos as tabs, each showing a quote, the person, and a panel about their company. */
+export declare function Testimonial03({ eyebrow, title, stories, defaultStory, note, labels, className, ...props }: Testimonial03Props): import("react").JSX.Element;

package/dist/testimonials/Testimonial03/Testimonial03.types.d.cts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial03Fact {
+    /** What it is: "Engineers". */
+    label: ReactNode;
+    /** Its value: "140", "310 → 1,120". */
+    value: ReactNode;
+}
+export interface Testimonial03Story {
+    /** The company, for the tab's key. Put it in the logo too, as the <img>'s alt or as text beside an SVG. */
+    company: string;
+    /** The company's logo in its tab, about 20px tall: muted until its tab is chosen. */
+    logo: ReactNode;
+    /** A larger logo at the top of the company's panel, about 28px tall. @default logo */
+    largeLogo?: ReactNode;
+    /** A line about the company, under the larger logo. */
+    about?: ReactNode;
+    /** A few facts about the company, at the foot of its panel. */
+    facts?: Testimonial03Fact[];
+    /** What they said. */
+    quote: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "Lead developer, Halcyon". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+}
+export interface Testimonial03Labels {
+    /** The row of logos, for screen readers. @default "Customers" */
+    tabs?: string;
+}
+export interface Testimonial03Props 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, centred. */
+    title: ReactNode;
+    /** The stories, one to a tab: the companies' logos are the tabs. Four fit in a row on phones. */
+    stories: Testimonial03Story[];
+    /** The story open at first, by index. @default 0 */
+    defaultStory?: number;
+    /** A small centred line under the card, such as "Sample quotes". */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: Testimonial03Labels;
+}

package/dist/testimonials/Testimonial03/Testimonial03.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Testimonial03Fact {
+    /** What it is: "Engineers". */
+    label: ReactNode;
+    /** Its value: "140", "310 → 1,120". */
+    value: ReactNode;
+}
+export interface Testimonial03Story {
+    /** The company, for the tab's key. Put it in the logo too, as the <img>'s alt or as text beside an SVG. */
+    company: string;
+    /** The company's logo in its tab, about 20px tall: muted until its tab is chosen. */
+    logo: ReactNode;
+    /** A larger logo at the top of the company's panel, about 28px tall. @default logo */
+    largeLogo?: ReactNode;
+    /** A line about the company, under the larger logo. */
+    about?: ReactNode;
+    /** A few facts about the company, at the foot of its panel. */
+    facts?: Testimonial03Fact[];
+    /** What they said. */
+    quote: ReactNode;
+    /** Who said it, beside their avatar (initials when there's no `avatar`). */
+    name: string;
+    /** Their role and company: "Lead developer, Halcyon". */
+    jobTitle?: ReactNode;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+}
+export interface Testimonial03Labels {
+    /** The row of logos, for screen readers. @default "Customers" */
+    tabs?: string;
+}
+export interface Testimonial03Props 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, centred. */
+    title: ReactNode;
+    /** The stories, one to a tab: the companies' logos are the tabs. Four fit in a row on phones. */
+    stories: Testimonial03Story[];
+    /** The story open at first, by index. @default 0 */
+    defaultStory?: number;
+    /** A small centred line under the card, such as "Sample quotes". */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: Testimonial03Labels;
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@openwarelabs/blocks",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Openware UI blocks: whole page sections (heroes and more) as React components that take their content as props.",
   "license": "MIT",
   "author": "Alexander Silver",
-  "homepage": "https://github.com/openwarelabs/ui/tree/main/blocks#readme",
+  "homepage": "https://openwarelabs.github.io/ui/#/blocks",
   "bugs": {
     "url": "https://github.com/openwarelabs/ui/issues"
   },
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@openwarelabs/ui": "^0.9.0",
+    "@openwarelabs/ui": "^0.10.1",
     "react": ">=18",
     "react-dom": ">=18"
   },