vue-tokens-presenters
v1.0.4
Published
<h1 align="center">Welcome to vue-tokens-presenters 👋</h1> <p> <img alt="Version" src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" /> <a href="https://github.com/11joselu/vue-tokens-presenters#readme" target="_blank">
Downloads
6
Maintainers
Readme
List of presenter for design tokens
Homepage
Demo
Install
npm i -S vue-tokens-presenters
Usage
Works well with design-tokens-parser
Working with design-tokens-parser
import { scssParser } from 'design-tokens-parser';
import TokenSumarry from 'vue-tokens-presenters';
const scssReq = require.context(
`!!raw-loader!../<MY_PATH>`,
true,
/tokensFiles.scss$/
);
// We create and array of file path
const files = scssReq.keys();
const tokens = files
.map((filename) => scssReq(filename).default) // read file content
.map(scssParser) // parse file content and return a doube array of tokens
.flat() // flat double array into single array
<TokenSumarry tokens={tokens}/>
In cases where you need a custom layout, you have presenter to reuse them.
import { scssParser } from 'design-tokens-parser';
// We import Color
import {Color} from 'vue-tokens-presenters';
const scssReq = ...
// We create and array of file path
const files = scssReq.keys();
const tokens = ...
tokens.map((token, index) => <Color {...token} key={index} />)
Presenters
Presenters are used to render examples for your design tokens. View availables presenters
Run tests
npm run test
Author
👤 Jose Cabrera
- Website: https://twitter.com/11joselu
- Twitter: @11joselu
- Github: @11joselu
- LinkedIn: @Jose Cabrera
Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2020 Jose Cabrera. This project is MIT licensed.