BrandSquareLogo

Brand logo centered in a white (or monochrome) square container, looked up by slug.

Media & Icons

Default (light-bg brand)

Monochrome (footer style)

Monochrome (dark-bg brand, inverted)

Unknown slug (renders nothing)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the production BrandSquareLogo resolver (issue #2062 — replaces // the retired components/shared/brand-square-logo.stories.tsx mirror, whose // component had no production importer). Resolves SVGs via // src/lib/svg/icons.tsx (the sprite-based <use> registry, epic #2057), NOT // the Astro-side components/svg/brand-logo-registry.ts chain the old mirror // used. Real brand slugs from src/data/brands.mjs — 'oxi' has a light-bg SVG // (the common case), 'takazudo' is the one brand flagged `bg-zd-literal-black` // (the dark-bg monochrome-inversion branch). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import BrandSquareLogo from './brand-square-logo'; const meta: StoryMeta = { title: 'BrandSquareLogo', category: 'Media & Icons', description: 'Brand logo centered in a white (or monochrome) square container, looked up by slug.', usage: `import BrandSquareLogo from '@/src/components/brand-square-logo';\n\n<BrandSquareLogo slug="oxi" className="w-[48px]" />`, }; export default meta; export const Default = defineStory({ name: 'Default (light-bg brand)', render: () => ( <div className="w-[80px]"> <BrandSquareLogo slug="oxi" svgClassName="w-5/6" className="w-full" /> </div> ), }); export const MonochromeFooter = defineStory({ name: 'Monochrome (footer style)', render: () => ( <div className="w-[80px] bg-zd-black p-hgap-xs"> <BrandSquareLogo slug="oxi" svgClassName="w-5/6" className="w-full" monochrome /> </div> ), }); export const MonochromeDarkBgBrand = defineStory({ name: 'Monochrome (dark-bg brand, inverted)', render: () => ( <div className="w-[80px] bg-zd-black p-hgap-xs"> <BrandSquareLogo slug="takazudo" svgClassName="bg-zd-literal-black" className="w-full" monochrome /> </div> ), }); export const UnknownSlug = defineStory({ name: 'Unknown slug (renders nothing)', render: () => ( <div className="w-[80px] border border-dashed border-zd-white/40 text-center text-xs text-zd-white"> <BrandSquareLogo slug="not-a-real-brand" className="w-full" /> <span>（何も描画されません）</span> </div> ), });