Commit 8517ab39 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by Guilherme Gazzo
Browse files

feat!: Documentation (#64)

parent 2f94bbd5
......@@ -25,7 +25,7 @@
"import React from 'react';",
"import ReactDOM from 'react-dom';",
"",
"import { $1 } from './index';",
"import { $1 } from '.';",
"",
"",
"it('renders without crashing', () => {",
......@@ -39,26 +39,20 @@
"scope": "javascript",
"prefix": "fuselage-stories",
"body": [
"import centered from '@storybook/addon-centered/react';",
"import { withKnobs } from '@storybook/addon-knobs';",
"import { storiesOf } from '@storybook/react';",
"import React from 'react';",
"",
"import { createPropsFromKnobs } from '../../helpers/storybook';",
"import { $1 } from './index';",
"import { $1 } from '../..';",
"",
"export default {",
" title: '$2|$1',",
" component: $1,",
" parameters: {",
" jest: ['$1/spec'],",
" },",
"};",
"",
"const props = createPropsFromKnobs({",
" ",
"});",
"export const _default = () => <$1 />;",
"",
"storiesOf('$2|$1', module)",
" .addDecorator(withKnobs)",
" .addDecorator(centered)",
" .addParameters({ jest: ['spec'] })",
" .add('default', () =>",
" <$1 {...props()} />",
" );"
],
},
"New component styles.scss": {
......
{
"eslint.workingDirectories": [
{
"directory": "packages/fuselage",
"changeProcessCWD": true
},
"directory": "packages/fuselage",
"changeProcessCWD": true
},
{
"directory": "packages/icons",
"changeProcessCWD": true
}
],
"eslint.enable": true
"directory": "packages/icons",
"changeProcessCWD": true
}
],
"eslint.enable": true
}
<h1>@rocket.chat/fuselage-tokens</h1>
<p>
<img alt="Version" src="https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens.svg">
<a href="https://github.com/RocketChat/Rocket.Chat.Fuselage#readme" target="_blank"><img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /></a>
<a href="https://github.com/RocketChat/Rocket.Chat.Fuselage/graphs/commit-activity" target="_blank"><img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" /></a>
<a href="https://rocketchat.github.io/Rocket.Chat.Fuselage" target="_blank"><img alt="Storybook" src="https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg" /></a>
<a href="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage" target="_blank"><img alt="Build Status on CircleCI" src="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage/tree/master.svg?style=svg&circle-token=4bf3c8af9bf96e1338430d1ba3ce0084a45d1647" /></a>
<a href="https://twitter.com/RocketChat" target="_blank"><img alt="Twitter: RocketChat" src="https://img.shields.io/twitter/follow/RocketChat.svg?style=social" /></a>
</p>
> Design tokens for Fuselage, Rocket.Chat's design system
### 🏠 [Homepage](https://rocket.chat/Rocket.Chat.Fuselage)
## Install
```sh
npm install --save @rocket.chat/fuselage-tokens
```
## Author
👤 **Rocket.Chat**
* Twitter: [@RocketChat](https://twitter.com/RocketChat)
* Github: [@RocketChat](https://github.com/RocketChat)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
## Show your support
Give a ⭐️ if this project helped you!
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
$borders: (
widths: (
0: 0,
1: 2,
),
radii: (
0: 0,
1: 2,
),
);
$colors: (
dark100: #f7f8fa,
dark200: #f2f3f5,
dark300: #eeeff1,
dark400: #e4e7ea,
dark500: #cbced1,
dark600: #9ea2a8,
dark700: #6c727a,
dark800: #2f343d,
dark900: #1f2329,
blue100: #e8f2ff,
blue200: #d1ebfe,
blue300: #76b7fc,
blue400: #549df9,
blue500: #1d74f5,
blue600: #095ad2,
blue700: #10529e,
blue800: #01336b,
blue900: #012247,
green100: #e5fbf4,
green200: #c0f6e4,
green300: #96f0d2,
green400: #6ce9c0,
green500: #2de0a5,
green600: #1ecb92,
green700: #19ac7c,
green800: #158d65,
green900: #106d4f,
red100: #fddade,
red200: #fbb5be,
red300: #f98f9d,
red400: #f76a7d,
red500: #f5455c,
red600: #db0c27,
red700: #b30a20,
red800: #8b0719,
red900: #630512,
yellow100: #fff6d6,
yellow200: #ffecad,
yellow300: #ffe383,
yellow400: #ffd95a,
yellow500: #ffd031,
yellow600: #f3be08,
yellow700: #dfac00,
yellow800: #b68d00,
yellow900: #8e6d00,
purple100: #f9effc,
purple200: #edd0f7,
purple300: #dca0ef,
purple400: #ca71e7,
purple500: #9f22c7,
purple600: #7f1b9f,
purple700: #5f1477,
purple800: #4a105d,
purple900: #350b42,
orange100: #fde8d7,
orange200: #fad1b0,
orange300: #f7b27b,
orange400: #f59b53,
orange500: #f38c39,
orange600: #e26d0e,
orange700: #bd5a0b,
orange800: #974809,
orange900: #713607,
'black': #000000,
'white': #ffffff,
);
{
"name": "@rocket.chat/fuselage-tokens",
"version": "0.2.0-alpha.5",
"description": "Design tokens for Fuselage, Rocket.Chat's design system",
"homepage": "https://rocket.chat/Rocket.Chat.Fuselage",
"author": {
"name": "Rocket.Chat",
"url": "https://rocket.chat/"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git"
},
"bugs": {
"url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
},
"keywords": [
"design",
"tokens"
],
"files": [
"*.js",
"*.scss"
],
"publishConfig": {
"access": "public"
}
}
$spaces: (
0: 0,
1: 2,
2: 4,
3: 8,
4: 12,
5: 16,
6: 24,
7: 32,
8: 40,
);
$transitions: (
short-duration: 230ms, // see https://en.wikipedia.org/wiki/Human_processor_model
);
$font-sans:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Helvetica Neue',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Meiryo UI',
Arial,
sans-serif;
$font-mono:
Menlo,
Monaco,
Consolas,
'Liberation Mono',
'Courier New',
monospace;
$typography: (
h1: (
font-family: $font-sans,
font-size: 22,
font-weight: 400,
letter-spacing: 0,
line-height: 32,
),
s1: (
font-family: $font-sans,
font-size: 16,
font-weight: 400,
letter-spacing: 0,
line-height: 22,
),
s2: (
font-family: $font-sans,
font-size: 16,
font-weight: 500,
letter-spacing: 0,
line-height: 22,
),
p1: (
font-family: $font-sans,
font-size: 14,
font-weight: 400,
letter-spacing: 0,
line-height: 20,
),
p2: (
font-family: $font-sans,
font-size: 14,
font-weight: 500,
letter-spacing: 0,
line-height: 20,
),
c1: (
font-family: $font-sans,
font-size: 12,
font-weight: 400,
letter-spacing: 0,
line-height: 16,
),
c2: (
font-family: $font-sans,
font-size: 12,
font-weight: 600,
letter-spacing: 0,
line-height: 16,
),
micro: (
font-family: $font-sans,
font-size: 10,
font-weight: 600,
letter-spacing: 0.2,
line-height: 12,
),
);
......@@ -4,19 +4,40 @@ import { act } from 'react-dom/test-utils';
export const testHook = (callback, ...acts) => {
let returnedValue;
let errorThrown;
class ErrorBoundary extends React.Component {
state = { errored: false }
static getDerivedStateFromError = () => ({ errored: true })
componentDidCatch = (error) => {
errorThrown = error;
}
render = () => (this.state.errored ? null : <>{this.props.children}</>)
}
function TestComponent() {
returnedValue = callback();
return null;
}
const spy = jest.spyOn(console, 'error');
spy.mockImplementation(() => {});
const div = document.createElement('div');
ReactDOM.render(
React.createElement(function TestHook() {
returnedValue = callback();
return null;
}),
div
);
ReactDOM.render(<ErrorBoundary>
<TestComponent />
</ErrorBoundary>, div);
acts.forEach((fn) => act(fn.bind(null, returnedValue)));
ReactDOM.unmountComponentAtNode(div);
if (errorThrown) {
throw errorThrown;
}
return returnedValue;
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment