Props
43 |
11 |
16 | The best way to predict the future is to create it.
17 |
18 | )\
19 | `} />
20 |
24 | The best way to predict the future is to create it.
25 |
26 | )\
27 | `} />
28 |
32 |
38 | )\
39 | `} />
40 |
41 | )
42 | }
43 | }
--------------------------------------------------------------------------------
/demo/src/BubbleDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class BubbleDemo extends React.Component {
8 | render(){
9 | return (
10 | Blockquotes
12 |Basic
13 |Cite
21 |Colors
29 |Default quote33 |
Primary quote34 |
Secondary quote35 |
Success quote36 |
Error quote37 |
11 | Bubble text...
19 | )\
20 | `} />
21 |
28 |
41 | )\
42 | `} />
43 |
44 | )
45 | }
46 | }
--------------------------------------------------------------------------------
/demo/src/ButtonDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class ButtonDemo extends React.Component {
8 | render(){
9 | return (
10 | Bubbles
12 |13 | Bubbles are... tooltips with a different name. 14 |
15 |Basic Bubbles
16 |Bubble positions
22 |
23 | Available positions : top, left, bottom, right.
24 |
29 | top
30 |
31 |
32 | left
33 |
34 |
35 | bottom
36 |
37 |
38 | right
39 |
40 |
11 |
19 | {" "}
20 | {" "}
21 | {" "}
22 | {" "}
23 | {" "}
24 | {" "}
25 | {" "}
26 | {" "}
27 |
28 |
29 | )\
30 | `} />
31 | Buttons
12 |Styling
13 |
14 | Use any of the available blaze styles to quickly create a styled button. Just modify the bStyle prop.
15 |
ButtonGroup
32 |Rounded
44 |ButtonGroup xsmall and ghost
56 |Sizes
68 |Block
81 |Props
90 |
10 |
24 | setYear(2015)}
25 | onNext={() => setYear(2017)}>
26 | 2016
27 |
28 | January
29 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/demo/src/CardDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, H4, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class CardDemo extends React.Component {
8 | render(){
9 | return (
10 | Calendars
11 |Calendar (controlled)
12 |13 | ReactBlazeCSS's calendar is a pure UI component. It won't manage any state, but stays 100% lightweight. 14 | An external component using moment.js to build the calendar will be provided soon as a plug'n'play component. 15 |
16 |
11 |
16 |
17 |
20 |
21 | )\
22 | `} />
23 |
28 | Header
29 |
30 |
32 | Divider
33 |
34 |
36 | Footer
37 |
38 | )\
39 | `} />
40 |
45 | Header
46 |
47 |
49 | Divider
50 |
51 |
53 | Footer
54 |
55 | )\
56 | `} />
57 |
63 | Title
64 |
66 |
68 |
69 | )\
70 | `} />
71 |
75 |
76 |
77 |
78 | |
80 |
81 | Title
82 | |
84 |
85 |
86 |
87 | )\
88 | `} />
89 |
90 |
95 |
96 |
97 |
98 | |
100 |
101 | Card Title
102 | |
103 |
104 |
105 |
106 |
108 |
109 | )\
110 | `} />
111 |
112 |
117 |
118 |
119 |
120 | |
122 |
123 | Card Title
124 | |
125 |
126 |
127 |
134 |
136 |
137 | )\
138 | `} />
139 |
140 |
141 |
142 |
143 |
144 |
149 | Item 1
150 | Divider
151 | Item 2
152 | Item 3 (disabled)
153 | Item 4 (active)
154 | Item 5
155 |
156 | )\
157 | `} />
158 |
162 | Header 1
163 | Item 1
164 | Item 2
165 | Header 2
167 | Item 3
168 | Item 4
169 |
170 | )\
171 | `} />
172 |
173 | )
174 | }
175 | }
--------------------------------------------------------------------------------
/demo/src/ContainerDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 |
6 | export class ContainerDemo extends React.Component {
7 | render(){
8 | return (
9 | Cards
12 |Basic Card
13 |Heading
18 |Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
19 |Dividers, headers, and footers
24 |The divider prop turns CardContent into a header, a divider, or a fotter depending on its position.
Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
31 |Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
35 |Colors
41 |Using bStyle on the Card changes the divider colors.
Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
48 |Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
52 |Examples
58 |Image Card
59 |Classic example with a title, image, and contents
60 |Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
67 |Media Element
72 |Title @author
82 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
83 |Card Content colors
91 |This has not been integrated into BlazeCSS yet, but it's pretty simple to color just parts of the cards
92 |Card Title
Subtitle :)
102 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
107 |Complete card with image overlay
113 |This has not been integrated into BlazeCSS either
114 |Card Title
Subtitle :)
124 |
128 |
130 | Title
131 |
132 |
133 | Title
@author
131 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
135 |Card Items
145 |Cards can contains CardItems (menu style)
146 |Grouped Card
159 |
10 |
19 | {text}
21 | {text}
23 | {text}
25 | {text}
27 |
28 | )\
29 | `} />
30 | Containers
11 |Sizes
12 |The available sizes are
13 | xsmall, small, medium, large, xlarge, super.
large
20 |medium
22 |small
24 |xsmall
26 |ComponentClass
31 |By default the Container uses a div, but the componentClass ca be used to change the underlying component.
section
37 |
11 |
22 |
23 | Drawer body
25 |
26 |
27 | )\
28 | `} />
29 | Drawers
12 |Basic
13 |
14 | Your basic drawer will appear from the bottom of the container. The container should have overflow:hidden or you'll see the drawer sliding around.
15 |
17 | Change the visible prop to make it appear/disappear
18 |
Drawer header
24 |Position
30 |
31 | The default position is bottom, but this can be changed to top, left, or right.
32 |
Drawer header
38 |Drawer Menu
44 |45 | Drawers and Menus play nicely together 46 |
47 |Drawer header
52 | 56 |DrawerFooter
62 |63 | Add a footer to your drawer to have block buttons 64 |
65 |Drawer header
70 | 74 |76 | 77 |
Animation
87 |88 | Animated drawers look even better. 89 |
90 |
106 |
109 | show/hide drawer
110 |
111 |
118 | )
119 | }
120 | }
121 | export default (
122 |
112 |
113 | Drawer body
115 |
116 |
117 | Drawer header
114 |
11 | alert("click on " + v)
19 | }
20 | export default (
21 |
22 |
23 |
24 |
25 |
30 | )\
31 | `} />
32 |
33 | )
34 | }
35 | }
--------------------------------------------------------------------------------
/demo/src/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class Example extends React.Component {
8 | render(){
9 | return (
10 | DropdownButtons
12 |Basic Example
13 |14 | WIP, subject to change... 15 |
16 |
11 |
15 |
21 |
22 |
23 |
24 |
25 | Tab 1 content, with useless buttons :
26 |
27 |
28 |
29 |
30 |
31 | Tab 2 click me }>
32 | Tab 2, pretty much empty
33 |
34 | Tab 3 content
35 |
36 | |
37 |
38 |
39 |
42 |
43 | Primary alert
44 | Secondary alert
45 | Error !
46 |
47 | |
48 |
49 |
50 | )
51 | `} />
52 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/demo/src/GridDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class GridDemo extends React.Component {
8 | render(){
9 | return (
10 | Note that this is just a quick UI rendering example, so you can't really close the notifications...
12 |26 |
39 |
42 |
11 |
22 | | 1 |
23 | 2 |
24 | 3 |
25 |
26 | )\
27 | `} />
28 |
35 | | 1 |
36 | 2 |
37 | 3 |
38 |
39 | )\
40 | `} />
41 |
48 | | 1 |
49 | 2 |
50 |
51 | )\
52 | `} />
53 |
60 | | 1 |
61 | 2 |
62 | 3 |
63 | 4 |
64 | 5 |
65 | 6 |
66 |
67 | )\
68 | `} />
69 |
75 | | 1 |
76 | 2 |
77 | 3 |
78 |
79 | )\
80 | `} />
81 |
88 |
89 |
90 | | 1.1 |
91 | 1.2 |
92 |
93 |
94 | | 1.3 |
95 | 1.4 |
96 |
97 | |
98 | 2 |
99 |
100 | )\
101 | `} />
102 |
109 | | top |
110 | center |
111 | grid's bottom |
112 |
113 | )\
114 | `} />
115 |
123 | | 1 |
124 | 2 |
125 | 3 |
126 | 4 |
127 |
128 | )\
129 | `} />
130 |
136 | | 1 |
137 | 1 |
138 | 1 |
139 | 1 |
140 |
141 | )\
142 | `} />
143 |
149 | | 1 |
150 | 1 |
151 |
152 | )\
153 | `} />
154 | (
160 |
184 | | 1 |
185 | 2 - fixed |
186 | 3 |
187 |
188 | )\
189 | `} />
190 |
197 | | main content |
198 | menu |
199 |
200 | )\
201 | `} />
202 |
204 | )
205 | }
206 | }
--------------------------------------------------------------------------------
/demo/src/HeadingDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class HeadingDemo extends React.Component {
8 | render(){
9 | return (
10 | Grids
12 |13 | The grid is the easiest way to produce a fluid responsive layout. Its easy to use and very flexible. 14 |
15 |Basic Grid
16 |17 | By default cells take an equal amount of space. Try adding more cells in the following preview. 18 |
19 |Width
29 |30 | Set the width (percentage) to a cell and the other cells will take up the remaning space 31 |
32 |Offset
42 |43 | Offsets work the same as width, but to push cells towards the right 44 |
45 |Wrapping
54 |55 | In ReactBlazeCSS, cells wrap by default. 56 |
57 |70 | Wrapping can be turned off if needed, and cells will overflow. 71 |
72 |Nesting
82 |83 | Grids can be nested inside Cells without limit 84 |
85 |Vertical Alignement
103 |
104 | The verticalAlign prop can be used on either grids or cells.
105 |
Responsive Grid
116 |
117 | The width can also be set per break point. Resize the window to see how the grid changes. The available sizes are
118 | xsmall, small, medium, large, xlarge, super.
119 |
131 | That's a bit verbose, so shorter names can also be used : xs, sm, md, lg, xl, sp.
132 |
144 | Offsets can also be responsive, with for example mediumOffset or mdOffset
145 |
Gutters
155 |
156 | You may have noticed that cells have a default padding. This can be removed using the noGutter prop on the Grid or Cells.
157 |
{children}
161 | )
162 | export default (
163 |
164 |
166 | 1 |
167 | 2 |
168 |
169 |
171 | 3 |
172 | 4 |
173 |
174 |
175 | )\
176 | `} />
177 | Grid - noGutter
165 |Cell - noGutter
170 |Fixed widths
178 |
179 | Use the fixedWidth prop to set a fixed width. Be aware that these use default React sizes, si fixedWidth={100} is for 100px.
180 |
Specific components
191 |
192 | Grids and cells output divs by default, but you might want to change that. The componentClass prop was designed for those rare cases.
193 |
(check the generated DOM to see what changed)
203 |
11 |
19 |
26 | )\
27 | `} />
28 | Headings
12 |Normal Headings
13 |
14 | Blaze doesn't style native elements such as <h1>, <h2> etc. ReactBlazeCSS provides the uppercase alternatives that are pre-styled :
15 |
H1
20 |H2
21 |H3
22 |H4
23 |H5
24 |H6
25 |Sizes
29 |
30 | All heading sizes from super to xsmall are available.
31 |
H1 large
36 |H2 small
37 |H3 medium
38 | 39 | )\ 40 | `} /> 41 |SubHeading
42 |Title Subtitle
46 |
47 | )\
48 | `} />
49 |
50 | )
51 | }
52 | }
--------------------------------------------------------------------------------
/demo/src/ImageDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class ImageDemo extends React.Component {
8 | render(){
9 | return (
10 |
11 |
21 | )
22 | }
23 | }
--------------------------------------------------------------------------------
/demo/src/ListDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 |
6 | export class ListDemo extends React.Component {
7 | render(){
8 | return (
9 | Images
12 |13 | Images are simply display block, 100% wide with height of auto. 14 |
15 |
10 |
18 | Lorem ipsum dolor sit amet
19 | Nulla volutpat aliquam velit
20 |
26 | Faucibus porta lacus fringilla vel
27 |
28 | )\
29 | `} />
30 |
34 | Lorem ipsum dolor sit amet
35 | Nulla volutpat aliquam velit
36 |
41 | Faucibus porta lacus fringilla vel
42 |
43 | )\
44 | `} />
45 |
52 | Lorem ipsum dolor sit amet
53 | Nulla volutpat aliquam velit
54 |
60 | Faucibus porta lacus fringilla vel
61 |
62 | )\
63 | `} />
64 |
68 | Lorem ipsum
69 | Consectetur
70 | Nulla
71 |
72 | )\
73 | `} />
74 |
75 | )
76 | }
77 | }
--------------------------------------------------------------------------------
/demo/src/MenuDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class MenuDemo extends React.Component {
8 | render(){
9 | return (
10 | Lists
11 |12 | Ordered, un-ordered, indented 13 |
14 |Un-ordered
15 |-
21 |
Ordered
31 |-
37 |
Un-styled
46 |
47 | Both UL and LI can be unstyled using the unstyle prop.
48 |
-
55 |
Inline
65 |
11 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )\
24 | `} />
25 |
29 |
30 |
31 |
32 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/demo/src/ModalDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class ModalDemo extends React.Component {
8 | render(){
9 | return (
10 | Menus
12 |Basic Menu
13 |Grouped Menu
26 |
11 |
16 |
18 |
19 |
21 |
22 | This is the modal body
23 |
24 |
25 |
26 |
27 |
28 |
29 | )\
30 | `} />
31 |
32 | )
33 | }
34 | }
--------------------------------------------------------------------------------
/demo/src/NavDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 |
6 | export class NavDemo extends React.Component {
7 | render(){
8 | return (
9 | Modals
12 |Basic Modal
13 |Modal heading
20 |
10 |
15 | My APP
16 | Home
17 | Menu
18 | Settings
19 |
20 | )\
21 | `} />
22 |
26 | My APP
27 | Home
28 | Menu
29 | Settings
30 |
31 | )\
32 | `} />
33 |
37 | {/*
43 | )\
44 | `} />
45 |
47 | )
48 | }
49 | }
--------------------------------------------------------------------------------
/demo/src/OverlayDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class OverlayDemo extends React.Component {
8 | render(){
9 | return (
10 | Navs
11 |Normal
12 |Light
23 |Nav inline
34 |Use position="top" fixed to stick the Nav at the top of the screen.
11 |
22 |
24 | )\
25 | `} />
26 | Overlays
12 |13 | Overlays are used in a lot of other components to blackout the background context of the page. 14 |
15 |16 | To contain an overlay within an element set the parent element CSS to position: relative; 17 |
18 |Basic Overlay
19 |Overlay Contents
27 |28 | Anything you put inside the overlay will be displayed with the overlay behind it. 29 |
30 |Dismissable
38 |
39 | The dismissable prop gives the sens that you can click on overlay. The following code hides the Overlay when it is clicked.
40 |
58 |
60 | )\
61 | `} />
62 | Transparent
63 |64 | Overlays can also be transparent and used to capture clicks 65 |
66 |Fullpage
77 |
78 | Using fullpage, the overlay will take up... the whole page...
79 |
100 |
102 | )\
103 | `} />
104 | {/*
105 | Animation
106 |
107 | The animate prop can be used to add animations.
108 |
125 |
128 | show/hide the overlay
129 |
130 |
135 | )
136 | }
137 | }
138 | export default (
139 |
131 |
133 |
134 |
11 |
16 |
17 | «
18 | ‹
19 |
20 |
21 | 3
23 | 4
24 | 5
25 |
27 |
28 | ›
29 | »
30 |
31 |
32 | )\
33 | `} />
34 |
35 | )
36 | }
37 | }
--------------------------------------------------------------------------------
/demo/src/TabDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 |
6 | export class TabDemo extends React.Component {
7 | render(){
8 | return (
9 | Pagination
12 |Current page : 4, later buttons are disabled
13 |
10 |
18 | Tab 1 content
19 | Tab 2 content
20 | Tab 3 content
21 |
22 | )\
23 | `} />
24 |
25 |
33 | Tab 1 content
34 | Tab 2 content
35 | Tab 3 content
36 |
37 | )\
38 | `} />
39 |
46 |
47 |
50 |
51 |
54 |
55 |
58 |
59 |
62 |
63 | )\
64 | `} />
65 |
66 | )
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/demo/src/TableDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 |
6 | export class TableDemo extends React.Component {
7 | render(){
8 | return (
9 | Tabs
11 |Uncontrolled tab example
12 |13 | Uncontrolled components have internal state and udpate automatically. 14 |
15 |Controlled tab example (activeKey={2})
26 |27 | Controlled tabs are pure UI components and rely on external code to update. 28 | This component has activeKey set to 2 and won't change on clicks. 29 |
30 |Styling
40 |41 | Tabs can be styled using the classic `bStyle` prop 42 |
43 |
10 |
15 | Basic table
16 |
17 |
18 | First name Last Name Username
19 |
20 |
21 |
22 | Jim Krik @captaink Mr. Spock @science101 Nyota Uhura @comms
33 | Striped rows
34 |
35 |
36 | First name Last Name Username
37 |
38 |
39 |
40 | Jim Krik @captaink Mr. Spock @science101 Nyota Uhura @comms
51 | Clickable table with inactive row
52 |
53 |
54 | First name Last Name Username
55 |
56 |
57 |
58 | Jim Krik @captaink Mr. Spock @science101 Nyota Uhura @comms
69 | Small table and text
70 |
71 |
72 | First name Last Name Username
73 |
74 |
75 |
76 | Jim Krik @captaink Mr. Spock @science101 Nyota Uhura @comms
84 | )
85 | }
86 | }
--------------------------------------------------------------------------------
/demo/src/TagDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class TagDemo extends React.Component {
8 | render(){
9 | return (
10 | Tables
11 |Basic Table
12 |Striped Table
30 |Clickable Table
48 |Condensed
66 |
11 |
22 | Tag one
23 | Tag two
24 | Tag three
25 | Tag four
26 | Tag link
27 |
28 | )\
29 | `} />
30 | {
44 | const tags = [...this.state.tags]
45 | tags.splice(idx, 1)
46 | this.setState({ tags })
47 | }
48 | }
49 |
50 | render(){
51 | const { tags } = this.state
52 | if (tags.length == 0) {
53 | return
57 | {tags.map((tag, idx) => (
58 | this.onRemove(idx)}>
60 | {tag}
61 |
62 | ))}
63 |
64 | )
65 | }
66 | }
67 | export default
80 | )
81 | }
82 | }
--------------------------------------------------------------------------------
/demo/src/ToggleDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {H2, H3, P} from '../../src'
3 |
4 | import ReactPlayground from './components/LiveEditor'
5 | import { PropsTable, Props } from './components/PropsTable'
6 |
7 | export class ToggleDemo extends React.Component {
8 | render(){
9 | return (
10 | Tags
12 |13 | WIP, will add tag input soon 14 |
15 |Styling
16 |17 | Tags are built using standard Buttons, any prop passed will be passed down to the button. 18 |
19 |onClose
31 |32 | An additional "onClose" prop is added for the close button. The following TagManager automatically removes tags. It will probably be released as an external component later on. 33 |
34 |No tags left...
54 | }
55 | return (
56 | Props
70 |
11 |
22 | Default
23 | Primary
24 | Secondary
25 | Success
26 | Error
27 | Toggle on the right
28 |
29 | )\
30 | `} />
31 | Toggles
12 |13 | Prettier checkboxes... 14 |
15 |Styling
16 |
17 | Use any of the available blaze styles to quickly create a styled toggle. Just modify the bStyle prop.
18 |
Controlled
32 |33 | Controlled components don't update automatically 34 |
35 |
53 | Normal value
54 | Inverted value
55 | Always on
56 | Always off
57 |
58 | )
59 | }
60 | }
61 |
62 | export default Animate
65 |
66 | The animate prop can be used to turn on animations
67 |
Props
78 |
10 |
21 |
24 |
25 |
27 |
28 |
32 |
33 |
35 |
36 |
37 |
38 |
40 |
41 |
42 |
43 |
45 |
46 |
47 | )
48 | `} />
49 |
84 | )
85 | }
86 | }
--------------------------------------------------------------------------------
/demo/src/components/LiveEditor.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | var CodeMirrorEditor = require("react-live-editor/code-mirror-editor");
4 | var ComponentPreview = require("./live-compile");
5 |
6 | require('../css/codemirror.css')
7 | require('../css/syntax.css')
8 | require('../css/react.css')
9 |
10 | var ReactPlayground = React.createClass({
11 | propTypes: {
12 | codeText: React.PropTypes.string.isRequired
13 | },
14 |
15 | getInitialState: function() {
16 | return {
17 | code: this.props.codeText,
18 | showCode: false
19 | };
20 | },
21 |
22 | handleCodeChange: function(code) {
23 | this.setState({ code });
24 | },
25 |
26 | toggleShowCode(e){
27 | e.preventDefault()
28 | this.setState({
29 | showCode: !this.state.showCode
30 | })
31 | },
32 |
33 | render: function() {
34 | const {code, showCode} = this.state
35 | const {showSideCode=true} = this.props
36 |
37 | const showEditor = showCode || showSideCode
38 |
39 | return Trees
11 |12 | Expandable tree structure 13 |
14 |Expandable and Expanded
15 |16 | By default a Tree is a controlled UI component, so the following components won't change on click. 17 |
18 |DataTree
50 |51 | Automatic tree management is possible using the DataTree and by passing it data. 52 |
53 |54 | The API is subject to change and this will probably be extracted into a separate and more feature-packed package. 55 |
56 |
40 |
;
54 | },
55 | });
56 |
57 |
58 | module.exports = ReactPlayground;
--------------------------------------------------------------------------------
/demo/src/components/PropsTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Table, TR, TH, TD, TBody, THead, TCaption } from '../../../src'
3 |
4 | export class PropsTable extends React.Component {
5 | render(){
6 | const { caption, data=[] } = this.props
7 | return (
8 |
41 |
43 |
44 | {showEditor &&
50 |
53 | | Name | 13 |Type | 14 |Default | 15 |Description | 16 |
|---|---|---|---|
| {name} | 22 |{type} | 23 |{defaultValue} | 24 |{description} | 25 |
true, false, "slow", or "fast",
36 | defaultValue: "false",
37 | description: "Turn on animations and set the speed"
38 | },
39 | block: {
40 | name: "block",
41 | type: "boolean",
42 | defaultValue: "false",
43 | description: "Set to true to draw a button at full width"
44 | },
45 | bStyle: {
46 | name: "bStyle",
47 | type: empty or one of "primary", "secondary", "success", "error",
48 | defaultValue: "",
49 | description: "BlazeCSS style"
50 | },
51 | checked: {
52 | name: "checked",
53 | type: "boolean",
54 | defaultValue: "",
55 | description: Use checked to turn the component into a controlled component
56 | },
57 | defaultChecked: {
58 | name: "defaultChecked",
59 | type: "boolean",
60 | defaultValue: "false",
61 | description: "Default checked value for uncontrolled components"
62 | },
63 | ghost: {
64 | name: "ghost",
65 | type: "boolean",
66 | defaultValue: "false",
67 | description: "Set to true to draw a button with inverted colors (white background and colored border)"
68 | },
69 | href: {
70 | name: "href",
71 | type: "string",
72 | defaultValue: "",
73 | description: If present, changes the button into a link tag with the button style and sets href
74 | },
75 | size: {
76 | name: "size",
77 | type: empty or one of "xsmall", "small", "medium", "large", "xlarge", "super",
78 | defaultValue: "medium",
79 | description: "BlazeCSS size"
80 | },
81 | rounded: {
82 | name: "rounded",
83 | type: "boolean",
84 | defaultValue: "false",
85 | description: Set to true to draw with rounded corners
86 | },
87 | onClose: {
88 | name: "onClose",
89 | type: "function",
90 | default: "",
91 | description: "onClose callback"
92 | },
93 | onChange: {
94 | name: "onChange",
95 | type: "function",
96 | defaultValue: "",
97 | description: "onChange callback for the internal input component"
98 | },
99 | }
100 |
101 |
--------------------------------------------------------------------------------
/demo/src/components/live-compile.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require("react");
4 | var ReactDOM = require("react-dom");
5 | var babel = require('babel-core');
6 | // var babel = require('react-live-editor/node_modules/babel-core');
7 |
8 | // These do not use ES6 imports, because the evaluated code requires un-mangled
9 | // variable names.
10 | const { Alerts, Alert } = require('../../../src/Alert')
11 | const { Badge } = require('../../../src/Badge')
12 | const { Blockquote } = require('../../../src/Blockquote')
13 | const { Bubble } = require('../../../src/Bubble')
14 | const { Button, ButtonGroup } = require('../../../src/Button')
15 | const { Calendar, CalendarHeaderControl, CalendarDays, CalendarDayLabels } = require('../../../src/Calendar')
16 | const { Card, CardContent, CardItem, CardGroupDivider } = require('../../../src/Card')
17 | const { Container } = require('../../../src/Container')
18 | const { Drawer, DrawerBody, DrawerFooter } = require('../../../src/Drawer')
19 | const { DropdownButton } = require('../../../src/DropdownButton')
20 | const { Grid, Cell } = require('../../../src/Grid')
21 | const { H1, H2, H3, H4, H5, H6, SubHeading } = require('../../../src/Heading')
22 | const { Image } = require('../../../src/Image')
23 | const { List, ListItem } = require('../../../src/List')
24 | const { Menu, MenuItem, MenuGroupDivider } = require('../../../src/Menu')
25 | const { Modal, ModalHeader, ModalBody, ModalFooter } = require('../../../src/Modal')
26 | const { Nav, NavContent, NavItem } = require('../../../src/Nav')
27 | const { Overlay } = require('../../../src/Overlay')
28 | const { P } = require('../../../src/P')
29 | const { Pagination, PaginationEllipsis, PaginationControl, PaginationControls, PaginationPage } = require('../../../src/Pagination')
30 | const { Tab, Tabs } = require('../../../src/Tab')
31 | const { Table, TH, TD, TR, TBody, THead, TCaption } = require('../../../src/Table')
32 | const { Tags, Tag } = require('../../../src/Tag')
33 | const { Toggle } = require('../../../src/Toggle')
34 | const { Tree, TreeItem, DataTree, DataTreeItem } = require('../../../src/Tree')
35 |
36 | var selfCleaningTimeout = {
37 | componentDidUpdate: function componentDidUpdate() {
38 | clearTimeout(this.timeoutID);
39 | },
40 |
41 | setTimeout: function (_setTimeout) {
42 | function setTimeout() {
43 | return _setTimeout.apply(this, arguments);
44 | }
45 |
46 | setTimeout.toString = function () {
47 | return _setTimeout.toString();
48 | };
49 |
50 | return setTimeout;
51 | }(function () {
52 | clearTimeout(this.timeoutID);
53 | this.timeoutID = setTimeout.apply(null, arguments);
54 | })
55 | };
56 |
57 | var ComponentPreview = React.createClass({
58 | displayName: "ComponentPreview",
59 |
60 | propTypes: {
61 | code: React.PropTypes.string.isRequired
62 | },
63 |
64 | mixins: [selfCleaningTimeout],
65 |
66 | render: function render() {
67 | return React.createElement("div", { ref: "mount" });
68 | },
69 |
70 | componentDidMount: function componentDidMount() {
71 | this.executeCode();
72 | },
73 |
74 | componentDidUpdate: function componentDidUpdate(prevProps) {
75 | // execute code only when the state's not being updated by switching tab
76 | // this avoids re-displaying the error, which comes after a certain delay
77 | if (this.props.code !== prevProps.code) {
78 | this.executeCode();
79 | }
80 | },
81 |
82 | compileCode: function compileCode() {
83 | return babel.transform(this.props.code, { presets: [
84 | require('babel-preset-react'),
85 | require('babel-preset-es2015')
86 | ]
87 | }).code;
88 | },
89 |
90 | executeCode: function executeCode() {
91 | var mountNode = this.refs.mount;
92 |
93 | try {
94 | ReactDOM.unmountComponentAtNode(mountNode);
95 | } catch (e) {}
96 |
97 | try {
98 | var compiledCode = this.compileCode();
99 | ReactDOM.render(eval(compiledCode), mountNode);
100 | } catch (err) {
101 | this.setTimeout(function () {
102 | ReactDOM.render(
103 |
104 | {err.toString()}
105 |
, mountNode);
106 | }, 500);
107 | }
108 | }
109 | });
110 |
111 | module.exports = ComponentPreview;
--------------------------------------------------------------------------------
/demo/src/css/codemirror.css:
--------------------------------------------------------------------------------
1 | /* BASICS */
2 |
3 | .CodeMirror {
4 | /* Set height, width, borders, and global font properties here */
5 | font-family: monospace;
6 | }
7 | .CodeMirror-scroll {
8 | /* Set scrolling behavior here */
9 | overflow: auto;
10 | }
11 |
12 | /* PADDING */
13 |
14 | .CodeMirror-lines {
15 | padding: 14px 0; /* Vertical padding around content */
16 | }
17 | .CodeMirror pre {
18 | padding: 0 14px; /* Horizontal padding of content */
19 | }
20 |
21 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
22 | background-color: white; /* The little square between H and V scrollbars */
23 | }
24 |
25 | /* GUTTER */
26 |
27 | .CodeMirror-gutters {
28 | border-right: 1px solid #ddd;
29 | background-color: #f7f7f7;
30 | white-space: nowrap;
31 | }
32 | .CodeMirror-linenumbers {}
33 | .CodeMirror-linenumber {
34 | padding: 0 3px 0 5px;
35 | min-width: 20px;
36 | text-align: right;
37 | color: #999;
38 | white-space: nowrap;
39 | }
40 |
41 | .CodeMirror-guttermarker { color: black; }
42 | .CodeMirror-guttermarker-subtle { color: #999; }
43 |
44 | /* CURSOR */
45 |
46 | .CodeMirror-cursor {
47 | border-left: 1px solid black;
48 | border-right: none;
49 | width: 0;
50 | }
51 | /* Shown when moving in bi-directional text */
52 | .CodeMirror div.CodeMirror-secondarycursor {
53 | border-left: 1px solid silver;
54 | }
55 | .cm-fat-cursor .CodeMirror-cursor {
56 | width: auto;
57 | border: 0 !important;
58 | background: #7e7;
59 | }
60 | .cm-fat-cursor div.CodeMirror-cursors {
61 | z-index: 1;
62 | }
63 |
64 | .cm-animate-fat-cursor {
65 | width: auto;
66 | border: 0;
67 | -webkit-animation: blink 1.06s steps(1) infinite;
68 | -moz-animation: blink 1.06s steps(1) infinite;
69 | animation: blink 1.06s steps(1) infinite;
70 | background-color: #7e7;
71 | }
72 | @-moz-keyframes blink {
73 | 0% {}
74 | 50% { background-color: transparent; }
75 | 100% {}
76 | }
77 | @-webkit-keyframes blink {
78 | 0% {}
79 | 50% { background-color: transparent; }
80 | 100% {}
81 | }
82 | @keyframes blink {
83 | 0% {}
84 | 50% { background-color: transparent; }
85 | 100% {}
86 | }
87 |
88 | /* Can style cursor different in overwrite (non-insert) mode */
89 | .CodeMirror-overwrite .CodeMirror-cursor {}
90 |
91 | .cm-tab { display: inline-block; text-decoration: inherit; }
92 |
93 | .CodeMirror-ruler {
94 | border-left: 1px solid #ccc;
95 | position: absolute;
96 | }
97 |
98 | /* DEFAULT THEME */
99 |
100 | .cm-s-default .cm-header {color: blue;}
101 | .cm-s-default .cm-quote {color: #090;}
102 | .cm-negative {color: #d44;}
103 | .cm-positive {color: #292;}
104 | .cm-header, .cm-strong {font-weight: bold;}
105 | .cm-em {font-style: italic;}
106 | .cm-link {text-decoration: underline;}
107 | .cm-strikethrough {text-decoration: line-through;}
108 |
109 | .cm-s-default .cm-keyword {color: #708;}
110 | .cm-s-default .cm-atom {color: #219;}
111 | .cm-s-default .cm-number {color: #164;}
112 | .cm-s-default .cm-def {color: #00f;}
113 | .cm-s-default .cm-variable,
114 | .cm-s-default .cm-punctuation,
115 | .cm-s-default .cm-property,
116 | .cm-s-default .cm-operator {}
117 | .cm-s-default .cm-variable-2 {color: #05a;}
118 | .cm-s-default .cm-variable-3 {color: #085;}
119 | .cm-s-default .cm-comment {color: #a50;}
120 | .cm-s-default .cm-string {color: #a11;}
121 | .cm-s-default .cm-string-2 {color: #f50;}
122 | .cm-s-default .cm-meta {color: #555;}
123 | .cm-s-default .cm-qualifier {color: #555;}
124 | .cm-s-default .cm-builtin {color: #30a;}
125 | .cm-s-default .cm-bracket {color: #997;}
126 | .cm-s-default .cm-tag {color: #170;}
127 | .cm-s-default .cm-attribute {color: #00c;}
128 | .cm-s-default .cm-hr {color: #999;}
129 | .cm-s-default .cm-link {color: #00c;}
130 |
131 | .cm-s-default .cm-error {color: #f00;}
132 | .cm-invalidchar {color: #f00;}
133 |
134 | .CodeMirror-composing { border-bottom: 2px solid; }
135 |
136 | /* Default styles for common addons */
137 |
138 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
139 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
140 | .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
141 | .CodeMirror-activeline-background {background: #e8f2ff;}
142 |
143 | /* STOP */
144 |
145 | /* The rest of this file contains styles related to the mechanics of
146 | the editor. You probably shouldn't touch them. */
147 |
148 | .CodeMirror {
149 | position: relative;
150 | overflow: hidden;
151 | background: white;
152 | }
153 |
154 | .CodeMirror-scroll {
155 | overflow: scroll !important; /* Things will break if this is overridden */
156 | /* 30px is the magic margin used to hide the element's real scrollbars */
157 | /* See overflow: hidden in .CodeMirror */
158 | margin-bottom: -30px; margin-right: -30px;
159 | padding-bottom: 30px;
160 | height: 100%;
161 | outline: none; /* Prevent dragging from highlighting the element */
162 | position: relative;
163 | }
164 | .CodeMirror-sizer {
165 | position: relative;
166 | border-right: 30px solid transparent;
167 | }
168 |
169 | /* The fake, visible scrollbars. Used to force redraw during scrolling
170 | before actual scrolling happens, thus preventing shaking and
171 | flickering artifacts. */
172 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
173 | position: absolute;
174 | z-index: 6;
175 | display: none;
176 | }
177 | .CodeMirror-vscrollbar {
178 | right: 0; top: 0;
179 | overflow-x: hidden;
180 | overflow-y: scroll;
181 | }
182 | .CodeMirror-hscrollbar {
183 | bottom: 0; left: 0;
184 | overflow-y: hidden;
185 | overflow-x: scroll;
186 | }
187 | .CodeMirror-scrollbar-filler {
188 | right: 0; bottom: 0;
189 | }
190 | .CodeMirror-gutter-filler {
191 | left: 0; bottom: 0;
192 | }
193 |
194 | .CodeMirror-gutters {
195 | position: absolute; left: 0; top: 0;
196 | min-height: 100%;
197 | z-index: 3;
198 | }
199 | .CodeMirror-gutter {
200 | white-space: normal;
201 | height: 100%;
202 | display: inline-block;
203 | vertical-align: top;
204 | margin-bottom: -30px;
205 | /* Hack to make IE7 behave */
206 | *zoom:1;
207 | *display:inline;
208 | }
209 | .CodeMirror-gutter-wrapper {
210 | position: absolute;
211 | z-index: 4;
212 | background: none !important;
213 | border: none !important;
214 | }
215 | .CodeMirror-gutter-background {
216 | position: absolute;
217 | top: 0; bottom: 0;
218 | z-index: 4;
219 | }
220 | .CodeMirror-gutter-elt {
221 | position: absolute;
222 | cursor: default;
223 | z-index: 4;
224 | }
225 | .CodeMirror-gutter-wrapper {
226 | -webkit-user-select: none;
227 | -moz-user-select: none;
228 | user-select: none;
229 | }
230 |
231 | .CodeMirror-lines {
232 | cursor: text;
233 | min-height: 1px; /* prevents collapsing before first draw */
234 | }
235 | .CodeMirror pre {
236 | /* Reset some styles that the rest of the page might have set */
237 | -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
238 | border-width: 0;
239 | background: transparent;
240 | font-family: inherit;
241 | font-size: inherit;
242 | margin: 0;
243 | white-space: pre;
244 | word-wrap: normal;
245 | line-height: inherit;
246 | color: inherit;
247 | z-index: 2;
248 | position: relative;
249 | overflow: visible;
250 | -webkit-tap-highlight-color: transparent;
251 | -webkit-font-variant-ligatures: none;
252 | font-variant-ligatures: none;
253 | }
254 | .CodeMirror-wrap pre {
255 | word-wrap: break-word;
256 | white-space: pre-wrap;
257 | word-break: normal;
258 | }
259 |
260 | .CodeMirror-linebackground {
261 | position: absolute;
262 | left: 0; right: 0; top: 0; bottom: 0;
263 | z-index: 0;
264 | }
265 |
266 | .CodeMirror-linewidget {
267 | position: relative;
268 | z-index: 2;
269 | overflow: auto;
270 | }
271 |
272 | .CodeMirror-widget {}
273 |
274 | .CodeMirror-code {
275 | outline: none;
276 | }
277 |
278 | /* Force content-box sizing for the elements where we expect it */
279 | .CodeMirror-scroll,
280 | .CodeMirror-sizer,
281 | .CodeMirror-gutter,
282 | .CodeMirror-gutters,
283 | .CodeMirror-linenumber {
284 | -moz-box-sizing: content-box;
285 | box-sizing: content-box;
286 | }
287 |
288 | .CodeMirror-measure {
289 | position: absolute;
290 | width: 100%;
291 | height: 0;
292 | overflow: hidden;
293 | visibility: hidden;
294 | }
295 |
296 | .CodeMirror-cursor { position: absolute; }
297 | .CodeMirror-measure pre { position: static; }
298 |
299 | div.CodeMirror-cursors {
300 | visibility: hidden;
301 | position: relative;
302 | z-index: 3;
303 | }
304 | div.CodeMirror-dragcursors {
305 | visibility: visible;
306 | }
307 |
308 | .CodeMirror-focused div.CodeMirror-cursors {
309 | visibility: visible;
310 | }
311 |
312 | .CodeMirror-selected { background: #d9d9d9; }
313 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
314 | .CodeMirror-crosshair { cursor: crosshair; }
315 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
316 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
317 |
318 | .cm-searching {
319 | background: #ffa;
320 | background: rgba(255, 255, 0, .4);
321 | }
322 |
323 | /* IE7 hack to prevent it from returning funny offsetTops on the spans */
324 | .CodeMirror span { *vertical-align: text-bottom; }
325 |
326 | /* Used to force a border model for a node */
327 | .cm-force-border { padding-right: .1px; }
328 |
329 | @media print {
330 | /* Hide the cursor when printing */
331 | .CodeMirror div.CodeMirror-cursors {
332 | visibility: hidden;
333 | }
334 | }
335 |
336 | /* See issue #2901 */
337 | .cm-tab-wrap-hack:after { content: ''; }
338 |
339 | /* Help users use markselection to safely style text background */
340 | span.CodeMirror-selectedtext { background: none; }
341 |
--------------------------------------------------------------------------------
/demo/src/css/demo.css:
--------------------------------------------------------------------------------
1 |
2 | code {
3 | padding: 2px 4px;
4 | font-size: 90%;
5 | color: #c7254e;
6 | background-color: #f9f2f4;
7 | border-radius: 4px;
8 | }
9 |
10 | .caret {
11 | display: inline-block;
12 | width: 0;
13 | height: 0;
14 | margin-left: 2px;
15 | vertical-align: middle;
16 | border-top: 4px dashed;
17 | border-top: 4px solid\9;
18 | border-right: 4px solid transparent;
19 | border-left: 4px solid transparent;
20 | }
21 |
22 | .modal-demo {
23 | position: relative;
24 | height: 300px;
25 | overflow: hidden;
26 | background-image: url(https://unsplash.it/1024/963?random);
27 | background-size: cover;
28 | }
29 |
30 | .nav .c-list__item {
31 | padding: 0;
32 | }
33 |
34 | .nav-menu>li.c-list__item {
35 | border-left: 2px solid white;
36 | padding-left: 8px;
37 | }
38 |
39 | .nav-menu>li.c-list__item.active {
40 | border-left-color: #1690f3;
41 | }
42 |
43 | .o-grid--demo .o-grid {
44 | border: 2px solid #ff69b4;
45 | }
46 |
47 | .o-grid--demo .o-grid__cell {
48 | border: 2px solid #00bfff;
49 | background-color: #b2f5b5;
50 | }
51 |
52 | .playground {
53 | position: relative;
54 | margin-bottom: 32px;
55 | }
56 |
57 | .playgroundPreview {
58 | position: relative;
59 | padding: 45px 15px 15px;
60 | margin: 0;
61 | border: 1px solid #ddd;
62 | box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
63 | }
64 |
65 | .playgroundPreview:after {
66 | position: absolute;
67 | top: 15px;
68 | left: 15px;
69 | font-size: 12px;
70 | font-weight: 700;
71 | color: #959595;
72 | text-transform: uppercase;
73 | letter-spacing: 1px;
74 | content: "Preview";
75 | }
76 |
77 | .playgroundCode {
78 | border: 1px solid #ddd;
79 | border-top: none;
80 | background-color: #f8f5ec;
81 | position: relative;
82 | padding-top: 30px;
83 | }
84 |
85 | .playgroundStage:after {
86 | position: absolute;
87 | top: 15px;
88 | left: 15px;
89 | font-size: 12px;
90 | font-weight: 700;
91 | color: #959595;
92 | text-transform: uppercase;
93 | letter-spacing: 1px;
94 | content: "Live Code";
95 | }
96 |
97 | .playgroundCodeToggle {
98 | position: absolute;
99 | right: 0;
100 | border: 1px solid #ddd;
101 | border-top-color: white;
102 | background-color: white;
103 | margin-top: -1px;
104 | padding: 8px;
105 | }
106 |
107 | .playgroundCodeToggle.open {
108 | background-color: #f8f5ec;
109 | border-top-color: #f8f5ec;
110 | }
111 |
112 | .playground.playground--side-code .playgroundCodeToggle {
113 | display: none;
114 | }
115 |
116 | @media (min-width: 48em) {
117 | .fixed\@large {
118 | position: fixed;
119 | }
120 |
121 | .playground.playground--side-code {
122 | display: table;
123 | width: 100%;
124 | margin-bottom: 0;
125 | }
126 |
127 | .playground.playground--side-code .playgroundPreview {
128 | display: table-cell;
129 | width: 45%;
130 | }
131 |
132 | .playground.playground--side-code .playgroundCode {
133 | display: table-cell;
134 | width: 55%;
135 | vertical-align: top;
136 | border-top: 1px solid #ddd;
137 | }
138 | }
139 |
140 |
--------------------------------------------------------------------------------
/demo/src/css/react.css:
--------------------------------------------------------------------------------
1 |
2 | .cm-s-solarized-light {
3 | background-color: #f8f5ec;
4 | color: #637c84
5 | }
6 |
7 | .cm-s-solarized-light .emphasis {
8 | font-weight: bold
9 | }
10 |
11 | .cm-s-solarized-light .dotted {
12 | border-bottom: 1px dotted #cb4b16
13 | }
14 |
15 | .cm-s-solarized-light .CodeMirror-gutter {
16 | background-color: #eee8d5;
17 | border-right: 3px solid #eee8d5
18 | }
19 |
20 | .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
21 | color: #93a1a1
22 | }
23 |
24 | .cm-s-solarized-light .CodeMirror-cursor {
25 | border-left-color: #002b36 !important
26 | }
27 |
28 | .cm-s-solarized-light .CodeMirror-matchingbracket {
29 | color: #002b36;
30 | background-color: #eee8d5;
31 | box-shadow: 0 0 10px #eee8d5;
32 | font-weight: bold
33 | }
34 |
35 | .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
36 | color: #002b36;
37 | background-color: #eee8d5;
38 | box-shadow: 0 0 10px #eee8d5;
39 | font-weight: bold;
40 | color: #dc322f;
41 | border-bottom: 1px dotted #cb4b16
42 | }
43 |
44 | .cm-s-solarized-light span.cm-keyword {
45 | color: #859900
46 | }
47 |
48 | .cm-s-solarized-light span.cm-atom {
49 | color: #2aa198
50 | }
51 |
52 | .cm-s-solarized-light span.cm-number {
53 | color: #586e75
54 | }
55 |
56 | .cm-s-solarized-light span.cm-def {
57 | color: #637c84
58 | }
59 |
60 | .cm-s-solarized-light span.cm-variable {
61 | color: #637c84
62 | }
63 |
64 | .cm-s-solarized-light span.cm-variable-2 {
65 | color: #b58900
66 | }
67 |
68 | .cm-s-solarized-light span.cm-variable-3 {
69 | color: #cb4b16
70 | }
71 |
72 | .cm-s-solarized-light span.cm-comment {
73 | color: #93a1a1
74 | }
75 |
76 | .cm-s-solarized-light span.cm-property {
77 | color: #657b83
78 | }
79 |
80 | .cm-s-solarized-light span.cm-operator {
81 | color: #657b83
82 | }
83 |
84 | .cm-s-solarized-light span.cm-string {
85 | color: #36958e
86 | }
87 |
88 | .cm-s-solarized-light span.cm-error {
89 | font-weight: bold;
90 | border-bottom: 1px dotted #cb4b16
91 | }
92 |
93 | .cm-s-solarized-light span.cm-bracket {
94 | color: #268bd2
95 | }
96 |
97 | .cm-s-solarized-light span.cm-tag {
98 | color: #268bd2
99 | }
100 |
101 | .cm-s-solarized-light span.cm-attribute {
102 | color: #586e75
103 | }
104 |
105 | .cm-s-solarized-light span.cm-meta {
106 | color: #268bd2
107 | }
108 |
109 | .cm-s-solarized-dark {
110 | background-color: #002b36;
111 | color: #839496
112 | }
113 |
114 | .cm-s-solarized-dark .emphasis {
115 | font-weight: bold
116 | }
117 |
118 | .cm-s-solarized-dark .dotted {
119 | border-bottom: 1px dotted #cb4b16
120 | }
121 |
122 | .cm-s-solarized-dark .CodeMirror-gutter {
123 | background-color: #073642;
124 | border-right: 3px solid #073642
125 | }
126 |
127 | .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
128 | color: #586e75
129 | }
130 |
131 | .cm-s-solarized-dark .CodeMirror-cursor {
132 | border-left-color: #fdf6e3 !important
133 | }
134 |
135 | .cm-s-solarized-dark .CodeMirror-matchingbracket {
136 | color: #fdf6e3;
137 | background-color: #073642;
138 | box-shadow: 0 0 10px #073642;
139 | font-weight: bold
140 | }
141 |
142 | .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
143 | color: #fdf6e3;
144 | background-color: #073642;
145 | box-shadow: 0 0 10px #073642;
146 | font-weight: bold;
147 | color: #dc322f;
148 | border-bottom: 1px dotted #cb4b16
149 | }
150 |
151 | .cm-s-solarized-dark span.cm-keyword {
152 | color: #839496;
153 | font-weight: bold
154 | }
155 |
156 | .cm-s-solarized-dark span.cm-atom {
157 | color: #2aa198
158 | }
159 |
160 | .cm-s-solarized-dark span.cm-number {
161 | color: #93a1a1
162 | }
163 |
164 | .cm-s-solarized-dark span.cm-def {
165 | color: #268bd2
166 | }
167 |
168 | .cm-s-solarized-dark span.cm-variable {
169 | color: #cb4b16
170 | }
171 |
172 | .cm-s-solarized-dark span.cm-variable-2 {
173 | color: #cb4b16
174 | }
175 |
176 | .cm-s-solarized-dark span.cm-variable-3 {
177 | color: #cb4b16
178 | }
179 |
180 | .cm-s-solarized-dark span.cm-comment {
181 | color: #586e75
182 | }
183 |
184 | .cm-s-solarized-dark span.cm-property {
185 | color: #b58900
186 | }
187 |
188 | .cm-s-solarized-dark span.cm-operator {
189 | color: #839496
190 | }
191 |
192 | .cm-s-solarized-dark span.cm-string {
193 | color: #6c71c4
194 | }
195 |
196 | .cm-s-solarized-dark span.cm-error {
197 | font-weight: bold;
198 | border-bottom: 1px dotted #cb4b16
199 | }
200 |
201 | .cm-s-solarized-dark span.cm-bracket {
202 | color: #cb4b16
203 | }
204 |
205 | .cm-s-solarized-dark span.cm-tag {
206 | color: #839496
207 | }
208 |
209 | .cm-s-solarized-dark span.cm-attribute {
210 | color: #93a1a1
211 | }
212 |
213 | .cm-s-solarized-dark span.cm-meta {
214 | color: #268bd2
215 | }
216 |
--------------------------------------------------------------------------------
/demo/src/css/syntax.css:
--------------------------------------------------------------------------------
1 | .highlight pre code {
2 | color: #637c84;
3 | }
4 |
5 | .highlight {
6 | color: #333333;
7 | background: #f8f5ec;
8 | }
9 |
10 | .highlight .c {
11 | color: #93a1a1;
12 | }
13 |
14 |
15 | .highlight .g {
16 | color: #637c84;
17 | }
18 |
19 | /* Generic */
20 |
21 | .highlight .k {
22 | color: #859900;
23 | }
24 |
25 | /* Keyword */
26 |
27 | .highlight .l {
28 | color: #637c84;
29 | }
30 |
31 | /* Literal */
32 |
33 | .highlight .n {
34 | color: #637c84;
35 | }
36 |
37 | /* Name */
38 |
39 | .highlight .o {
40 | color: #859900;
41 | }
42 |
43 | /* Operator */
44 |
45 | .highlight .x {
46 | color: #cc7a6f;
47 | }
48 |
49 | /* Other */
50 |
51 | .highlight .p {
52 | color: #637c84;
53 | }
54 |
55 | /* Punctuation */
56 |
57 | .highlight .cm {
58 | color: #93a1a1;
59 | }
60 |
61 | /* Comment.Multiline */
62 |
63 | .highlight .cp {
64 | color: #859900;
65 | }
66 |
67 | /* Comment.Preproc */
68 |
69 | .highlight .c1 {
70 | color: #93a1a1;
71 | }
72 |
73 | /* Comment.Single */
74 |
75 | .highlight .cs {
76 | color: #859900;
77 | }
78 |
79 | /* Comment.Special */
80 |
81 | .highlight .gd {
82 | color: #36958e;
83 | }
84 |
85 | /* Generic.Deleted */
86 |
87 | .highlight .ge {
88 | font-style: italic;
89 | color: #637c84;
90 | }
91 |
92 | /* Generic.Emph */
93 |
94 | .highlight .gr {
95 | color: #dc322f;
96 | }
97 |
98 | /* Generic.Error */
99 |
100 | .highlight .gh {
101 | color: #cc7a6f;
102 | }
103 |
104 | /* Generic.Heading */
105 |
106 | .highlight .gi {
107 | color: #859900;
108 | }
109 |
110 | /* Generic.Inserted */
111 |
112 | .highlight .go {
113 | color: #637c84;
114 | }
115 |
116 | /* Generic.Output */
117 |
118 | .highlight .gp {
119 | color: #637c84;
120 | }
121 |
122 | /* Generic.Prompt */
123 |
124 | .highlight .gs {
125 | font-weight: bold;
126 | color: #637c84;
127 | }
128 |
129 | /* Generic.Strong */
130 |
131 | .highlight .gu {
132 | color: #cc7a6f;
133 | }
134 |
135 | /* Generic.Subheading */
136 |
137 | .highlight .gt {
138 | color: #637c84;
139 | }
140 |
141 | /* Generic.Traceback */
142 |
143 | .highlight .kc {
144 | color: #cc7a6f;
145 | }
146 |
147 | /* Keyword.Constant */
148 |
149 | .highlight .kd {
150 | color: #268bd2;
151 | }
152 |
153 | /* Keyword.Declaration */
154 |
155 | .highlight .kn {
156 | color: #859900;
157 | }
158 |
159 | /* Keyword.Namespace */
160 |
161 | .highlight .kp {
162 | color: #859900;
163 | }
164 |
165 | /* Keyword.Pseudo */
166 |
167 | .highlight .kr {
168 | color: #268bd2;
169 | }
170 |
171 | /* Keyword.Reserved */
172 |
173 | .highlight .kt {
174 | color: #dc322f;
175 | }
176 |
177 | /* Keyword.Type */
178 |
179 | .highlight .ld {
180 | color: #637c84;
181 | }
182 |
183 | /* Literal.Date */
184 |
185 | .highlight .m {
186 | color: #36958e;
187 | }
188 |
189 | /* Literal.Number */
190 |
191 | .highlight .s {
192 | color: #36958e;
193 | }
194 |
195 | /* Literal.String */
196 |
197 | .highlight .na {
198 | color: #637c84;
199 | }
200 |
201 | /* Name.Attribute */
202 |
203 | .highlight .nb {
204 | color: #b58900;
205 | }
206 |
207 | /* Name.Builtin */
208 |
209 | .highlight .nc {
210 | color: #268bd2;
211 | }
212 |
213 | /* Name.Class */
214 |
215 | .highlight .no {
216 | color: #cc7a6f;
217 | }
218 |
219 | /* Name.Constant */
220 |
221 | .highlight .nd {
222 | color: #268bd2;
223 | }
224 |
225 | /* Name.Decorator */
226 |
227 | .highlight .ni {
228 | color: #cc7a6f;
229 | }
230 |
231 | /* Name.Entity */
232 |
233 | .highlight .ne {
234 | color: #cc7a6f;
235 | }
236 |
237 | /* Name.Exception */
238 |
239 | .highlight .nf {
240 | color: #268bd2;
241 | }
242 |
243 | /* Name.Function */
244 |
245 | .highlight .nl {
246 | color: #637c84;
247 | }
248 |
249 | /* Name.Label */
250 |
251 | .highlight .nn {
252 | color: #637c84;
253 | }
254 |
255 | /* Name.Namespace */
256 |
257 | .highlight .nx {
258 | color: #637c84;
259 | }
260 |
261 | /* Name.Other */
262 |
263 | .highlight .py {
264 | color: #637c84;
265 | }
266 |
267 | /* Name.Property */
268 |
269 | .highlight .nt {
270 | color: #268bd2;
271 | }
272 |
273 | /* Name.Tag */
274 |
275 | .highlight .nv {
276 | color: #268bd2;
277 | }
278 |
279 | /* Name.Variable */
280 |
281 | .highlight .ow {
282 | color: #859900;
283 | }
284 |
285 | /* Operator.Word */
286 |
287 | .highlight .w {
288 | color: #637c84;
289 | }
290 |
291 | /* Text.Whitespace */
292 |
293 | .highlight .mf {
294 | color: #36958e;
295 | }
296 |
297 | /* Literal.Number.Float */
298 |
299 | .highlight .mh {
300 | color: #36958e;
301 | }
302 |
303 | /* Literal.Number.Hex */
304 |
305 | .highlight .mi {
306 | color: #36958e;
307 | }
308 |
309 | /* Literal.Number.Integer */
310 |
311 | .highlight .mo {
312 | color: #36958e;
313 | }
314 |
315 | /* Literal.Number.Oct */
316 |
317 | .highlight .sb {
318 | color: #93a1a1;
319 | }
320 |
321 | /* Literal.String.Backtick */
322 |
323 | .highlight .sc {
324 | color: #36958e;
325 | }
326 |
327 | /* Literal.String.Char */
328 |
329 | .highlight .sd {
330 | color: #637c84;
331 | }
332 |
333 | /* Literal.String.Doc */
334 |
335 | .highlight .s2 {
336 | color: #36958e;
337 | }
338 |
339 | /* Literal.String.Double */
340 |
341 | .highlight .se {
342 | color: #cc7a6f;
343 | }
344 |
345 | /* Literal.String.Escape */
346 |
347 | .highlight .sh {
348 | color: #637c84;
349 | }
350 |
351 | /* Literal.String.Heredoc */
352 |
353 | .highlight .si {
354 | color: #36958e;
355 | }
356 |
357 | /* Literal.String.Interpol */
358 |
359 | .highlight .sx {
360 | color: #36958e;
361 | }
362 |
363 | /* Literal.String.Other */
364 |
365 | .highlight .sr {
366 | color: #dc322f;
367 | }
368 |
369 | /* Literal.String.Regex */
370 |
371 | .highlight .s1 {
372 | color: #36958e;
373 | }
374 |
375 | /* Literal.String.Single */
376 |
377 | .highlight .ss {
378 | color: #36958e;
379 | }
380 |
381 | /* Literal.String.Symbol */
382 |
383 | .highlight .bp {
384 | color: #268bd2;
385 | }
386 |
387 | /* Name.Builtin.Pseudo */
388 |
389 | .highlight .vc {
390 | color: #268bd2;
391 | }
392 |
393 | /* Name.Variable.Class */
394 |
395 | .highlight .vg {
396 | color: #268bd2;
397 | }
398 |
399 | /* Name.Variable.Global */
400 |
401 | .highlight .vi {
402 | color: #268bd2;
403 | }
404 |
405 | /* Name.Variable.Instance */
406 |
407 | .highlight .il {
408 | color: #36958e;
409 | }
410 |
--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {render} from 'react-dom'
3 |
4 | import { Example } from './Example'
5 |
6 | import { AlertDemo } from './AlertDemo'
7 | import { BadgeDemo } from './BadgeDemo'
8 | import { BlockquoteDemo } from './BlockquoteDemo'
9 | import { BubbleDemo } from './BubbleDemo'
10 | import { ButtonDemo } from './ButtonDemo'
11 | import { CalendarDemo } from './CalendarDemo'
12 | import { CardDemo } from './CardDemo'
13 | import { ContainerDemo } from './ContainerDemo'
14 | import { DrawerDemo } from './DrawerDemo'
15 | import { DropdownButtonDemo } from './DropdownButtonDemo'
16 | import { GridDemo } from './GridDemo'
17 | import { HeadingDemo } from './HeadingDemo'
18 | import { ImageDemo } from './ImageDemo'
19 | import { ListDemo } from './ListDemo'
20 | import { MenuDemo } from './MenuDemo'
21 | import { ModalDemo } from './ModalDemo'
22 | import { NavDemo } from './NavDemo'
23 | import { PaginationDemo } from './PaginationDemo'
24 | import { OverlayDemo } from './OverlayDemo'
25 | import { TabDemo } from './TabDemo'
26 | import { TableDemo } from './TableDemo'
27 | import { TagDemo } from './TagDemo'
28 | import { ToggleDemo } from './ToggleDemo'
29 | import { TreeDemo } from './TreeDemo'
30 |
31 | import {
32 | Container, Grid, Cell,
33 | H1, H2, H3, H4, H5, H6,
34 | List, ListItem,
35 | P,
36 | Button,
37 | Nav, NavContent, NavItem
38 | } from '../../src'
39 |
40 | import Waypoint from 'react-waypoint'
41 |
42 | require('blaze/dist/blaze.min.css')
43 | require('blaze/dist/blaze.animations.min.css')
44 | require('./css/demo.css')
45 |
46 | class GA extends React.Component {
47 | componentWillMount() {
48 | const { id } = this.props
49 | const script = document.createElement("script");
50 |
51 | script.innerText = `
52 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
53 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
54 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
55 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
56 |
57 | ga('create', '${id}', 'auto');
58 | ga('send', 'pageview');
59 | `;
60 |
61 | document.body.appendChild(script);
62 | }
63 |
64 | render(){
65 | return
66 | }
67 | }
68 |
69 |
70 | class Section extends React.Component {
71 | constructor(props){
72 | super(props)
73 |
74 | this.handleEnter = (e) => {
75 | if (e.currentPosition === "inside" && e.previousPosition === "above"){
76 | const { id, onEnter } = this.props
77 | onEnter(id)
78 | }
79 | }
80 | this.handleLeave = (e) => {
81 | if (e.currentPosition === "above" && e.previousPosition === "inside"){
82 | const { id, onEnter } = this.props
83 | onEnter(id)
84 | }
85 | }
86 | }
87 |
88 | render(){
89 | const { id } = this.props
90 | return (
91 |
92 |
100 | )
101 | }
102 | }
103 |
104 | class Demo extends React.Component {
105 |
106 | constructor(props){
107 | super(props)
108 |
109 | this.state = {
110 | selected: ""
111 | }
112 | this.onEnter = (selected) => {
113 | // console.log("onEnter", selected)
114 | this.setState({selected})
115 | }
116 | }
117 |
118 | render() {
119 | return
120 |
126 |
127 |
128 |
129 |
137 |
139 |
141 |
143 |
144 |
146 |
147 |
149 |
150 |
152 |
155 |
156 |
158 |
159 |
161 |
162 |
164 |
165 |
167 |
168 |
170 |
171 |
173 |
174 |
176 |
177 |
179 |
180 |
182 |
185 |
186 |
188 |
191 |
192 |
194 |
195 |
197 |
198 |
200 |
201 |
203 |
206 |
207 |
209 |
210 |
212 |
213 |
214 | |
215 |
216 | |
250 |
251 |
252 |
254 | }
255 |
256 | renderLink(id, name){
257 | const active = id == this.state.selected
258 | // Force selection in 50ms, used because trusting waypoints leaving doesn't work well on scroll jumps
259 | return (
260 | Introduction
130 |
131 | ReactBlazeCSS is a set of React components using BlazeCSS styles
132 | and heavily inspired by ReactBoostrap.
133 | Support is pretty limited and expiramental for now, more components will be added soon.
134 |
Useless Example
136 |Components
140 |213 |
214 |
217 |
249 | Introduction
218 |-
219 | {this.renderLink("example", "Example")}
220 |
Components
222 |-
223 | {this.renderLink("alerts", "Alerts")}
224 | {this.renderLink("badges", "Badges")}
225 | {this.renderLink("blockquotes", "Blockquotes")}
226 | {this.renderLink("bubbles", "Bubbles")}
227 | {this.renderLink("buttons", "Buttons")}
228 | {this.renderLink("calendars", "Calendars")}
229 | {this.renderLink("cards", "Cards")}
230 | {this.renderLink("containers", "Containers")}
231 | {this.renderLink("drawers", "Drawers")}
232 | {this.renderLink("dropdownButtons", "DropdownButton")}
233 | {this.renderLink("grids", "Grids")}
234 | {this.renderLink("headings", "Headings")}
235 | {this.renderLink("images", "Images")}
236 | {this.renderLink("lists", "Lists")}
237 | {this.renderLink("menus", "Menus")}
238 | {this.renderLink("modals", "Modals")}
239 | {this.renderLink("navs", "Navs")}
240 | {this.renderLink("overlays", "Overlays")}
241 | {this.renderLink("pagination", "Pagination")}
242 | {this.renderLink("tables", "Tables")}
243 | {this.renderLink("tabs", "Tabs")}
244 | {this.renderLink("tags", "Tags")}
245 | {this.renderLink("toggles", "Toggles")}
246 | {this.renderLink("trees", "Trees")}
247 |
8 | {this.props.children}
9 |
10 | )
11 | }
12 | }
13 |
14 | export class Alert extends React.Component {
15 | render(){
16 | const { bStyle, onClose, children, ...props } = this.props
17 | return (
18 |
21 |
22 | {children}
23 |
24 | )
25 | }
26 | }
--------------------------------------------------------------------------------
/src/Badge.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export const Badge = ({ children, className, bStyle, rounded, ...props }) => (
5 |
10 | {children}
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/src/Blockquote.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class Blockquote extends React.Component {
5 | render(){
6 | const { children, bStyle, className, cite, ...props } = this.props
7 |
8 | let classNames = bem("c-blockquote", {
9 | [bStyle]: true
10 | }, className)
11 |
12 | return (
13 | 14 |19 | ) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/Bubble.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { bem } from './utils' 3 | 4 | export const Bubble = ({ children, className, position="top", animate, ...props }) => ( 5 |15 | {children} 16 |
17 | {cite && } 18 |
13 | {children}
14 |
15 | )
16 |
--------------------------------------------------------------------------------
/src/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class ButtonGroup extends React.Component {
5 | render(){
6 | const { children, rounded, size, ghost, ...props } = this.props
7 | var className = bem("c-button-group", {
8 | rounded
9 | })
10 |
11 | if (size || ghost){
12 | return (
13 |
14 | {React.Children.map(children, el => el && React.cloneElement(el, {
15 | size, ghost
16 | }))}
17 |
18 | )
19 | } else {
20 | return (
21 |
22 | {children}
23 |
24 | )
25 | }
26 | }
27 | }
28 |
29 | export class Button extends React.Component {
30 | render(){
31 | const { componentClass="button", children, bStyle, className, rounded, ghost, size, block, href, ...props } = this.props
32 |
33 |
34 | var classNames = bem("c-button", {
35 | ghost: ghost && !bStyle,
36 | [!ghost && bStyle]: true,
37 | [ghost && bStyle && ("ghost-" + bStyle)]: true,
38 | [size]: true,
39 | rounded,
40 | block,
41 | }, {
42 | [className]: true
43 | })
44 |
45 | if (href){
46 | return {children}
47 | }
48 | const Component = componentClass
49 | return
6 | {children}
7 |
8 | )
9 |
10 | export class CalendarHeaderControl extends React.Component {
11 |
12 | constructor(props){
13 | super(props)
14 |
15 | this.onPrev = (e) => {
16 | e.preventDefault()
17 | const { onPrev } = this.props
18 | if (onPrev) onPrev()
19 | }
20 |
21 | this.onNext = (e) => {
22 | e.preventDefault()
23 | const { onNext } = this.props
24 | if (onNext) onNext()
25 | }
26 | }
27 |
28 | render(){
29 | const { onPrev, onNext, children } = this.props
30 | return (
31 | {children}
34 |
35 | {day}
)}
43 |
93 | {children}
94 |
95 | )
96 | }
--------------------------------------------------------------------------------
/src/Card.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem, makeClass } from './utils'
3 |
4 | export const Card = ({ children, bStyle, className, shadow, grouped, ...props }) => {
5 | const classNames = bem("c-card", {
6 | [shadow]: true,
7 | [bStyle]: true,
8 | grouped,
9 | }, className)
10 |
11 | return {children}
12 | }
13 |
14 | export const CardContent = ({ children, className, divider, ...props }) => {
15 | const classNames = bem("c-card__content", {
16 | divider
17 | }, className)
18 |
19 | return {children}
20 | }
21 |
22 | export const CardItem = ({ children, className, divider, disabled, active, ...props }) => {
23 | const classNames = bem("c-card__item", {
24 | divider, disabled, active
25 | }, className)
26 |
27 | return {children}
28 | }
29 |
30 | export const CardGroupDivider = makeClass("div", "c-card__group-divider")
31 |
--------------------------------------------------------------------------------
/src/Container.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class Container extends React.Component {
5 | render(){
6 | const { size="medium", className, componentClass, children, ...props } = this.props
7 |
8 | let classNames = bem("o-container", {
9 | [size]: true
10 | }, className)
11 |
12 | const Component = componentClass || "div"
13 |
14 | return (
15 | {children}
19 | }
20 | }
21 |
22 | export const DrawerBody = makeClass("div", "c-drawer__body")
23 |
24 | export const DrawerFooter = ({ children, className, block, ...props }) => {
25 | const classNames = bem("c-drawer__footer", {
26 | block
27 | }, className)
28 |
29 | return {children}
30 | }
--------------------------------------------------------------------------------
/src/DropdownButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | import { Button } from './Button'
5 | import { Menu } from './Menu'
6 | import { Overlay } from './Overlay'
7 | import shallowCompare from 'react-addons-shallow-compare'
8 |
9 | function wrapClick(element, clickHandler){
10 | if (element.props && element.props.onClick){
11 | return React.cloneElement(element, {
12 | onClick: (e) => {
13 | element.props.onClick(e)
14 | clickHandler(e)
15 | }
16 | })
17 | }
18 | return element
19 | }
20 |
21 | export class DropdownMenu extends React.Component {
22 | shouldComponentUpdate(nextProps, nextState) {
23 | // Important to be lazy here as the children will be cloned with new props
24 | return shallowCompare(this, nextProps, nextState);
25 | }
26 |
27 | render(){
28 | const { children, handleToggle } = this.props
29 | return (
30 |
35 | )
36 | }
37 | }
38 |
39 | export class DropdownButton extends React.Component {
40 |
41 | constructor(props){
42 | super(props)
43 |
44 | this.state = {
45 | open: false
46 | }
47 |
48 | this.handleToggle = () => {
49 | this.setState({ open: !this.state.open })
50 | }
51 | }
52 |
53 | render(){
54 | const { children, label, ...props } = this.props
55 | const { open } = this.state
56 |
57 | return (
58 |
59 |
64 | {open && {children} }
66 |
67 | )
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/Grid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem, sizes, sizeAlias } from './utils'
3 |
4 |
5 | export class Grid extends React.Component {
6 | render(){
7 | const { children, componentClass, wrap=true, verticalAlign, noGutter, className, ...props } = this.props
8 |
9 | let classNames = bem("o-grid", {
10 | wrap,
11 | [verticalAlign]: true,
12 | "no-gutter": noGutter
13 | }, className)
14 |
15 | const Component = componentClass || 'div'
16 |
17 | return (
18 | - {children}
{children}
14 | }
--------------------------------------------------------------------------------
/src/Nav.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class Nav extends React.Component {
5 | render(){
6 | const { children, className, inline, shadow, animate, light, position, fixed, ...props } = this.props
7 |
8 | let classNames = bem("c-nav", {
9 | inline, fixed, light,
10 | [shadow]: true,
11 | [position]: true,
12 | }, {
13 | "a-nav": animate,
14 | "a-nav--slow": animate === "slow",
15 | "a-nav--fast": animate === "fast",
16 | }, className)
17 |
18 | return {children}
19 | }
20 | }
21 |
22 | export class NavContent extends React.Component {
23 | render(){
24 | const { children, className, right, centered, ...props } = this.props
25 |
26 | const classNames = bem("c-nav__content", {
27 | right,
28 | }, {
29 | "u-centered": centered
30 | }, className)
31 |
32 | return {children}
33 | }
34 | }
35 |
36 | export class NavItem extends React.Component {
37 | render(){
38 | const { children, className, right, active, centered, bStyle, ...props } = this.props
39 |
40 | const classNames = bem("c-nav__item", {
41 | right, active,
42 | [bStyle]: true,
43 | }, {
44 | "u-centered": centered
45 | }, className)
46 |
47 | const Component = props.href ? "a" : "span"
48 |
49 | return {children}
30 | }
31 | }
32 |
33 | export class PaginationPage extends React.Component {
34 | render(){
35 | const { children, className, current, ...props } = this.props
36 |
37 | var classNames = bem("c-pagination__page", {
38 | current
39 | }, className)
40 |
41 | return
42 | }
43 | }
--------------------------------------------------------------------------------
/src/Tab.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 |
5 |
6 | export class TabPane extends React.Component {
7 | render(){
8 | const { children, active, ...props } = this.props
9 |
10 | var className = bem("c-tabs__tab", {
11 | active
12 | })
13 |
14 | return {children}
15 | }
16 | }
17 |
18 | export class Tab extends React.Component {
19 | render() {
20 | const props = { ...this.props };
21 |
22 | // These props are for the parent `{children}
54 | }
55 | }
56 |
57 |
58 |
59 | export class Tabs extends React.Component {
60 |
61 | constructor(props){
62 | super(props)
63 |
64 | this.state = {
65 | activeKey: props.defaultActiveKey
66 | }
67 |
68 | this.onSelect = (eventKey) => {
69 | this.setState({
70 | activeKey: eventKey
71 | })
72 | }
73 | }
74 |
75 | render(){
76 | const { children, animate, bStyle, activeKey, defaultActiveKey, ...props } = this.props
77 |
78 | var className = bem("c-tabs", {
79 | [bStyle]: true,
80 | }, {
81 | "a-tabs": animate
82 | })
83 |
84 | return (
85 |
86 |
91 | )
92 | }
93 |
94 | renderTabHeadings(){
95 | const { activeKey=this.state.activeKey, children } = this.props
96 |
97 | return React.Children.map(children, el => {
98 | const { title, disabled, eventKey, onSelect=this.onSelect } = el.props
99 | return
87 | {this.renderTabHeadings()}
88 |
89 | {this.renderTabPanes()}
90 |
15 | {children}
16 |
17 | )
18 | }
19 | }
20 |
21 | export class Tag extends React.Component {
22 | render(){
23 | const { children, onClose, ...props } = this.props
24 | return (
25 |
29 | )
30 | }
31 | }
--------------------------------------------------------------------------------
/src/Toggle.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class Toggle extends React.Component {
5 | render(){
6 | const { id, checked, bStyle, animate, onChange, defaultChecked, children, right, ...props } = this.props
7 | const name = "c-toggle"
8 |
9 | const toggleComponent = (
10 |
11 |
12 |
13 | )
14 | return (
15 |
29 | )
30 | }
31 | }
--------------------------------------------------------------------------------
/src/Tree.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { bem } from './utils'
3 |
4 | export class Tree extends React.Component {
5 | render(){
6 | const { animate, children, className, ...props } = this.props
7 | const classNames = bem("c-tree", {}, {
8 | "a-tree": animate,
9 | "a-tree--slow": animate === "slow",
10 | "a-tree--fast": animate === "fast",
11 | }, className)
12 | return (
13 | -
14 | {children}
15 |
18 |
19 | Text
20 |
21 | )
22 | })
23 |
24 | it("works with bStyle", () => {
25 | expectJSX(
27 |
28 | Text
29 |
30 | )
31 | })
32 | })
33 |
34 | describe('Alerts', () => {
35 |
36 | it("renders", () => {
37 | expectJSX(
39 | Text
40 |
41 | )
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/tests/Badge.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Badge} from '../src/Badge'
6 |
7 | function expectJSX(element){
8 | let renderer = createRenderer();
9 | renderer.render(element);
10 | return expect(renderer.getRenderOutput());
11 | }
12 |
13 | describe('Badge', () => {
14 |
15 | it("renders", () => {
16 | expectJSX(Text).toEqualJSX( 17 |
18 |22 | ) 23 | }) 24 | 25 | it("works with bStyle", () => { 26 | expectJSX(19 | Text 20 |
21 |
Text).toEqualJSX( 27 |
28 |32 | ) 33 | }) 34 | 35 | it("cites", () => { 36 | expectJSX(29 | Text 30 |
31 |
Text).toEqualJSX( 37 |
38 |43 | ) 44 | }) 45 | 46 | it("works with a custom className", () => { 47 | expectJSX(39 | Text 40 |
41 | 42 |
Text).toEqualJSX( 48 |
49 |53 | ) 54 | }) 55 | }) 56 | -------------------------------------------------------------------------------- /tests/Bubble.unit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {createRenderer} from 'react-addons-test-utils'; 3 | import expect from 'expect' 4 | 5 | import {Bubble} from '../src/Bubble' 6 | 7 | function expectJSX(element){ 8 | let renderer = createRenderer(); 9 | renderer.render(element); 10 | return expect(renderer.getRenderOutput()); 11 | } 12 | 13 | describe('Bubble', () => { 14 | 15 | it("renders", () => { 16 | expectJSX(50 | Text 51 |
52 |
Text
18 | )
19 | expectJSX(Text
21 | )
22 | })
23 |
24 | it("animates", () => {
25 | expectJSX(Text
27 | )
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/tests/Button.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Button, ButtonGroup} from '../src/Button'
6 |
7 |
8 | function expectJSX(element){
9 | let renderer = createRenderer();
10 | renderer.render(element);
11 | return expect(renderer.getRenderOutput());
12 | }
13 |
14 | describe('Button', () => {
15 |
16 | it("renders", () => {
17 | expectJSX().toEqualJSX(
18 |
21 | )
22 | })
23 |
24 | it("works with bStyle and ghost", () => {
25 | expectJSX().toEqualJSX(
26 |
29 | )
30 | expectJSX().toEqualJSX(
31 |
34 | )
35 | expectJSX().toEqualJSX(
36 |
39 | )
40 | })
41 |
42 | it("works with rounded and block", () => {
43 | expectJSX().toEqualJSX(
44 |
47 | )
48 | })
49 |
50 | it("works with size", () => {
51 | expectJSX().toEqualJSX(
52 |
55 | )
56 | })
57 |
58 | it("changes to link when using href", () => {
59 | expectJSX().toEqualJSX(
60 |
61 | Text
62 |
63 | )
64 | })
65 | })
66 |
67 | describe('ButtonGroup', () => {
68 |
69 | it("renders", () => {
70 | expectJSX(Text
18 | )
19 | expectJSX(Text
21 | )
22 | })
23 | })
24 |
25 | describe('CalendarContainer', () => {
26 |
27 | it("renders", () => {
28 | expectJSX(Text
30 | )
31 | })
32 | })
33 |
34 | describe('CalendarDayLabels', () => {
35 |
36 | it("renders", () => {
37 | expectJSX(1
40 | 2
41 | 3
42 | Text
56 |
57 | Text
18 | )
19 | })
20 |
21 | it("works with bStyle", () => {
22 | expectJSX(Text
24 | )
25 | })
26 |
27 | it("works with shadow and grouped", () => {
28 | expectJSX(Text
30 | )
31 | })
32 | })
33 |
34 | describe('CardContent', () => {
35 |
36 | it("renders", () => {
37 | expectJSX(Text
39 | )
40 | })
41 |
42 | it("works with divider", () => {
43 | expectJSX(Text
45 | )
46 | })
47 | })
48 |
49 | describe('CardItem', () => {
50 |
51 | it("renders", () => {
52 | expectJSX(Text
54 | )
55 | })
56 |
57 | it("works with divider, disabled, active", () => {
58 | expectJSX(Text
60 | )
61 | })
62 | })
63 |
64 | describe('CardGroupDivider', () => {
65 |
66 | it("renders", () => {
67 | expectJSX(text
18 | )
19 | })
20 |
21 | it("works with sizes", () => {
22 | expectJSX(text
24 | )
25 | })
26 |
27 | it("works with className and custom componentClass", () => {
28 | expectJSX(text
18 | )
19 | expectJSX(text
21 | )
22 | })
23 |
24 | it("works with position", () => {
25 | expectJSX(text
27 | )
28 | })
29 |
30 | it("works with className and shadow", () => {
31 | expectJSX(text
33 | )
34 | })
35 |
36 | it("works with animate", () => {
37 | expectJSX(text
39 | )
40 | })
41 | })
42 |
43 | describe('DrawerFooter', () => {
44 |
45 | it("renders", () => {
46 | expectJSX(text
48 | )
49 | expectJSX(text
51 | )
52 | })
53 | })
54 |
--------------------------------------------------------------------------------
/tests/DropdownButton.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Button, DropdownButton, Menu, MenuItem, Overlay} from '../src/'
6 |
7 |
8 | function expectJSX(element){
9 | let renderer = createRenderer();
10 | renderer.render(element);
11 | return expect(renderer.getRenderOutput());
12 | }
13 |
14 | describe('DropdownButton', () => {
15 |
16 | it("renders", () => {
17 | expectJSX(
18 |
23 |
26 |
27 | )
28 | })
29 |
30 | it("passes props to Button", () => {
31 | expectJSX(
32 |
37 |
40 |
41 | )
42 | })
43 | })
--------------------------------------------------------------------------------
/tests/Grid.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Grid, Cell} from '../src/Grid'
6 |
7 | function expectJSX(element){
8 | let renderer = createRenderer();
9 | renderer.render(element);
10 | return expect(renderer.getRenderOutput());
11 | }
12 |
13 | describe('Grid', () => {
14 |
15 | it("renders", () => {
16 | expectJSX(
17 |
22 | |
23 |
24 | )
25 | })
26 |
27 | it("works without wrap", () => {
28 | expectJSX(
29 |
60 | Text
61 |
62 | )
63 | })
64 |
65 | it("works with a custom componentClass and className", () => {
66 | expectJSX(
67 |
81 | Text
82 |
83 | )
84 | // Fixed width with existing styles
85 | expectJSX(
86 |
90 | Text
91 |
92 | )
93 | })
94 |
95 | it("is responsive", () => {
96 | const widthClassName = `\
97 | o-grid__cell \
98 | o-grid__cell--width-50 \
99 | o-grid__cell--width-100@xsmall \
100 | o-grid__cell--width-75@small \
101 | o-grid__cell--width-50@medium \
102 | o-grid__cell--width-25@large \
103 | o-grid__cell--width-10@xlarge \
104 | o-grid__cell--width-10@super`
105 | const offsetClassName = `\
106 | o-grid__cell \
107 | o-grid__cell--offset-50 \
108 | o-grid__cell--offset-100@xsmall \
109 | o-grid__cell--offset-75@small \
110 | o-grid__cell--offset-50@medium \
111 | o-grid__cell--offset-25@large \
112 | o-grid__cell--offset-10@xlarge \
113 | o-grid__cell--offset-10@super`
114 | expectJSX(
115 | Header1
).toEqualJSX( 17 |Header1
18 | ) 19 | expectJSX(Header2
).toEqualJSX( 20 |Header2
21 | ) 22 | expectJSX(Header3
).toEqualJSX( 23 |Header3
24 | ) 25 | }) 26 | 27 | it("works with extra className", () => { 28 | expectJSX(Text
).toEqualJSX( 29 |Text
30 | ) 31 | }) 32 | }) 33 | 34 | describe('SubHeading', () => { 35 | 36 | it("renders", () => { 37 | expectJSX(-
18 |
-
22 |
-
30 |
-
34 |
-
39 |
-
43 |
-
51 |
-
55 |
-
63 |
-
67 |
- Text
- Text
Text
18 | )
19 | })
20 |
21 | it("works with shadow and styles", () => {
22 | expectJSX(Text
24 | )
25 | })
26 | })
27 |
28 | describe('ModalHeader', () => {
29 |
30 | it("renders", () => {
31 | expectJSX(Text
42 | )
43 | })
44 | })
45 |
46 | describe('ModalFooter', () => {
47 |
48 | it("renders", () => {
49 | expectJSX(Text
18 | )
19 | })
20 |
21 | it("works with light, inline, and shadow", () => {
22 | expectJSX().toEqualJSX(
23 | Text
24 | )
25 | expectJSX().toEqualJSX(
26 | Text
27 | )
28 | })
29 |
30 | it("works with position and fixed", () => {
31 | expectJSX().toEqualJSX(
32 | Text
33 | )
34 | })
35 |
36 | it("works with className", () => {
37 | expectJSX().toEqualJSX(
38 | Text
39 | )
40 | })
41 |
42 | it("animates", () => {
43 | expectJSX().toEqualJSX(
44 | Text
45 | )
46 | })
47 | })
48 |
49 | describe('NavContent', () => {
50 |
51 | it("renders", () => {
52 | expectJSX(Text
).toEqualJSX( 17 |Text
18 | ) 19 | }) 20 | 21 | it("works with a custom className", () => { 22 | expectJSX(Text
).toEqualJSX( 23 |Text
24 | ) 25 | }) 26 | }) 27 | -------------------------------------------------------------------------------- /tests/Pagination.unit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {createRenderer} from 'react-addons-test-utils'; 3 | import expect from 'expect' 4 | 5 | import {PaginationEllipsis, PaginationControls, PaginationPage} from '../src/Pagination' 6 | 7 | function expectJSX(element){ 8 | let renderer = createRenderer(); 9 | renderer.render(element); 10 | return expect(renderer.getRenderOutput()); 11 | } 12 | 13 | describe('PaginationControls', () => { 14 | 15 | it("renders", () => { 16 | expectJSX(Text
18 | )
19 | })
20 |
21 | it("can have background/forward", () => {
22 | expectJSX(Text
24 | )
25 | expectJSX(Text
27 | )
28 | })
29 | })
30 |
31 | describe('PaginationPage', () => {
32 |
33 | it("renders", () => {
34 | expectJSX(
27 | Tab 1 content
33 | Tab 2 content
34 |
36 | )
37 | })
38 |
39 | it("words with bStyle and animate", () => {
40 | expectJSX(
41 |
28 | {}}>Tab 1
29 | {}}>Tab 2
30 | {}}>Tab 3
31 |
32 |
46 | Tab 1 content
50 |
51 | )
52 | })
53 |
54 | it("can be controlled", () => {
55 | expectJSX(
56 |
47 | {}}>Tab 1
48 |
49 |
61 | Tab 1 content
65 |
66 | )
67 | })
68 |
69 | it("can be uncontrolled", () => {
70 | var div = document.createElement('div');
71 | const node = render(
72 |
62 | {}}>Tab 1
63 |
64 | {}} className="c-tab-heading">Tab 1
103 | )
104 | })
105 |
106 | it("can be active", () => {
107 | expectJSX(
108 | {}} className="c-tab-heading c-tab-heading--active">Tab 1
111 | )
112 | })
113 |
114 | it("can be disabled", () => {
115 | expectJSX(
116 | {}} className="c-tab-heading c-tab-heading--disabled">Tab 1
119 | )
120 | })
121 | })
122 |
123 | describe('Tab', () => {
124 |
125 | it("renders", () => {
126 | expectJSX(
127 | Tab 1
141 | )
142 | })
143 |
144 | it("can be active", () => {
145 | expectJSX(
146 | Tab 1
149 | )
150 | })
151 | })
152 |
153 |
--------------------------------------------------------------------------------
/tests/Table.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Table, TR} from '../src/Table'
6 |
7 | function expectJSX(element){
8 | let renderer = createRenderer();
9 | renderer.render(element);
10 | return expect(renderer.getRenderOutput());
11 | }
12 |
13 | describe('Table', () => {
14 |
15 | it("renders", () => {
16 | expectJSX(
40 | Text
41 |
42 | )
43 | })
44 | })
45 |
--------------------------------------------------------------------------------
/tests/Toggle.unit.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {createRenderer} from 'react-addons-test-utils';
3 | import expect from 'expect'
4 |
5 | import {Toggle} from '../src/Toggle'
6 |
7 | function expectJSX(element){
8 | let renderer = createRenderer();
9 | renderer.render(element);
10 | return expect(renderer.getRenderOutput());
11 | }
12 |
13 | describe('Toggle', () => {
14 |
15 | it("renders", () => {
16 | expectJSX(- Text
- Text
- Text