lion-make 0.2.0 → 0.3.0

package/guidelines/content-types/overview.md

@@ -8,52 +8,109 @@ Content types are predefined design patterns. Each content type belongs to exact
 2. **What is the purpose of this content?** → determines the specific type within the category.
 
 ```
-Is this for the top of every page (logo, nav)?
-  → Header zone → [header content types](./header/overview.md)
+Is this for the top of every page (logo, nav, CTAs)?
+  → Header zone → [header/overview.md](./header/overview.md)
 
-Is this the primary visual/headline area?
-  → Hero zone → [hero content types](./hero/overview.md)
+Is this the primary visual/headline area of the page?
+  → Hero zone → [hero/overview.md](./hero/overview.md)
 
-Is this informational, promotional, or a form in the body of the page?
-  → General zone → [general content types](./general/overview.md)
+Is this informational, promotional, interactive, or a form in the body of the page?
+  → General zone → [general/overview.md](./general/overview.md)
 
-Is this legal, compliance, or disclosure content?
-  → Footer zone → [footer content types](./footer/overview.md)
+Is this a quick-links bar above the footer?
+  → Anklet zone → Anklet component
+
+Is this legal, compliance, nav, or disclosure content in the bottom of the page?
+  → Footer zone → [footer/overview.md](./footer/overview.md)
 ```
 
+---
+
 ## Content Type Catalog by Zone
 
-### Header Zone (header section only)
+### Header Zone
 
-| Content Type | Component | Description |
-|---|---|---|
-| Corporate Universal Header | `CorporateUniversalHeader` | Blue bar with state selector and logo |
-| Global Header Bar | `GlobalHeaderBar` | White bar with logo, underwriter info, CTAs |
+7 content types — placed inside structural bars (`CorporateUniversalHeader`, `GlobalHeaderBar`).
+
+| Content Type | Component | Typical bar | Required |
+|---|---|---|---|
+| Call to Action | `HeaderCTA` | GlobalHeaderBar | No |
+| Logo | `HeaderLogo` | CorporateUniversalHeader or GlobalHeaderBar | Yes — one per page |
+| Product | `HeaderProduct` | GlobalHeaderBar | No — product DLPs only |
+| Section Navigation | `HeaderSectionNavigation` | Below GlobalHeaderBar | No — section hubs only |
+| Section Title | `HeaderSectionTitle` | GlobalHeaderBar | No |
+| Top Level Navigation | `TopLevelNavigation` | GlobalHeaderBar | Yes — one per page |
+| Underwriter | `HeaderUnderwriter` | CorporateUniversalHeader | Varies — required by compliance on product pages |
+
+→ Full detail: [header/overview.md](./header/overview.md)
 
-### Hero Zone (hero section only)
+---
 
-| Content Type | Component | Variants |
+### Hero Zone
+
+4 content types — one per page. Choose based on page goal.
+
+| Content Type | Component | When to use |
 |---|---|---|
-| Hero | `Hero` | `full-bleed`, `split`, `minimal` |
+| CTA Hero Block | `CTAHeroBlock` | Conversion goal (product DLPs, campaigns) |
+| Hero Block | `HeroBlock` | Informational (section hubs, About, resources) |
+| Multi Hero | `MultiHero` | Multiple products/messages (home, category hubs) |
+| Not Available Hero Block | `NotAvailableHeroBlock` | Product unavailable in user's state |
+
+→ Full detail + decision tree: [hero/overview.md](./hero/overview.md)
+
+---
 
 ### General Zone (Primary Column, Sideburn, Outro)
 
-| Content Type | Component | Allowed zones |
-|---|---|---|
-| CTA | `CTA` | Primary Column, Sideburn, Outro |
-| Call-Out | `CallOut` | Primary Column, Sideburn, Outro |
-| RTBs | `RTBs` | Primary Column, Sideburn, Outro |
-| Confidence Tags | `ConfidenceTags` | Primary Column, Sideburn, Outro |
-| Lead Form | `LeadForm` | Primary Column, Outro only (not Sideburn) |
-| Rich Text | `RichText` | Primary Column, Sideburn, Outro |
+37 content types. Zone availability varies — not all types are valid in Sideburn or Outro. See [general/overview.md](./general/overview.md) for the full zone availability matrix.
+
+| Group | Content Types |
+|---|---|
+| **Forms** | `LeadForm`, `MultiStepLeadForm`, `EmailCalloutBlock`, `OptIn` |
+| **CTAs** | `CTA`, `SimpleCTABlock`, `CallOut` |
+| **Value props (RTBs)** | `RTBs`, `RTBDescriptive`, `RTBHighlight`, `RTBDynamic` |
+| **Trust & social proof** | `ConfidenceTags`, `MultiTestimonial`, `PullQuote`, `WAHFU` |
+| **Media** | `ContentImageBlock`, `FullSizeImageWithHighlightBox`, `EmbeddedVideoBlock` |
+| **Products & content** | `ProductBlock`, `CrossSellCardBlock`, `ResourceSpotlight`, `BasicContentBlock` |
+| **Reference & structure** | `AccordionBlock`, `SideMenuExplorer`, `TableBlock`, `DecorativeListBlock` |
+| **Urgency** | `LastChanceBlock`, `SpeedBump` |
+| **Prose & text** | `BodyTextCopyBlock`, `RichText`, `PullQuote` |
+| **Layout & utility** | `SpacingBlock`, `HorizontalRule`, `BackgroundColorBlock`, `InlineMessage` |
+| **Platform-specific** | `AllBlogsPostBlock` (blog), `RecentBlogPostsBlock` (blog), `HotJobsBlock` (careers) |
 
-### Footer Zone (footer section only)
+→ Full detail + zone matrix: [general/overview.md](./general/overview.md)
 
-| Content Type | Component | Subsection |
+---
+
+### Anklet Zone
+
+Fixed structure — one component, no variants.
+
+| Content Type | Component | Description |
 |---|---|---|
-| Disclaimer | `Disclaimer` | Disclaimer subsection |
-| Disclosure | `Disclosure` | Disclosure subsection |
-| Compliance Block | `ComplianceBlock` | Compliance subsection |
+| Anklet | `Anklet` | Horizontal quick-links bar above the footer |
+
+The `Anklet` component is placed outside any `<Section>` wrapper, between the General Content zone and the Footer zone.
+
+---
+
+### Footer Zone
+
+7 content types with a mandatory render order.
+
+| Order | Content Type | Component | Description |
+|---|---|---|---|
+| 1 | Links & Social | `LinksAndSocial` | Footer nav columns + social icons |
+| 2 | Disclaimers | `Disclaimer` | Static legal copy (always visible) |
+| 3 | Disclosures | `Disclosure` | Toggle starts collapsed |
+| 3 | Disclosure Toggle Open | `DisclosureToggleOpen` | Toggle starts expanded |
+| 4 | Compliance | `ComplianceBlock` | Item Number / Material ID |
+| 5 | Legal Links | `LegalLinks` | Privacy, Terms, Copyright — always last |
+
+→ Full detail + placement example: [footer/overview.md](./footer/overview.md)
+
+---
 
 ## Zone Exclusivity Rule
 

package/guidelines/discovery.md

@@ -0,0 +1,158 @@
+# Discovery
+
+This file teaches you how to navigate lion-make. Read it before looking at any other file. It tells you where to find component guidance, source code, and tokens — and how to verify your decisions before building.
+
+**Do not guess. Every component, prop, and token in this system is documented. If you cannot find it here, it does not exist in lion-make.**
+
+---
+
+## Step 1 — Identify the Zone
+
+Before choosing any component, identify which zone the content belongs to. Zone determines everything else.
+
+```
+Ask: Where on the page does this content live?
+  ├── Top of every page (logo, nav, CTA bar)?        → Header zone
+  ├── Primary visual area directly below the header? → Hero zone
+  ├── Body of the page (content, forms, media)?      → General zone
+  ├── Quick-links bar just above the footer?         → Anklet zone
+  └── Bottom of page (legal, nav columns, copyright)?→ Footer zone
+```
+
+**Authoritative zone table:** `guidelines/composition/zones.md`
+If you are unsure which zone applies, read that file first. It lists every zone, every template, and every allowed content type.
+
+---
+
+## Step 2 — Find the Right Content Type
+
+Once you know the zone, find the content type catalog for that zone.
+
+| Zone | Overview file |
+|---|---|
+| Header | `guidelines/content-types/header/overview.md` |
+| Hero | `guidelines/content-types/hero/overview.md` |
+| General | `guidelines/content-types/general/overview.md` |
+| Footer | `guidelines/content-types/footer/overview.md` |
+
+Each overview file has a full list of available content types, a decision tree for choosing between them, and links to the individual type files.
+
+For the individual type detail (props, usage example, design tokens):
+
+```
+guidelines/content-types/[zone]/[type-name].md
+
+Examples:
+  guidelines/content-types/hero/cta-hero-block.md
+  guidelines/content-types/general/accordion-block.md
+  guidelines/content-types/footer/disclosures.md
+  guidelines/content-types/header/top-level-navigation.md
+```
+
+**Never use a content type that does not have a file in this folder.** If a type name does not appear in an overview file, it does not exist in this system.
+
+---
+
+## Step 3 — Find the Source Code
+
+Every content type has a corresponding React component in `src/components/`. The folder mirrors the zone structure.
+
+```
+src/components/
+  header/      → HeaderCTA, HeaderLogo, HeaderProduct, HeaderSectionNavigation,
+                 HeaderSectionTitle, TopLevelNavigation, HeaderUnderwriter,
+                 CorporateUniversalHeader, GlobalHeaderBar
+  hero/        → CTAHeroBlock, HeroBlock, MultiHero, NotAvailableHeroBlock
+  general/     → 37 components (AccordionBlock, RTBs, LeadForm, etc.)
+  footer/      → LinksAndSocial, Disclaimer, Disclosure, DisclosureToggleOpen,
+                 ComplianceBlock, LegalLinks
+  layout/      → PageForehead, PageSideburn, Section, Container, Anklet
+```
+
+**File naming:** PascalCase matching the component name exactly.
+```
+src/components/hero/CTAHeroBlock.tsx
+src/components/general/AccordionBlock.tsx
+src/components/footer/DisclosureToggleOpen.tsx
+```
+
+All components are re-exported from the package root. Import from `lion-make`, not from the file path directly:
+```tsx
+import { CTAHeroBlock, AccordionBlock } from 'lion-make'   ✓
+import { CTAHeroBlock } from 'lion-make/src/components/hero/CTAHeroBlock'  ✗
+```
+
+---
+
+## Step 4 — Find Design Tokens
+
+All tokens are CSS custom properties. They live in `src/tokens/`. Never hardcode values — always use a token.
+
+| Category | File | Key tokens |
+|---|---|---|
+| Color | `src/tokens/colors.css` | `--color-brand`, `--color-teal`, `--color-text`, `--color-gray-*`, `--color-line` |
+| Typography | `src/tokens/typography.css` | `--h1-font-size` through `--h6-font-size`, `--font-weight-*`, `--font-family-sans-serif` |
+| Spacing | `src/tokens/metrics.css` | `--padding-*`, `--edge-padding`, `--Grid-gutter-size`, `--border-radius-*`, `--border-width-*` |
+| Breakpoints | `src/tokens/breakpoints.css` | `--bp-xs` through `--bp-xl`, custom media queries |
+| Z-index | `src/tokens/z-index.css` | Layer stacking order |
+| Utilities | `src/tokens/make-utilities.css` | Responsive utility classes |
+
+Human-readable token docs: `guidelines/foundations/[category].md`
+
+---
+
+## Step 5 — Verify Before Building
+
+Before generating any component, verify these three things:
+
+**1. The content type exists.**
+Check `guidelines/content-types/[zone]/overview.md`. If the type is not listed there, do not use it.
+
+**2. The props are correct.**
+Check `guidelines/content-types/[zone]/[type].md` for the props table. Then cross-reference the TypeScript interface in `src/components/[zone]/[ComponentName].tsx`. The `.tsx` file is the ground truth for prop names and types.
+
+**3. The zone placement is valid.**
+Check `guidelines/composition/zones.md`. Confirm the content type is listed as allowed in the target zone. Sideburn and Outro zones do not exist in the Forehead template.
+
+---
+
+## Preventing Hallucination
+
+Common failure modes and how to avoid them:
+
+| Risk | Prevention |
+|---|---|
+| Using a component name that doesn't exist | Only use components listed in `content-types/[zone]/overview.md` |
+| Using wrong prop names | Read the props table in the type's `.md` file; verify against the `.tsx` interface |
+| Placing a content type in the wrong zone | Check `composition/zones.md` before placing anything |
+| Hardcoding a color or size | Look up the token in `src/tokens/` — if no token exists, flag it |
+| Using a platform-specific component on the wrong platform | `AllBlogsPostBlock` and `RecentBlogPostsBlock` are blog-only; `HotJobsBlock` is careers-only |
+| Stacking multiple hero types | Only one hero content type per page |
+| Nesting a Section inside another Section | Sections are top-level — they do not nest |
+
+---
+
+## Quick Lookup: Common Tasks
+
+| Task | Where to look |
+|---|---|
+| "What can I put in the hero?" | `guidelines/content-types/hero/overview.md` |
+| "Which hero type should I use?" | `guidelines/content-types/hero/overview.md` → decision tree |
+| "What props does CTAHeroBlock take?" | `guidelines/content-types/hero/cta-hero-block.md` + `src/components/hero/CTAHeroBlock.tsx` |
+| "What general content types work in Sideburn?" | `guidelines/content-types/general/overview.md` → zone matrix |
+| "What's the brand blue?" | `src/tokens/colors.css` → `--color-brand` |
+| "What's the base font size?" | `src/tokens/typography.css` → `--body-font-size` |
+| "How do I set up a page?" | `guidelines/setup.md` → minimal page example |
+| "Can I use Sideburn template here?" | `guidelines/composition/templates.md` |
+| "Is this a hard rule or a guideline?" | `guidelines/composition/constraints.md` |
+| "Where does the Anklet go?" | Between `<Section zone="primary-column">` and `<Section zone="footer">` — outside any Section |
+| "How are footers ordered?" | `guidelines/content-types/footer/overview.md` → render order table |
+| "What are the header bars?" | `CorporateUniversalHeader` (thin top bar), `GlobalHeaderBar` (main nav bar) — see `guidelines/content-types/header/overview.md` |
+
+---
+
+## Icon Discovery
+
+No icon library is bundled in lion-make. Use inline SVGs or a separate icon package. See `guidelines/icon-discovery.md` for the current state and planned coverage.
+
+Social platform icons (used in `LinksAndSocial`) are implemented as CSS class hooks (`lion-icon--facebook`, etc.) — provide the icon rendering via your own icon system.

package/guidelines/setup.md

@@ -45,46 +45,120 @@ Components are organized by zone. Import only what you need.
 // Layout primitives (not content types)
 import { PageForehead, PageSideburn, Section, Container, Anklet } from 'lion-make'
 
-// Header zone components
+// Header zone — structural bars
 import { CorporateUniversalHeader, GlobalHeaderBar } from 'lion-make'
 
-// Hero zone components
-import { Hero } from 'lion-make'
-
-// General zone components (Primary Column, Sideburn, Outro)
-import { CTA, CallOut, RTBs, ConfidenceTags, LeadForm, RichText } from 'lion-make'
-
-// Footer zone components
-import { Disclaimer, Disclosure, ComplianceBlock } from 'lion-make'
+// Header zone — content types
+import {
+  HeaderCTA,
+  HeaderLogo,
+  HeaderProduct,
+  HeaderSectionNavigation,
+  HeaderSectionTitle,
+  TopLevelNavigation,
+  HeaderUnderwriter,
+} from 'lion-make'
+
+// Hero zone — content types
+import { CTAHeroBlock, HeroBlock, MultiHero, NotAvailableHeroBlock } from 'lion-make'
+
+// General zone — content types (Primary Column, Sideburn, Outro)
+import {
+  RTBs, RTBDescriptive, RTBHighlight, RTBDynamic,
+  CTA, SimpleCTABlock, CallOut,
+  AccordionBlock, BackgroundColorBlock, BasicContentBlock, BodyTextCopyBlock,
+  ConfidenceTags, ContentImageBlock, CrossSellCardBlock, DecorativeListBlock,
+  EmailCalloutBlock, EmbeddedVideoBlock, FullSizeImageWithHighlightBox,
+  HorizontalRule, InlineMessage, LastChanceBlock, LeadForm, MultiStepLeadForm,
+  MultiTestimonial, OptIn, ProductBlock, PullQuote, ResourceSpotlight,
+  RichText, SideMenuExplorer, SpacingBlock, SpeedBump, TableBlock, WAHFU,
+  // Platform-specific
+  AllBlogsPostBlock, RecentBlogPostsBlock, HotJobsBlock,
+} from 'lion-make'
+
+// Footer zone — content types
+import {
+  LinksAndSocial,
+  Disclaimer,
+  Disclosure,
+  DisclosureToggleOpen,
+  ComplianceBlock,
+  LegalLinks,
+} from 'lion-make'
 ```
 
-## Minimal Page Example
+## Minimal Page Example (Forehead template)
 
 ```tsx
-import { PageForehead, Section, Container, GlobalHeaderBar, Hero, CTA, Disclaimer, Anklet } from 'lion-make'
+import {
+  PageForehead,
+  Section,
+  Container,
+  CorporateUniversalHeader,
+  GlobalHeaderBar,
+  HeaderLogo,
+  HeaderUnderwriter,
+  TopLevelNavigation,
+  HeaderCTA,
+  CTAHeroBlock,
+  RichText,
+  Anklet,
+  LinksAndSocial,
+  Disclaimer,
+  ComplianceBlock,
+  LegalLinks,
+} from 'lion-make'
 
 export function Page() {
   return (
     <PageForehead>
+
       <Section zone="header">
-        <GlobalHeaderBar logoSrc="/logo.svg" logoAlt="Company" />
+        <CorporateUniversalHeader>
+          <HeaderLogo src="/logo.svg" alt="Mutual of Omaha" href="/" />
+          <HeaderUnderwriter text="Underwritten by United of Omaha Life Insurance Company" />
+        </CorporateUniversalHeader>
+        <GlobalHeaderBar>
+          <TopLevelNavigation items={navItems} />
+          <HeaderCTA label="Get a quote" href="/quote" variant="button" />
+        </GlobalHeaderBar>
       </Section>
 
       <Section zone="hero">
-        <Hero variant="full-bleed" heading="Protect what matters" ctaLabel="Get a quote" ctaHref="/quote" />
+        <CTAHeroBlock
+          heading="Protect what matters most"
+          subheading="Affordable term life insurance."
+          ctas={[{ label: 'Get a free quote', href: '/quote', variant: 'primary' }]}
+          imageSrc="/hero.jpg"
+          imageAlt=""
+          layout="split-right"
+        />
       </Section>
 
       <Section zone="primary-column">
         <Container type="single">
-          <CTA type="button" label="Start for $0.99" href="/start" variant="primary" />
+          <RichText html="<p>Body content goes here.</p>" />
         </Container>
       </Section>
 
-      <Anklet links={[{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }]} />
+      <Anklet
+        links={[
+          { label: 'Life Insurance', href: '/life' },
+          { label: 'Medicare', href: '/medicare' },
+          { label: 'Find an Agent', href: '/agent-finder' },
+        ]}
+      />
 
       <Section zone="footer">
-        <Disclaimer text="Products underwritten by Mutual of Omaha Insurance Company." itemNumber="ICC20-TERM" />
+        <LinksAndSocial columns={footerColumns} socialLinks={socialLinks} />
+        <Disclaimer text="Products underwritten by Mutual of Omaha Insurance Company." />
+        <ComplianceBlock itemNumber="M37594_0524" />
+        <LegalLinks
+          copyrightText="© 2025 Mutual of Omaha Insurance Company"
+          links={legalLinks}
+        />
       </Section>
+
     </PageForehead>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lion-make",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Mondrian-based design system for Figma Make — zone-locked layout system with CSS design tokens and React component stubs.",
   "type": "module",
   "main": "./dist/lion-make.umd.cjs",