The project needs a better “contributing guidelines” template for people to use. There is one now, but it needs more relevant content.

Hi,

I appreciate the constant updates to the repo to make it better.

Just a suggestion that I believe a simple guide on how to upgrade the previous version to the latest version will help us too. Thank you again for this!

This is necessary to support large design systems. Splitting also components into different views would make it easier to provide more documentation per component.

Edit: under work in https://github.com/viljamis/vue-design-system/tree/feature/sections

We're intending to use Vue Design System as the starting point for our internal design system.
As recommended in the Getting Started wiki, we'll be publishing our customized version as a new package that our main website will import.

I'm struggling to arrive at the "right" approach to accomplish the following:

• Start with a clone of vue-design-system or checkout of master
• Begin working in a repository connected to our company's internal GitLab
• Customize existing settings/files, and build out the rest of our system
• Retain the ability to pull down updates made to the master branch of the original project, which seem to be happening at a rapid pace, and merge into our customized version

Is there a specific approach you're intending teams building on a foundation of vue-design-system to use?

No hurry, but probably makes sense to do sooner or later. Maybe wait for Vue 3.0 as well?

Integrate feedback into internal Design System documentation: f.ex. “On a scale from one to five, how useful is this pattern’s documentation? Any suggestions?”

Worked in a separate branch: #29

“One component per page” functionality is now supported in Vue Styleguidist and I want to bring it into Vue Design System rather soon as well. It does require a couple of things:

• Updating Vue Styleguidist NPM dependency
• Changing the formatting of the Vue Styleguidist config (mostly template option)
• Edits to the way sidenav highlights items (has to support highlighting of sub items as well)
• Edits to the overall styles of docs (they need to better support separate pages)
• Reordering sections/components.
• Richer example content that better supports separate pages and one component per page. Could include things like:
  • Best practices
  • Content guidelines
  • Usage do’s & don’ts

Looking for input from the community at the moment. Seem my second comment below.

I really dig the more systematic, process oriented approach offered by VueDS. Compared to Storybook, I think VueDS is more opinionated and designer friendly.

One thing that might be a deal-breaker for me is the ability the visualize different state of components (clicked/closed/hovering etc) and have a ActionLogger. Storybook provide this feature and make it more like a UI components playground. Is this something you guys are considering in the future?
And how do you position VueDS itself comparing to Storybook or Patternplate?

The example is not working in Safari 10.0.3 on OS X 10.11.6:

SyntaxError: Cannot declare a let variable twice: 'e'.

74123тлщлио дщ о лд

I am a user with an existing Vue.js project with multiple components. How do I get started with using vue-design-system with my existing components?

Can't understand from the guide here -> https://github.com/viljamis/vue-design-system/wiki/getting-started

Under work in https://github.com/viljamis/vue-design-system/tree/feature/sections

C:\Users\btw\Dev\vue\vue-design-system>npm start

> [email protected] start C:\Users\btw\Dev\vue\vue-design-system
> bash start.sh

npm ERR! code ELIFECYCLE
npm ERR! errno 3221225775
npm ERR! [email protected] start: `bash start.sh`
npm ERR! Exit status 3221225775
npm ERR!
npm ERR! Failed at the [email protected] start script.

2018-03-19T22_54_56_380Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\btw\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\btw\Dev\vue\vue-design-system\node_modules\.bin;C:\Python27\;C:\Python27\Scripts;C:\Users\btw\AppData\Local\Programs\Python\Python36-32\;C:\Program Files\Ruby24-x64\bin;C:\Program Files (x86)\Razer Chroma SDK\bin;C:\Program Files\Razer Chroma SDK\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Users\btw\AppData\Local\Microsoft\WindowsApps;C:\cygwin64\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Users\btw\apps;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\Yarn\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\System32\OpenSSH\;C:\WINDOWS\System32\LibreSSL\;C:\Users\btw\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\btw\AppData\Local\atom\bin;C:\Users\btw\AppData\Local\GitHubDesktop\bin;C:\Users\btw\AppData\Local\Yarn\bin;C:\Users\btw\AppData\Roaming\npm
9 verbose lifecycle [email protected]~start: CWD: C:\Users\btw\Dev\vue\vue-design-system
10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'bash start.sh' ]
11 silly lifecycle [email protected]~start: Returned: code: 3221225775  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `bash start.sh`
13 verbose stack Exit status 3221225775
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\btw\Dev\vue\vue-design-system
16 verbose Windows_NT 10.0.17115
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\btw\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v8.9.3
19 verbose npm  v5.7.1
20 error code ELIFECYCLE
21 error errno 3221225775
22 error [email protected] start: `bash start.sh`
22 error Exit status 3221225775
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3221225775, true ]

Or rename the structure hierarchy. Example: rename /templates to /pages?

I downloaded the repo, following the directions provided online. Git clone, npm install, and npm start. I'm on a mac with High Sierra, and Node v8.5.0. Without making any changes to the code, I get these errors:

Warning: highlightTheme config option is deprecated. Use the theme property in the editorConfig option instead

^ That warning disappears when I remove styleguide.config.js line 29 (highlightTheme: "night"). I also see:

 ERROR  Failed to compile with 1 errors                            15:57:33

 error  in (webpack)-dev-server/client?http://localhost:8080

Module build failed: TypeError: /Users/miriam/Sites/vue-design-system/node_modules/webpack-dev-server/client/index.js: Property object of MemberExpression expected node to be of a type ["Expression"] but instead got null

The browser automatically opens to localhost:8080, with only the note: Cannot GET /. Maybe I missed something implied in the docs?

I'm having a bit of a problem in that there are styles in the styleguide that are dependant on tokens set for the normal front end. For example, there are colors set in src/tokens/color.yml eg color_silver which break the site if you remove them, because those variables are being used in the docs eg /docs/components/tokens/Color.vue

Not sure if I'm doing something wrong, but this doesn't seem like good behaviour to me

• At least needs to handle versioning in addition to what’s already included
• Open for discussion on what else is needed

Currently, Vue StyleGuidist is giving the following error:

Warning: highlightTheme config option is deprecated. Use the theme property in the editorConfig option instead.

This doesn’t cause any issues, but can be annoying to the user.

Hi,

I may be missing something but I can't work out the path for an image stored in assets folder?
I have added an imgs folder to the assets folder so it's path is src/assets/imgs/logo.png and am trying to use it in an <img src="src/assets/imgs/logo.png" /> in an element component but no matter what path I try it cannot be found.

Is there something I am doing wrong or need to do?

Thank you

Related: https://github.com/salesforce-ux/sass-deprecate

Thanks for making this project. On the wiki's Getting Started page, the git clone via ssh doesn't work for all users:

git clone [email protected]:viljamis/vue-design-system.git

A suggested fix is to replace it with a clone that uses https:

git clone https://github.com/viljamis/vue-design-system.git

• Current version is more of a prototype of what we want to achieve.
• It works fully, but isn’t very elegant solution.
• I wonder if we could use JSDoc custom plugin to do this in a more clean manner.

This is a known issue at the moment and is related to the way how the icons are handled currently. To go around it you need to manually copy the /static folder and its contents into the styleguide build directory for now. Need to automate it. Happy to accept pull request too for this.

Like this one here https://www.catalog.style/ ?

Really nice project by the way :)

Hi,

I spotted a couple of broken links on the example site. Both on the Index and NotFound sections the link Style Guide points to localhost:6060.

Not a big thing, but wanted to let you know! :)

Worked in #67

In vue-styleguidist there's an option to toggle the code editor view, also with the option to open the component in an isolated view. How can I enable them in VueDS?

Under work in https://github.com/viljamis/vue-design-system/tree/feature/sections

Vue Design System is missing proper utilities/framework for spacing components and layout. I’m proposing the addition of the following helpers which would be either based on the x-height of the chosen typeface or then just the base space token (if based on x-height, will have to change the spacing tokens to match as well).

Utilities:

• INSET-SPACE: For interface containers.
• INSET-SQUISH-SPACE: For buttons, form elements, cells, etc…
• STACK-SPACE: For vertically stacked content.
• INLINE-SPACE: For things displayed inline.

Advantages:

• Most components would come with spacing included using the above helpers/mixins.
• A developer would be able to just lay out components and they would take care of the spacing automatically as well as they can.
• Collisions with component level spacing and inset spacing would be solved systematically using for example mixin or advanced CSS selectors inside space mixins.
• In addition, we need margin and padding utilities for added convenience in laying out components.

Prototype

• A quick-n-dirty CodePen prototype I did: https://codepen.io/viljamis/pen/yvmWrV

Resources:

Most of the ideas are from the following articles:

• Space in Design Systems: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
• A framework for creating a predictable & harmonious spacing system for faster design-dev handoff: https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
• Padding in Lightning Design System: https://www.lightningdesignsystem.com/utilities/padding

It wiтв is ehre