BrandBlock

Layout wrapper for brand/designer intro sections, reused by every Brand* MDX component plus Saucer and Denbi. Renders IntroBlock with the logo/image as the media slot — SVG logos get a white LogoWrapper square, raster images (already backgrounded) render directly via `noLogoWrapper`.

Article Blocks

SVG logo (LogoWrapper)

Raster (noLogoWrapper)

No eyebrow

// Story for BrandBlock — surface-panel layout wrapper for brand/designer/ // bundled-accessory intro sections (epic #1836, wave 2, #1838). Renders // IntroBlock internally; these variants cover the SVG-logo path (LogoWrapper), // the raster-image path (noLogoWrapper), and the no-eyebrow path. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BrandBlock } from './brand-block'; import { BrandOxiInstruments } from '@/components/svg'; import { ResponsiveImage } from '@/components/responsive-image'; import { P } from '@/components/article/p'; import { Ul } from '@/components/article/ul'; import { A } from '@/components/article/a'; const meta: StoryMeta = { title: 'BrandBlock', category: 'Article Blocks', description: 'Layout wrapper for brand/designer intro sections, reused by every Brand* MDX component plus Saucer and Denbi. Renders IntroBlock with the logo/image as the media slot — SVG logos get a white LogoWrapper square, raster images (already backgrounded) render directly via `noLogoWrapper`.', usage: `import { BrandBlock } from '@/components/mdx/brand-block';\n\n<BrandBlock title="About the Brand" logoComponent={<BrandLogo />} eyebrow="About the Brand">\n 紹介文…\n</BrandBlock>`, }; export default meta; /** SVG logo — wrapped in the white LogoWrapper square (the BrandGuideGeneric path) */ export const SvgLogo = defineStory({ name: 'SVG logo (LogoWrapper)', render: () => ( <BrandBlock title="About OXI Instruments" logoComponent={<BrandOxiInstruments className="w-4/5" />} eyebrow="About the Brand" > OXI Instruments is a modular synthesizer and MIDI controller maker based in Spain. <Ul> <li> <A href="https://oxiinstruments.com/">OXI Instruments Website</A> </li> </Ul> </BrandBlock> ), }); /** Raster image — no white square, image already carries its own background (the Saucer path) */ export const RasterNoLogoWrapper = defineStory({ name: 'Raster (noLogoWrapper)', render: () => ( <BrandBlock title="About the Designer" logoComponent={ <ResponsiveImage slug="saucer" alt="Logo: SAUCER" sizes="(max-width: 740px) 260px, 320px" /> } noLogoWrapper eyebrow="About the Designer" > A solo designer based in Tokyo, bringing a distinctive design flavor to modular-synth-related products. <Ul> <li> <A href="https://x.com/saucerjp">X: @saucerjp</A> </li> </Ul> </BrandBlock> ), }); /** No eyebrow — the bundled-accessory bonus block (the Denbi path), eyebrow prop simply unset */ export const NoEyebrow = defineStory({ name: 'No eyebrow', render: () => ( <BrandBlock title="Bonus: Modular Accessory Set Included" logoComponent={ <ResponsiveImage slug="denbi" alt="Logo: 電氣美術研究會" sizes="(max-width: 740px) 260px, 320px" /> } noLogoWrapper > A modular accessory set is bundled with this product — patch cables, power cables, and more. <Ul> <li> <A href="https://ears-modular.com/">電氣美術研究會</A> </li> </Ul> </BrandBlock> ), });