MDX/LogoWrapper

Default

content

Large Size

Multiple Wrappers

Small Size

With Svg Placeholder

Component Source

logo-wrapper.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';
interface LogoWrapperProps {
  children: ComponentChildren;
}

/**
 * LogoWrapper component - White background container for brand logos
 * Used in BrandBlock to display brand logos with consistent styling
 */
export const LogoWrapper: FunctionComponent<LogoWrapperProps> = ({ children }) => {
  return <div className={'grid place-items-center w-full aspect-square bg-white'}>{children}</div>;
};

Story Source

logo-wrapper.stories.tsx

import { LogoWrapper } from './logo-wrapper';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * LogoWrapper Component
 *
 * A white background container for displaying brand logos consistently.
 * Features:
 * - Square aspect ratio
 * - White background for logo visibility
 * - Centered content with grid layout
 * - Used in BrandBlock component
 */
export const meta = {
  title: 'MDX/LogoWrapper',
};

export const controls: ControlsMap = {
  content: { type: 'text', default: 'BRAND' },
};

/**
 * Default - With placeholder content
 */
export const Default = {
  args: { content: 'BRAND' },
  render: ({ content }: { content: string }) => (
    <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 = () => (
  <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 = () => (
  <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 = () => (
  <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 = () => (
  <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>
);