Marketing Design System

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.

Prerequisites

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

Table of contents

• Marketing Design System
• Prerequisites
• Table of contents
• Getting Started
• Installation
• Usage
• Contributing
• Git commit description
• Versioning
• Authors

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

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'],
};

Usage

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
};

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Make sure to have node version 16 and yarn installed
4. create a new .env file (details will be DMed)
5. run yarn to install all required dependencies yarn install
6. run yarn start local server yarn storybook
7. Add your changes: git add .
8. Commit your changes: git commit -am 'Add some feature'
9. Push to the branch: git push origin my-new-feature
10. Submit a pull request
11. Update Package version and publish npm publish

Git Commit description

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

Versioning

We use SemVer for versioning.

Authors

• Sebastian Figg - Initial project planning and development

• Mathew Goss - Inital project planning and design specs