@onclass-tech-learning/design-system v1.0.0-beta.19

technologies used

• 💚 Vuejs  - The Intuitive Vue Framework
• 🔅 webpack  - bundle your scripts, images and more!
• 🃏 Jest  -  Unit/Snapshot Testing
• 🧩 Commitlint  -  helps your team adhering to a commit convention.
• 🙉 sass  -  CSS with superpowers
• 🛰️ Theo  -  Theo is an abstraction for transforming and formatting Design Tokens.

Usage

• yarn install - This installs the project dependencies
• yarn storybook - This runs the storybook to preview the components
• yarn build:storybook - This runs the storybook build
• yarn build:tokens - This runs the token build
• yarn build:lib - This runs the build of the components and styles
• yarn watch:tokens - this command listens for changes in tokens
• yarn jest - Run all linting and unit tests before committing.
• yarn jest -o - Run only the tests that have changed.
• yarn jest -u - Update all of the snapshot tests.
• yarn lint - Run lint in code.

Install

npm i @onclass-tech-learning/design-system

Usage

//import in main.js
import { createApp } from 'vue';
import App from './App.vue';

import onclass from '@onclass-tech-learning/design-system';
import '@onclass-tech-learning/design-system/dist/onclass-design-system.css';

createApp(App).use(onclass).mount('#app');

// how to use tokens and themes
import { tokens, themes } from '@onclass-tech-learning/design-system';

// change default theme
this.$loadTheme('base'); // or dark

List of Components

• Accordion
• Avatar
• Alerts
• Badge
• Buttons
• Card
• Chips
• Circular Progress
• Col
• Container
• Checkbox
• Dialog
• Divider
• Empty states
• Header
• Input Autocomplete
• Input Checkbox
• Input Color Picker
• Input Date Picker
• Input Data Time Picker
• Input File
• Input Number
• Input Password
• Input Radio
• Input Select
• Input Slider
• Input Switch
• Input Text
• Input Textarea
• Input Toggle
• Input OTP
• Icons
• Link
• Menus
• Navbar
• Navigation
• Pagination
• Placeholder
• Popover
• ProgressBar
• Rating
• Row
• Search bar
• Snackbar
• Steps
• Sidebar
• Table
• Tags
• Tabs
• Tooltip

Commit types

License

All code are copyright onclass and may not be used or reproduced without explicit permission.