@contentrain/astro-kit 0.5.0 → 0.6.0

package/components/header/Header.astro

@@ -53,16 +53,27 @@ interface Props {
 
 const { siteName, tagline, brandSize, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position })
+// A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
+const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
 <header class={root()}>
-  <div class={inner()}>
-    <div class="flex flex-col gap-1">
-      <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
-        {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-        {showName && <span>{siteName}</span>}
-      </a>
-      {tagline && <p class="opacity-75" data-kit-tagline>{tagline}</p>}
-    </div>
+  <div class={inner({ class: wrap })}>
+    {tagline
+      ? (
+        <div class="flex min-w-0 basis-full flex-col gap-1 md:basis-auto">
+          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+            {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+            {showName && <span>{siteName}</span>}
+          </a>
+          <p class="opacity-75" data-kit-tagline>{tagline}</p>
+        </div>
+      )
+      : (
+        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+          {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+          {showName && <span>{siteName}</span>}
+        </a>
+      )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
       <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}

package/components/header/fixtures.json

@@ -121,5 +121,6 @@
         }
       ]
     }
-  }
+  },
+  { "name": "tagline", "props": { "siteName": "Golden Agency", "tagline": "Websites that sell what you make", "items": [{ "label": "Home", "href": "/" }, { "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "menuLabel": "Menu", "closeLabel": "Close" } }
 ]

package/components/hero/meta.json

@@ -42,6 +42,7 @@
   "props": {
     "heading": {
       "type": "string",
+      "label": "Heading",
       "required": true,
       "description": "The main heading (Cover/Group heading, Elementor heading, Divi header title)."
     },
@@ -52,39 +53,51 @@
         "2"
       ],
       "default": "1",
+      "content": false,
       "description": "Heading level: 1 when the hero opens the page, 2 when the page already has an h1."
     },
     "eyebrow": {
       "type": "string",
+      "label": "Eyebrow",
       "description": "Short line above the heading."
     },
     "lead": {
       "type": "text",
+      "label": "Lead",
       "description": "Paragraph under the heading."
     },
     "actions": {
       "type": "array",
+      "label": "Buttons",
       "items": {
         "type": "object",
         "fields": {
           "label": {
             "type": "string",
-            "required": true
+            "label": "Label",
+            "required": true,
+            "description": "The button text."
           },
           "href": {
             "type": "url",
-            "required": true
+            "label": "Link",
+            "required": true,
+            "description": "Where the button goes: a page on this site or a full address."
           },
           "newTab": {
-            "type": "boolean"
+            "type": "boolean",
+            "label": "Open in a new tab",
+            "description": "Open the link in a new tab (an external site the reader should not leave for)."
           },
           "style": {
             "type": "select",
+            "label": "Style",
             "options": [
               "primary",
               "secondary",
               "ghost"
-            ]
+            ],
+            "description": "primary for the main action, secondary or ghost for the ones beside it."
           }
         }
       },
@@ -92,26 +105,35 @@
     },
     "image": {
       "type": "object",
+      "label": "Image",
       "fields": {
         "src": {
           "type": "image",
-          "required": true
+          "label": "Image",
+          "required": true,
+          "description": "The image file."
         },
         "alt": {
           "type": "string",
-          "required": true
+          "label": "Image description",
+          "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
         },
         "width": {
-          "type": "integer"
+          "type": "integer",
+          "label": "Width",
+          "description": "Width in pixels, as uploaded."
         },
         "height": {
-          "type": "integer"
+          "type": "integer",
+          "label": "Height",
+          "description": "Height in pixels, as uploaded."
         }
       },
       "description": "Hero image; loaded first (the page's largest image)."
     },
     "id": {
       "type": "string",
+      "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
     }
   },

package/components/logo-cloud/LogoCloud.astro

@@ -0,0 +1,69 @@
+---
+// A grid of client or partner logos, each optionally linked, under an
+// optional heading.
+import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
+import Section, { type Tone } from '../_shared/Section.astro'
+import { imageOf, type ImageSource } from '../_shared/image'
+
+const cloud = tv({
+  slots: {
+    heading: 'mb-8 text-center text-sm font-semibold tracking-wide uppercase opacity-80',
+    list: 'grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3',
+    item: 'flex items-center justify-center',
+    logo: 'h-10 w-auto max-w-full object-contain transition duration-200',
+  },
+  variants: {
+    columns: {
+      '2': { list: 'sm:grid-cols-2' },
+      '3': { list: 'md:grid-cols-3' },
+      '4': { list: 'md:grid-cols-4' },
+    },
+    style: {
+      plain: {},
+      // Colour comes back on hover and on keyboard focus of the logo's link.
+      grayscale: { logo: 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0 group-focus-visible:opacity-100 group-focus-visible:grayscale-0' },
+    },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { heading: 'opacity-100' } },
+  },
+  defaultVariants: { columns: '4', style: 'plain', tone: 'default' },
+})
+
+interface Item {
+  /** The logo's address (or, until 0.7, an `ImageInput`). */
+  image: ImageSource
+  /** The company's name, read in place of the logo. */
+  imageAlt: string
+  href?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  items: Item[]
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'plain' | 'grayscale' | undefined
+  tone?: Tone | undefined
+  id?: string | undefined
+}
+
+const { heading, items, columns, style, tone, id } = Astro.props
+const s = cloud({ columns, style, tone })
+const headingId = heading && id ? `${id}-title` : undefined
+---
+<Section tone={tone} id={id} aria-labelledby={headingId}>
+  {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+  <ul class={s.list()}>
+    {items.map(item => {
+      const image = imageOf(item.image, item.imageAlt)
+      if (!image) return null
+      const logo = <KitImage image={image} sizes="160px" class={s.logo()} />
+      return (
+        <li class={s.item()}>
+          {item.href
+            ? <a href={item.href} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4">{logo}</a>
+            : <span class="group">{logo}</span>}
+        </li>
+      )
+    })}
+  </ul>
+</Section>

package/components/logo-cloud/fixtures.json

@@ -0,0 +1,139 @@
+[
+  {
+    "name": "four-plain",
+    "props": {
+      "heading": "Trusted by",
+      "items": [
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 1",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 2"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 3",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 4"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 5",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 6"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 7",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 8"
+        }
+      ]
+    }
+  },
+  {
+    "name": "three-grayscale-muted",
+    "props": {
+      "heading": "Our partners",
+      "items": [
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 1",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 2"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 3",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 4"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 5",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 6"
+        }
+      ],
+      "columns": "3",
+      "style": "grayscale",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "two-inverse",
+    "props": {
+      "items": [
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 1",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 2"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 3",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 4"
+        }
+      ],
+      "columns": "2",
+      "tone": "inverse"
+    }
+  },
+  {
+    "name": "accent",
+    "props": {
+      "heading": "Featured in",
+      "items": [
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 1",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 2"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 3",
+          "href": "https://example.com"
+        },
+        {
+          "image": "/kit-fixtures/logo.svg",
+          "imageAlt": "Company 4"
+        }
+      ],
+      "tone": "accent",
+      "style": "grayscale"
+    }
+  }
+]

package/components/logo-cloud/meta.json

@@ -0,0 +1,107 @@
+{
+  "id": "logo-cloud",
+  "name": "Logo cloud",
+  "description": "A grid of client or partner logos, each optionally linked, under an optional heading (\"Trusted by\").",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "KitImage.astro",
+    "Section.astro",
+    "image.ts",
+    "types.ts"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "4",
+      "description": "Logos per row on wide screens; two on phones, three on tablets."
+    },
+    "style": {
+      "options": [
+        "plain",
+        "grayscale"
+      ],
+      "default": "plain",
+      "description": "plain: logos in their own colours. grayscale: muted grey, full colour on hover or focus."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Line above the logos (Trusted by, Our partners)."
+    },
+    "items": {
+      "type": "array",
+      "label": "Logos",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "image": {
+            "type": "image",
+            "label": "Logo",
+            "required": true,
+            "description": "The logo file."
+          },
+          "imageAlt": {
+            "type": "string",
+            "label": "Name",
+            "required": true,
+            "description": "The company's name, read in place of the logo."
+          },
+          "href": {
+            "type": "url",
+            "label": "Link",
+            "description": "The company's site, when the logo links there."
+          }
+        }
+      },
+      "description": "The logos, in order (a Gutenberg gallery or columns of logos, Elementor image carousel/gallery of logos, Divi images)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/gallery"
+    ],
+    "elementor": [
+      "elementor/image-gallery",
+      "elementor/image-carousel"
+    ],
+    "divi": [
+      "divi/et_pb_gallery"
+    ]
+  },
+  "a11y": "A list of logos; each logo's text is the company's name, and a linked logo is one link named by it. The section is labelled by its heading.",
+  "pattern": {
+    "summary": "row of small logos, often linked",
+    "signals": [
+      "4+ images",
+      "small images",
+      "little or no text",
+      "optional heading"
+    ]
+  }
+}

package/components/newsletter/meta.json

@@ -30,11 +30,13 @@
   "props": {
     "action": {
       "type": "url",
+      "label": "Form address",
       "required": true,
       "description": "The provider's hosted form endpoint (Mailchimp *.list-manage.com/subscribe/post, Kit app.kit.com/forms/<n>/subscriptions, MailerLite assets.mailerlite.com/jsonp/<n>/forms/<n>/subscribe, Brevo *.sibforms.com/serve/, Buttondown buttondown.com/api/emails/embed-subscribe/). At migration the engine reads it from the source form element (`dom:form@action`) into the section's content, where it stays editable in Studio; it never passes through the fact pack or a model."
     },
     "provider": {
       "type": "select",
+      "label": "Email provider",
       "options": [
         "mailchimp",
         "kit",
@@ -48,44 +50,54 @@
     },
     "emailName": {
       "type": "string",
+      "label": "Email field name",
       "description": "Field name for the address when the provider is other or names it differently."
     },
     "askName": {
       "type": "boolean",
+      "label": "Ask for a name",
       "default": false,
       "description": "Ask for a first name too, when the provider takes one (the source form had a name field)."
     },
     "heading": {
       "type": "string",
+      "label": "Heading",
       "description": "Section heading."
     },
     "intro": {
       "type": "text",
+      "label": "Introduction",
       "description": "A line or two about the newsletter."
     },
     "note": {
       "type": "string",
+      "label": "Note",
       "description": "Small print under the form (privacy, frequency)."
     },
     "emailLabel": {
       "type": "string",
+      "content": false,
       "description": "ui-strings newsletter.email."
     },
     "nameLabel": {
       "type": "string",
+      "content": false,
       "description": "ui-strings newsletter.name."
     },
     "submitLabel": {
       "type": "string",
+      "content": false,
       "description": "ui-strings newsletter.submit."
     },
     "newTab": {
       "type": "boolean",
       "default": true,
+      "content": false,
       "description": "Open the provider's confirmation page in a new tab (the reader keeps the site)."
     },
     "id": {
       "type": "string",
+      "content": false,
       "description": "Section id, unique per page (two sign-ups on one page need two ids): the heading gets `<id>-title`, the inputs `<id>-email`/`<id>-name`."
     }
   },

package/components/pricing/Pricing.astro

@@ -0,0 +1,94 @@
+---
+// Price plans side by side: a name, a price and what it includes, with a
+// button each. The featured plan is raised and carries a badge, so it stands
+// out by more than its colour. Each plan's features are a markdown list,
+// rendered at build time.
+import { tv } from 'tailwind-variants'
+import Button from '../_shared/Button.astro'
+import Section, { type Tone } from '../_shared/Section.astro'
+import { renderMarkdown } from '../../../lib/markdown'
+
+const pricing = tv({
+  slots: {
+    header: 'mx-auto mb-10 flex max-w-2xl flex-col items-center gap-3 text-center',
+    heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
+    intro: 'text-lg opacity-80',
+    list: 'grid items-stretch gap-6 sm:grid-cols-2',
+    plan: 'relative flex flex-col gap-5 rounded-card border border-line bg-surface p-6 text-ink md:p-8',
+    badge: 'absolute -top-3 left-6 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-ink',
+    name: 'text-lg [font-weight:var(--font-weight-heading,600)]',
+    price: 'flex items-baseline gap-1',
+    amount: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight',
+    period: 'text-sm opacity-75',
+    description: 'text-pretty opacity-80',
+    features: 'prose-site prose max-w-none text-current prose-ul:pl-5 prose-li:my-1',
+    action: 'mt-auto pt-2',
+  },
+  variants: {
+    columns: {
+      '2': { list: 'mx-auto max-w-4xl' },
+      '3': { list: 'lg:grid-cols-3' },
+      '4': { list: 'lg:grid-cols-4' },
+    },
+    tone: { default: {}, muted: { plan: 'border-transparent' }, inverse: { plan: 'border-transparent' }, accent: { intro: 'opacity-100', plan: 'border-transparent', badge: 'bg-ink text-surface' } },
+  },
+  defaultVariants: { columns: '3', tone: 'default' },
+})
+
+interface Plan {
+  name: string
+  price: string
+  period?: string | undefined
+  description?: string | undefined
+  /** What the plan includes, as a markdown list. */
+  features?: string | undefined
+  ctaLabel?: string | undefined
+  ctaHref?: string | undefined
+  featured?: boolean | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  plans: Plan[]
+  /** Badge on the featured plan. */
+  featuredLabel?: string | undefined
+  columns?: '2' | '3' | '4' | undefined
+  tone?: Tone | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, plans, featuredLabel = 'Most popular', columns, tone, id } = Astro.props
+const s = pricing({ columns, tone })
+const headingId = heading && id ? `${id}-title` : undefined
+const features = await Promise.all(plans.map(plan => renderMarkdown(plan.features)))
+---
+{plans.length > 0 && (
+  <Section tone={tone} 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()}>
+      {plans.map((plan, i) => (
+        <li class={s.plan({ class: plan.featured ? 'ring-2 ring-accent shadow-lg md:-my-2 md:py-10' : undefined })}>
+          {plan.featured && <p class={s.badge()}>{featuredLabel}</p>}
+          <h3 class={s.name()}>{plan.name}</h3>
+          <p class={s.price()}>
+            <span class={s.amount()}>{plan.price}</span>
+            {plan.period && <span class={s.period()}>{plan.period}</span>}
+          </p>
+          {plan.description && <p class={s.description()} data-kit-text>{plan.description}</p>}
+          {features[i] && <div class={s.features()} set:html={features[i]} />}
+          {plan.ctaLabel && plan.ctaHref && (
+            <div class={s.action()}>
+              <Button action={{ label: plan.ctaLabel, href: plan.ctaHref, style: plan.featured ? 'primary' : 'ghost' }} class="w-full" />
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  </Section>
+)}

package/components/pricing/fixtures.json

@@ -0,0 +1,6 @@
+[
+  {"name": "three-featured", "props": {"id": "pricing", "heading": "Pricing", "intro": "Start free, upgrade when the team grows.", "plans": [{"name": "Free", "price": "$0", "period": "/month", "description": "For one person and one site.", "features": "- 1 project\n- Git-backed content\n- Community support", "ctaLabel": "Start free", "ctaHref": "/signup/"}, {"name": "Pro", "price": "$12", "period": "/month", "description": "For freelancers.", "features": "- 5 projects\n- Media library\n- Email support", "ctaLabel": "Choose Pro", "ctaHref": "/signup/?plan=pro", "featured": true}, {"name": "Team", "price": "$29", "period": "/month", "description": "For studios and teams.", "features": "- Unlimited projects\n- Reviews and roles\n- Priority support", "ctaLabel": "Choose Team", "ctaHref": "/signup/?plan=team"}]}},
+  {"name": "two-muted", "props": {"columns": "2", "tone": "muted", "featuredLabel": "Best value", "plans": [{"name": "Monthly", "price": "€15", "period": "per month", "features": "- Cancel anytime", "ctaLabel": "Subscribe", "ctaHref": "/buy/monthly/"}, {"name": "Yearly", "price": "€150", "period": "per year", "features": "- Two months free\n- **Priority** support", "ctaLabel": "Subscribe", "ctaHref": "/buy/yearly/", "featured": true}]}},
+  {"name": "four-inverse", "props": {"columns": "4", "tone": "inverse", "heading": "Plans", "plans": [{"name": "Solo", "price": "$0", "features": "- 1 site"}, {"name": "Pro", "price": "$12", "period": "/mo", "features": "- 5 sites", "featured": true, "ctaLabel": "Buy", "ctaHref": "/buy/"}, {"name": "Team", "price": "$29", "period": "/mo", "features": "- 20 sites"}, {"name": "Enterprise", "price": "On request", "description": "Custom terms.", "ctaLabel": "Contact us", "ctaHref": "/contact/"}]}},
+  {"name": "accent", "props": {"tone": "accent", "heading": "One price", "plans": [{"name": "Studio", "price": "$49", "period": "once", "features": "- Everything", "ctaLabel": "Buy now", "ctaHref": "/buy/", "featured": true}, {"name": "Support", "price": "$9", "period": "/month", "features": "- Updates and help", "ctaLabel": "Add support", "ctaHref": "/buy/support/"}]}}
+]