MyMzansi Design Kit

A comprehensive component framework for building modern web applications with Lit elements. The MyMzansi Design Kit provides a complete set of accessible, customizable web components following modern design principles.

🚀 Features

• Modern Web Components: Built with Lit for optimal performance and compatibility
• Accessible by Default: All components follow WCAG guidelines
• TypeScript Support: Full TypeScript definitions included
• Customizable: Extensive theming and styling options
• Tree Shakeable: Import only the components you need
• Framework Agnostic: Works with any framework or vanilla JavaScript

📦 Installation

npm install @mymzansi/design-kit

🎯 Quick Start

1. Import Components

import '@mymzansi/design-kit/elements/button';
import '@mymzansi/design-kit/elements/icon';
import '@mymzansi/design-kit/styles.css';

2. Use in HTML

<mz-button variant="primary" size="md">
  Click me
</mz-button>

<mz-icon icon-name="heart" size="lg"></mz-icon>

🧩 Components

Elements

| Component | Tag | Description | |-----------|-----|-------------| | Button | <mz-button> | Interactive button with multiple variants | | Icon | <mz-icon> | SVG icon component with size options | | Checkbox | <mz-checkbox> | Form checkbox with validation states | | Accordion | <mz-accordion> | Collapsible content sections | | Breadcrumb | <mz-breadcrumb> | Navigation breadcrumb trail | | Chip | <mz-chip> | Small labeled elements | | Alert | <mz-alert> | Notification and status messages |

Groups

| Component | Tag | Description | |-----------|-----|-------------| | Card | <mz-card> | Content card with media and metadata |

🎨 Styling

CSS Custom Properties

All components support CSS custom properties for theming:

:root {
  --mz-primary-color: #007bff;
  --mz-secondary-color: #6c757d;
  --mz-border-radius: 4px;
  --mz-font-family: 'Inter', sans-serif;
}

Design Tokens

Import design tokens for consistent styling:

@import '@mymzansi/design-kit/design-tokens';

📚 API Documentation

Button Component

<mz-button
  variant="primary|secondary"
  size="sm|md|lg"
  disabled
  loading
  icon="icon-name"
  icon-alignment="left|right"
>
  Button Text
</mz-button>

Events:

• mz-button-click: Fired when button is clicked

Icon Component

<mz-icon
  icon-name="icon-name"
  size="xs|sm|md|lg|xl"
  width="24"
  height="24"
  color="#000000"
></mz-icon>

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Clone the repository
git clone <repository-url>
cd component-framework

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Run tests
npm test

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Submit a pull request

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🆘 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

🗺️ Roadmap

• [ ] Additional form components (input, select, textarea)
• [ ] Navigation components
• [ ] Advanced theming system
• [ ] Storybook documentation
• [ ] Automated accessibility testing

Built with ❤️ by the MyMzansi Team