@contentrain/astro-kit 0.4.0 → 0.6.0

package/components/stats/Stats.astro

@@ -0,0 +1,66 @@
+---
+// A row of figures, each with a short label, under an optional heading and
+// intro. Figures are static text: no counting animation.
+import { tv } from 'tailwind-variants'
+import Section, { type Tone } from '../_shared/Section.astro'
+
+const stats = tv({
+  slots: {
+    list: 'grid grid-cols-2 gap-6 md:gap-8',
+    item: 'flex flex-col-reverse gap-1',
+    value: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight tabular-nums md:text-5xl',
+    label: 'text-sm opacity-80',
+  },
+  variants: {
+    columns: {
+      '2': { list: 'md:grid-cols-2' },
+      '3': { list: 'md:grid-cols-3' },
+      '4': { list: 'md:grid-cols-4' },
+    },
+    style: {
+      plain: {},
+      card: { item: 'rounded-[var(--radius-card)] bg-surface p-6 text-ink ring-1 ring-line/60' },
+    },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops it under 4.5:1 (WCAG 1.4.3).
+    tone: { default: {}, muted: {}, inverse: {}, accent: { label: 'opacity-100' } },
+  },
+  defaultVariants: { columns: '3', style: 'plain', tone: 'default' },
+})
+
+interface Item {
+  value: string
+  label: string
+  prefix?: string | undefined
+  suffix?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  items: Item[]
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'plain' | 'card' | undefined
+  tone?: Tone | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, items, columns, style, tone, id } = Astro.props
+const s = stats({ columns, style, tone })
+const headingId = heading && id ? `${id}-title` : undefined
+---
+<Section tone={tone} id={id} aria-labelledby={headingId}>
+  {(heading || intro) && (
+    <header class="mb-10 flex max-w-2xl flex-col gap-3">
+      {heading && <h2 id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</h2>}
+      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']} data-kit-text>{intro}</p>}
+    </header>
+  )}
+  <dl class={s.list()}>
+    {items.map(item => (
+      <div class={s.item()}>
+        <dt class={s.label()}>{item.label}</dt>
+        <dd class={s.value()}>{item.prefix}{item.value}{item.suffix}</dd>
+      </div>
+    ))}
+  </dl>
+</Section>

package/components/stats/fixtures.json

@@ -0,0 +1,98 @@
+[
+  {
+    "name": "three-plain",
+    "props": {
+      "heading": "By the numbers",
+      "intro": "A decade of shipping sites for small teams.",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        }
+      ]
+    }
+  },
+  {
+    "name": "four-card-muted",
+    "props": {
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        },
+        {
+          "value": "2",
+          "label": "Revenue handled",
+          "prefix": "$",
+          "suffix": "M"
+        }
+      ],
+      "columns": "4",
+      "style": "card",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "two-inverse",
+    "props": {
+      "heading": "Results",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        }
+      ],
+      "columns": "2",
+      "tone": "inverse"
+    }
+  },
+  {
+    "name": "card-accent",
+    "props": {
+      "heading": "Our reach",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        }
+      ],
+      "style": "card",
+      "tone": "accent"
+    }
+  }
+]

package/components/stats/meta.json

@@ -0,0 +1,113 @@
+{
+  "id": "stats",
+  "name": "Stats",
+  "description": "A row of figures with a short label each (years in business, clients, uptime), with an optional heading and intro. The counter/number section of a landing page; numbers are static text, not animated.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Section.astro"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Figures per row on wide screens; two on phones."
+    },
+    "style": {
+      "options": [
+        "plain",
+        "card"
+      ],
+      "default": "plain",
+      "description": "plain: figures on the section background. card: each figure in its own box."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Introduction",
+      "description": "A sentence under the heading."
+    },
+    "items": {
+      "type": "array",
+      "label": "Figures",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "value": {
+            "type": "string",
+            "label": "Figure",
+            "required": true,
+            "description": "The number as shown, without prefix or suffix (`120`, `4.9`, `24/7`)."
+          },
+          "label": {
+            "type": "string",
+            "label": "Label",
+            "required": true,
+            "description": "What the figure counts (Clients, Countries)."
+          },
+          "prefix": {
+            "type": "string",
+            "label": "Prefix",
+            "description": "Printed before the figure (`$`, `~`)."
+          },
+          "suffix": {
+            "type": "string",
+            "label": "Suffix",
+            "description": "Printed after the figure (`+`, `%`, `k`)."
+          }
+        }
+      },
+      "description": "The figures, in order (Elementor counter, Divi number counter, a Gutenberg columns row of big numbers)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/columns"
+    ],
+    "elementor": [
+      "elementor/counter"
+    ],
+    "divi": [
+      "divi/et_pb_number_counter",
+      "divi/et_pb_circle_counter"
+    ]
+  },
+  "a11y": "A description list: each label is the term, each figure its value, so a screen reader reads them as pairs. The section is labelled by its heading.",
+  "pattern": {
+    "summary": "row of big numbers with short labels",
+    "signals": [
+      "2–4 columns",
+      "repeated number + label",
+      "no images"
+    ]
+  }
+}

package/components/steps/Steps.astro

@@ -0,0 +1,77 @@
+---
+// How it works: an ordered sequence of steps, each a title and a line of
+// text, optionally with an image — as a vertical list or a row across the
+// page, numbered or plain.
+import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
+import Section from '../_shared/Section.astro'
+import { imageOf, type ImageSource } from '../_shared/image'
+
+const steps = tv({
+  slots: {
+    header: 'mb-10 flex max-w-2xl flex-col gap-3',
+    heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
+    intro: 'text-lg opacity-80',
+    list: 'grid gap-8 [counter-reset:kit-step]',
+    step: 'flex gap-4 [counter-increment:kit-step]',
+    body: 'flex flex-col gap-2',
+    media: 'mb-2 overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
+    title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
+    text: 'text-pretty opacity-80',
+  },
+  variants: {
+    layout: {
+      list: { list: 'max-w-3xl' },
+      row: { list: 'sm:grid-cols-2 lg:auto-cols-fr lg:grid-flow-col lg:grid-cols-none', step: 'flex-col' },
+    },
+    // The number is drawn from a CSS counter, so the list stays one <ol> a screen reader counts itself.
+    style: {
+      numbered: { step: "before:flex before:size-10 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-accent before:font-semibold before:text-accent-ink before:content-[counter(kit-step)]" },
+      plain: { step: 'border-l-2 border-accent pl-4' },
+    },
+  },
+  defaultVariants: { layout: 'list', style: 'numbered' },
+})
+
+interface Step {
+  title: string
+  text: string
+  /** The image's address. */
+  image?: ImageSource | undefined
+  imageAlt?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  items: Step[]
+  layout?: 'list' | 'row' | undefined
+  style?: 'numbered' | 'plain' | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, items, layout, style, id } = Astro.props
+const s = steps({ layout, style })
+const headingId = heading && id ? `${id}-title` : undefined
+---
+{items.length > 0 && (
+  <Section id={id} aria-labelledby={headingId}>
+    {(heading || intro) && (
+      <header class={s.header()}>
+        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
+      </header>
+    )}
+    <ol class={s.list()}>
+      {items.map(step => (
+        <li class={s.step()}>
+          <div class={s.body()}>
+            {imageOf(step.image, step.imageAlt) && <div class={s.media()}><KitImage image={imageOf(step.image, step.imageAlt)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+            <h3 class={s.title()}>{step.title}</h3>
+            <p class={s.text()} data-kit-text>{step.text}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  </Section>
+)}

package/components/steps/fixtures.json

@@ -0,0 +1,5 @@
+[
+  {"name": "list-numbered", "props": {"id": "how", "heading": "How it works", "intro": "Three steps from WordPress to a static site.", "items": [{"title": "Connect", "text": "Point us at your site; we read everything it publishes."}, {"title": "Review", "text": "Check the plan: every page, model and redirect."}, {"title": "Launch", "text": "Deploy the new site; every old address still works."}]}},
+  {"name": "row-plain-images", "props": {"layout": "row", "style": "plain", "heading": "Our process", "items": [{"title": "Discover", "text": "We learn the site and its readers.", "image": "/kit-fixtures/photo-1.svg"}, {"title": "Design", "text": "We draw the pages and the system.", "image": "/kit-fixtures/photo-2.svg"}, {"title": "Build", "text": "We ship it, fast and accessible.", "image": "/kit-fixtures/photo-3.svg", "imageAlt": "A laptop showing the finished site"}]}},
+  {"name": "row-numbered", "props": {"layout": "row", "items": [{"title": "Sign up", "text": "One minute, no card."}, {"title": "Import", "text": "Bring your content."}, {"title": "Edit", "text": "Change it in Studio."}, {"title": "Publish", "text": "Push and it is live."}]}}
+]

package/components/steps/meta.json

@@ -0,0 +1,105 @@
+{
+  "id": "steps",
+  "name": "Steps",
+  "description": "How it works: an ordered sequence of steps, each a title and a line of text with an optional image, as a vertical list or a row, numbered or plain.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "KitImage.astro",
+    "Section.astro",
+    "image.ts",
+    "types.ts"
+  ],
+  "variants": {
+    "layout": {
+      "options": [
+        "list",
+        "row"
+      ],
+      "default": "list",
+      "description": "A vertical list, or one row across the page on wide screens."
+    },
+    "style": {
+      "options": [
+        "numbered",
+        "plain"
+      ],
+      "default": "numbered",
+      "description": "A number badge before each step, or an accent rule beside it."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading above the steps."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Intro",
+      "description": "A line or two under the heading."
+    },
+    "items": {
+      "type": "array",
+      "label": "Steps",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "label": "Title",
+            "required": true,
+            "description": "The step's name."
+          },
+          "text": {
+            "type": "text",
+            "label": "Text",
+            "required": true,
+            "description": "What happens in this step."
+          },
+          "image": {
+            "type": "image",
+            "label": "Image",
+            "description": "An image for the step."
+          },
+          "imageAlt": {
+            "type": "string",
+            "label": "Image description",
+            "description": "What the image shows; empty if decorative."
+          }
+        }
+      },
+      "description": "The steps, in order (Elementor icon boxes, Divi blurbs, Gutenberg columns of heading + text)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/columns"
+    ],
+    "elementor": [
+      "elementor/icon-box"
+    ],
+    "divi": [
+      "divi/et_pb_blurb"
+    ]
+  },
+  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3>. The section is labelled by its heading when it has one.",
+  "pattern": {
+    "summary": "ordered sequence: numbered title + short text units",
+    "signals": [
+      "3+ repeated units",
+      "number or step label",
+      "title",
+      "short text"
+    ]
+  }
+}

package/components/team/Team.astro

@@ -0,0 +1,82 @@
+---
+// The people behind the site: a portrait, a name, a role and a short bio for
+// each, as a grid of cards or plain entries. A member with a page links to it.
+import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
+import Section from '../_shared/Section.astro'
+import { imageOf, type ImageSource } from '../_shared/image'
+
+const team = tv({
+  slots: {
+    header: 'mb-10 flex max-w-2xl flex-col gap-3',
+    heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
+    intro: 'text-lg opacity-80',
+    list: 'grid gap-6 sm:grid-cols-2 md:gap-8',
+    member: 'group relative flex flex-col gap-3',
+    portrait: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
+    name: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)]',
+    role: 'text-sm font-medium text-accent',
+    bio: 'text-pretty opacity-80',
+  },
+  variants: {
+    columns: {
+      '2': {},
+      '3': { list: 'md:grid-cols-3' },
+      '4': { list: 'lg:grid-cols-4' },
+    },
+    style: {
+      card: { member: 'rounded-card border border-line p-6', portrait: '-mx-6 -mt-6 mb-2 rounded-b-none' },
+      plain: {},
+    },
+  },
+  defaultVariants: { columns: '3', style: 'card' },
+})
+
+interface Member {
+  name: string
+  role?: string | undefined
+  bio?: string | undefined
+  /** The portrait's address. */
+  image?: ImageSource | undefined
+  imageAlt?: string | undefined
+  href?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  items: Member[]
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'card' | 'plain' | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, items, columns, style, id } = Astro.props
+const s = team({ columns, style })
+const headingId = heading && id ? `${id}-title` : undefined
+---
+{items.length > 0 && (
+  <Section id={id} aria-labelledby={headingId}>
+    {(heading || intro) && (
+      <header class={s.header()}>
+        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
+      </header>
+    )}
+    <ul class={s.list()}>
+      {items.map(member => (
+        <li class={s.member()}>
+          {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          <h3 class={s.name()}>
+            {member.href
+              ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{member.name}</a>
+              : member.name}
+          </h3>
+          {member.role && <p class={s.role()}>{member.role}</p>}
+          {member.bio && <p class={s.bio()} data-kit-text>{member.bio}</p>}
+        </li>
+      ))}
+    </ul>
+  </Section>
+)}

package/components/team/fixtures.json

@@ -0,0 +1,5 @@
+[
+  {"name": "three-card", "props": {"id": "team", "heading": "The team", "intro": "Small, senior, and in the same room.", "items": [{"name": "Mira Kovač", "role": "Editor", "bio": "Keeps every page honest and every sentence short.", "image": "/kit-fixtures/avatar-1.svg", "href": "/team/mira/"}, {"name": "Jon Ade", "role": "Engineer", "bio": "Builds the sites and keeps them fast.", "image": "/kit-fixtures/avatar-2.svg", "href": "/team/jon/"}, {"name": "Lea Park", "role": "Designer", "bio": "Draws the systems the sites are made of.", "image": "/kit-fixtures/avatar-3.svg"}]}},
+  {"name": "two-plain", "props": {"columns": "2", "style": "plain", "heading": "Founders", "items": [{"name": "Mira Kovač", "role": "Co-founder", "image": "/kit-fixtures/avatar-1.svg", "imageAlt": "Mira Kovač, smiling"}, {"name": "Jon Ade", "role": "Co-founder", "image": "/kit-fixtures/avatar-2.svg"}]}},
+  {"name": "four-card-no-photos", "props": {"columns": "4", "items": [{"name": "Mira Kovač", "role": "Editor"}, {"name": "Jon Ade", "role": "Engineer"}, {"name": "Lea Park", "role": "Designer"}, {"name": "Sam Ortiz", "role": "Producer", "bio": "Keeps the schedule."}]}}
+]

package/components/team/meta.json

@@ -0,0 +1,116 @@
+{
+  "id": "team",
+  "name": "Team",
+  "description": "The people behind the site: portrait, name, role and a short bio each, as cards or plain entries. A member with a page is clickable as a whole.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "KitImage.astro",
+    "Section.astro",
+    "image.ts",
+    "types.ts"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Columns on wide screens; one on phones, two on tablets."
+    },
+    "style": {
+      "options": [
+        "card",
+        "plain"
+      ],
+      "default": "card",
+      "description": "Member chrome: a bordered card with the portrait on top, or none."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading above the team."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Intro",
+      "description": "A line or two under the heading."
+    },
+    "items": {
+      "type": "array",
+      "label": "Members",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "name": {
+            "type": "string",
+            "label": "Name",
+            "required": true,
+            "description": "The person's name."
+          },
+          "role": {
+            "type": "string",
+            "label": "Role",
+            "description": "Their title or role."
+          },
+          "bio": {
+            "type": "text",
+            "label": "Bio",
+            "description": "A short biography."
+          },
+          "image": {
+            "type": "image",
+            "label": "Photo",
+            "description": "Their portrait; shown square."
+          },
+          "imageAlt": {
+            "type": "string",
+            "label": "Photo description",
+            "description": "Who the photo shows; defaults to their name."
+          },
+          "href": {
+            "type": "url",
+            "label": "Link",
+            "description": "Their profile page; makes the whole entry a link."
+          }
+        }
+      },
+      "description": "The people, in display order (Divi team member name/position/content/image_url, Elementor image box)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/columns"
+    ],
+    "elementor": [
+      "elementor/image-box"
+    ],
+    "divi": [
+      "divi/et_pb_team_member"
+    ]
+  },
+  "a11y": "Members are a <ul>; each name is an <h3>, and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
+  "pattern": {
+    "summary": "repeated person units: portrait + name + role",
+    "signals": [
+      "2+ columns",
+      "1 image per column",
+      "name",
+      "role",
+      "short text"
+    ]
+  }
+}