@kolkrabbi/kol-styleguide 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",

package/src/BrandAssets.jsx

@@ -3,8 +3,8 @@ import { ContentCollection, FullscreenOverlay, Graphic, GRAPHIC_RAW, Table } fro
 import PageSection from '@kolkrabbi/kol-framework/src/PageSection.jsx'
 import AssetTable from './AssetTable.jsx'
 import AssetCard from './AssetCard.jsx'
-import { BrandAvatar } from './SocialMocks.jsx'
-import { BusinessCardBack, BusinessCardFront, EmailSignature, Envelope, Letterhead } from './StationeryMocks.jsx'
+import { BrandAvatar, PostEditorial, PostPhoto, StoryPhoto } from './SocialMocks.jsx'
+import { BusinessCardBack, BusinessCardFront, EmailSignature, Envelope, Letterhead, LetterheadB } from './StationeryMocks.jsx'
 import BrandMark from './BrandMark.jsx'
 import { Prose, SectionIndex } from './BrandBook.jsx'
 import {
@@ -30,6 +30,9 @@ const graphicRows = (category, names = []) => names.map((name) => {
   }
 })
 
+/* the drawn social mocks a template may name instead of a photo (kol-website's Social page, 2026-10-14) */
+const SOCIAL_MOCKS = { PostPhoto, PostEditorial, StoryPhoto }
+
 /* square preview tile with its category / name — kol-website's GraphicCard */
 function GraphicCard({ category, name, polarity = 'dark' }) {
   const bg = polarity === 'dark' ? 'bg-surface-inverse' : 'bg-surface-primary'
@@ -150,12 +153,31 @@ export default function BrandAssets({ brand, Logo, logoSources }) {
                 </div>
                 <div className="col-span-2"><AssetCard><Letterhead mark={mark(marks.letter, { style: { height: '100%', width: 'auto' } })} info={info} /></AssetCard></div>
               </div>
+              {/* the second letterhead, its own row (kol-website's Stationery page): `stationery.letterheadB: true` */}
+              {brand?.stationery?.letterheadB && (
+                <div className="kol-grid mt-12">
+                  <div className="col-span-2">
+                    <AssetCard caption="Letterhead, A4 [B]"><LetterheadB mark={mark(marks.letter, { style: { display: 'inline-block', height: 48, width: 'auto' } })} info={info} /></AssetCard>
+                  </div>
+                </div>
+              )}
             </PageSection>
           )
           case 'social': return (
             <PageSection key={s.key} {...head}>
               <ContentCollection cols={3} className="mt-8 items-start">
-                {brand.social.templates.map(({ caption, ratio, src }) => (
+                {brand.social.templates.map(({ caption, ratio, src, mock }) => mock ? (
+                  /* A DRAWN MOCK (BrandAssetsSocialMocksAndLetterheadB, kol-website 2026-10-27): `mock` names one of
+                     kol-styleguide's social mocks, or is a node; it carries the brand's logomark itself, so no
+                     overlay. `ratio` boxes a mock that does not size itself (PostEditorial), as kol-website does. */
+                  <AssetCard key={caption ?? String(mock)} caption={caption}>
+                    {(() => {
+                      const Mock = typeof mock === 'string' ? SOCIAL_MOCKS[mock] : null
+                      const node = Mock ? <Mock mark={mark(marks.avatar)} /> : mock
+                      return ratio ? <div className="overflow-hidden rounded-sm" style={{ aspectRatio: ratio }}>{node}</div> : node
+                    })()}
+                  </AssetCard>
+                ) : (
                   <AssetCard key={caption ?? src} caption={caption}>
                     <div className="relative overflow-hidden" style={{ aspectRatio: ratio }}>
                       <img src={src} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover" />