create-bearminion 0.0.0-stage → 1.1.0

package/template/src/components/organisms/NavBranch.astro

@@ -0,0 +1,61 @@
+---
+import type { Link } from 'bearminion'
+import { anchorAttrs } from '../../lib/link-attrs'
+import NavBranch from './NavBranch.astro'
+
+interface Props {
+  link: Link
+  fieldPath: string
+  depth: number
+  pathname: string
+  pills?: boolean
+}
+
+const { link, fieldPath, depth, pathname, pills = false } = Astro.props
+const children = link.children ?? []
+
+function isCurrent(href: string): boolean {
+  if (href.startsWith('#')) return false
+  const path = href.split('#')[0] || '/'
+  const current = pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname
+  return path === current
+}
+---
+
+<div class:list={[depth === 1 ? 'group/nav' : 'group/sub', 'relative', depth > 1 && 'w-full']}>
+  <a
+    {...anchorAttrs(link)}
+    data-field={`${fieldPath}.label`}
+    aria-current={isCurrent(link.href) ? 'page' : undefined}
+    aria-haspopup={children.length > 0 ? 'true' : undefined}
+    class:list={[
+      'text-muted transition-colors hover:text-fg',
+      depth === 1
+        ? ['text-[0.9375rem]', pills && 'inline-flex h-9 items-center rounded-full px-3.5 hover:bg-line']
+        : 'flex rounded-lg px-3 py-2 text-[0.875rem] hover:bg-line hover:text-fg',
+    ]}
+  >
+    {link.label}
+  </a>
+  {
+    children.length > 0 && (
+      <div
+        class:list={[
+          'absolute z-50 hidden min-w-48',
+          depth === 1 ? 'top-full left-0 pt-2 group-hover/nav:block group-focus-within/nav:block' : 'top-0 left-full pl-2 group-hover/sub:block group-focus-within/sub:block',
+        ]}
+      >
+        <div class="flex flex-col rounded-xl bg-surface p-2 shadow-[0_16px_40px_-24px_oklch(0.2_0.02_255/0.45)] ring-line">
+          {children.map((child, index) => (
+            <NavBranch
+              link={child}
+              fieldPath={`${fieldPath}.children.${index}`}
+              depth={depth + 1}
+              pathname={pathname}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+</div>

package/template/src/components/organisms/Navigation.astro

@@ -0,0 +1,32 @@
+---
+import type { Site } from './site-definition'
+import { cn } from '../../lib/cn'
+import NavBranch from './NavBranch.astro'
+
+interface Props {
+  site: Site
+  pathname: string
+  /** Slice of `site.header.links`. Omit `count` to take the rest. */
+  start?: number
+  count?: number
+  pills?: boolean
+  class?: string
+}
+
+const { site, pathname, start = 0, count, pills = false, class: className } = Astro.props
+const links = site.header.links.slice(start, count === undefined ? undefined : start + count)
+---
+
+<nav aria-label="Primary" class={cn('flex items-center', pills ? 'gap-1' : 'gap-8', className)}>
+  {
+    links.map((link, offset) => (
+      <NavBranch
+        link={link}
+        fieldPath={`header.links.${start + offset}`}
+        depth={1}
+        pathname={pathname}
+        pills={pills}
+      />
+    ))
+  }
+</nav>

package/template/src/components/organisms/Navigation.stories.ts

@@ -0,0 +1,25 @@
+import { site } from '../../stories/sample'
+import Navigation from './Navigation.astro'
+
+export default {
+  title: 'Organisms/Navigation',
+  component: Navigation,
+  argTypes: {
+    pathname: { control: 'select', options: ['/', '/about', '/about/'] },
+    site: { control: 'object' },
+  },
+}
+
+export const Home = {
+  args: {
+    site,
+    pathname: '/',
+  },
+}
+
+export const About = {
+  args: {
+    site,
+    pathname: '/about',
+  },
+}

package/template/src/components/organisms/site-definition.ts

@@ -0,0 +1,28 @@
+import { defineSite, type SiteOf } from 'bearminion'
+
+/**
+ * The site chrome of this theme: the header and footer layouts, how many buttons and columns they
+ * hold, and whether the footer has a badge. The editor builds its Header and Footer tabs from this,
+ * and `site.json` is validated against it. Header.astro and Footer.astro render each variant.
+ *
+ * It holds no `.astro` imports, so `astro.config.ts` and the editor can load it.
+ */
+export const siteDefinition = defineSite({
+  header: {
+    variants: ['bar', 'centered', 'floating'],
+    defaultVariant: 'bar',
+    maxActions: 2,
+    recommendedLinks: 4,
+  },
+  footer: {
+    variants: ['simple', 'columns', 'wordmark'],
+    defaultVariant: 'columns',
+    maxColumns: 3,
+    badge: true,
+  },
+})
+
+export type Site = SiteOf<typeof siteDefinition>
+
+export const headerVariants = siteDefinition.header.variants
+export const footerVariants = siteDefinition.footer.variants

package/template/src/components/sections/SectionList.astro

@@ -0,0 +1,53 @@
+---
+import type { Section } from './definitions'
+import { sectionComponents } from './registry'
+
+interface Props {
+  sections: Section[]
+  /** Site-wide motion. A section's own `motion` overrides this. */
+  motion?: boolean
+}
+
+const { sections, motion = true } = Astro.props
+const Hero = sectionComponents.hero
+const LogoStrip = sectionComponents.logoStrip
+const Features = sectionComponents.features
+const TextImage = sectionComponents.textImage
+const Stats = sectionComponents.stats
+const Testimonials = sectionComponents.testimonials
+const Pricing = sectionComponents.pricing
+const Faq = sectionComponents.faq
+const Cta = sectionComponents.cta
+const Contact = sectionComponents.contact
+---
+
+{
+  sections.map((section, index) => {
+    switch (section.type) {
+      case 'hero':
+        return <Hero section={section} index={index} motion={motion} />
+      case 'logoStrip':
+        return <LogoStrip section={section} index={index} motion={motion} />
+      case 'features':
+        return <Features section={section} index={index} motion={motion} />
+      case 'textImage':
+        return <TextImage section={section} index={index} motion={motion} />
+      case 'stats':
+        return <Stats section={section} index={index} motion={motion} />
+      case 'testimonials':
+        return <Testimonials section={section} index={index} motion={motion} />
+      case 'pricing':
+        return <Pricing section={section} index={index} motion={motion} />
+      case 'faq':
+        return <Faq section={section} index={index} motion={motion} />
+      case 'cta':
+        return <Cta section={section} index={index} motion={motion} />
+      case 'contact':
+        return <Contact section={section} index={index} motion={motion} />
+      default: {
+        const unreachable: never = section
+        return unreachable
+      }
+    }
+  })
+}

package/template/src/components/sections/contact/Contact.astro

@@ -0,0 +1,227 @@
+---
+import type { Section } from '../definitions'
+import Button from '../../atoms/Button.astro'
+import Emphasis from '../../atoms/Emphasis.astro'
+import Typography from '../../atoms/Typography.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+
+interface Props {
+  section: Extract<Section, { type: 'contact' }>
+  index: number
+  motion?: boolean
+}
+
+const { section, index, motion = true } = Astro.props
+const props = section.props
+const field = (path: string) => `sections.${index}.props.${path}`
+const reveal = section.motion ?? motion
+const formId = `contact-form-${section.id}`
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  {
+    section.variant === 'split' && (
+      <div class="section-container grid items-start gap-12 @min-[880px]:grid-cols-[minmax(22rem,0.85fr)_minmax(0,1.15fr)]" data-contact>
+        <div>
+          <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} field={field} />
+          {props.body && <Typography as="p" size="lead" color="muted" class="mt-5" data-field={field('body')} markdown={props.body} />}
+          {
+            props.details.length > 0 && (
+              <dl class="mt-8 flex flex-col">
+                {props.details.map((detail, detailIndex) => (
+                  <div class="grid grid-cols-[7rem_1fr] gap-4 border-t border-[var(--line)] py-4">
+                    <dt class="font-mono text-[0.75rem] tracking-[0.06em] text-muted uppercase" data-field={field(`details.${detailIndex}.label`)}>
+                      {detail.label}
+                    </dt>
+                    <dd data-field={field(`details.${detailIndex}.value`)}>{detail.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            )
+          }
+        </div>
+        <div class="rounded-panel bg-surface p-6 ring-line @min-[700px]:p-8">
+          <form id={formId} class="grid gap-4 @min-[700px]:grid-cols-2" data-contact-form action={props.action} method="post" novalidate>
+            <label class="flex flex-col gap-2 text-[0.8125rem]">
+              Name
+              <input class="bm-field" name="name" required autocomplete="name" />
+            </label>
+            <label class="flex flex-col gap-2 text-[0.8125rem]">
+              Email
+              <input class="bm-field" type="email" name="email" required autocomplete="email" />
+            </label>
+            {
+              props.topics.length > 0 && (
+                <label class="flex flex-col gap-2 text-[0.8125rem] @min-[700px]:col-span-2">
+                  Topic
+                  <select class="bm-field" name="topic" required>
+                    {props.topics.map((topic) => (
+                      <option value={topic}>{topic}</option>
+                    ))}
+                  </select>
+                </label>
+              )
+            }
+            <label class="flex flex-col gap-2 text-[0.8125rem] @min-[700px]:col-span-2">
+              Message
+              <textarea class="bm-field h-32 py-3" name="message" required></textarea>
+            </label>
+            <div class="@min-[700px]:col-span-2">
+              <Button type="submit">Send message</Button>
+              {props.note && <Typography as="p" size="small" color="muted" class="mt-3" data-field={field('note')} markdown={props.note} />}
+            </div>
+          </form>
+          <div data-contact-success hidden>
+            <p class="text-[1.5rem] font-semibold tracking-[-0.03em]">Message sent.</p>
+            {props.thanks && <Typography as="p" size="body" color="muted" class="mt-3" data-field={field('thanks')} markdown={props.thanks} />}
+            <Button type="button" variant="secondary" class="mt-6" data-contact-reset>
+              Send another
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  {
+    section.variant === 'card' && (
+      <div class="section-container" data-contact>
+        <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.body} introField="body" align="center" field={field} class="mx-auto max-w-2xl" />
+        <div class="mx-auto mt-10 max-w-[42rem] rounded-panel bg-surface p-6 ring-line @min-[700px]:p-8">
+          <form id={formId} class="grid gap-4 @min-[700px]:grid-cols-2" data-contact-form action={props.action} method="post" novalidate>
+            <label class="flex flex-col gap-2 text-[0.8125rem]">
+              Name
+              <input class="bm-field" name="name" required autocomplete="name" />
+            </label>
+            <label class="flex flex-col gap-2 text-[0.8125rem]">
+              Email
+              <input class="bm-field" type="email" name="email" required autocomplete="email" />
+            </label>
+            {
+              props.topics.length > 0 && (
+                <div class="@min-[700px]:col-span-2">
+                  <p class="mb-2 text-[0.8125rem]">Topic</p>
+                  <div class="flex flex-wrap gap-2" data-topics>
+                    {props.topics.map((topic, topicIndex) => (
+                      <button type="button" class="h-10 rounded-full px-4 text-[0.875rem] ring-line" data-topic aria-pressed={topicIndex === 0 ? 'true' : 'false'}>
+                        {topic}
+                      </button>
+                    ))}
+                  </div>
+                  <input type="hidden" name="topic" value={props.topics[0]} data-topic-input required />
+                </div>
+              )
+            }
+            <label class="flex flex-col gap-2 text-[0.8125rem] @min-[700px]:col-span-2">
+              Message
+              <textarea class="bm-field h-32 py-3" name="message" required></textarea>
+            </label>
+            <div class="@min-[700px]:col-span-2">
+              <Button type="submit" class="w-full">Send message</Button>
+              {props.note && <Typography as="p" size="small" color="muted" class="mt-3 text-center" data-field={field('note')} markdown={props.note} />}
+            </div>
+          </form>
+          <div data-contact-success hidden>
+            <p class="text-[1.5rem] font-semibold tracking-[-0.03em]">Message sent.</p>
+            {props.thanks && <Typography as="p" size="body" color="muted" class="mt-3" data-field={field('thanks')} markdown={props.thanks} />}
+            <Button type="button" variant="secondary" class="mt-6" data-contact-reset>
+              Send another
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  {
+    section.variant === 'minimal' && (
+      <div class="section-container" data-contact>
+        {
+          props.heading && (
+            <h2 class="max-w-[12ch] text-[clamp(2.75rem,1rem+6cqi,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
+              <Emphasis heading={props.heading} marks={props.marks} data-field={field('heading')} />
+            </h2>
+          )
+        }
+        <form id={formId} class="mt-10 grid gap-8 @min-[760px]:grid-cols-2" data-contact-form action={props.action} method="post" novalidate>
+          <label class="flex flex-col gap-2">
+            <span class="font-mono text-[0.75rem] tracking-[0.08em] text-muted uppercase">Name</span>
+            <input class="bm-underline" name="name" required autocomplete="name" />
+          </label>
+          <label class="flex flex-col gap-2">
+            <span class="font-mono text-[0.75rem] tracking-[0.08em] text-muted uppercase">Email</span>
+            <input class="bm-underline" type="email" name="email" required autocomplete="email" />
+          </label>
+          <label class="flex flex-col gap-2 @min-[760px]:col-span-2">
+            <span class="font-mono text-[0.75rem] tracking-[0.08em] text-muted uppercase">Message</span>
+            <textarea class="bm-underline" name="message" required rows="3"></textarea>
+          </label>
+          <div class="flex flex-wrap items-end justify-between gap-6 @min-[760px]:col-span-2">
+            {
+              props.details.length > 0 && (
+                <dl class="flex flex-wrap gap-x-8 gap-y-3">
+                  {props.details.map((detail, detailIndex) => (
+                    <div>
+                      <dt class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted uppercase" data-field={field(`details.${detailIndex}.label`)}>{detail.label}</dt>
+                      <dd class="mt-1" data-field={field(`details.${detailIndex}.value`)}>{detail.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              )
+            }
+            <Button type="submit">Send</Button>
+          </div>
+        </form>
+        <div data-contact-success hidden>
+          <p class="text-[clamp(2rem,1rem+3cqi,3.5rem)] leading-[0.95] font-semibold tracking-[-0.04em]">Message sent.</p>
+          {props.thanks && <Typography as="p" size="body" color="muted" class="mt-4" data-field={field('thanks')} markdown={props.thanks} />}
+          <Button type="button" variant="secondary" class="mt-6" data-contact-reset>
+            Send another
+          </Button>
+        </div>
+      </div>
+    )
+  }
+</SectionShell>
+
+<script>
+  function bindContact() {
+  document.querySelectorAll('[data-contact]').forEach((root) => {
+    if (!(root instanceof HTMLElement) || root.dataset.bound === 'true') return
+    root.dataset.bound = 'true'
+    const form = root.querySelector('[data-contact-form]')
+    const success = root.querySelector('[data-contact-success]')
+    const reset = root.querySelector('[data-contact-reset]')
+    const topicInput = root.querySelector('[data-topic-input]')
+    if (!(form instanceof HTMLFormElement) || !(success instanceof HTMLElement)) return
+
+    root.querySelectorAll('[data-topic]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        root.querySelectorAll('[data-topic]').forEach((item) => {
+          if (item instanceof HTMLButtonElement) item.setAttribute('aria-pressed', 'false')
+        })
+        if (chip instanceof HTMLButtonElement) chip.setAttribute('aria-pressed', 'true')
+        if (topicInput instanceof HTMLInputElement) topicInput.value = chip.textContent?.trim() ?? ''
+      })
+    })
+
+    form.addEventListener('submit', (event) => {
+      if (!form.reportValidity()) {
+        event.preventDefault()
+        return
+      }
+      if (form.getAttribute('action')) return
+      event.preventDefault()
+      form.hidden = true
+      success.hidden = false
+    })
+
+    reset?.addEventListener('click', () => {
+      form.reset()
+      form.hidden = false
+      success.hidden = true
+    })
+  })
+  }
+  bindContact()
+  document.addEventListener('bearminion:preview', bindContact)
+</script>

package/template/src/components/sections/contact/Contact.stories.ts

@@ -0,0 +1,16 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { sectionEntry } from '../../../stories/sample'
+import Contact from './Contact.astro'
+
+const entry = sectionEntry('contact')
+
+export default {
+  title: 'Sections/Contact',
+  component: Contact,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('contact'),
+}
+
+export const Home = {
+  args: { section: entry.section, index: entry.index, motion: false },
+}

package/template/src/components/sections/contact/definition.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod'
+import { defineSection, richTextSchema, textSchema, withEmphasis } from 'bearminion'
+import { accent, eyebrow, heading } from '../shared'
+import { contactWireframe } from './wireframe'
+
+export const contactVariants = ['split', 'card', 'minimal'] as const
+
+export const contactDetailSchema = z
+  .object({
+    label: textSchema,
+    value: textSchema,
+  })
+  .strict()
+
+export const contactSchema = withEmphasis({
+  eyebrow,
+  heading,
+  body: richTextSchema.optional(),
+  details: z.array(contactDetailSchema),
+  topics: z.array(textSchema),
+  note: richTextSchema.optional(),
+  thanks: richTextSchema.optional(),
+  /** Form endpoint. The starter still shows a success state and does not post anywhere by default. */
+  action: z.string().min(1).optional(),
+})
+
+export type ContactDetail = z.infer<typeof contactDetailSchema>
+export type ContactProps = z.infer<typeof contactSchema>
+
+export const contact = defineSection({
+  type: 'contact',
+  label: 'Contact',
+  description: 'Contact details beside a form.',
+  schema: contactSchema,
+  defaults: {
+    eyebrow: 'Contact',
+    heading: 'Get in touch.',
+    marks: accent('Get in touch.', 'in touch.'),
+    body: 'Tell people what they can contact you about and when they will hear back.',
+    details: [{ label: 'Email', value: 'hello@example.com' }],
+    topics: ['General'],
+    note: 'We only use your details to reply to you.',
+    thanks: 'Thanks, your message is on its way.',
+  },
+  variants: contactVariants,
+  defaultVariant: 'split',
+  optional: { props: ['eyebrow', 'heading', 'body', 'note', 'thanks'] },
+  counts: { details: { recommended: 3 }, topics: { recommended: 3 } },
+  wireframe: contactWireframe,
+})

package/template/src/components/sections/contact/wireframe.ts

@@ -0,0 +1,15 @@
+import { defineWireframe } from 'bearminion'
+
+/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
+export const contactWireframe = defineWireframe([
+  [8, 16, 30, 8, 'title'],
+  [8, 30, 34, 4, 'text'],
+  [8, 38, 28, 4, 'text'],
+  [8, 56, 22, 4, 'text'],
+  [8, 64, 26, 4, 'text'],
+  [52, 12, 40, 76, 'card'],
+  [56, 20, 32, 9, 'block'],
+  [56, 34, 32, 9, 'block'],
+  [56, 48, 32, 18, 'block'],
+  [56, 72, 14, 9, 'button'],
+])