Septeo Vue Design System

A Vue.js implementation of the Septeo Design System, following atomic design methodology and maintaining consistency with the existing React and Angular implementations.

Overview

The Septeo Vue Design System is a library of reusable UI components built with Vue 3 and TypeScript. It provides a consistent and accessible user interface for Septeo applications, following the same design principles and tokens as the React and Angular implementations.

This implementation is part of the Septeo Design System family, which includes:

• React implementation (@react-design)
• Angular implementation (angular/projects/design-system)
• Vue implementation (@vue-design)

All implementations share the same design tokens, principles, and component APIs to ensure consistency across different frameworks.

Features

• Built with Vue 3 and TypeScript
• Follows atomic design methodology
• Consistent with the existing React and Angular implementations
• Includes Storybook documentation
• Fully tested components
• Accessible and responsive

Installation

npm install @septeo/vue-design

Usage

Import the styles

// In your main.js or main.ts file
import '@septeo/vue-design/dist/style.css';

Use components

<template>
  <div>
    <dss-button variant="primary">Click me</dss-button>
    <dss-radio label="Option 1" name="options" value="option1" v-model="selectedOption" />
    <dss-radio label="Option 2" name="options" value="option2" v-model="selectedOption" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button as DssButton, Radio as DssRadio } from '@septeo/vue-design';

const selectedOption = ref('option1');
</script>

Register globally

// In your main.js or main.ts file
import { createApp } from 'vue';
import App from './App.vue';
import DssComponents from '@septeo/vue-design';

const app = createApp(App);

// Register all components
Object.entries(DssComponents).forEach(([name, component]) => {
  app.component(`Dss${name}`, component);
});

app.mount('#app');

Component Structure

The design system follows atomic design methodology, organizing components into:

• Atoms: Basic building blocks (Button, Input, Radio, etc.)
• Molecules: Groups of atoms (Card, FormField, etc.)
• Organisms: Groups of molecules (Form, etc.)
• Templates: Page layouts
• Pages: Specific instances of templates

Available Components

Atoms

• Button: Action trigger with multiple variants and sizes
• Checkbox: Selection control for multiple options
• Radio: Selection control for single option from a group
• Input: Text input field with various types

Molecules

• Card: Container for related content and actions
• FormField: Wrapper for form inputs with label and helper text

Organisms

• Form: Container for form elements with submission handling

Design Tokens

The design system uses a set of design tokens for consistent styling:

• Colors: Primary, secondary, accent, and semantic colors
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale
• Borders: Border widths, radii, and styles
• Shadows: Box shadows and focus states
• Breakpoints: Responsive breakpoints

Color Palette

The design system uses a comprehensive color palette with semantic meaning:

• Blues: Primary brand colors (--blue-05 to --blue-80)
• Oranges: Accent colors (--orange-05 to --orange-80)
• Teals: Secondary colors (--teal-05 to --teal-90)
• Reds: Alert/Error colors (--red-05 to --red-90)
• Yellows: Warning colors (--yellow-05 to --yellow-100)
• Purples: Accent colors (--purple-05 to --purple-100)
• Grays: Neutral colors (--gray-05 to --gray-90)

Typography

• Font Families:

  • Base Font: Inter (sans-serif)
  • Heading Font: Poppins (sans-serif)

• Font Sizes:

  • XS: 10px
  • SM: 12px
  • Base: 14px
  • MD: 16px
  • LG: 18px
  • XL: 20px
  • 2XL: 22px
  • 3XL: 24px
  • 4XL: 28px
  • 5XL: 32px
  • 6XL: 56px

• Font Weights:

  • Regular: 400
  • Medium: 500
  • Semibold: 600
  • Bold: 700

Accessibility

All components are built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation
• Focus management
• Color contrast
• Screen reader support

Browser Support

The design system supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

Setup

# Clone the repository
git clone https://github.com/septeo/design-system.git

# Navigate to the Vue design system directory
cd design-system/vue-design

# Install dependencies
npm install

# Start Storybook
npm run storybook

Build

# Build the library
npm run build

# Build Storybook
npm run build-storybook

Testing

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

Contributing

Please see the CONTRIBUTING.md file for details on how to contribute to the design system.

License

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