Usage

• Install package

npm i diag-design-system

• Import DDS & icons in main.ts

import DDS from 'diag-design-system';
import 'diag-design-system/icons/style.css';

Vue.use(DDS);

• Use in component

<d-button>Primary Button</d-button>

Publish new version

• Commit & push code changes
• Build

npm run build-rollup

• Update package version number (https://docs.npmjs.com/updating-your-published-package-version-number), for example:

npm version patch

• Publish

npm publish

• Push code changes (package.json)

Description

Diag Design System. Sharing component for cross of consumer app

Project using typescript so when trying to implement component you must put lang='ts' to <script> tag for example

    <script lang='ts'>
        // Your component implementation
    </script>

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your unit tests

yarn run test:unit

Lints and fixes files

yarn run lint

Run story book

Storybook will run on port 6006

yarn run storybook

Build story book

yarn run build-storybook

Vs-code settings sample

{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modificationsIfAvailable",
    "editor.formatOnType": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.eslint.fixAll": true,
    },
    "editor.cursorSmoothCaretAnimation": true
}

Customize configuration

See Configuration Reference.