-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new theme and react-forms packages
- Loading branch information
Federico Zivolo
committed
Dec 5, 2018
1 parent
5a243c4
commit 61a44a0
Showing
30 changed files
with
1,176 additions
and
5 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "name": "@quid/react-forms", | ||
| "version": "1.0.0", | ||
| "description": "Collection of form-related React components, such as buttons, inputs, etc...", | ||
| "main": "dist/index.js", | ||
| "main:umd": "dist/index.umd.js", | ||
| "module": "dist/index.es.js", | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "start": "microbundle watch", | ||
| "prepare": "microbundle build && flow-copy-source --ignore '{__mocks__/*,*.test}.js' src dist" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/core": "^10.0.2", | ||
| "@emotion/styled": "^10.0.2", | ||
| "@quid/theme": "^1.0.0", | ||
| "color": "^3.1.0", | ||
| "react-router-dom": "^4.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "flow-copy-source": "^2.0.2", | ||
| "microbundle": "^0.8.3" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,217 @@ | ||
| The `Button` component is used to let the user perform an action | ||
| once it's clicked: | ||
|
|
||
| ```js | ||
| <Button importance="primary">I'm a button</Button> | ||
| ``` | ||
| These are all the supported style variations: | ||
| ```js | ||
| <table className="DemoTable"> | ||
| <thead> | ||
| <tr> | ||
| <th /> | ||
| <th>Default</th> | ||
| <th>Disabled</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>Primary</td> | ||
| <td> | ||
| <Button importance="primary">Button</Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Primary Small</td> | ||
| <td> | ||
| <Button importance="primary" size="small"> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" size="small" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Primary with Icon</td> | ||
| <td> | ||
| <Button importance="primary"> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" disabled> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Primary Small with Icon</td> | ||
| <td> | ||
| <Button importance="primary" size="small"> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" size="small" disabled> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Primary with both</td> | ||
| <td> | ||
| <Button importance="primary"> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" disabled> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Primary Small with both</td> | ||
| <td> | ||
| <Button importance="primary" size="small"> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="primary" size="small" disabled> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td colSpan="3"> | ||
| <hr /> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary</td> | ||
| <td> | ||
| <Button importance="secondary">Button</Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary Small</td> | ||
| <td> | ||
| <Button importance="secondary" size="small"> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" size="small" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary with Icon</td> | ||
| <td> | ||
| <Button importance="secondary"> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" disabled> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary Small with Icon</td> | ||
| <td> | ||
| <Button importance="secondary" size="small"> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" size="small" disabled> | ||
| <x-icon name="scatter" /> | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary with both</td> | ||
| <td> | ||
| <Button importance="secondary"> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" disabled> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Secondary Small with both</td> | ||
| <td> | ||
| <Button importance="secondary" size="small"> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="secondary" size="small" disabled> | ||
| <x-icon name="download" /> Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td colSpan="3"> | ||
| <hr /> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Okay</td> | ||
| <td> | ||
| <Button importance="okay">Button</Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="okay" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Warning</td> | ||
| <td> | ||
| <Button importance="warning">Button</Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="warning" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Hazard</td> | ||
| <td> | ||
| <Button importance="hazard">Button</Button> | ||
| </td> | ||
| <td> | ||
| <Button importance="hazard" disabled> | ||
| Button | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| ``` |
Oops, something went wrong.