1 | # storybook-host
|
2 | [![Build Status](https://travis-ci.org/philcockfield/storybook-host.svg?branch=master)](https://travis-ci.org/philcockfield/storybook-host)
|
3 |
|
4 | A [React Storybook](https://getstorybook.io/) decorator with powerful display options for
|
5 | hosting, sizing and framing your components.
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | ## Install
|
11 |
|
12 | npm install -D storybook-host
|
13 |
|
14 | ## Try in Storybook
|
15 |
|
16 | npm start
|
17 |
|
18 | ## Usage
|
19 |
|
20 | ```js
|
21 | import { storiesOf } from '@kadira/storybook'
|
22 | import { host } from 'storybook-host';
|
23 | import { MyComponent } from './MyComponent'
|
24 |
|
25 | storiesOf('helpers.storybook', module)
|
26 | .addDecorator(host({
|
27 | title: 'A host container for components under test.',
|
28 | align: 'center bottom',
|
29 | height: '80%',
|
30 | width: 400,
|
31 | }))
|
32 | .add('Component', () => <MyComponent/>);
|
33 |
|
34 | ```
|
35 |
|
36 | ![Screen Shot](https://cloud.githubusercontent.com/assets/185555/19583290/dc0041fc-9797-11e6-9893-62bb03822eca.png)
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | ## Properties
|
42 |
|
43 | ```js
|
44 | host({
|
45 | title: <string>,
|
46 | hr: <boolean>,
|
47 | align: <string>,
|
48 | height: <number | string>,
|
49 | width: <number | string>,
|
50 | background: <boolean | number | string>,
|
51 | backdrop: <boolean | number | string>,
|
52 | cropMarks: <boolean>,
|
53 | border: <boolean | number | string>,
|
54 | padding: <number | string>,
|
55 | });
|
56 | ```
|
57 |
|
58 |
|
59 | #### `title: string`
|
60 | The title display that is displayed at the top of the window.
|
61 | Use this to to name and provide a decription of the component under test.
|
62 |
|
63 | #### `hr: boolean`
|
64 | Flag indicating if the horizontal rule under the title should be shown. Default: `true`.
|
65 |
|
66 |
|
67 | #### `align: string [x y]`
|
68 | A string indicating how to align the component within the host. The string takes to parts (`x` and `y`)
|
69 | seperated by a space. The order of horizontal vs. vertical does not matter,
|
70 | eg `top left` is the same as `left top`.
|
71 |
|
72 | - Horizontal (X)
|
73 | - `left`
|
74 | - `center`
|
75 | - `right`
|
76 | - Vertical (Y)
|
77 | - `top`
|
78 | - `middle`
|
79 | - `bottom`
|
80 |
|
81 |
|
82 | #### `width: number | string | undefined`
|
83 | The width to lock the component at, eg: `400` (number as pixels) or `400px` or `100%`.
|
84 |
|
85 | #### `height: number | string | undefined`
|
86 | The height to lock the component at, eg: `200` (number as pixels) or `200px` or `100%`.
|
87 |
|
88 | #### `background: boolean | number | string`
|
89 | The background color to draw behind the component.
|
90 | - `true`: ruby red (eg. `rgba(255, 0, 0, 0.1)`). Useful for quick visualization of component size.
|
91 | - `string`: A CSS background-color value.
|
92 | - `number (-1:black..0..1:white)`
|
93 |
|
94 | #### `backdrop: boolean | number | string`
|
95 | The background color of the entire host panel. Same value types as `background`.
|
96 |
|
97 | #### `cropMarks: boolean`
|
98 | Flag indicating if the crop-marks should be visible. Default: `true`.
|
99 |
|
100 | #### `border: string | number | boolean`
|
101 | Optional border for the component.
|
102 |
|
103 | #### `padding: number | string`
|
104 | The padding of the host container.
|
105 |
|