This project is both the Storybook design system for LEAP Vue marketing components as well as the Vue components themselves. It was built to enable better ongoing management of the marketing component libary.
This project requires NodeJS (version 8 or later) and NPM. Node and NPM/Yarn are really easy to install. To make sure you have them available on your machine, try running the following command.
npm -v && node -v && yarn -v
- Marketing Design System
- Prerequisites
- Table of contents
- Getting Started
- Installation
- Usage
- Contributing
- Git commit description
- Versioning
- Authors
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
BEFORE YOU INSTALL: please read the prerequisites
Start by installing this to your project:
yarn add -D leap-design-system
OR NPM
npm install --save-dev leap-design-system
Next add the design system as a build-module in nuxt.config.js
// nuxt.config.js
export default {
buildModules: ['leap-design-system/nuxt'],
};
Directly use the libary components (prefixed with mds)
The following is a basic example of the use of the Banner component. Please see individual component documentation pages for detailed usage instructions.
<template>
<div>
<mds-banner />
<!-- OR -->
<MdsBanner />
</div>
</template>
Lastly you will also need to import the Main CSS file to your project
// nuxt.config.js
export default {
css: [''], //TODO
};
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Make sure to have node version 16 and yarn installed
- create a new .env file (details will be DMed)
- run yarn to install all required dependencies
yarn install
- run yarn start local server
yarn storybook
- Add your changes:
git add .
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
- Update Package version and publish
npm publish
refers to this link https://www.conventionalcommits.org/en/v1.0.0/
some of the example
style: adjust padding at components name
docs: component changes documentation
chore(release): 1.38.xx
We use SemVer for versioning.
-
Sebastian Figg - Initial project planning and development
-
Mathew Goss - Inital project planning and design specs