diff --git a/README.md b/README.md index 60c21e22..49fac5b0 100644 --- a/README.md +++ b/README.md @@ -512,13 +512,8 @@ Vue Design System is not a front-end component library and never will be. Instea ## Roadmap -- [ ] Implement a top level utility nav and structure for prototyping. - [ ] Make it possible to build as static HTML files to use with S3/GitHub hosting (use f.ex. [https://nuxtjs.org](https://nuxtjs.org)). - [ ] Create a tutorial on why and what you can/should do with the tool. -- [ ] Implement some of the known best practices. -- [ ] Create better custom templates for styleguide. -- [ ] Better error handling and console logging. -- [ ] Cleanup NPM dependencies. - [ ] Remove Vue components from `/tokens/` and make styleguide specific. - [ ] Separate documentation from the readme on GitHub and split onto multiple pages. - [ ] Add a few more default elements (like button f.ex.) with sensible default `props` for type, style, etc. for prototyping. @@ -528,6 +523,7 @@ Vue Design System is not a front-end component library and never will be. Instea ## Changelog +* `0.2.3` (2017-11-03) - Better examples, error handling, and console logging. * `0.2.2` (2017-11-02) - Fixes the serving of SVG icons to living documentation. * `0.2.1` (2017-10-31) - Cleans up SCSS styles and adds examples for each token category. * `0.2.0` (2017-10-30) - Adds YAML Design Token that are auto converted to JSON and SCSS. @@ -542,10 +538,4 @@ Vue Design System is not a front-end component library and never will be. Instea [Viljami Salminen](https://viljamis.com), [Artem Sapegin](http://sapegin.me), [Rafael Escala](https://github.com/rafaesc), [react-styleguidist contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors), [vue-styleguidist contributors](https://github.com/vue-styleguidist/vue-styleguidist/graphs/contributors), [Vue.js contributors](https://github.com/vuejs/vue/graphs/contributors), [vue-webpack-boilerplate contributors](https://github.com/vuejs-templates/webpack/graphs/contributors) and & [Theo contributors](https://github.com/salesforce-ux/theo/graphs/contributors). -Licensed under the MIT license. - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +Licensed under the [MIT license](https://github.com/viljamis/vue-design-system/blob/master/LICENSE). diff --git a/package-lock.json b/package-lock.json index e4aa3178..5d7d1ace 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-design-system", - "version": "0.2.2", + "version": "0.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2683,6 +2683,86 @@ } } }, + "concurrently": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.0.tgz", + "integrity": "sha1-jPG3cHppFqeKT/W3e7BN7FSzebI=", + "requires": { + "chalk": "0.5.1", + "commander": "2.6.0", + "date-fns": "1.29.0", + "lodash": "4.17.4", + "rx": "2.3.24", + "spawn-command": "0.0.2-1", + "supports-color": "3.2.3", + "tree-kill": "1.1.0" + }, + "dependencies": { + "ansi-regex": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz", + "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=" + }, + "ansi-styles": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz", + "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=" + }, + "chalk": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz", + "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=", + "requires": { + "ansi-styles": "1.1.0", + "escape-string-regexp": "1.0.5", + "has-ansi": "0.1.0", + "strip-ansi": "0.3.0", + "supports-color": "0.2.0" + }, + "dependencies": { + "supports-color": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz", + "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=" + } + } + }, + "commander": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz", + "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=" + }, + "has-ansi": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz", + "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=", + "requires": { + "ansi-regex": "0.2.1" + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" + }, + "strip-ansi": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz", + "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=", + "requires": { + "ansi-regex": "0.2.1" + } + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "1.0.0" + } + } + } + }, "connect-history-api-fallback": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.4.0.tgz", @@ -3287,6 +3367,11 @@ "integrity": "sha1-cfnb/I/jqwES5S5ENHC81Sb1C0c=", "dev": true }, + "date-fns": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz", + "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==" + }, "date-now": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", @@ -12204,6 +12289,11 @@ "aproba": "1.2.0" } }, + "rx": { + "version": "2.3.24", + "resolved": "https://registry.npmjs.org/rx/-/rx-2.3.24.tgz", + "integrity": "sha1-FPlQpCF9fjXapxu8vljv9o6ksrc=" + }, "rx-lite": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", @@ -12826,6 +12916,11 @@ "integrity": "sha1-Gsu/tZJDbRC76PeFt8xvgoFQEsM=", "dev": true }, + "spawn-command": { + "version": "0.0.2-1", + "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz", + "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=" + }, "spdx-correct": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz", diff --git a/package.json b/package.json index cb3e8625..2e70e878 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-design-system", - "version": "0.2.2", + "version": "0.2.3", "description": "Vue Design System is an open-source tool for prototyping UI design systems.", "author": "viljamis ", "private": false, @@ -17,7 +17,7 @@ "license": "MIT", "scripts": { "dev": "node build/dev-server.js", - "start": "npm run styleguide | onchange 'src/tokens/*.yml' -- theo src/tokens/tokens.yml --transform web --format map.scss,scss,json --dest src/tokens/compiled | theo src/tokens/tokens.yml --transform web --format map.scss,scss,json --dest src/tokens/compiled | npm run dev", + "start": "concurrently \"npm run styleguide\" \"onchange 'src/tokens/*.yml' -- theo src/tokens/tokens.yml --transform web --format map.scss,scss,json --dest src/tokens/compiled\" \"theo src/tokens/tokens.yml --transform web --format map.scss,scss,json --dest src/tokens/compiled\" \"npm run dev\"", "build": "node build/build.js", "styleguide": "vue-styleguidist server", "styleguide:build": "vue-styleguidist build", @@ -25,6 +25,7 @@ }, "dependencies": { "assemble": "^0.3.83", + "concurrently": "^3.5.0", "grunt": "^0.4.5", "lodash": "^4.17.4", "magic-string": "^0.22.4", diff --git a/src/App.vue b/src/App.vue index 0b48b053..205b5346 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,12 +17,14 @@ // defined in them to keep things as modular as possible. #app { font: normal normal 100%/normal "Comic Sans MS", "Comic Sans", cursive; + height: 100%; color: red; } * { border-color: red; } body,html { + height: 100%; margin: 0; padding: 0; } diff --git a/src/elements/Heading.vue b/src/elements/Heading.vue index dae2b82e..a1b273c8 100644 --- a/src/elements/Heading.vue +++ b/src/elements/Heading.vue @@ -26,10 +26,13 @@ font-family: $font-family-heading; line-height: $line-height-heading; color: $color-primary-rich-black; - margin-bottom: $space-small; + margin-bottom: $space-base; @media #{$media-query-large} { // This is how you’d use design tokens with media queries } + &:last-child { + margin-bottom: 0; + } } h1 { letter-spacing: $letter-spacing-tiny; diff --git a/src/elements/SvgIcon.vue b/src/elements/SvgIcon.vue index 6711a786..272fd8e9 100644 --- a/src/elements/SvgIcon.vue +++ b/src/elements/SvgIcon.vue @@ -1,5 +1,5 @@ diff --git a/src/elements/TextLink.vue b/src/elements/TextLink.vue index 6d537205..76bd2bee 100644 --- a/src/elements/TextLink.vue +++ b/src/elements/TextLink.vue @@ -1,5 +1,5 @@ @@ -28,7 +28,7 @@ diff --git a/src/patterns/NavBar.vue b/src/patterns/NavBar.vue index 6a4be749..a5058532 100644 --- a/src/patterns/NavBar.vue +++ b/src/patterns/NavBar.vue @@ -47,6 +47,10 @@ - - - ```jsx - - ``` - diff --git a/src/templates/Index.vue b/src/templates/Index.vue new file mode 100644 index 00000000..79ec7d26 --- /dev/null +++ b/src/templates/Index.vue @@ -0,0 +1,77 @@ + + + + + + + + ```jsx + + ``` + diff --git a/src/templates/NotFound.vue b/src/templates/NotFound.vue index c65b0911..e596f229 100644 --- a/src/templates/NotFound.vue +++ b/src/templates/NotFound.vue @@ -1,7 +1,11 @@