lion-make 0.1.0 → 0.3.0

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.1.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",