diff --git a/package.json b/package.json
index 55fd6b363e..ec0a2d57c9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"bootstrap": "lerna bootstrap && lerna link",
"bootstrap:clean": "run-s clean bootstrap",
"build": "yarn build:all",
- "build:all": "run-s build:icons build:core build:react build:angular build:angularjs",
+ "build:all": "run-s build:icons build:core build:react build:angular build:angularjs build:vue",
"build:angular": "cd ./angular && yarn build:lib",
"build:angularjs": "cd ./angularjs && yarn build",
"build:core": "cd ./core && yarn build:lib",
@@ -17,35 +17,40 @@
"build:react": "cd ./react && yarn build:lib",
"build:sinks": "cd ./core && yarn build:app",
"build:utils": "cd ./utils && yarn build",
+ "build:vue": "cd ./vue && yarn build",
"build:data": "rimraf ./data && node ./tools/generateComponentsData.js",
"serve:core": "cd ./core && yarn open:dist",
"ci:publish": "yarn release",
- "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular",
+ "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular ci:test:vue",
"ci:test:core": "cd ./core && yarn test",
"ci:test:core:percy": "cd ./core && yarn test:percy",
"ci:test:icons": "cd ./icons && yarn test",
"ci:test:react": "cd ./react && yarn test:CI",
"ci:test:angular": "cd ./angular && yarn test:CI",
"ci:test:percy": "run-s ci:test:icons ci:test:core:percy ci:test:react ci:test:angular",
+ "ci:test:vue": "cd ./vue && yarn test:CI",
"cypress:verify": "cypress verify",
"clean": "rimraf node_modules/ **/node_modules/",
"commit": "npx git-cz",
"data": "run-s build:data data:pushToDB",
"data:pushToDB": "node ./tools/postComponentsToDB.js",
- "lint:all": "run-p lint:icons lint:core lint:react lint:angular",
+ "lint:all": "run-p lint:icons lint:core lint:react lint:angular lint:vue",
"lint:angular": "cd ./angular && yarn lint",
"lint:icons": "cd ./icons && yarn lint",
"lint:core": "cd ./core && yarn lint",
"lint:react": "cd ./react && yarn lint",
+ "lint:vue": "cd ./vue && yarn lint",
"release": "./tools/release.sh",
- "start:all": "run-p start:core start:angular start:react",
+ "start:all": "run-p start:core start:angular start:react start:vue",
"start:angular": "cd ./angular && yarn start",
"start:core": "cd ./core && yarn start",
"start:react": "cd ./react && yarn start",
- "test:all": "run-p test:angular test:react",
+ "start:vue": "cd ./vue && yarn start",
+ "test:all": "run-p test:angular test:react test:vue",
"test:react": "cd ./react && yarn test",
"test:angular": "cd ./angular && yarn test",
"test:angularjs": "cd ./angularjs && yarn test",
+ "test:vue": "cd ./vue && yarn test",
"postinstall": "rimraf angular/src/lib/node_modules/rxjs && yarn build:utils"
},
"devDependencies": {
diff --git a/vue/CHANGELOG.md b/vue/CHANGELOG.md
old mode 100755
new mode 100644
diff --git a/vue/CONTRIBUTING.md b/vue/CONTRIBUTING.md
new file mode 100755
index 0000000000..3ab385b70a
--- /dev/null
+++ b/vue/CONTRIBUTING.md
@@ -0,0 +1,65 @@
+
+# Contributing
+
+##### We'd love for you to contribute to our source code and to make Momentum UI Vue even better than it is today! Below are the guidelines to follow.
+
+## Table of Contents
+
+- [Questions, Issues or Ideas](../CONTRIBUTING.md#question)
+ - [Issues](../CONTRIBUTING.md#issue)
+ - [Features](../CONTRIBUTING.md#feature)
+- [Requirements](../CONTRIBUTING.md#requirements)
+- [Development Environment](../CONTRIBUTING.md#environment)
+- [Running the project locally](#running)
+- [Adding a new component](#component)
+- [Testing](#testing)
+- [Code Guidelines](#rules)
+- [Commit Guidelines](../CONTRIBUTING.md#commit)
+- [Submitting a Code Review](../CONTRIBUTING.md#code-review)
+
+## Running the project locally
+
+* Run the play script which will build and watch the library, then serve it at localhost:5000
+ * `yarn start` from the vue (momentum-ui/vue) directory
+ * `yarn start:vue` from the root (momentum-ui) directory
+* You can access the playground `localhost:5000`
+
+## Adding a new component
+1. cd into the vue directory: `cd vue/`
+2. Use yarn scripts to create yourComponent. Replace `` with the kebab-cased name of the new component.
+ * Create Component: `yarn new `
+3. Start the app and the new component will now be availble in the Playground.
+
+### Your components directory should look like this:
+``` bash
+└── lib
+ └── sample # component directory
+ ├── sample.vue # component file
+ ├── index.js # barrel file
+ ├── examples # examples directory
+ | ├── example-sample-default.vue # default example component
+ | └── index.json # examples barrel file
+ └── tests # tests directory
+ ├── sample.spec.js # component unit test
+ └── __snapshots__ # snapshots directory (will be generated Jest)
+ └── sample.spec.js.snap # snapshots file (will be generated by Jest)
+```
+**You can also reference the sample component at `src/lib/sample/`
+
+## Testing
+* In the `/tests/` directory, ensure that you add tests to cover all of the component code.
+* Run the test and ensure that all tests are passing by running:
+ * `yarn test` from the vue (momentum-ui/vue) directory
+ * `yarn test:vue` from the root (momentum-ui) directory
+
+
+## Coding Guidelines
+
+### Vue TypeScript
+
+We follow the vue [Style Guide](https://vue.io/guide/styleguide)
+
+
+## License
+
+By contributing your code to the `@momentum-ui/vue` GitHub repository, you agree to license your contribution under the MIT license.
diff --git a/vue/package.json b/vue/package.json
index 7e1bb25900..0761b9c879 100755
--- a/vue/package.json
+++ b/vue/package.json
@@ -10,14 +10,18 @@
],
"typings": "types/index.d.ts",
"scripts": {
+ "build": "yarn build:lib",
"build:lib": "node tools/bin/build-lib.js",
"build:example": "node tools/bin/build-example.js",
"clean": "rimraf lib",
"deploy:build": "yarn run build:lib",
"dist": "yarn run clean && yarn run build:lib && yarn run lint && webpack --config tools/webpack.conf.js && webpack --config tools/webpack.common.js && webpack --config tools/webpack.component.js",
"lint": "eslint src/**/* --quiet",
- "play": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js",
- "test": "jest"
+ "new": "node tools/bin/new.js",
+ "start": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js",
+ "test": "jest",
+ "test:aot": "yarn build --prod",
+ "test:CI": "yarn test:aot && jest --maxWorkers=2 --bail"
},
"homepage": "http://momentum.design",
"repository": {
diff --git a/vue/src/lib/sample/examples/example-sample-default.vue b/vue/src/lib/sample/examples/example-sample-default.vue
new file mode 100644
index 0000000000..7ba13bd655
--- /dev/null
+++ b/vue/src/lib/sample/examples/example-sample-default.vue
@@ -0,0 +1,11 @@
+
+
+ Default
+
+
+
+
diff --git a/vue/src/lib/sample/examples/index.json b/vue/src/lib/sample/examples/index.json
new file mode 100644
index 0000000000..85c9a026fe
--- /dev/null
+++ b/vue/src/lib/sample/examples/index.json
@@ -0,0 +1,3 @@
+[
+ "example-sample-default"
+]
diff --git a/vue/src/lib/sample/index.js b/vue/src/lib/sample/index.js
old mode 100755
new mode 100644
diff --git a/vue/src/lib/sample/sample.vue b/vue/src/lib/sample/sample.vue
old mode 100755
new mode 100644
diff --git a/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap b/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap
new file mode 100644
index 0000000000..a0d93dda97
--- /dev/null
+++ b/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sample should match snapshot 1`] = ``;
diff --git a/vue/src/lib/sample/tests/sample.spec.js b/vue/src/lib/sample/tests/sample.spec.js
new file mode 100644
index 0000000000..80cb16e87d
--- /dev/null
+++ b/vue/src/lib/sample/tests/sample.spec.js
@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import Sample from '../sample.vue';
+
+describe('Sample', () => {
+ it('should match snapshot', () => {
+ const wrapper = shallowMount(Sample);
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/vue/tools/bin/new.js b/vue/tools/bin/new.js
index 0a345ae0e5..28e9fbf580 100755
--- a/vue/tools/bin/new.js
+++ b/vue/tools/bin/new.js
@@ -42,24 +42,41 @@ export default {
},
{
filename: path.join('./tests', `${componentname}.spec.js`),
- content: `import { createTest, destroyVM } from '../util';
-import ${ComponentName} from 'src/lib/${componentname}';
+ content: `import { shallowMount } from '@vue/test-utils';
+import ${ComponentName} from '../${componentname}';
describe('${ComponentName}', () => {
- let vm;
- afterEach(() => {
- destroyVM(vm);
- });
-
- it('create', () => {
- vm = createTest(${ComponentName}, true);
- expect(vm.$el).to.exist;
+ it('should match snapshot', () => {
+ const wrapper = shallowMount(${ComponentName});
+ expect(wrapper.html()).toMatchSnapshot();
});
});
`
},
{
- filename: path.join('./../types', `${componentname}.d.ts`),
+ filename: path.join('./examples', `example-${componentname}-default.vue`),
+ content: `
+
+
+
+
+
+
+`
+ },
+ {
+ filename: './examples/index.json',
+ content: `[
+ "example-${componentname}-default"
+]
+`
+ },
+ {
+ filename: path.join('../../../types', `${componentname}.d.ts`),
content: `import { MomentumUIComponent } from './component'
/** ${ComponentName} Component */
diff --git a/vue/types/momentum-ui.d.ts b/vue/types/momentum-ui.d.ts
index c7eb9cf295..4329afe327 100755
--- a/vue/types/momentum-ui.d.ts
+++ b/vue/types/momentum-ui.d.ts
@@ -14,4 +14,3 @@ export function install (vue: typeof Vue, options: InstallationOptions): void
/** Bagde Component */
export class Badge extends Badge {}
-