LogoWrapper

White background container for displaying brand logos consistently. Square aspect ratio, white background for logo visibility, centered content with grid layout — used in BrandBlock component.

Media & Icons

Default

Content

With SVG placeholder

Small size

Large size

Multiple wrappers

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { LogoWrapper } from './logo-wrapper'; const meta: StoryMeta = { title: 'LogoWrapper', category: 'Media & Icons', description: 'White background container for displaying brand logos consistently. Square aspect ratio, white background for logo visibility, centered content with grid layout — used in BrandBlock component.', usage: `import { LogoWrapper } from '@/components/mdx/logo-wrapper';\n\n<LogoWrapper>\n <img src="/brand-logo.svg" alt="Brand" />\n</LogoWrapper>`, }; export default meta; /** Scene args for the interactive Default variant — `content` drives LogoWrapper's children text. */ interface LogoWrapperArgs { content: string; } /** Default - With placeholder content */ export const Default = defineStory<LogoWrapperArgs>({ name: 'Default', controls: [{ type: 'text', prop: 'content', label: 'Content', defaultValue: 'BRAND' }], render: ({ content = 'BRAND' } = {}) => ( <div className="w-[200px]"> <LogoWrapper> <div className="text-zd-black text-center"> <div className="text-2xl font-bold">{content}</div> </div> </LogoWrapper> </div> ), }); /** With SVG placeholder */ export const WithSvgPlaceholder = defineStory({ name: 'With SVG placeholder', render: () => ( <div className="w-[200px]"> <LogoWrapper> <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="80" height="80" fill="#333" rx="8" /> <text x="40" y="45" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold"> LOGO </text> </svg> </LogoWrapper> </div> ), }); /** Small size variant */ export const SmallSize = defineStory({ name: 'Small size', render: () => ( <div className="w-[100px]"> <LogoWrapper> <div className="text-zd-black text-center text-sm font-bold">BRAND</div> </LogoWrapper> </div> ), }); /** Large size variant */ export const LargeSize = defineStory({ name: 'Large size', render: () => ( <div className="w-[300px]"> <LogoWrapper> <div className="text-zd-black text-center"> <div className="text-4xl font-bold">MUTABLE</div> <div className="text-lg">INSTRUMENTS</div> </div> </LogoWrapper> </div> ), }); /** Multiple wrappers side by side */ export const MultipleWrappers = defineStory({ name: 'Multiple wrappers', render: () => ( <div className="flex gap-hgap-md"> <div className="w-[120px]"> <LogoWrapper> <div className="text-zd-black text-center text-sm font-bold">MAKE NOISE</div> </LogoWrapper> </div> <div className="w-[120px]"> <LogoWrapper> <div className="text-zd-black text-center text-sm font-bold">MUTABLE</div> </LogoWrapper> </div> <div className="w-[120px]"> <LogoWrapper> <div className="text-zd-black text-center text-sm font-bold">4MS</div> </LogoWrapper> </div> </div> ), });