Marketing Design System (MDS)

A themed React component library for marketing — dark mode by default, light mode via data-theme="light".

Stack

• React 18 + TypeScript
• Sass Modules
• Storybook 8 + Vite

Getting started

npm install
npm run storybook     # dev server at localhost:6006
npm run build-storybook

Build outputs

npm run npm:build:lib
npm run npm:build:storybook
npm run npm:build:all

• npm run npm:build:lib builds the consumable package into dist/.
• npm run npm:build:storybook builds the Storybook display site into storybook-static/.
• npm run npm:build:all builds both outputs.

The dist/ folder is the package output intended for consumption.

The storybook-static/ folder is the Storybook presentation build.

Publish scripts

npm run npm:pack:check
npm run npm:version:patch
npm run npm:publish

• npm:pack:check previews the npm tarball before publishing.
• npm:version:patch|minor|major bumps the package version.
• npm:publish publishes the package.
• npm:publish:public publishes a scoped package with public access.
• npm:whoami confirms the logged-in npm account.

Remove "private": true from package.json before publishing, otherwise npm will refuse to publish the package.

Package usage

import { Animate, Accordion, AccordionItem, BackToTop, Button, Checkbox, Dropdown, Footer, Hamburger, Headline, Icon, Navbar, SmallIcon, SSOButton, Subhead, Tabs, TextField } from 'mds-storybook';
import 'mds-storybook/style.css';

Theming

Tokens live in src/styles/tokens.scss. All colors are CSS custom properties — switch themes by toggling html[data-theme="light"].

Components

Animate

• animation — AnimationName
• duration? — number
• delay? — number
• children — ReactElement

Accordion

• items — AccordionItemData[]
• autoCollapse? — boolean
• className? — string

AccordionItem

• title — string
• children — ReactNode
• defaultOpen? — boolean
• isOpen? — boolean
• onToggle? — () => void

Headline

• size? — HeadlineSize
• as? — HeadingElement
• children — ReactNode
• className? — string

Subhead

• size? — SubheadSize
• as? — HeadingElement
• children — ReactNode
• className? — string

Button

• variant? — ButtonVariant
• platform? — ButtonPlatform
• size? — ButtonSize
• icon? — IconName
• iconPosition? — 'leading' | 'trailing'
• disabled? — boolean
• onClick? — () => void
• children — ReactNode
• className? — string

Checkbox

• size? — CheckboxSize
• indicatorPosition? — CheckboxIndicatorPosition
• indeterminate? — boolean
• children? — ReactNode
• className? — string
• extends InputHTMLAttributes<HTMLInputElement>

SSOButton

• provider — SSOProvider
• label? — string
• fullWidth? — boolean
• extends ButtonHTMLAttributes<HTMLButtonElement>

Icon

• name — IconName
• size? — IconSize
• className? — string

SmallIcon

• name — SmallIconName
• size? — number
• className? — string

Dropdown

• options — DropdownOption[]
• value? — string | string[]
• onChange? — (value: string | string[]) => void
• multiple? — boolean
• label? — string
• placeholder? — string
• required? — boolean
• disabled? — boolean
• clearable? — boolean
• supportingText? — string
• size? — DropdownSize
• id? — string
• className? — string

TextField

• label? — string
• required? — boolean
• error? — string
• supportingText? — string
• variant? — TextFieldVariant
• className? — string
• extends InputHTMLAttributes<HTMLInputElement>

BackToTop

• show? — boolean
• label? — string

Footer

• showBackToTop? — boolean
• logos? — LogoItem[]
• legalStatement? — string
• externalLinks? — ExternalLink[]
• socialLinks? — SocialLink[]

Hamburger

• isOpen? — boolean
• onClick? — () => void

Navbar

• navItems? — NavItem[]
• breakpoint? — NavbarBreakpoint
• sticky? — boolean
• children? — ReactNode

Tabs

• items — TabItem[]
• value? — string
• defaultValue? — string
• onChange? — (value: string) => void
• size? — 'S' | 'L'
• className? — string