├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── demo
    ├── BreadcrumbDemo.jsx
    ├── ButtonDemo.jsx
    ├── CardDemo.jsx
    ├── CheckboxDemo.jsx
    ├── CommentDemo.jsx
    ├── ContainerDemo.jsx
    ├── DividerDemo.jsx
    ├── FeedDemo.jsx
    ├── FlagDemo.jsx
    ├── FormDemo.jsx
    ├── GridDemo.jsx
    ├── HeaderDemo.jsx
    ├── IconDemo.jsx
    ├── ImageDemo.jsx
    ├── InputDemo.jsx
    ├── ItemDemo.jsx
    ├── LabelDemo.jsx
    ├── ListDemo.jsx
    ├── MenuDemo.jsx
    ├── MessageDemo.jsx
    ├── ParagraphExample.jsx
    ├── RailDemo.jsx
    ├── SegmentDemo.jsx
    ├── StatisticDemo.jsx
    ├── StepDemo.jsx
    ├── TableDemo.jsx
    ├── bomi.jpg
    ├── bomi_square.jpg
    ├── example.css
    ├── genji.jpg
    ├── image.png
    ├── index.js
    └── paragraph.png
├── npm-shrinkwrap.json
├── package.json
├── src
    ├── collections
    │   ├── Message.jsx
    │   ├── breadcrumb
    │   │   ├── Breadcrumb.jsx
    │   │   ├── BreadcrumbDivider.jsx
    │   │   └── BreadcrumbSection.jsx
    │   ├── form
    │   │   ├── Form.jsx
    │   │   ├── FormField.jsx
    │   │   └── FormFieldGroup.jsx
    │   ├── grid
    │   │   ├── Column.jsx
    │   │   ├── Grid.jsx
    │   │   └── Row.jsx
    │   ├── menu
    │   │   ├── Menu.jsx
    │   │   └── MenuItem.jsx
    │   └── table
    │   │   ├── Table.jsx
    │   │   ├── TableCell.jsx
    │   │   ├── TableFooter.jsx
    │   │   ├── TableHeader.jsx
    │   │   └── TableRow.jsx
    ├── common
    │   ├── SemanticUiPropTypes.js
    │   └── semanticClasses.js
    ├── elements
    │   ├── Container.jsx
    │   ├── Divider.jsx
    │   ├── Flag.jsx
    │   ├── Header.jsx
    │   ├── Icon.jsx
    │   ├── Input.jsx
    │   ├── List.jsx
    │   ├── Rail.jsx
    │   ├── button
    │   │   ├── Button.jsx
    │   │   └── ButtonGroup.jsx
    │   ├── extra
    │   │   ├── Actions.jsx
    │   │   ├── Author.jsx
    │   │   ├── Avatar.jsx
    │   │   ├── Content.jsx
    │   │   ├── ContentDescription.jsx
    │   │   ├── ContentHeader.jsx
    │   │   ├── ContentImages.jsx
    │   │   ├── ContentSummary.jsx
    │   │   ├── Date.jsx
    │   │   ├── Extra.jsx
    │   │   ├── Meta.jsx
    │   │   ├── MetaData.jsx
    │   │   └── Text.jsx
    │   ├── image
    │   │   ├── Image.jsx
    │   │   └── ImageGroup.jsx
    │   ├── label
    │   │   ├── Label.jsx
    │   │   └── LabelGroup.jsx
    │   ├── segment
    │   │   ├── Segment.jsx
    │   │   └── SegmentGroup.jsx
    │   └── step
    │   │   ├── Step.jsx
    │   │   └── StepGroup.jsx
    ├── index.js
    ├── modules
    │   ├── Checkbox.jsx
    │   ├── Modal.jsx
    │   ├── ModalActions.jsx
    │   ├── ModalContent.jsx
    │   └── ModalHeader.jsx
    ├── util
    │   ├── propsToClasses.js
    │   ├── spellNumber.js
    │   └── string.js
    └── views
    │   ├── card
    │       ├── Card.jsx
    │       └── CardGroup.jsx
    │   ├── comment
    │       ├── Comment.jsx
    │       └── CommentGroup.jsx
    │   ├── feed
    │       ├── Feed.jsx
    │       └── FeedEvent.jsx
    │   ├── item
    │       ├── Item.jsx
    │       └── ItemGroup.jsx
    │   └── statistic
    │       ├── Statistic.jsx
    │       └── StatisticGroup.jsx
├── test
    ├── common
    │   └── semanticClasses_spec.js
    ├── components
    │   └── elements
    │   │   └── Rail_spec.js
    ├── test_helper.js
    └── util
    │   └── string_spec.js
└── webpack.config.dev.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["transform-runtime"],
3 |   "presets": ["es2015", "react", "stage-0"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true
 6 |   },
 7 |   "plugins": [
 8 |     "react"
 9 |   ],
10 |   "ecmaFeatures": {
11 |     "jsx": true,
12 |     "modules": true
13 |   },
14 |   "rules": {
15 |     "new-cap": 0,
16 |     "strict": [2, "global"],
17 |     "no-underscore-dangle": 0,
18 |     "no-use-before-define": 0,
19 |     "eol-last": 0,
20 |     "quotes": [2, "single"],
21 |     "comma-dangle": 0,
22 |     "jsx-quotes": [1, "prefer-single"],
23 |     "react/jsx-boolean-value": 1,
24 |     "react/jsx-no-undef": 1,
25 |     "react/jsx-uses-react": 1,
26 |     "react/jsx-uses-vars": 1,
27 |     "react/no-did-mount-set-state": 1,
28 |     "react/no-did-update-set-state": 1,
29 |     "react/no-multi-comp": [1, { "ignoreStateless": true }],
30 |     "react/no-unknown-property": 1,
31 |     "react/react-in-jsx-scope": 1,
32 |     "react/self-closing-comp": 1
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | dist
4 | .tern-project
5 | 
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - "4.2"
 5 |   - "5.0"
 6 | 
 7 | cache:
 8 |   directories:
 9 |     - node_modules
10 | 
11 | sudo: false
12 | 
13 | before_install:
14 |   - npm install -g npm@3
15 | 
16 | before_script:
17 |   - npm prune
18 | 
19 | script:
20 |   - npm test
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-semantic-ui-kit
 2 | 
 3 | [![Build Status](https://travis-ci.org/shinzui/react-semantic-ui-kit.png?branch=master)](https://travis-ci.org/shinzui/react-semantic-ui-kit)
 4 | 
 5 | [Semantic UI](http://semantic-ui.com/) rebuilt as React components.
 6 | 
 7 | ## Raison d'être
 8 | 
 9 |  - I needed a comprehensive UI component library to use on my side projects.
10 |  - I am unsatisfied with [Bootstrap](http://getbootstrap.com/) (including boostrap 4 alpha) and [Foundation for sites](http://foundation.zurb.com/).
11 |  - I wanted to learn how to use Semantic UI.
12 | 
13 | ## Goals
14 | 
15 |  - Create components for Semantic UI widgets without using any of Semantic UI's javascript.
16 | 
17 | ## Current status
18 | 
19 | The project is under heavy development. The goal is to initially implement all components without their javascript behaviors for the [0.2 milestone](https://github.com/shinzui/react-semantic-ui-kit/milestones/0.2).
20 | Please check the demo to see what's already implemented.
21 | 
22 | To run the demo:
23 | 
24 |     $ git clone https://github.com/shinzui/react-semantic-ui-kit.git
25 |     $ cd react-semantic-ui-kit && npm install && npm run demo
26 | 
27 | Then go to http://localhost:8080/demo
28 | 
29 | Alternatively, you can look at the [closed component issues](https://github.com/shinzui/react-semantic-ui-kit/issues?utf8=%E2%9C%93&q=milestone%3A0.2+) which has all the
30 | **fully implemented** Semantic UI components.
31 | 
32 | Please note that the API will likely change as I use it on my projects.
33 | 


--------------------------------------------------------------------------------
/demo/BreadcrumbDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Segment, Breadcrumb, BreadcrumbDivider, BreadcrumbSection, Divider, Icon } from '../src/index'
 4 | 
 5 | const BreadcrumbDemo = (props) => {
 6 |   const sizes = ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']
 7 | 
 8 |   return (
 9 |     <div>
10 |       <Segment>
11 |         <Breadcrumb>
12 |           <BreadcrumbSection href='#home' text='Home'/>
13 |           <BreadcrumbDivider />
14 |           <BreadcrumbSection href='#products' active text='Products' />
15 |         </Breadcrumb>
16 |       </Segment>
17 | 
18 |       <Segment>
19 |         <Breadcrumb>
20 |           <BreadcrumbSection href='#home' text='Home'/>
21 |           <Icon type='rightAngle' divider />
22 |           <BreadcrumbSection href='#registration' text='Registration'/>
23 |           <Icon type='rightAngle' divider />
24 |           <BreadcrumbSection href='#info' active text='Personal Information' />
25 |         </Breadcrumb>
26 |       </Segment>
27 | 
28 |       <Segment>
29 |         <Breadcrumb>
30 |           <BreadcrumbSection href='#home' text='Home' />
31 |           <BreadcrumbDivider />
32 |           <BreadcrumbSection active>
33 |             Search for: <a href='#search'>properties</a>
34 |           </BreadcrumbSection>
35 |         </Breadcrumb>
36 |       </Segment>
37 | 
38 |       <Segment>
39 |         {sizes.map( size => {
40 |           return (
41 |             <div key={size}>
42 |               <Breadcrumb size={size}>
43 |                 <BreadcrumbSection href='#home' text='Home'/>
44 |                 <BreadcrumbDivider />
45 |                 <BreadcrumbSection href='#registration' text='Registration'/>
46 |                 <BreadcrumbDivider />
47 |                 <BreadcrumbSection href='#info' active text='Personal Information' />
48 |               </Breadcrumb>
49 |               <Divider />
50 |             </div>
51 |           )
52 |         })}
53 |       </Segment>
54 |     </div>
55 | 
56 |   )
57 | }
58 | 
59 | export default BreadcrumbDemo
60 | 


--------------------------------------------------------------------------------
/demo/ButtonDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Button, ButtonGroup, Header, Content,
  3 |          Divider, Segment, Label } from '../src/index'
  4 | 
  5 | import ParagrahExample from './ParagraphExample'
  6 | 
  7 | export default class ButtonDemo extends Component {
  8 | 
  9 |   render() {
 10 |     const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
 11 |                             'violet', 'purple', 'pink', 'brown', 'grey', 'black']
 12 | 
 13 |     const sizes = ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']
 14 | 
 15 |     return (
 16 |       <div>
 17 |         <Segment>
 18 |           <h3>Simple button</h3>
 19 |           <Button>Simple Button</Button>
 20 |         </Segment>
 21 | 
 22 |         <Segment>
 23 |           <h3>Basic buttons</h3>
 24 |           <Button basic>Basic Button</Button>
 25 | 
 26 |           {colors.map( color => {
 27 |             return <Button key={color} color={color} basic>Basic {color} button</Button>
 28 |           })}
 29 |         </Segment>
 30 | 
 31 |         <Segment>
 32 |           <h3>Primary and secondary buttons</h3>
 33 |           <Button primary>Primary Button</Button>
 34 |           <Button secondary>Secondary Button</Button>
 35 |         </Segment>
 36 | 
 37 |         <Segment>
 38 |           <Button icon>
 39 |             <i className='cloud icon' />
 40 |           </Button>
 41 |         </Segment>
 42 | 
 43 |         <Segment>
 44 |           <h3>Labeled icon</h3>
 45 |           <Button primary labeledIcon>
 46 |             <i className='pause icon' />
 47 |             Pause
 48 |           </Button>
 49 |         </Segment>
 50 | 
 51 |         <Segment>
 52 |           <ButtonGroup>
 53 |             <Button>One</Button>
 54 |             <Button>Two</Button>
 55 |             <Button>Three</Button>
 56 |           </ButtonGroup>
 57 |         </Segment>
 58 | 
 59 |         <Segment>
 60 |           <h3>Equal width button group</h3>
 61 |           <ButtonGroup buttons={3}>
 62 |             <Button>One</Button>
 63 |             <Button>Two</Button>
 64 |             <Button>Three</Button>
 65 |           </ButtonGroup>
 66 | 
 67 |           <Divider />
 68 | 
 69 |           <ButtonGroup buttons={5}>
 70 |             <Button>One</Button>
 71 |             <Button>Two</Button>
 72 |             <Button>Three</Button>
 73 |             <Button>Four</Button>
 74 |             <Button>Five</Button>
 75 |           </ButtonGroup>
 76 |         </Segment>
 77 | 
 78 |         <Segment>
 79 |           <ButtonGroup icon>
 80 |             <Button><i className='align left icon'/></Button>
 81 |             <Button><i className='align center icon'/></Button>
 82 |             <Button><i className='align right icon'/></Button>
 83 |             <Button><i className='align justify icon'/></Button>
 84 |           </ButtonGroup>
 85 |         </Segment>
 86 | 
 87 |         <Segment>
 88 |           <ButtonGroup>
 89 |             <Button>Cancel</Button>
 90 |             <div className='or' />
 91 |             <Button positive>Save</Button>
 92 |           </ButtonGroup>
 93 |         </Segment>
 94 | 
 95 |         <Segment>
 96 |           <Button positive>Positive button</Button>
 97 |           <Button negative>Negative button</Button>
 98 |         </Segment>
 99 | 
100 |         <Segment>
101 |           <Button compact>Compact</Button>
102 |           <Button compact><i className='pause icon'/></Button>
103 |           <Button compact labeledIcon><i className='pause icon'/>Pause</Button>
104 |         </Segment>
105 | 
106 |         <Segment>
107 |           {colors.map( color => {
108 |             return <Button key={color} color={color}>{color} button</Button>
109 |           })}
110 |         </Segment>
111 | 
112 |         <Segment inverted>
113 |           {colors.map( color => {
114 |             return <Button key={color} color={color} inverted>Inverted {color} button</Button>
115 |           })}
116 |         </Segment>
117 | 
118 |         <Segment inverted>
119 |           {colors.map( color => {
120 |             return <Button key={color} color={color} inverted basic>Inverted basic {color} button</Button>
121 |           })}
122 |         </Segment>
123 | 
124 |         <Segment>
125 |           <ButtonGroup color='red'>
126 |             <Button>One</Button>
127 |             <Button>Two</Button>
128 |             <Button>Three</Button>
129 |           </ButtonGroup>
130 |         </Segment>
131 | 
132 |         <Segment>
133 |           <Button circular icon>
134 |             <i className='icon settings' />
135 |           </Button>
136 |         </Segment>
137 | 
138 |         <Segment>
139 |           <h3>Active button</h3>
140 |           <Button active>
141 |             <i className='user icon' />Follow
142 |           </Button>
143 |         </Segment>
144 | 
145 |         <Segment>
146 |           <h3>Disabled button</h3>
147 |           <Button disabled>
148 |             <i className='user icon' />Follow
149 |           </Button>
150 |         </Segment>
151 | 
152 |         <Segment>
153 |           <h3>Loading buttons</h3>
154 |           <Button loading>Loading</Button>
155 |           <Button basic loading>Loading</Button>
156 |           <Button primary loading>Loading</Button>
157 |           <Button secondary loading>Loading</Button>
158 |         </Segment>
159 | 
160 |         <Segment>
161 |           <h3>Fluid buttons</h3>
162 |           <Button fluid>Fluid buttons</Button>
163 |         </Segment>
164 | 
165 |         <Segment clearing>
166 |           <h3>Floated buttons</h3>
167 | 
168 |           <Button floated='right'>Right floated</Button>
169 |           <Button floated='left'>Left floated</Button>
170 | 
171 |         </Segment>
172 | 
173 |         <Segment>
174 |           <Button labeled>
175 |             <Button>
176 |               <i className='heart icon' /> Like
177 |             </Button>
178 |             <Label basic>2049</Label>
179 |           </Button>
180 |           <Button labeled labelPosition='left'>
181 |             <Label basic>2049</Label>
182 |             <Button>
183 |               <i className='heart icon' /> Like
184 |             </Button>
185 |           </Button>
186 |           <Button labeled>
187 |             <Button color='red'>
188 |               <i className='heart icon' /> Like
189 |             </Button>
190 |             <Label basic color='red' pointing pointingDirection='left'>2049</Label>
191 |           </Button>
192 |           <Button labeled>
193 |             <Button basic color='blue'>
194 |               <i className='heart icon' /> Like
195 |             </Button>
196 |             <Label basic color='blue' pointing pointingDirection='left'>2049</Label>
197 |           </Button>
198 |         </Segment>
199 | 
200 |         <Segment>
201 |           <Button social='facebook'>
202 |             <i className='facebook icon' />Facebook
203 |           </Button>
204 |           <Button social='twitter'>
205 |             <i className='twitter icon' />Twitter
206 |           </Button>
207 |           <Button social='googlePlus'>
208 |             <i className='google plus icon' />Google Plus
209 |           </Button>
210 |           <Button social='instagram'>
211 |             <i className='instagram icon' />Instagram
212 |           </Button>
213 |           <Button social='linkedIn'>
214 |             <i className='linkedin icon' />LinkedIn
215 |           </Button>
216 |           <Button social='youtube'>
217 |             <i className='youtube icon' />YouTube
218 |           </Button>
219 |           <Button social='vk'>
220 |             <i className='vk icon' />VK
221 |           </Button>
222 |         </Segment>
223 | 
224 |         <Segment>
225 |           <Header element='h3'>Sizes</Header>
226 | 
227 |           {sizes.map( size => {
228 |             return <Button size={size} key={size}>{size} button</Button>
229 |           })}
230 |         </Segment>
231 | 
232 |         <Segment>
233 |           <h3>Vertical attachment</h3>
234 |           <Button attached='top'>Top</Button>
235 |           <Segment attached='both'>
236 |             <ParagrahExample />
237 |           </Segment>
238 |           <Button attached='bottom'>Bottom</Button>
239 |         </Segment>
240 | 
241 |         <Segment>
242 |           <h3>Horizontal attachment</h3>
243 |           <Button attached='left'>Left </Button>
244 |           <Button attached='right'>Right</Button>
245 |         </Segment>
246 | 
247 |         <Segment>
248 |           <h3>Vertical button group</h3>
249 |           <ButtonGroup vertical>
250 |             <Button>Feed</Button>
251 |             <Button>Messages</Button>
252 |             <Button>Events</Button>
253 |             <Button>Photos</Button>
254 |           </ButtonGroup>
255 |         </Segment>
256 | 
257 |         <Segment>
258 |           <h3>Basic vertical button group</h3>
259 |           <ButtonGroup basic vertical>
260 |             <Button>Feed</Button>
261 |             <Button>Messages</Button>
262 |             <Button>Events</Button>
263 |             <Button>Photos</Button>
264 |           </ButtonGroup>
265 |         </Segment>
266 | 
267 |         <Segment>
268 |           <h3>Basic button group</h3>
269 |           <ButtonGroup basic>
270 |             <Button>Feed</Button>
271 |             <Button>Messages</Button>
272 |             <Button>Events</Button>
273 |             <Button>Photos</Button>
274 |           </ButtonGroup>
275 |         </Segment>
276 | 
277 |         <Segment>
278 |           <h3>Animated buttons</h3>
279 |           <Button animation='horizontal'>
280 |             <Content visible>Next</Content>
281 |             <Content hidden><i className='right arrow icon' /></Content>
282 |           </Button>
283 |           <Button animation='vertical'>
284 |             <Content visible>Shop</Content>
285 |             <Content hidden><i className='shop icon' /></Content>
286 |           </Button>
287 |           <Button animation='fade'>
288 |             <Content visible>Sign-up for a pro account</Content>
289 |             <Content hidden>$12.99/month</Content>
290 |           </Button>
291 |         </Segment>
292 | 
293 |         <Segment>
294 |           <h3>Vertical labeled icon buttons</h3>
295 |           <ButtonGroup vertical labeledIcon>
296 |             <Button>
297 |               <i className='pause icon' />
298 |               Pause
299 |             </Button>
300 |             <Button>
301 |               <i className='play icon' />
302 |               Play
303 |             </Button>
304 |             <Button>
305 |               <i className='shuffle icon' />
306 |               Shuffle
307 |             </Button>
308 |           </ButtonGroup>
309 |         </Segment>
310 | 
311 |         <Segment>
312 |           <Header element='h3'>Button group sizes</Header>
313 | 
314 |           {sizes.map( size => {
315 |             return <div key={size}>
316 |               <ButtonGroup size={size}>
317 |                 <Button>One</Button>
318 |                 <Button>Two</Button>
319 |                 <Button>Three</Button>
320 |               </ButtonGroup>
321 |               <Divider />
322 |             </div>
323 |           })}
324 | 
325 |         </Segment>
326 |       </div>
327 |     )
328 |   }
329 | }
330 | 


--------------------------------------------------------------------------------
/demo/CardDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Segment, Card, CardGroup, Meta, Image, Grid, Column,
  4 |         Content, ContentDescription, ContentHeader } from '../src/index'
  5 | 
  6 | import ParagraphExample from './ParagraphExample'
  7 | 
  8 | import bomi from './bomi_square.jpg'
  9 | import bomi2 from './bomi.jpg'
 10 | import image from './image.png'
 11 | 
 12 | const CardDemo = (props) => {
 13 |   const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
 14 |                           'violet', 'purple', 'pink', 'brown', 'grey', 'black']
 15 |   return (
 16 |     <div>
 17 |       <Segment>
 18 |         <Card>
 19 |           <div className='image'>
 20 |             <img src={bomi} />
 21 |           </div>
 22 |           <Content>
 23 |             <ContentHeader href='#'>Bomi</ContentHeader>
 24 |             <Meta>
 25 |               <span className='date'>Born in 2015</span>
 26 |             </Meta>
 27 |             <ContentDescription>
 28 |               Bomi is a bengal cat.
 29 |             </ContentDescription>
 30 |           </Content>
 31 |           <Content extra>
 32 |             <i className='heart icon'/>
 33 |             323 Likes
 34 |           </Content>
 35 |         </Card>
 36 | 
 37 |         <Card>
 38 |           <Content>
 39 |             <Meta floated='right'>
 40 |               14h
 41 |             </Meta>
 42 |             <Image src={bomi2} avatar /> Bomi
 43 |           </Content>
 44 |           <div className='image'>
 45 |             <img src={bomi} />
 46 |           </div>
 47 | 
 48 |           <Content>
 49 |             <span className='right floated'>
 50 |               <i className='heart outline like icon' />
 51 |               317 likes
 52 |             </span>
 53 |             <i className='comment icon'/>
 54 |             39 comments
 55 |           </Content>
 56 |           <Content extra>
 57 |             <div className='ui large transparent left icon input'>
 58 |               <i className='heart outline icon' />
 59 |               <input type='text' placeholder='Add Comment...' />
 60 |             </div>
 61 |           </Content>
 62 |         </Card>
 63 |       </Segment>
 64 | 
 65 |       <Segment>
 66 |         <h3>Grouped cards</h3>
 67 |         <CardGroup>
 68 |           <Card>
 69 |             <div className='image'>
 70 |               <img src={bomi} />
 71 |             </div>
 72 |             <Content>
 73 |               <ContentHeader href='#'>Bomi</ContentHeader>
 74 |               <Meta>
 75 |                 <span className='date'>Born in 2015</span>
 76 |               </Meta>
 77 |               <ContentDescription>
 78 |                 Bomi is a bengal cat.
 79 |               </ContentDescription>
 80 |             </Content>
 81 |             <Content extra>
 82 |               <i className='heart icon'/>
 83 |               323 Likes
 84 |             </Content>
 85 |           </Card>
 86 |           <Card>
 87 |             <div className='image'>
 88 |               <img src={bomi} />
 89 |             </div>
 90 |             <Content>
 91 |               <ContentHeader href='#'>Bomi</ContentHeader>
 92 |               <Meta>
 93 |                 <span className='date'>Born in 2015</span>
 94 |               </Meta>
 95 |               <ContentDescription>
 96 |                 Bomi is a bengal cat.
 97 |               </ContentDescription>
 98 |             </Content>
 99 |             <Content extra>
100 |               <i className='heart icon'/>
101 |               323 Likes
102 |             </Content>
103 |           </Card>
104 |         </CardGroup>
105 |       </Segment>
106 | 
107 |       <Segment>
108 |         <h3>Fluid Card</h3>
109 | 
110 |         <Grid columns={3}>
111 |           <Column>
112 |             <Card fluid>
113 |               <Image src={bomi} wrapper/>
114 |               <Content>
115 |                 <ContentHeader>
116 |                   Bomi
117 |                 </ContentHeader>
118 |               </Content>
119 |             </Card>
120 |           </Column>
121 |           <Column>
122 |             <Card fluid>
123 |               <Image src={bomi} wrapper/>
124 |               <Content>
125 |                 <ContentHeader>
126 |                   Bomi
127 |                 </ContentHeader>
128 |               </Content>
129 |             </Card>
130 |           </Column>
131 |           <Column>
132 |             <Card fluid>
133 |               <Image src={bomi} wrapper/>
134 |               <Content>
135 |                 <ContentHeader>
136 |                   Bomi
137 |                 </ContentHeader>
138 |               </Content>
139 |             </Card>
140 |           </Column>
141 |         </Grid>
142 |       </Segment>
143 | 
144 |       <Segment>
145 |         <h3>Centered card</h3>
146 |          <Card centered>
147 |           <Image src={bomi} wrapper/>
148 |           <Content>
149 |             <ContentHeader>
150 |               Bomi
151 |             </ContentHeader>
152 |           </Content>
153 |         </Card>
154 |       </Segment>
155 | 
156 |       <Segment>
157 |         <h3>Link card</h3>
158 | 
159 |         <Card href='#'>
160 |           <Content>
161 |             <ContentHeader>
162 |               Cute Bomi
163 |             </ContentHeader>
164 |             <Meta>
165 |               <span>
166 |                 Bengal cat
167 |               </span>
168 |             </Meta>
169 |             <ContentDescription>
170 |               <ParagraphExample />
171 |             </ContentDescription>
172 |           </Content>
173 |           <Content extra>
174 |             <div className='right floated'>
175 |               <Image avatar src={bomi} />
176 |                 Bomi
177 |             </div>
178 |           </Content>
179 |         </Card>
180 |       </Segment>
181 | 
182 |       <Segment>
183 |         <h3>Colored</h3>
184 |         <CardGroup columns={4}>
185 |           {colors.map( color => {
186 |             return (
187 |               <Card key={color} color={color}>
188 |                 <Image src={image} wrapper/>
189 |                 <Content>
190 |                   <ContentHeader>
191 |                     {color} card
192 |                   </ContentHeader>
193 |                 </Content>
194 |               </Card>
195 |               )
196 |           })}
197 |         </CardGroup>
198 |       </Segment>
199 | 
200 |       <Segment>
201 |         <h3>Column count</h3>
202 |         <CardGroup columns={4}>
203 |           {[1,2,3,4,5,6,7,8].map( (e) => {
204 |             return (
205 |               <Card key={e}>
206 |                 <Image src={image} wrapper/>
207 |                 <Content>
208 |                   <ContentHeader>
209 |                     Card
210 |                   </ContentHeader>
211 |                 </Content>
212 |               </Card>
213 |               )
214 |           })}
215 |         </CardGroup>
216 |       </Segment>
217 | 
218 |       <Segment>
219 |         <h3>Stackable </h3>
220 |         <CardGroup columns={3} stackable>
221 |           {[1,2,3,4,5,6].map( (e) => {
222 |             return (
223 |               <Card key={e}>
224 |                 <Image src={image} wrapper/>
225 |                 <Content>
226 |                   <ContentHeader>
227 |                     Card
228 |                   </ContentHeader>
229 |                 </Content>
230 |               </Card>
231 |               )
232 |           })}
233 |         </CardGroup>
234 |       </Segment>
235 | 
236 |       <Segment>
237 |         <h3>Doubling </h3>
238 |         <CardGroup columns={6} doubling>
239 |           {[1,2,3,4,5,6].map( (e) => {
240 |             return (
241 |               <Card key={e}>
242 |                 <Image src={image} wrapper/>
243 |                 <Content>
244 |                   <ContentHeader>
245 |                     Card
246 |                   </ContentHeader>
247 |                 </Content>
248 |               </Card>
249 |               )
250 |           })}
251 |         </CardGroup>
252 |       </Segment>
253 | 
254 |     </div>
255 |   )
256 | }
257 | 
258 | export default CardDemo
259 | 


--------------------------------------------------------------------------------
/demo/CheckboxDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Segment, Checkbox } from '../src/index'
 4 | 
 5 | const CheckboxDemo = (props) => {
 6 | 
 7 |   return (
 8 |     <div>
 9 |       <Segment>
10 |         <Checkbox name='checkbox' label='I agree to the terms' />
11 |       </Segment>
12 | 
13 |       <Segment clearing>
14 |         <Segment floated='left' compact>
15 |           <Checkbox name='checkbox' fitted label=' '/>
16 |         </Segment>
17 |       </Segment>
18 | 
19 |       <Segment>
20 |         <h3>Radio</h3>
21 | 
22 |         <Checkbox radio name='radio' label='Radio choice' />
23 |       </Segment>
24 | 
25 |     </div>
26 |   )
27 | }
28 | 
29 | export default CheckboxDemo
30 | 


--------------------------------------------------------------------------------
/demo/CommentDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Comment, CommentGroup, Segment, Header,
  4 |   Content, MetaData, Avatar, Date, Author,
  5 |   Text, Actions, Form, Button } from '../src/index'
  6 | 
  7 | import bomi from './bomi_square.jpg'
  8 | 
  9 | const CommentDemo = (props) => {
 10 |   return (
 11 |     <div>
 12 |       <Segment>
 13 |         <CommentGroup>
 14 |           <Header element='h3' dividing>Comment</Header>
 15 |           <Comment>
 16 |             <Avatar src={bomi} href='#'/>
 17 |             <Content>
 18 |               <Author href='#'>Bomi</Author>
 19 |               <MetaData>
 20 |                 <Date>Today at 5:42PM</Date>
 21 |               </MetaData>
 22 |               <Text>
 23 |                 React is a great library.
 24 |               </Text>
 25 |               <Actions>
 26 |                 <a href='#'>Reply</a>
 27 |               </Actions>
 28 |             </Content>
 29 |           </Comment>
 30 |           <Form reply>
 31 |             <div className='field'>
 32 |               <textarea />
 33 |             </div>
 34 |             <Button primary labeledIcon>
 35 |               <i className='icon edit' />Add Reply
 36 |             </Button>
 37 | 
 38 |           </Form>
 39 |         </CommentGroup>
 40 |       </Segment>
 41 | 
 42 |       <Segment>
 43 |         <h3>Minimal comments</h3>
 44 |         <CommentGroup minimal>
 45 |           <Header element='h3' dividing>Comments</Header>
 46 |           <Comment>
 47 |             <Avatar src={bomi} href='#'/>
 48 |             <Content>
 49 |               <Author href='#'>Bomi</Author>
 50 |               <MetaData>
 51 |                 <Date>Today at 5:42PM</Date>
 52 |               </MetaData>
 53 |               <Text>
 54 |                 React is a great library.
 55 |               </Text>
 56 |               <Actions>
 57 |                 <a href='#'>Reply</a>
 58 |               </Actions>
 59 |             </Content>
 60 |           </Comment>
 61 |           <Form reply>
 62 |             <div className='field'>
 63 |               <textarea />
 64 |             </div>
 65 |             <Button primary labeledIcon>
 66 |               <i className='icon edit' />Add Reply
 67 |             </Button>
 68 |           </Form>
 69 |         </CommentGroup>
 70 |       </Segment>
 71 | 
 72 |       <Segment>
 73 |         <h3>Collapsed (hidden) comments</h3>
 74 |         <CommentGroup>
 75 |           <Header element='h3' dividing>Comment</Header>
 76 |           <Comment>
 77 |             <Avatar src={bomi} href='#'/>
 78 |             <Content>
 79 |               <Author href='#'>Bomi</Author>
 80 |               <MetaData>
 81 |                 <Date>Today at 5:42PM</Date>
 82 |               </MetaData>
 83 |               <Text>
 84 |                 React is a great library.
 85 |               </Text>
 86 |               <Actions>
 87 |                 <a href='#'>Reply</a>
 88 |               </Actions>
 89 |             </Content>
 90 |           </Comment>
 91 |           <CommentGroup collapsed>
 92 |             <Comment>
 93 |               <Avatar src={bomi} href='#'/>
 94 |               <Content>
 95 |                 <Author href='#'>Bomi</Author>
 96 |                 <MetaData>
 97 |                   <Date>Today at 5:42PM</Date>
 98 |                 </MetaData>
 99 |                 <Text>
100 |                   React is a great library.
101 |                 </Text>
102 |                 <Actions>
103 |                   <a href='#'>Reply</a>
104 |                 </Actions>
105 |               </Content>
106 |             </Comment>
107 |           </CommentGroup>
108 |         </CommentGroup>
109 |       </Segment>
110 | 
111 |       <Segment>
112 |         <CommentGroup threaded>
113 |           <Header element='h3' dividing>Comment</Header>
114 |           <Comment>
115 |             <Avatar src={bomi} href='#'/>
116 |             <Content>
117 |               <Author href='#'>Bomi</Author>
118 |               <MetaData>
119 |                 <Date>Today at 5:42PM</Date>
120 |               </MetaData>
121 |               <Text>
122 |                 React is a great library.
123 |               </Text>
124 |               <Actions>
125 |                 <a href='#'>Reply</a>
126 |               </Actions>
127 |             </Content>
128 |             <CommentGroup>
129 |               <Comment>
130 |                 <Avatar src={bomi} href='#'/>
131 |                 <Content>
132 |                   <Author href='#'>Bomi</Author>
133 |                   <MetaData>
134 |                     <Date>Today at 5:42PM</Date>
135 |                   </MetaData>
136 |                   <Text>
137 |                     I agree. 
138 |                   </Text>
139 |                   <Actions>
140 |                     <a href='#'>Reply</a>
141 |                   </Actions>
142 |                 </Content>
143 |               </Comment>
144 |             </CommentGroup>
145 |             </Comment>
146 |             <Comment>
147 |               <Avatar src={bomi} href='#'/>
148 |               <Content>
149 |                 <Author href='#'>Bomi</Author>
150 |                 <MetaData>
151 |                   <Date>Today at 5:42PM</Date>
152 |                 </MetaData>
153 |                 <Text>
154 |                   Redux is also nice.
155 |                 </Text>
156 |                 <Actions>
157 |                   <a href='#'>Reply</a>
158 |                 </Actions>
159 |               </Content>
160 |             </Comment>
161 |             <Form reply>
162 |               <div className='field'>
163 |                 <textarea />
164 |               </div>
165 |               <Button primary labeledIcon>
166 |                 <i className='icon edit' />Add Reply
167 |               </Button>
168 | 
169 |             </Form>
170 |           </CommentGroup>
171 |       </Segment>
172 |     </div>
173 |   )
174 | }
175 | 
176 | export default CommentDemo
177 | 


--------------------------------------------------------------------------------
/demo/ContainerDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | import { Container, Header, Divider } from '../src/index'
 4 | 
 5 | export default  class ContainerDemo extends Component {
 6 | 
 7 |   render() {
 8 |     return(
 9 |       <div>
10 |         <Container text>
11 |           <Header element='h2'>Text container</Header>
12 |           <p>
13 |             Genji was famous and life was secure and peaceful. His ladies had in their several ways made their own lives and were happy.
14 |             There was an exception, Tamakazura, who faced a new crisis and was wondering what to do next.
15 |           </p>
16 |           <p>
17 |             She was not as genuinely frightened of him, of course, as she had been of the Higo man; but since few people could possibly know what had happened,
18 |             she must keep her disquiet to herself, and her growing sense of isolation. Old enough to know a little of the world, she saw more than ever what a
19 |             handicap it was not to have a mother.
20 |           </p>
21 |         </Container>
22 | 
23 |         <Divider />
24 | 
25 |         <Container justified text>
26 |           <Header element='h2'>Justified text container</Header>
27 |           <p>
28 |             Genji was famous and life was secure and peaceful. His ladies had in their several ways made their own lives and were happy.
29 |             There was an exception, Tamakazura, who faced a new crisis and was wondering what to do next.
30 |           </p>
31 |           <p>
32 |             She was not as genuinely frightened of him, of course, as she had been of the Higo man; but since few people could possibly know what had happened,
33 |             she must keep her disquiet to herself, and her growing sense of isolation. Old enough to know a little of the world, she saw more than ever what a
34 |             handicap it was not to have a mother.
35 |           </p>
36 |         </Container>
37 | 
38 |         <Divider />
39 | 
40 |         <Container text aligned='left'>
41 |           <p>Left aligned</p>
42 |         </Container>
43 |         <Container text aligned='center'>
44 |           <p>Center aligned</p>
45 |         </Container>
46 |         <Container text aligned='right'>
47 |           <p>Right aligned</p>
48 |         </Container>
49 |       </div>
50 |     )
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/demo/DividerDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Divider, Segment, Message } from '../src/index'
  3 | import { Grid, Row, Column } from '../src/index'
  4 | 
  5 | export default class ButtonDemo extends Component {
  6 | 
  7 |   render() {
  8 |     return (
  9 |       <div>
 10 |         <h3>Simple horizontal divider</h3>
 11 |         <Segment>
 12 |           <p>Divder Demo</p>
 13 |           <Divider />
 14 |           <p>Divider Demo</p>
 15 |         </Segment>
 16 | 
 17 |         <h3>Simple vertical divider</h3>
 18 |         <Segment>
 19 |           <Grid columns={2} className='very relaxed'>
 20 |             <Column>
 21 |               <p>
 22 |                 left side
 23 |               </p>
 24 |               <p>
 25 |                 left side
 26 |               </p>
 27 |               <p>
 28 |                 left side
 29 |               </p>
 30 |             </Column>
 31 |             <Divider vertical>or</Divider>
 32 |             <Column>
 33 |               <p>
 34 |                 right side
 35 |               </p>
 36 |               <p>
 37 |                 right side
 38 |               </p>
 39 |               <p>
 40 |                 right side
 41 |               </p>
 42 |             </Column>
 43 |           </Grid>
 44 |         </Segment>
 45 |         <Segment>
 46 |           <Divider horizontal header element='h4'>
 47 |             <i className='tag icon' />
 48 |             <span className='content'>Header divider</span>
 49 |           </Divider>
 50 |           <Message warning>
 51 |             <p>
 52 |               You need to wrap the text inside the header with {"<span class='content'>"} element otherwise React's inserted span wrappers would break Semantic UI's css.
 53 |             </p>
 54 | 
 55 |             Take a look at <a href='https://github.com/Semantic-Org/Semantic-UI/issues/2918'>issue 2918</a>
 56 |           </Message>
 57 |         </Segment>
 58 | 
 59 |         <Segment inverted>
 60 |           <h3>Inverted dividers</h3>
 61 |           <p>
 62 |             First paragraph
 63 |           </p>
 64 |           <Divider inverted />
 65 |           <Divider element='h4' horizontal inverted>Horizontal</Divider>
 66 |         </Segment>
 67 | 
 68 |         <Segment fitted>
 69 |           <h3>Fitted Divider</h3>
 70 |           <span className='content'>
 71 |             Genji was famous and life was secure and peaceful. His ladies had in their several ways made their own lives and were happy.
 72 |             There was an exception, Tamakazura, who faced a new crisis and was wondering what to do next.
 73 |           <Divider fitted/>
 74 |             She was not as genuinely frightened of him, of course, as she had been of the Higo man; but since few people could possibly know what had happened,
 75 |             she must keep her disquiet to herself, and her growing sense of isolation. Old enough to know a little of the world, she saw more than ever what a
 76 |             handicap it was not to have a mother.
 77 |           </span>
 78 | 
 79 |           <Message warning>
 80 |             <p>
 81 |               You need to wrap the text inside the header with {"<span class='content'>"} element otherwise React's inserted span wrappers would break Semantic UI's css.
 82 |             </p>
 83 | 
 84 |             Take a look at <a href='https://github.com/Semantic-Org/Semantic-UI/issues/2918'>issue 2918</a>
 85 |           </Message>
 86 |         </Segment>
 87 | 
 88 |         <Segment section>
 89 |           <h3>Section Divider</h3>
 90 |           <p>
 91 |             Genji was famous and life was secure and peaceful. His ladies had in their several ways made their own lives and were happy.
 92 |             There was an exception, Tamakazura, who faced a new crisis and was wondering what to do next.
 93 |           </p>
 94 |           <Divider section/>
 95 |           <h3>Section two</h3>
 96 |           <p>
 97 |             She was not as genuinely frightened of him, of course, as she had been of the Higo man; but since few people could possibly know what had happened,
 98 |             she must keep her disquiet to herself, and her growing sense of isolation. Old enough to know a little of the world, she saw more than ever what a
 99 |             handicap it was not to have a mother.
100 |           </p>
101 |         </Segment>
102 | 
103 |       </div>
104 |     )
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/demo/FeedDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Feed, FeedEvent, Image, Text,
  4 |         Content, ContentSummary, ContentImages, Meta,
  5 |         Date, Segment, Label } from '../src/index'
  6 | 
  7 | import bomi from './bomi_square.jpg'
  8 | import bomi2 from './bomi.jpg'
  9 | 
 10 | const FeedDemo = (props) => {
 11 |   return (
 12 |     <div>
 13 |       <Segment>
 14 |         <h3>Feed</h3>
 15 |         <Feed>
 16 |           <FeedEvent>
 17 |             <Label generic><Image src={bomi} /></Label>
 18 |             <Content>
 19 |               <ContentSummary>
 20 |                 <a href='#'>Go Joon Hee</a> added you as friend. <Date>1 Hour ago</Date>
 21 |               </ContentSummary>
 22 |               <Meta>
 23 |                 <a href='#' className='like'>
 24 |                   <i className='like icon' />23 likes
 25 |                 </a>
 26 |               </Meta>
 27 |             </Content>
 28 |           </FeedEvent>
 29 |         </Feed>
 30 |       </Segment>
 31 | 
 32 |       <Segment>
 33 |         <h3>Small feed</h3>
 34 |         <Feed size='small'>
 35 |           <FeedEvent>
 36 |             <Label generic><Image src={bomi} /></Label>
 37 |             <Content>
 38 |               <ContentSummary>
 39 |                 <a href='#'>Go Joon Hee</a> added you as friend. <Date>1 Hour ago</Date>
 40 |               </ContentSummary>
 41 |               <Meta>
 42 |                 <a href='#' className='like'>
 43 |                   <i className='like icon' />23 likes
 44 |                 </a>
 45 |               </Meta>
 46 |             </Content>
 47 |           </FeedEvent>
 48 |         </Feed>
 49 |       </Segment>
 50 | 
 51 |       <Segment>
 52 |         <h3>Large feed</h3>
 53 |         <Feed size='large'>
 54 |           <FeedEvent>
 55 |             <Label generic><Image src={bomi} /></Label>
 56 |             <Content>
 57 |               <ContentSummary>
 58 |                 <a href='#'>Go Joon Hee</a> added you as friend. <Date>1 Hour ago</Date>
 59 |               </ContentSummary>
 60 |               <Meta>
 61 |                 <a href='#' className='like'>
 62 |                   <i className='like icon' />23 likes
 63 |                 </a>
 64 |               </Meta>
 65 |             </Content>
 66 |           </FeedEvent>
 67 |         </Feed>
 68 |       </Segment>
 69 | 
 70 |       <Segment>
 71 |         <Feed>
 72 |           <FeedEvent>
 73 |             <Label generic><Image src={bomi} /></Label>
 74 |             <Content>
 75 |               <Date>3 days ago</Date>
 76 |               <ContentSummary>You added <a href='#'>Bomi</a> to your favorites group.</ContentSummary>
 77 |             </Content>
 78 |           </FeedEvent>
 79 |         </Feed>
 80 |       </Segment>
 81 | 
 82 |       <Segment>
 83 |         <Feed>
 84 |           <FeedEvent>
 85 |             <Label generic><Image src={bomi} /></Label>
 86 |             <Content>
 87 |               <Date>3 days ago</Date>
 88 |               <ContentSummary>You created <a href='#'>Bomi's</a> album.</ContentSummary>
 89 |               <ContentImages extra>
 90 |                 <Image href='#' src={bomi2} />
 91 |                 <Image href='#' src={bomi2} />
 92 |               </ContentImages>
 93 |             </Content>
 94 |           </FeedEvent>
 95 |           <FeedEvent>
 96 |             <Label generic><Image src={bomi} /></Label>
 97 |             <Content>
 98 |               <Date>5 days ago</Date>
 99 |               <ContentSummary><a href='#'>Bomi's</a> created a post.</ContentSummary>
100 |               <Text extra>
101 |                 I am going to have sibblings soon.
102 |               </Text>
103 |             </Content>
104 |           </FeedEvent>
105 |         </Feed>
106 |       </Segment>
107 |     </div>
108 |   )
109 | }
110 | 
111 | export default FeedDemo
112 | 


--------------------------------------------------------------------------------
/demo/FlagDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Flag, Segment } from '../src/index'
 3 | 
 4 | export default class FlagDemo extends Component {
 5 | 
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |         <Segment>
10 |           <h3>Flags by country name</h3>
11 |           <Flag countryName='japan' />
12 |           <Flag countryName='south korea' />
13 |         </Segment>
14 | 
15 |         <Segment>
16 |           <h3>Flags by country code</h3>
17 |           <Flag countryCode='jp' />
18 |           <Flag countryCode='kr' />
19 |         </Segment>
20 |       </div>
21 |     )
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/demo/FormDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Form, FormField, FormFieldGroup, Segment, Button, Checkbox } from '../src/index'
  3 | 
  4 | export default class FormDemo extends Component {
  5 | 
  6 |   render() {
  7 |     return (
  8 |       <div>
  9 |         <Segment>
 10 |           <Form>
 11 |             <h3>Field Groups</h3>
 12 |             <FormFieldGroup fields={2}>
 13 |               <FormField name='username' label='Username' width={6} placeholder='Username'/>
 14 | 
 15 |               <FormField name='password' label='Password' width={6} placeholder='Password'/>
 16 |             </FormFieldGroup>
 17 |             <Button submit>Submit</Button>
 18 |           </Form>
 19 |         </Segment>
 20 | 
 21 |         <Segment>
 22 |           <Form>
 23 |             <h3>Inline field group</h3>
 24 |             <FormFieldGroup inline>
 25 |               <FormField name='username' label='Username' placeholder='Username'/>
 26 | 
 27 |               <FormField name='password' label='Password' placeholder='Password'/>
 28 |             </FormFieldGroup>
 29 |           </Form>
 30 |         </Segment>
 31 | 
 32 |         <Segment>
 33 |           <Form>
 34 |             <h3>Equal width field group</h3>
 35 |             <FormFieldGroup equalWidth>
 36 |               <FormField name='username' label='Username' placeholder='Username'/>
 37 | 
 38 |               <FormField name='password' label='Password' placeholder='Password'/>
 39 |             </FormFieldGroup>
 40 |           </Form>
 41 |         </Segment>
 42 | 
 43 |         <Segment>
 44 |           <h3>Loading form</h3>
 45 |           <Form loading>
 46 |             <FormField name='username' label='Username' width={6} placeholder='Username'/>
 47 | 
 48 |             <FormField name='password' label='Password' width={6} placeholder='Password'/>
 49 |             <Button submit>Submit</Button>
 50 |           </Form>
 51 |         </Segment>
 52 | 
 53 |         <Segment>
 54 |           <h3>Small form</h3>
 55 |           <Form size='small'>
 56 |             <FormFieldGroup>
 57 |               <FormField name='username' label='Username' placeholder='Username' />
 58 |               <FormField name='password' label='Password' placeholder='Password' />
 59 |             </FormFieldGroup>
 60 |           </Form>
 61 | 
 62 |           <h3>Large form</h3>
 63 |           <Form size='large'>
 64 |             <FormFieldGroup>
 65 |               <FormField name='username' label='Username' placeholder='Username' />
 66 |               <FormField name='password' label='Password' placeholder='Password' />
 67 |             </FormFieldGroup>
 68 |           </Form>
 69 |         </Segment>
 70 | 
 71 |         <Segment>
 72 |           <h3>Equal width form</h3>
 73 |           <Form equalWidth>
 74 |             <FormFieldGroup>
 75 |               <FormField name='username' label='Username' placeholder='Username' />
 76 |               <FormField name='password' label='Password' placeholder='Password' />
 77 |             </FormFieldGroup>
 78 |             <FormFieldGroup>
 79 |               <FormField name='firstName' label='First Name' placeholder='First Name' />
 80 |               <FormField name='middleName' label='Middle Name' placeholder='Middle Name' />
 81 |               <FormField name='lastName' label='Last Name' placeholder='Last Name' />
 82 |             </FormFieldGroup>
 83 |           </Form>
 84 |         </Segment>
 85 | 
 86 |         <Segment inverted>
 87 |           <h3>Inverted form</h3>
 88 |           <Form inverted>
 89 |             <FormFieldGroup>
 90 |               <FormField name='username' label='Username' placeholder='Username' />
 91 |               <FormField name='password' label='Password' placeholder='Password' />
 92 |             </FormFieldGroup>
 93 |           </Form>
 94 |         </Segment>
 95 | 
 96 |         <Segment>
 97 |           <h3>Disabled fields</h3>
 98 |           <Form>
 99 |             <FormField disabled name='username' label='Username' width={6} placeholder='Username'/>
100 | 
101 |             <FormField disabled name='password' label='Password' width={6} placeholder='Password'/>
102 |             <Button submit>Submit</Button>
103 |           </Form>
104 |         </Segment>
105 | 
106 |         <Segment>
107 |           <h3>Inline fields</h3>
108 |           <Form>
109 |             <FormField inline name='username' label='Username' placeholder='Username'/>
110 | 
111 |             <FormField inline name='password' label='Password' placeholder='Password'/>
112 |             <Button submit>Submit</Button>
113 |           </Form>
114 |         </Segment>
115 | 
116 |         <Segment>
117 |           <h3>Grouped fields</h3>
118 |           <Form>
119 |             <FormFieldGroup grouped>
120 |               <FormField>
121 |                 <Checkbox name='tokyo' label='Tokyo' />
122 |               </FormField>
123 |               <FormField>
124 |                 <Checkbox name='kyoto' label='Kyoto' />
125 |               </FormField>
126 |               <FormField>
127 |                 <Checkbox name='osaka' label='Osaka' />
128 |               </FormField>
129 |             </FormFieldGroup>
130 |           </Form>
131 |         </Segment>
132 | 
133 |         <Segment>
134 |           <h3>Required fields</h3>
135 |           <Form>
136 |             <FormField required name='username' label='Username' placeholder='Username'/>
137 | 
138 |             <FormField required name='password' label='Password' placeholder='Password'/>
139 |             <Button submit>Submit</Button>
140 |           </Form>
141 |         </Segment>
142 | 
143 |         <Segment>
144 |           <h3>Read-only fields</h3>
145 |           <Form>
146 |             <FormField readOnly name='username' label='Username' placeholder='Username'/>
147 | 
148 |             <FormField readOnly name='password' label='Password' placeholder='Password'/>
149 |             <Button submit>Submit</Button>
150 |           </Form>
151 |         </Segment>
152 |       </div>
153 |     )
154 |   }
155 | }
156 | 


--------------------------------------------------------------------------------
/demo/GridDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | 
  3 | import { Segment, Header, Grid, Column, Row } from '../src/index'
  4 | import ParagraphExample from './ParagraphExample'
  5 | import image from './image.png'
  6 | 
  7 | export default class GridDemo extends Component {
  8 | 
  9 |   render() {
 10 |     return (
 11 |       <div>
 12 |         <div className='gridExample'>
 13 | 
 14 |           <Segment>
 15 |             <Header element='h2'>Grid container example</Header>
 16 |             <Grid container>
 17 |               <Column width={4} />
 18 |               <Column width={4} />
 19 |               <Column width={4} />
 20 |               <Column width={4} />
 21 |               <Column width={4} />
 22 |               <Column width={4} />
 23 |               <Column width={4} />
 24 |               <Column width={4} />
 25 |             </Grid>
 26 |           </Segment>
 27 | 
 28 |           <Segment>
 29 |             <h2>Relaxed grid</h2>
 30 |             <Grid>
 31 |               <Row columns={3}>
 32 |                 <Column />
 33 |                 <Column />
 34 |                 <Column />
 35 |               </Row>
 36 | 
 37 |               <Row columns={8}>
 38 |                 <Column />
 39 |                 <Column />
 40 |                 <Column />
 41 |                 <Column />
 42 |                 <Column />
 43 |                 <Column />
 44 |                 <Column />
 45 |                 <Column />
 46 |               </Row>
 47 | 
 48 |             </Grid>
 49 |             <Grid relaxed>
 50 |               <Row columns={3}>
 51 |                 <Column />
 52 |                 <Column />
 53 |                 <Column />
 54 |               </Row>
 55 | 
 56 |               <Row columns={8}>
 57 |                 <Column />
 58 |                 <Column />
 59 |                 <Column />
 60 |                 <Column />
 61 |                 <Column />
 62 |                 <Column />
 63 |                 <Column />
 64 |                 <Column />
 65 |               </Row>
 66 |             </Grid>
 67 |           </Segment>
 68 | 
 69 |           <Segment>
 70 |             <h3>Padded grid</h3>
 71 |             <Grid padded equalWidth>
 72 |               <Row>
 73 |                 <Column />
 74 |                 <Column />
 75 |               </Row>
 76 |               <Row>
 77 |                 <Column />
 78 |               </Row>
 79 |               <Row>
 80 |                 <Column />
 81 |                 <Column />
 82 |               </Row>
 83 |             </Grid>
 84 |           </Segment>
 85 | 
 86 |           <Segment>
 87 |             <h3>Clearing content</h3>
 88 |             <Grid>
 89 |               <Row columns={4}>
 90 |                 <Column floated='left' />
 91 |                 <Column floated='right' />
 92 |               </Row>
 93 |               <Row>
 94 |                 <Column width={3} />
 95 |                 <Column width={8} />
 96 |                 <Column width={5} />
 97 |               </Row>
 98 |             </Grid>
 99 |           </Segment>
100 | 
101 |           <Segment>
102 |             <h3>Centered content</h3>
103 |             <Grid columns={2} centered>
104 |               <Column />
105 |               <Row columns={4} centered>
106 |                 <Column />
107 |                 <Column />
108 |               </Row>
109 |             </Grid>
110 |           </Segment>
111 | 
112 |           <Segment>
113 |             <h3>Automatic column count</h3>
114 |             <Grid equalWidth>
115 |               <Column />
116 |               <Column />
117 |               <Column />
118 |               <Row equalWidth>
119 |                 <Column />
120 |                 <Column />
121 |               </Row>
122 |             </Grid>
123 |           </Segment>
124 | 
125 |           <Segment>
126 |             <h3>Doubling</h3>
127 |             <Grid>
128 |               <Row doubling columns={8}>
129 |                 <Column />
130 |                 <Column />
131 |                 <Column />
132 |                 <Column />
133 |                 <Column />
134 |                 <Column />
135 |                 <Column />
136 |                 <Column />
137 |               </Row>
138 |               <Row doubling columns={6}>
139 |                 <Column />
140 |                 <Column />
141 |                 <Column />
142 |                 <Column />
143 |                 <Column />
144 |                 <Column />
145 |               </Row>
146 |               <Row doubling columns={4}>
147 |                 <Column />
148 |                 <Column />
149 |                 <Column />
150 |                 <Column />
151 |               </Row>
152 |             </Grid>
153 |           </Segment>
154 | 
155 |           <Segment>
156 |             <h3>Containers</h3>
157 |             <Grid container>
158 |               <Column width={4} />
159 |               <Column width={4} />
160 |               <Column width={4} />
161 |               <Column width={4} />
162 |               <Column width={4} />
163 |               <Column width={4} />
164 |               <Column width={4} />
165 |               <Column width={4} />
166 |             </Grid>
167 |           </Segment>
168 | 
169 | 
170 |           <Segment>
171 |             <h3>Stackable grid</h3>
172 |             <Grid columns={4} stackable>
173 |               <Column />
174 |               <Column />
175 |               <Column />
176 |               <Column />
177 |             </Grid>
178 |           </Segment>
179 | 
180 |           <Segment>
181 |             <h3>Manual tweaks</h3>
182 |             <Grid centered>
183 |               <Row devices={['computer']}>
184 |                 <Column />
185 |               </Row>
186 |               <Column tabletWidth={6} computerWidth={8} />
187 |               <Column tabletWidth={6} computerWidth={8} />
188 |               <Column tabletWidth={6} computerWidth={8} />
189 |               <Column tabletWidth={6} computerWidth={8} />
190 |               <Column tabletWidth={6} computerWidth={8} />
191 |             </Grid>
192 |           </Segment>
193 |         </div>
194 | 
195 |         <Segment>
196 |           <h3>Internally celled grids</h3>
197 |           <Grid internallyCelled>
198 |             <Row>
199 |               <Column width={3}>
200 |                 <img src={image} />
201 |               </Column>
202 |               <Column width={10}>
203 |                 <ParagraphExample />
204 |               </Column>
205 |               <Column width={3}>
206 |                 <img src={image} />
207 |               </Column>
208 |             </Row>
209 |             <Row>
210 |               <Column width={3}>
211 |                 <img src={image} />
212 |               </Column>
213 |               <Column width={10}>
214 |                 <ParagraphExample />
215 |               </Column>
216 |               <Column width={3}>
217 |                 <img src={image} />
218 |               </Column>
219 |             </Row>
220 |           </Grid>
221 |         </Segment>
222 | 
223 |         <Segment>
224 |           <Grid>
225 |             <Column floated='left' aligned='right' width={6}>
226 |               <Segment>
227 |                 Left floated right aligned column
228 |               </Segment>
229 |             </Column>
230 |             <Column floated='right' aligned='left' width={6}>
231 |               <Segment>
232 |                 Right floated left aligned column
233 |               </Segment>
234 |             </Column>
235 |           </Grid>
236 | 
237 |           <Grid aligned='right'>
238 |             <Column width={16}>
239 |               <Segment>
240 |                 Right aligned grid
241 |               </Segment>
242 |             </Column>
243 |           </Grid>
244 | 
245 |           <Grid>
246 |             <h3>Text alignment</h3>
247 |             <Row aligned='center' columns={2}>
248 |               <Column>
249 |                 <Segment>
250 |                   Center aligned row
251 |                 </Segment>
252 |               </Column>
253 |               <Column>
254 |                 <Segment>
255 |                   Center aligned row
256 |                 </Segment>
257 |               </Column>
258 |             </Row>
259 |             <Row aligned='left' columns={2}>
260 |               <Column>
261 |                 <Segment>
262 |                   Left aligned row
263 |                 </Segment>
264 |               </Column>
265 |               <Column>
266 |                 <Segment>
267 |                   Left aligned row
268 |                 </Segment>
269 |               </Column>
270 |             </Row>
271 |             <Row aligned='right' columns={2}>
272 |               <Column>
273 |                 <Segment>
274 |                   Right aligned row
275 |                 </Segment>
276 |               </Column>
277 |               <Column>
278 |                 <Segment>
279 |                   Right aligned row
280 |                 </Segment>
281 |               </Column>
282 |             </Row>
283 |           </Grid>
284 |         </Segment>
285 | 
286 |         <Segment>
287 |           <h3>Reverse order</h3>
288 |           <Grid reversedDevices={['mobile']} equalWidth>
289 |             <Column>First</Column>
290 |             <Column>Second</Column>
291 |             <Column>Third</Column>
292 |           </Grid>
293 | 
294 |         </Segment>
295 | 
296 |         <Segment>
297 |           <h3>Colored columns</h3>
298 |           <Grid padded equalWidth aligned='center'>
299 |             <Row>
300 |               <Column color='blue'>
301 |                 blue
302 |               </Column>
303 |               <Column color='red'>
304 |                 red
305 |               </Column>
306 |             </Row>
307 |             <Row>
308 |               <Column color='green'>
309 |                 green
310 |               </Column>
311 |             </Row>
312 |             <Row>
313 |               <Column color='orange'>orange</Column>
314 |               <Column color='purple'>purple</Column>
315 |             </Row>
316 |           </Grid>
317 |         </Segment>
318 |       </div>
319 |     )
320 |   }
321 | }
322 | 


--------------------------------------------------------------------------------
/demo/HeaderDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Image, Header, Segment } from '../src/index'
  3 | 
  4 | import bomi from './bomi.jpg'
  5 | 
  6 | export default class HeaderDemo extends Component {
  7 | 
  8 |   render() {
  9 |     return (
 10 |       <div>
 11 |         <Segment>
 12 |           <Header element='h1' header='H1 Header'/>
 13 |           <Header element='h2' header='H2 Header'/>
 14 |           <Header element='h3' header='H3 Header'/>
 15 |           <Header element='h4' header='H4 Header'/>
 16 |           <Header element='h5' header='H5 Header'/>
 17 |         </Segment>
 18 | 
 19 |         <Segment>
 20 |           <Header element='h1' header='H1 header with subheader' subheader='This is a subheader'/>
 21 |           <Header element='h2' header='H2 header with subheader' subheader='This is a subheader'/>
 22 |           <Header element='h3' header='H3 header with subheader' subheader='This is a subheader'/>
 23 |           <Header element='h4' header='H4 header with subheader' subheader='This is a subheader'/>
 24 |           <Header element='h5' header='H5 header with subheader' subheader='This is a subheader'/>
 25 |         </Segment>
 26 | 
 27 |         <Segment>
 28 |           <Header element='h1' subheader='This is a subheader alone'/>
 29 |         </Segment>
 30 | 
 31 |         <Segment>
 32 |           <Header element='h1'><Image src={bomi} size='mini' /><div className='content'>Header with image</div></Header>
 33 |         </Segment>
 34 | 
 35 |         <Segment>
 36 |           <Header element='h2' icon>
 37 |             <i className='settings icon' />
 38 |             <div className='content'>
 39 |               Icon header
 40 |             </div>
 41 |           </Header>
 42 |         </Segment>
 43 | 
 44 |         <Segment>
 45 |           <Header element='h1' disabled>Disabled header</Header>
 46 |         </Segment>
 47 | 
 48 |         <Segment>
 49 |           <Header element='h1' dividing>Dividing header</Header>
 50 |           <p>
 51 |             Some content
 52 |           </p>
 53 |         </Segment>
 54 | 
 55 |         <Segment>
 56 |           <Header element='h1' block>Block header</Header>
 57 |           <p>
 58 |             Some content
 59 |           </p>
 60 |         </Segment>
 61 | 
 62 |         <Header attached='top' element='h3'>
 63 |           Top Attached header
 64 |         </Header>
 65 |         <Segment attached='both'>
 66 |           <p>
 67 |             Attached segment
 68 |           </p>
 69 |         </Segment>
 70 |         <Header attached='both' element='h3'>
 71 |           Attached header
 72 |         </Header>
 73 |         <Segment attached='both'>
 74 |           <p>
 75 |             Attached segment
 76 |           </p>
 77 |         </Segment>
 78 |         <Header attached='bottom' element='h3'>
 79 |           Bottom attached header
 80 |         </Header>
 81 | 
 82 |         <Segment>
 83 |           <Header aligned='right' element='h3'>
 84 |             Right aligned header
 85 |           </Header>
 86 |           <Header aligned='center' element='h3'>
 87 |             Center aligned header
 88 |           </Header>
 89 |           <Header aligned='left' element='h3'>
 90 |             Left aligned header
 91 |           </Header>
 92 |           <Header justified element='h3'>
 93 |             A long header that is justified
 94 |           </Header>
 95 |         </Segment>
 96 | 
 97 |         <Segment clearing>
 98 |           <Header floated='right' element='h3'>
 99 |             Right floated header
100 |           </Header>
101 |           <Header floated='left' element='h3'>
102 |             Left floated header
103 |           </Header>
104 |         </Segment>
105 | 
106 |         <Segment inverted>
107 |           <Header inverted element='h3'>
108 |             Inverted header
109 |           </Header>
110 |         </Segment>
111 | 
112 |       </div>
113 |     )
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/demo/IconDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Segment, Icon, Grid, Column } from '../src/index'
  4 | import { splitAndLowerCamelCase } from '../src/util/string'
  5 | 
  6 | const IconDemo = (props) => {
  7 |   const webIcons1 = [
  8 |     'at', 'browser', 'bug', 'calendar', {type: 'calendar', outline: true, key: 'calendarOutline'},
  9 |     'cloud', 'code', 'comments', {type: 'comments', outline: true, key: 'commentsOutline'},
 10 |     'comment', {type: 'comment', outline: true, key: 'commentOutline'},
 11 |     'copyright', 'dashboard', 'dropdown', 'external',
 12 |     {type: 'external', square: true, key: 'externalSquare'},
 13 |     'eyedropper', 'feed', 'find', 'heartbeat', 'history',
 14 |     'home', 'idea', 'inbox', 'lab', 'mail',
 15 |     {type: 'mail', outline: true, key: 'mailOuline'}, {type: 'mail', square: true, key: 'mailSquare'},
 16 |     'map', 'options', 'paintBrush', 'payment', 'phone', {type: 'phone', square: true, key: 'phoneSquare'},
 17 |     'privacy', 'protect', 'search', 'setting', 'settings', 'shop', 'sidebar', 'signal', 'sitemap', 'tag',
 18 |     'tags', 'tasks', 'terminal', 'textTelephone', 'ticket', 'trophy', 'wifi'
 19 |   ]
 20 | 
 21 |   const userIcons = [ 'adjust', 'addUser', 'addToCart', 'archive', 'ban',
 22 |     'bookmark', 'call',{type: 'call', square: true, key: 'callSquare'}, 'cloudDownload', 'cloudUpload',
 23 |     'compress', 'configure', 'download', 'edit', 'erase', 'exchange', 'externalShare', 'expand',
 24 |     'filter', 'flag', {type: 'flag', outline: true, key:'flagOutline'}, 'forwardMail', 'hide',
 25 |     'inCart', 'lock', 'pin', 'print', 'random', 'recycle', 'refresh', 'removeBookmark', 'removeUser',
 26 |     'repeat', 'replyAll', 'reply', 'retweet', 'send', {type: 'send', outline: true, key: 'sendOutline'},
 27 |     'shareAlternate', {type: 'shareAlternate', square: true, key:'shareAlternateS'} , 'share',
 28 |     {type: 'share', square: true, key: 'shareSquare'}, 'signIn', 'signOut', 
 29 |     'theme', 'translate', 'undo', 'unhide', 'unlockAlternate', 'unlock', 'upload', 'wait', 
 30 |     'wizard', 'write', {type: 'write', square: true, key: 'writeSquare'}]
 31 | 
 32 |   const messageIcons = ['announcement', 'birthday', 'flag', 'help', {type: 'help', circle: true, key: 'helpCircle'},
 33 |     'info', {type: 'info', circle: true, key: 'infoCircle'}, 'warning', {type: 'warning', circle: true, key: 'warningCircle'}, 
 34 |     'warningSign']
 35 | 
 36 |   const userTypesIcons = ['child', 'doctor', 'handicap', 'spy', 'student', 'user', 'users']
 37 | 
 38 |   const iconName = (type) => {
 39 |     const classes = splitAndLowerCamelCase(type)
 40 |     return classes.charAt(0).toUpperCase() + classes.slice(1)
 41 |   }
 42 | 
 43 |   const renderIcon = (icon) => {
 44 |     if(typeof icon === 'string') {
 45 |       return <Column key={icon}> <Icon type={icon} /> {iconName(icon)}</Column>
 46 |     } else {
 47 |       let suffix = ''
 48 |       if(icon.square) suffix =  ' square'
 49 |       if(icon.circle) suffix = ' circle'
 50 |       if(icon.outline) suffix = suffix + ' outline'
 51 | 
 52 |       return <Column key={icon.key}><Icon type={icon.type} square={icon.square} circle={icon.circle} outline={icon.outline}/>
 53 |         {iconName(icon.type) + suffix}
 54 |       </Column>
 55 |     }
 56 |   }
 57 | 
 58 |   return (
 59 |     <div className='iconExample'>
 60 |       <Segment>
 61 |         <h3>Web content</h3>
 62 |         <Grid columns={5}>
 63 |           <Column>
 64 |             <Icon type='alarm' /> Alarm
 65 |           </Column>
 66 |           <Column>
 67 |             <Icon type='alarm' outline/> Alarm outline
 68 |           </Column>
 69 |           <Column>
 70 |             <Icon type='alarm' slash/> Alarm slash
 71 |           </Column>
 72 |           <Column>
 73 |             <Icon type='alarm' slash outline/> Alarm outline
 74 |           </Column>
 75 |           {webIcons1.map(renderIcon)}
 76 |         </Grid>
 77 |       </Segment>
 78 | 
 79 |       <Segment>
 80 |         <h3>User actions</h3>
 81 |         <Grid columns={5}>
 82 |           {userIcons.map(renderIcon)}
 83 |         </Grid>
 84 |       </Segment>
 85 | 
 86 |       <Segment>
 87 |         <h3>Message</h3>
 88 |         <Grid columns={5}>
 89 |           {messageIcons.map(renderIcon)}
 90 |         </Grid>
 91 |       </Segment>
 92 | 
 93 |       <Segment>
 94 |         <h3>User types</h3>
 95 |         <Grid columns={5}>
 96 |           {userTypesIcons.map(renderIcon)}
 97 |         </Grid>
 98 |       </Segment>
 99 |     </div>
100 |   )
101 | }
102 | 
103 | export default IconDemo
104 | 


--------------------------------------------------------------------------------
/demo/ImageDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Image , ImageGroup, Segment, Divider } from '../src/index'
 3 | import { Grid, Row, Column } from '../src/index'
 4 | 
 5 | import bomi from './bomi.jpg'
 6 | import genji from './genji.jpg'
 7 | 
 8 | export default class ImageDemo extends Component {
 9 | 
10 |   render() {
11 |     return (
12 |       <div>
13 |       <Segment>
14 |         <h3>Centered Image</h3>
15 |         <Image src={bomi} size='small' centered/>
16 |       </Segment>
17 |       <Segment>
18 |         <h3>Circular Image</h3>
19 |         <Image src={bomi} size='small' circular/>
20 |       </Segment>
21 |       <Segment>
22 |         <h3>Rounded Image</h3>
23 |         <Image src={bomi} size='small' rounded/>
24 |       </Segment>
25 | 
26 |       <Segment>
27 |         <h3>Fluid Image</h3>
28 |         <Image src={bomi} fluid/>
29 |       </Segment>
30 | 
31 |       <Segment cleared>
32 |         <Image src={genji} floated='left' size='small'/>
33 |         <p>
34 |           The  days went by and the thunder and rain continued. What was Genji to do? People would laugh if, in this extremity, out of favor at court, he were to return to the city. Should he then seek a mountain retreat?
35 |           But if it were to be noised about that a storm had driven him away, then he would cut a ridiculous figure in history.
36 |           His dreams were haunted by that same apparition. Messages from the city almost entirely ceased coming as the days went by without a break in the storms.
37 |           Might he end his days at Suma? No one was likely to come calling in these tempests.
38 |         </p>
39 |         <Image src={genji} floated='right' size='small'/>
40 |         <p>
41 |           A messenger did come from Murasaki, a sad, sodden creature. Had they passed in the street, Genji would scarcely have known whether he was man or beast, and of course would not have thought of inviting him to come near. Now the man brought a surge of pleasure
42 |           and affection — though Genji could not help asking himself whether the storm had weakened his moorings.
43 |         </p>
44 |         <p>
45 |           Murasaki’s letter, long and melancholy, said in part: “The terrifying deluge goes on without a break, day after day. Even the skies are closed off, and I am denied the comfort of gazing in your direction.
46 |         </p>
47 |       </Segment>
48 | 
49 |       <Segment>
50 |         <Image src={bomi} size='small' aligned='top' />
51 |         Top aligned
52 | 
53 |         <Divider />
54 | 
55 |         <Image src={bomi} size='small' aligned='middle' />
56 |         Middle aligned
57 |         <Divider />
58 | 
59 |         <Image src={bomi} size='small' aligned='bottom' />
60 |         Bottom aligned
61 | 
62 |       </Segment>
63 | 
64 |       <Segment>
65 |         <h3>Disabled Image</h3>
66 | 
67 |         <Image src={bomi} disabled size='small'/>
68 |       </Segment>
69 | 
70 |       <Segment>
71 |         <h3>Image Group</h3>
72 |         <ImageGroup size='small'>
73 |           <Image src={bomi} />
74 |           <Image src={bomi} />
75 |           <Image src={bomi} />
76 |         </ImageGroup>
77 |       </Segment>
78 |       </div>
79 | 
80 |     )
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/demo/InputDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Input, Segment, Button,
  4 |           Header, Divider, Label } from '../src/index'
  5 | 
  6 | const InputDemo = (props)  => {
  7 |   const sizes = ['mini', 'small', 'medium', 'large', 'big', 'huge', 'massive']
  8 | 
  9 |   return (
 10 |     <div>
 11 |       <Segment>
 12 |         <Input>
 13 |           <input type='text' placeholder='Search...' />
 14 |         </Input>
 15 |       </Segment>
 16 | 
 17 |       <Segment>
 18 |         <Header element='h3'>Focused input</Header>
 19 |         <Input focus>
 20 |           <input type='text' placeholder='Search...' />
 21 |         </Input>
 22 | 
 23 |       </Segment>
 24 | 
 25 |       <Segment>
 26 |         <Header element='h3'>Loading input</Header>
 27 | 
 28 |         <Input loading icon>
 29 |           <input type='text' placeholder='Search...' />
 30 |           <i className='icon search' />
 31 |         </Input>
 32 | 
 33 |         <Divider />
 34 | 
 35 |         <Input loading icon iconPosition='left'>
 36 |           <input type='text' placeholder='Search...' />
 37 |           <i className='icon search' />
 38 |         </Input>
 39 |       </Segment>
 40 | 
 41 |       <Segment>
 42 |         <Header element='h3'>Disabled input</Header>
 43 |         <Input disabled>
 44 |           <input type='text' placeholder='Search...' />
 45 |         </Input>
 46 |       </Segment>
 47 | 
 48 |       <Segment>
 49 |         <Header element='h3'>Input with error</Header>
 50 |         <Input error>
 51 |           <input type='text' placeholder='Search...' />
 52 |         </Input>
 53 |       </Segment>
 54 | 
 55 |       <Segment>
 56 |         <Header element='h3'>Input with label</Header>
 57 |         <Input label>
 58 |           <Label>http://</Label>
 59 |           <input type='text' placeholder='website.com' />
 60 |         </Input>
 61 | 
 62 |         <Divider />
 63 | 
 64 |         <Header element='h5'>Label can be generated</Header>
 65 |         <Input label='http://'>
 66 |           <input type='text' placeholder='website.com' />
 67 |         </Input>
 68 | 
 69 |         <Divider />
 70 |         <Header element='h5'>or supplied</Header>
 71 |         <Input label={<Label basic>kg</Label>} labelPosition='right'>
 72 |           <input type='text' placeholder='weight' />
 73 |         </Input>
 74 | 
 75 |       </Segment>
 76 | 
 77 |       <Segment>
 78 |         <Header element='h3'>Action input</Header>
 79 |         <Input action>
 80 |           <input type='text' placeholder='Search...' />
 81 |           <Button>Search</Button>
 82 |         </Input>
 83 |       </Segment>
 84 | 
 85 |       <Segment>
 86 |         <Header element='h3'>Transparent input</Header>
 87 |         <Input transparent>
 88 |           <input type='text' placeholder='Search...' />
 89 |         </Input>
 90 |         <Divider />
 91 | 
 92 |         <Input transparent icon>
 93 |           <input type='text' placeholder='Search...' />
 94 |           <i className='search icon' />
 95 |         </Input>
 96 |       </Segment>
 97 | 
 98 |       <Segment inverted>
 99 |         <Header element='h3'>Inverted input</Header>
100 |         <Input inverted>
101 |           <input type='text' placeholder='Search...' />
102 |         </Input>
103 |         <Divider inverted/>
104 | 
105 |         <Input inverted icon>
106 |           <input type='text' placeholder='Search...' />
107 |           <i className='search icon' />
108 |         </Input>
109 |       </Segment>
110 | 
111 |       <Segment>
112 |         <Header element='h3'>Fluid input</Header>
113 |         <Input fluid>
114 |           <input type='text' placeholder='Search...' />
115 |         </Input>
116 | 
117 |         <Divider />
118 | 
119 |         <Input fluid icon>
120 |           <input type='text' placeholder='Search...' />
121 |           <i className='search icon' />
122 |         </Input>
123 | 
124 |         <Divider />
125 |         <Input action fluid>
126 |           <input type='text' placeholder='Search...' />
127 |           <Button>Search</Button>
128 |         </Input>
129 | 
130 |       </Segment>
131 | 
132 |       <Segment>
133 |         <Header element='h3'>Input with sizes</Header>
134 | 
135 |         {sizes.map( size => {
136 |           return <div key={size}>
137 |             <Input size={size} icon>
138 |               <input type='text' placeholder={`Search ${size}`} />
139 |               <i className='search icon' />
140 |             </Input>
141 |             <Divider />
142 |           </div>
143 |         })}
144 |       </Segment>
145 | 
146 |     </div>
147 |   )
148 | }
149 | 
150 | export default InputDemo
151 | 


--------------------------------------------------------------------------------
/demo/ItemDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { ItemGroup, Image, Item, Segment, Extra, Label, Button,
  3 |          Content, ContentHeader, Meta, ContentDescription } from '../src/index'
  4 | 
  5 | import ParagraphExample from './ParagraphExample'
  6 | 
  7 | import bomi from './bomi.jpg'
  8 | import image from './image.png'
  9 | 
 10 | export default class ItemDemo extends Component {
 11 | 
 12 |   render() {
 13 |     return (
 14 |       <div>
 15 |         <Segment>
 16 |           <ItemGroup>
 17 |             <Item>
 18 |               <div className='image'>
 19 |                 <img src={bomi} width='400px' />
 20 |               </div>
 21 |             </Item>
 22 |             <Item>
 23 |               <div className='image'>
 24 |                 <img src={bomi} width='400px' />
 25 |               </div>
 26 |             </Item>
 27 |             <Item>
 28 |               <div className='image'>
 29 |                 <img src={bomi} width='400px' />
 30 |               </div>
 31 |             </Item>
 32 |           </ItemGroup>
 33 |         </Segment>
 34 | 
 35 |         <Segment>
 36 |           <h3>Link item</h3>
 37 |           <ItemGroup link>
 38 |             <Item>
 39 |               <Image wrapper size='tiny' src={bomi}/>
 40 |               <div className='content'>
 41 |                 <div className='header'>
 42 |                   Bomi
 43 |                 </div>
 44 |                 <div className='description'>
 45 |                   Some description
 46 |                 </div>
 47 |               </div>
 48 |             </Item>
 49 |             <Item>
 50 |               <Image wrapper size='tiny' src={bomi}/>
 51 |               <div className='content'>
 52 |                 <div className='header'>
 53 |                   Bomi
 54 |                 </div>
 55 |                 <div className='description'>
 56 |                   Some description
 57 |                 </div>
 58 |               </div>
 59 |             </Item>
 60 |           </ItemGroup>
 61 |         </Segment>
 62 | 
 63 |         <Segment>
 64 |           <h3>Divided item</h3>
 65 |           <ItemGroup divided>
 66 |             <Item>
 67 |               <Image src={image} wrapper dependent/>
 68 |               <Content>
 69 |                 <ContentHeader>Sulawesi, Toarco Peaberry</ContentHeader>
 70 |                 <Meta>Indonesia</Meta>
 71 |                 <ContentDescription>
 72 |                   <ParagraphExample />
 73 |                 </ContentDescription>
 74 |                 <Extra>
 75 |                   <Label>Limited</Label>
 76 |                 </Extra>
 77 |               </Content>
 78 |             </Item>
 79 |             <Item>
 80 |               <Image src={image} wrapper dependent/>
 81 |               <Content>
 82 |                 <ContentHeader>Yetatebe, Shakisso</ContentHeader>
 83 |                 <Meta>Ethiopia</Meta>
 84 |                 <ContentDescription>
 85 |                   <ParagraphExample />
 86 |                 </ContentDescription>
 87 |                 <Extra>
 88 |                   <Button primary floated='right'>
 89 |                     Buy coffee
 90 |                   </Button>
 91 |                   <Label>Limited</Label>
 92 |                 </Extra>
 93 |               </Content>
 94 |             </Item>
 95 |           </ItemGroup>
 96 |         </Segment>
 97 | 
 98 |         <Segment>
 99 |           <h3>Relaxed</h3>
100 |           <ItemGroup relaxed>
101 |             <Item>
102 |               <Image src={image} size='tiny' wrapper />
103 |               <Content aligned='middle'>
104 |                 <ContentHeader>
105 |                   Yojimbo
106 |                 </ContentHeader>
107 |               </Content>
108 |             </Item>
109 |             <Item>
110 |               <Image src={image} size='tiny' wrapper />
111 |               <Content aligned='middle'>
112 |                 <ContentHeader>
113 |                   Rashomon
114 |                 </ContentHeader>
115 |               </Content>
116 |             </Item>
117 |             <Item>
118 |               <Image src={image} size='tiny' wrapper />
119 |               <Content aligned='middle'>
120 |                 <ContentHeader>
121 |                   Seven Samurai
122 |                 </ContentHeader>
123 |               </Content>
124 |             </Item>
125 |           </ItemGroup>
126 |         </Segment>
127 | 
128 |         <Segment>
129 |           <h3>Link Item</h3>
130 |           <ItemGroup link>
131 |             <Item>
132 |               <Image src={image} size='tiny' wrapper />
133 |               <Content>
134 |                 <ContentHeader>
135 |                   Yojimbo
136 |                 </ContentHeader>
137 |                 <ContentDescription>
138 |                   <ParagraphExample />
139 |                 </ContentDescription>
140 |               </Content>
141 |             </Item>
142 |             <Item>
143 |               <Image src={image} size='tiny' wrapper />
144 |               <Content>
145 |                 <ContentHeader>
146 |                   Rashomon
147 |                 </ContentHeader>
148 |                 <ContentDescription>
149 |                   <ParagraphExample />
150 |                 </ContentDescription>
151 |               </Content>
152 |             </Item>
153 |             <Item>
154 |               <Image src={image} size='tiny' wrapper />
155 |               <Content>
156 |                 <ContentHeader>
157 |                   Seven Samurai
158 |                 </ContentHeader>
159 |                 <ContentDescription>
160 |                   <ParagraphExample />
161 |                 </ContentDescription>
162 |               </Content>
163 |             </Item>
164 |           </ItemGroup>
165 |         </Segment>
166 | 
167 |         <Segment>
168 |           <h3>Vertical alignment</h3>
169 |           <ItemGroup>
170 |             <Item>
171 |               <Image src={image} size='tiny' wrapper />
172 |               <Content aligned='top'>
173 |                 <ContentHeader>
174 |                   Yojimbo
175 |                 </ContentHeader>
176 |               </Content>
177 |             </Item>
178 |             <Item>
179 |               <Image src={image} size='tiny' wrapper />
180 |               <Content aligned='middle'>
181 |                 <ContentHeader>
182 |                   Rashomon
183 |                 </ContentHeader>
184 |               </Content>
185 |             </Item>
186 |             <Item>
187 |               <Image src={image} size='tiny' wrapper />
188 |               <Content aligned='bottom'>
189 |                 <ContentHeader>
190 |                   Seven Samurai
191 |                 </ContentHeader>
192 |               </Content>
193 |             </Item>
194 |           </ItemGroup>
195 |         </Segment>
196 |       </div>
197 |     )
198 |   }
199 | }
200 | 


--------------------------------------------------------------------------------
/demo/LabelDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Label , LabelGroup, List, ListItem,
  3 |         Grid, Column, Row, Menu, MenuItem,
  4 |         Header, Segment, Image } from '../src/index'
  5 | 
  6 | import bomi from './bomi.jpg'
  7 | import image from './image.png'
  8 | import paragraph from './paragraph.png'
  9 | 
 10 | export default class LabelDemo extends Component {
 11 | 
 12 |   render() {
 13 |     const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
 14 |                             'violet', 'purple', 'pink', 'brown', 'grey', 'black']
 15 |     const sizes = ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']
 16 | 
 17 |     return (
 18 |       <div>
 19 |         <Segment>
 20 |           <Label pointing pointingDirection='right'>Pointing label</Label> Some text.
 21 |           <Label pointing pointingDirection='below'>Bottom pointing label</Label>
 22 |           <Label pointing pointingDirection='left'>Left pointing label</Label>
 23 |           <Label pointing>Top pointing label</Label>
 24 |         </Segment>
 25 |         <Segment>
 26 |           <Label pointing pointingDirection='left' basic color='red'>Left pointing red basic label</Label>
 27 |         </Segment>
 28 |         <Segment>
 29 |           <Header element='h3'>Image label</Header>
 30 |           <Label image>
 31 |             <Image src={bomi} size='tiny' />
 32 |             Bomi
 33 |           </Label>
 34 |         </Segment>
 35 |         <Segment>
 36 |           <Header element='h3'>Horizontal label</Header>
 37 |           <List divided>
 38 |             <ListItem>
 39 |               <Label color='green' horizontal>Node</Label>
 40 |               Hapi
 41 |             </ListItem>
 42 |             <ListItem>
 43 |               <Label color='red' horizontal>Ruby</Label>
 44 |               Rails
 45 |             </ListItem>
 46 |           </List>
 47 |         </Segment>
 48 |         <Segment>
 49 |           <h3>Tags</h3>
 50 |           <Label tag>JavaScript</Label>
 51 |           <Label tag>React</Label>
 52 |           <Label tag>ES2015</Label>
 53 |         </Segment>
 54 |         <Segment>
 55 |           <h3>Circular</h3>
 56 |           <Label circular>Circular Label</Label>
 57 |           <Label circular>1</Label>
 58 |           <Label color='red' circular>2</Label>
 59 |         </Segment>
 60 | 
 61 |         <Segment>
 62 |           <Grid columns={2}>
 63 |             <Column>
 64 |               <Image wrapper fluid >
 65 |                 <Label leftCorner>
 66 |                   <i className='heart icon' />
 67 |                 </Label>
 68 |                 <img src={image} />
 69 |               </Image>
 70 |             </Column>
 71 |             <Column>
 72 |               <Image wrapper fluid >
 73 |                 <Label rightCorner color='red'>
 74 |                   <i className='heart icon' />
 75 |                 </Label>
 76 |                 <img src={image} />
 77 |               </Image>
 78 |             </Column>
 79 |           </Grid>
 80 |         </Segment>
 81 | 
 82 |         <Segment>
 83 |           <Header element='h3'>Link label</Header>
 84 |           <Label href='https://facebook.github.io/react/'>React</Label>
 85 |         </Segment>
 86 | 
 87 |         <Segment>
 88 |           <Grid columns={2}>
 89 |             <Column>
 90 |               <Segment raised>
 91 |                 <Label leftRibbon color='red'>Overview</Label>
 92 |                 <span>Account details</span>
 93 |                 <p>
 94 |                   Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.
 95 |                   It's also called placeholder (or filler) text. It's a convenient tool for mock-ups.
 96 |                 </p>
 97 |                 <Label leftRibbon color='blue'>Community</Label>
 98 |                 <span>User reviews</span>
 99 |                 <p>
100 |                   It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.
101 |                   Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.
102 |                 </p>
103 |               </Segment>
104 |             </Column>
105 |             <Column>
106 |               <Segment>
107 |                 <Label rightRibbon color='orange'>Overview</Label>
108 |                 <p>
109 |                   Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical;
110 |                   it's not genuine, correct, or comprehensible Latin anymore.
111 |                 </p>
112 |                 <Label rightRibbon color='green'>Conclusion</Label>
113 |                 <p>
114 |                   While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin,
115 |                    these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
116 |                 </p>
117 |               </Segment>
118 |             </Column>
119 |           </Grid>
120 |         </Segment>
121 |         <Segment>
122 |           <Header element='h3'>
123 |             Floating label
124 |           </Header>
125 |           <Menu basic>
126 |             <MenuItem href='#'>
127 |               <i className='icon mail' /> Messages
128 |               <Label floating color='red'>23</Label>
129 |             </MenuItem>
130 |             <MenuItem href='#'>
131 |               <i className='icon users' /> Friends
132 |               <Label floating color='blue'>7</Label>
133 |             </MenuItem>
134 |           </Menu>
135 |         </Segment>
136 | 
137 |         <Segment>
138 |           <Header element='h3'>
139 |             Attached labels
140 |           </Header>
141 |           <Grid columns={3}>
142 |             <Row>
143 |               <Column>
144 |               <Segment>
145 |                 <Label attached='top'>Top</Label>
146 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
147 |               </Segment>
148 |               </Column>
149 |               <Column>
150 |               <Segment>
151 |                 <Label attached='bottom'>Bottom</Label>
152 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
153 |               </Segment>
154 |               </Column>
155 |               <Column>
156 |               <Segment>
157 |                 <Label attached='topRight'>Top right</Label>
158 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
159 |               </Segment>
160 |               </Column>
161 |             </Row>
162 |             <Row>
163 |               <Column>
164 |               <Segment>
165 |                 <Label attached='topLeft'>Top left</Label>
166 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
167 |               </Segment>
168 |               </Column>
169 |               <Column>
170 |               <Segment>
171 |                 <Label attached='bottomRight'>Bottom right</Label>
172 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
173 |               </Segment>
174 |               </Column>
175 |               <Column>
176 |               <Segment>
177 |                 <Label attached='bottomLeft'>Bottom left</Label>
178 |                 <Image src={paragraph} style={{opacity: '0.5'}} />
179 |               </Segment>
180 |               </Column>
181 |             </Row>
182 |           </Grid>
183 |         </Segment>
184 | 
185 |         <Segment>
186 |           <Header element='h3'>Sizes</Header>
187 | 
188 |           {sizes.map( size => {
189 |             return <Label size={size} key={size}>{size} label</Label>
190 |           })}
191 |         </Segment>
192 | 
193 |         <Segment>
194 |           <Header element='h3'>Colored labels</Header>
195 | 
196 |           {colors.map( color => {
197 |             return <Label key={color} color={color}>{color} label</Label>
198 |           })}
199 |         </Segment>
200 | 
201 |         <Segment>
202 |           <Header element='h3'>Huge label group</Header>
203 |           <LabelGroup size='huge'>
204 |             <Label>First</Label>
205 |             <Label>Second</Label>
206 |             <Label>Third</Label>
207 |           </LabelGroup>
208 |         </Segment>
209 | 
210 |         <Segment>
211 |           <Header element='h3'>Colored label group</Header>
212 |           <LabelGroup color='green'>
213 |             <Label>First</Label>
214 |             <Label>Second</Label>
215 |             <Label>Third</Label>
216 |           </LabelGroup>
217 |         </Segment>
218 | 
219 |         <Segment>
220 |           <Header element='h3'>Tag group</Header>
221 |           <LabelGroup tag>
222 |             <Label>javascript</Label>
223 |             <Label>node</Label>
224 |             <Label>react</Label>
225 |           </LabelGroup>
226 |         </Segment>
227 | 
228 |         <Segment>
229 |           <Header element='h3'>Circular group</Header>
230 |           <LabelGroup circular>
231 |             <Label>1</Label>
232 |             <Label>2</Label>
233 |             <Label>3</Label>
234 |           </LabelGroup>
235 |         </Segment>
236 |       </div>
237 |     )
238 |   }
239 | }
240 | 


--------------------------------------------------------------------------------
/demo/MessageDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | 
  3 | import { Segment, Message } from '../src/index'
  4 | 
  5 | const MessageDemo = (props) => {
  6 |   const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
  7 |                 'violet', 'purple', 'pink', 'brown', 'grey', 'black']
  8 | 
  9 |   const sizes = ['small', 'large', 'huge', 'massive']
 10 | 
 11 |   return (
 12 |     <div>
 13 |       <Segment>
 14 |         <Message>
 15 |           <div className='header'>
 16 |             A basic message
 17 |           </div>
 18 |           
 19 |           We are going to be closed for the holiday.
 20 |         </Message>
 21 |       </Segment>
 22 | 
 23 |       <Segment>
 24 |         <Message>
 25 |           <div className='header'>New Features</div>
 26 |           <ul className='list'>
 27 |             <li>You can now create swimlanes</li>
 28 |             <li>You can upload attachments to cards</li>
 29 |           </ul>
 30 |         </Message>
 31 |       </Segment>
 32 | 
 33 |       <Segment>
 34 |         <h3>Icon message</h3>
 35 |         <Message icon>
 36 |           <i className='inbox icon' />
 37 |           <div className='content'>
 38 |             <div className='header'>Do you need help with continuous improvement?</div>
 39 |             <p>Join our mailing list and get tips from the best practitioners.</p>
 40 |           </div>
 41 |         </Message>
 42 |       </Segment>
 43 | 
 44 |       <Segment>
 45 |         <h3>Dismissible message</h3>
 46 |         <Message dismissible>
 47 |           <div className='header'>New Features</div>
 48 |           <ul className='list'>
 49 |             <li>You can now create swimlanes</li>
 50 |             <li>You can upload attachments to cards</li>
 51 |           </ul>
 52 |         </Message>
 53 |       </Segment>
 54 | 
 55 |       <Segment>
 56 |         <h3>Floating message</h3>
 57 |         <Message floating>
 58 |           <div className='header'>New Features</div>
 59 |           <ul className='list'>
 60 |             <li>You can now create swimlanes</li>
 61 |             <li>You can upload attachments to cards</li>
 62 |           </ul>
 63 |         </Message>
 64 |       </Segment>
 65 | 
 66 |       <Segment>
 67 |         <Message compact>
 68 |           A compact message
 69 |         </Message>
 70 |       </Segment>
 71 | 
 72 |       <Segment>
 73 |         <Message attached='top'>
 74 |           This is a top attached message
 75 |         </Message>
 76 |         <Segment attached='both'>
 77 |           <div className='content'>
 78 |             Some content
 79 |           </div>
 80 |         </Segment>
 81 |         <Message attached='bottom' warning>
 82 |           Bottom attached warning message
 83 |         </Message>
 84 |       </Segment>
 85 | 
 86 |       <Segment>
 87 |         <h3>Warning message</h3>
 88 |         <Message warning dismissible> 
 89 |           <div className='header'>
 90 |             You must register in order to view this.
 91 |           </div>
 92 |           Register, then try again.
 93 |         </Message>
 94 |       </Segment>
 95 | 
 96 |       <Segment>
 97 |         <h3>Info message</h3>
 98 |         <Message info>
 99 |           <div className='header'>New Features</div>
100 |           <ul className='list'>
101 |             <li>You can now create swimlanes</li>
102 |             <li>You can upload attachments to cards</li>
103 |           </ul>
104 |         </Message>
105 |       </Segment>
106 | 
107 |       <Segment>
108 |         <h3>Positive message</h3>
109 |         <Message positive dismissible>
110 |           <div className='header'>
111 |             You are eligible for a 30% discount
112 |           </div>
113 |           <p>Visit our deals page now.</p>
114 |         </Message>
115 |       </Segment>
116 | 
117 |       <Segment>
118 |         <h3>Success message</h3>
119 |         <Message success dismissible>
120 |           <div className='header'>You've successfully registered</div>
121 |           <p>You can now enjoy all the benefits of membership.</p>
122 |         </Message>
123 |       </Segment>
124 | 
125 |       <Segment>
126 |         <h3>Negative message</h3>
127 |         <Message negative dismissible>
128 |           <div className='header'>We're sorry you're not eligible for registration</div>
129 |           <p>Please apply again when you meet the requirement</p>
130 |         </Message>
131 |       </Segment>
132 | 
133 |       <Segment>
134 |         <h3>Error message</h3>
135 |         <Message error dismissible>
136 |           <div className='header'>Please fix the following errors:</div>
137 |           <ul className='list'>
138 |             <li>Your password is too short.</li>
139 |             <li>Your username is already taken.</li>
140 |           </ul>
141 |         </Message>
142 |       </Segment>
143 | 
144 |       <Segment>
145 |         <h3>Colored messages</h3>
146 | 
147 |         {colors.map( color => {
148 |           return <Message key={color} color={color}>{color} message</Message>
149 |         })}
150 |       </Segment>
151 | 
152 |       <Segment>
153 |         <h3>Sizes</h3>
154 | 
155 |         {sizes.map( size => {
156 |           return <Message size={size} key={size}>{size} message</Message>
157 |         })}
158 |       </Segment>
159 | 
160 | 
161 | 
162 |     </div>
163 |   )
164 | }
165 | 
166 | export default MessageDemo
167 | 


--------------------------------------------------------------------------------
/demo/ParagraphExample.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Image } from '../src/index'
 4 | 
 5 | import paragraph from './paragraph.png'
 6 | 
 7 | const ParagraphDemo = (props) => {
 8 |   return <Image src={paragraph} style={{opacity: '0.5'}} />
 9 | }
10 | 
11 | export default ParagraphDemo
12 | 


--------------------------------------------------------------------------------
/demo/RailDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Rail, Segment } from '../src/index'
 3 | 
 4 | export default class RailDemo extends Component {
 5 | 
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |         <Segment style={{minHeight: '100px'}}>
10 |           <Rail position='right'>
11 |             <Segment>
12 |               Right Rail
13 |             </Segment>
14 |           </Rail>
15 |           <p>
16 |             Main content.
17 |           </p>
18 |         </Segment>
19 | 
20 |         <Segment style={{minHeight: '100px'}}>
21 |           <Rail position='right' close>
22 |             <Segment>
23 |               A close Rail
24 |             </Segment>
25 |           </Rail>
26 |           <p>
27 |             Main content.
28 |           </p>
29 |         </Segment>
30 | 
31 |         <Segment style={{minHeight: '100px'}}>
32 |           <Rail position='right' dividing>
33 |             <Segment>
34 |               A right dividing Rail.
35 |             </Segment>
36 |           </Rail>
37 |           <p>
38 |             Content.
39 |           </p>
40 |         </Segment>
41 | 
42 |         <Segment style={{minHeight: '200px'}}>
43 |           <Rail position='left' internal>
44 |             <Segment>
45 |               Left internal rail.
46 |             </Segment>
47 |           </Rail>
48 |           <Rail position='right' internal>
49 |             <Segment>
50 |               Right internal rail.
51 |             </Segment>
52 |           </Rail>
53 |         </Segment>
54 | 
55 |         <Segment style={{minHeight: '100px'}}>
56 |           <Rail position='right' attached>
57 |             <Segment>
58 |               An attached Rail.
59 |             </Segment>
60 |           </Rail>
61 | 
62 |           <p>
63 |             Main content.
64 |           </p>
65 |         </Segment>
66 | 
67 |       </div>
68 |     )
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/demo/SegmentDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | 
  3 | import { Segment, SegmentGroup, Header, Image, Button } from '../src/index'
  4 | 
  5 | import paragraph from './paragraph.png'
  6 | 
  7 | const SegmentDemo = (props) => {
  8 |   const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
  9 |                           'violet', 'purple', 'pink', 'brown', 'grey', 'black']
 10 | 
 11 |   return (
 12 |     <div>
 13 |       <Segment raised>
 14 |         A raised segment
 15 |       </Segment>
 16 | 
 17 |       <Segment stacked>
 18 |         A stacked segment
 19 |       </Segment>
 20 | 
 21 |       <Segment piled>
 22 |         <Header>
 23 |           A piled segment
 24 |         </Header>
 25 | 
 26 |         <p>
 27 |           Some text for the piled segment
 28 |         </p>
 29 |       </Segment>
 30 | 
 31 |       <Segment disabled>
 32 |         A disabled segment
 33 |       </Segment>
 34 | 
 35 |       <Segment loading>
 36 |         A loading segment
 37 |       </Segment>
 38 | 
 39 |       <Segment inverted>
 40 |         An inverted segment
 41 |       </Segment>
 42 | 
 43 |       <Segment attached='top'>
 44 |         Top attached segment
 45 |       </Segment>
 46 |       <Segment attached='both'>
 47 |         Segment attached on both sides
 48 |       </Segment>
 49 |       <Segment attached='bottom'>
 50 |         Bottom attached segment
 51 |       </Segment>
 52 | 
 53 |       <Segment padded>
 54 |         <Image src={paragraph} style={{opacity: '0.5'}} />
 55 |       </Segment>
 56 | 
 57 |       <Segment veryPadded>
 58 |         <Image src={paragraph} style={{opacity: '0.5'}} />
 59 |       </Segment>
 60 | 
 61 |       
 62 |       {colors.map( color => {
 63 |         return <Segment color={color} key={color}>{color} segment</Segment>
 64 |       })}
 65 | 
 66 |       {colors.map( color => {
 67 |         return <Segment inverted color={color} key={color}>Inverted {color} segment</Segment>
 68 |       })}
 69 | 
 70 |       <Segment compact>
 71 |         <p>Compact segment</p>
 72 |       </Segment>
 73 | 
 74 |       <Segment secondary>
 75 |         Secondary segment
 76 |       </Segment>
 77 | 
 78 |       <Segment tertiary>
 79 |         Tertiary segment
 80 |       </Segment>
 81 | 
 82 |       <Segment inverted>
 83 |         Inverted segment
 84 |       </Segment>
 85 |       <Segment inverted secondary>
 86 |         Inverted secondary segment
 87 |       </Segment>
 88 | 
 89 |       <Segment inverted tertiary>
 90 |         Inveretd tertiary segment
 91 |       </Segment>
 92 | 
 93 |       <Segment circular style={{width: '175px', height: '175px'}} >
 94 |         <Header element='h2' header='Buy Now' subheader='$10.99' />
 95 |       </Segment>
 96 | 
 97 |       <Segment clearing>
 98 |         <Button floated='right'>Floated</Button>
 99 |       </Segment>
100 | 
101 | 
102 |       <Segment style={{height: '200px'}}>
103 |         <Header element='h3'>Floated segments</Header>
104 |         <Segment floated='right'>
105 |           <p>
106 |             Right floated
107 |           </p>
108 |         </Segment>
109 |         <Segment floated='left'>
110 |           <p>
111 |             Left floated
112 |           </p>
113 |         </Segment>
114 |       </Segment>
115 | 
116 |       <Segment aligned='right'>
117 |         <p>
118 |           Right aligned
119 |         </p>
120 |       </Segment>
121 |       <Segment aligned='center'>
122 |         <p>
123 |           Center aligned
124 |         </p>
125 |       </Segment>
126 |       <Segment aligned='left'>
127 |         <p>
128 |           Left aligned
129 |         </p>
130 |       </Segment>
131 | 
132 |       <Segment basic>
133 |         <Header element='h3'>Basic Segment</Header>
134 |         <p>
135 |           Basic segment without formatting.
136 |         </p>
137 |       </Segment>
138 | 
139 | 
140 |       <SegmentGroup compact>
141 |         <Segment>
142 |           <p>Compact segment in group</p>
143 |         </Segment>
144 |         <Segment>
145 |           <p>Compact segment in group</p>
146 |         </Segment>
147 |       </SegmentGroup>
148 | 
149 |       <SegmentGroup>
150 |         <Segment>
151 |           First segment in a group
152 |         </Segment>
153 |         <Segment>
154 |           Second segment in a group
155 |         </Segment>
156 |         <Segment>
157 |           Third segment in a group
158 |         </Segment>
159 |       </SegmentGroup>
160 | 
161 |       <SegmentGroup raised>
162 |         <Segment>
163 |           First segment in a raised group
164 |         </Segment>
165 |         <Segment>
166 |           Second segment in a group
167 |         </Segment>
168 |         <Segment>
169 |           Third segment in a group
170 |         </Segment>
171 |       </SegmentGroup>
172 | 
173 |       <SegmentGroup stacked>
174 |         <Segment>
175 |           First segment in a stacked group
176 |         </Segment>
177 |         <Segment>
178 |           Second segment in a group
179 |         </Segment>
180 |         <Segment>
181 |           Third segment in a group
182 |         </Segment>
183 |       </SegmentGroup>
184 | 
185 |       <SegmentGroup piled>
186 |         <Segment>
187 |           First segment in a piled group
188 |         </Segment>
189 |         <Segment>
190 |           Second segment in a group
191 |         </Segment>
192 |         <Segment>
193 |           Third segment in a group
194 |         </Segment>
195 |       </SegmentGroup>
196 | 
197 |       <SegmentGroup horizontal>
198 |         <Segment>
199 |           First segment in a horizontal group
200 |         </Segment>
201 |         <Segment>
202 |           Second segment in a group
203 |         </Segment>
204 |         <Segment>
205 |           Third segment in a group
206 |         </Segment>
207 |       </SegmentGroup>
208 | 
209 |       <SegmentGroup>
210 |         <Segment>
211 |           <p>Top</p>
212 |         </Segment>
213 |         <SegmentGroup>
214 |           <Segment>
215 |             <p>Nested top</p>
216 |           </Segment>
217 |           <Segment>
218 |             <p>Nested middle</p>
219 |           </Segment>
220 |           <Segment>
221 |             <p>Nested bottom</p>
222 |           </Segment>
223 |         </SegmentGroup>
224 |       </SegmentGroup>
225 | 
226 |     </div>
227 |   )
228 | }
229 | 
230 | export default SegmentDemo
231 | 


--------------------------------------------------------------------------------
/demo/StatisticDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Statistic, Segment, StatisticGroup } from '../src/index'
 3 | 
 4 | export default class StatisticDemo extends Component {
 5 | 
 6 |   render() {
 7 |     const colors = ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
 8 |                             'violet', 'purple', 'pink', 'brown', 'grey', 'black']
 9 |     const sizes = ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']
10 | 
11 |     return (
12 |       <div>
13 |         <Segment>
14 |           <Statistic label='Favorites' value='1000' />
15 |         </Segment>
16 |         <Segment>
17 |           <Statistic label='Likes' value='999' labelPosition='top' />
18 |         </Segment>
19 | 
20 |         <Segment>
21 |           <h3>Statistic group</h3>
22 |           <StatisticGroup>
23 |             <Statistic label='Favorites' value='1000' />
24 |             <Statistic label='Views' value='99000' />
25 |             <Statistic label='Members' value='7000' />
26 |           </StatisticGroup>
27 |         </Segment>
28 | 
29 |         <Segment>
30 |           <h3>Horizontal statistic</h3>
31 |           <Statistic label='Likes' value='999' horizontal />
32 |         </Segment>
33 | 
34 |         <Segment>
35 |           <h3>Horizontal statistic group</h3>
36 |           <StatisticGroup horizontal>
37 |             <Statistic label='Favorites' value='1000' />
38 |             <Statistic label='Views' value='99000' />
39 |             <Statistic label='Members' value='7000' />
40 |           </StatisticGroup>
41 |         </Segment>
42 | 
43 |         <Segment>
44 |           <h3>Evenly divided</h3>
45 |           <StatisticGroup stats={3}>
46 |             <Statistic label='Favorites' value='1000' />
47 |             <Statistic label='Views' value='99000' />
48 |             <Statistic label='Members' value='7000' />
49 |           </StatisticGroup>
50 |         </Segment>
51 | 
52 |         <Segment>
53 |           <h3>Text value</h3>
54 |           <Statistic label='Signups' value='Thousand' textValue />
55 |         </Segment>
56 | 
57 |         <Segment>
58 |           <h3>Color</h3>
59 |           <StatisticGroup>
60 |             {colors.map( color => {
61 |               return <Statistic key={color} color={color} label={color} value={Math.floor(Math.random() * 10)} />
62 |             })}
63 |           </StatisticGroup>
64 |         </Segment>
65 | 
66 |         <Segment inverted>
67 |           <h3>Color</h3>
68 |           {colors.map( color => {
69 |             return <Statistic inverted key={color} color={color} label={color} value={Math.floor(Math.random() * 10)} />
70 |           })}
71 |         </Segment>
72 | 
73 |         <Segment>
74 |           <h3>Size</h3>
75 |           {sizes.map( size => {
76 |             return <Statistic key={size} size={size} label={size} value={Math.floor(Math.random() * 10)} />
77 |           })}
78 |         </Segment>
79 | 
80 |         <Segment>
81 |           <h3>Horizontal sizes</h3>
82 |           {sizes.map( size => {
83 |             return <Statistic horizontal key={size} size={size} label={size} value={Math.floor(Math.random() * 10)} />
84 |           })}
85 |         </Segment>
86 |       </div>
87 |     )
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/demo/StepDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Segment, Divider, Image,
  4 |          Grid, Column,
  5 |          Step, StepGroup } from '../src/index'
  6 | 
  7 | import paragraph from './paragraph.png'
  8 | 
  9 | const StepDemo = (props) => {
 10 |   return (
 11 |     <div>
 12 |       <Segment>
 13 |         <h3>Single step</h3>
 14 | 
 15 |         <StepGroup>
 16 |           <Step>Step</Step>
 17 |         </StepGroup>
 18 |       </Segment>
 19 | 
 20 |       <Segment>
 21 |         <h3>Group of steps</h3>
 22 | 
 23 |         <StepGroup>
 24 |           <Step>
 25 |             <div className='content'>
 26 |               <div className='title'>Registration</div>
 27 |               <div className='description'>email and password</div>
 28 |             </div>
 29 |           </Step>
 30 |           <Step>
 31 |             <div className='content'>
 32 |               <div className='title'>Profile</div>
 33 |               <div className='description'>name and contact</div>
 34 |             </div>
 35 |           </Step>
 36 |           <Step>
 37 |             <div className='content'>
 38 |               <div className='title'>Preferences</div>
 39 |               <div className='description'>default settings</div>
 40 |             </div>
 41 |           </Step>
 42 |         </StepGroup>
 43 |       </Segment>
 44 | 
 45 |       <Segment>
 46 |         <StepGroup ordered>
 47 |           <Step completed>
 48 |             <div className='content'>
 49 |               <div className='title'>Registration</div>
 50 |               <div className='description'>email and password</div>
 51 |             </div>
 52 |           </Step>
 53 |           <Step completed>
 54 |             <div className='content'>
 55 |               <div className='title'>Profile</div>
 56 |               <div className='description'>name and contact</div>
 57 |             </div>
 58 |           </Step>
 59 |           <Step active>
 60 |             <div className='content'>
 61 |               <div className='title'>Preferences</div>
 62 |               <div className='description'>default settings</div>
 63 |             </div>
 64 |           </Step>
 65 |         </StepGroup>
 66 |       </Segment>
 67 | 
 68 |       <Segment>
 69 |         <StepGroup vertical ordered>
 70 |           <Step completed>
 71 |             <div className='content'>
 72 |               <div className='title'>Registration</div>
 73 |               <div className='description'>email and password</div>
 74 |             </div>
 75 |           </Step>
 76 |           <Step completed>
 77 |             <div className='content'>
 78 |               <div className='title'>Profile</div>
 79 |               <div className='description'>name and contact</div>
 80 |             </div>
 81 |           </Step>
 82 |           <Step active>
 83 |             <div className='content'>
 84 |               <div className='title'>Preferences</div>
 85 |               <div className='description'>default settings</div>
 86 |             </div>
 87 |           </Step>
 88 |         </StepGroup>
 89 |       </Segment>
 90 | 
 91 |       <Segment>
 92 |         <h3>Step States</h3>
 93 |         <StepGroup>
 94 |           <Step active>
 95 |             <i className='info circle icon' />
 96 |             <div className='content'>
 97 |               <div className='title'>Preferences</div>
 98 |               <div className='description'>default settings</div>
 99 |             </div>
100 |           </Step>
101 |         </StepGroup>
102 | 
103 |         <Divider />
104 |         <StepGroup>
105 |           <Step disabled>
106 |             <i className='info circle icon' />
107 |             <div className='content'>
108 |               <div className='title'>Preferences</div>
109 |               <div className='description'>default settings</div>
110 |             </div>
111 |           </Step>
112 |         </StepGroup>
113 | 
114 |         <Divider />
115 | 
116 |         <StepGroup>
117 |           <Step completed>
118 |             <i className='info circle icon' />
119 |             <div className='content'>
120 |               <div className='title'>Preferences</div>
121 |               <div className='description'>default settings</div>
122 |             </div>
123 |           </Step>
124 |         </StepGroup>
125 |       </Segment>
126 | 
127 |       <Segment>
128 |         <Grid columns={2}>
129 |           <Column>
130 |             <StepGroup vertical fluid>
131 |               <Step completed>
132 |                 <i className='info circle icon' />
133 |                 <div className='content'>
134 |                   <div className='title'>Preferences</div>
135 |                   <div className='description'>default settings</div>
136 |                 </div>
137 |               </Step>
138 |               <Step active>
139 |                 <i className='info circle icon' />
140 |                 <div className='content'>
141 |                   <div className='title'>Preferences</div>
142 |                   <div className='description'>default settings</div>
143 |                 </div>
144 |               </Step>
145 |             </StepGroup>
146 |           </Column>
147 |           <Column>
148 |             <h3>Fluid Step</h3>
149 |           </Column>
150 |         </Grid>
151 |       </Segment>
152 | 
153 |       <Segment>
154 |         <h3>Stackable on tablets</h3>
155 |         <StepGroup steps={3} ordered stackable>
156 |           <Step completed>
157 |             <div className='content'>
158 |               <div className='title'>Registration</div>
159 |               <div className='description'>email and password</div>
160 |             </div>
161 |           </Step>
162 |           <Step completed>
163 |             <div className='content'>
164 |               <div className='title'>Profile</div>
165 |               <div className='description'>name and contact</div>
166 |             </div>
167 |           </Step>
168 |           <Step active>
169 |             <div className='content'>
170 |               <div className='title'>Preferences</div>
171 |               <div className='description'>default settings</div>
172 |             </div>
173 |           </Step>
174 |         </StepGroup>
175 |       </Segment>
176 | 
177 |       <Segment>
178 |         <h3>Evenly divided</h3>
179 |         <StepGroup steps={3} ordered>
180 |           <Step completed>
181 |             <div className='content'>
182 |               <div className='title'>Registration</div>
183 |               <div className='description'>email and password</div>
184 |             </div>
185 |           </Step>
186 |           <Step completed>
187 |             <div className='content'>
188 |               <div className='title'>Profile</div>
189 |               <div className='description'>name and contact</div>
190 |             </div>
191 |           </Step>
192 |           <Step active>
193 |             <div className='content'>
194 |               <div className='title'>Preferences</div>
195 |               <div className='description'>default settings</div>
196 |             </div>
197 |           </Step>
198 |         </StepGroup>
199 | 
200 |         <Divider />
201 |         <StepGroup steps={4} ordered>
202 |           <Step completed>
203 |             <div className='content'>
204 |               <div className='title'>Registration</div>
205 |               <div className='description'>email and password</div>
206 |             </div>
207 |           </Step>
208 |           <Step completed>
209 |             <div className='content'>
210 |               <div className='title'>Profile</div>
211 |               <div className='description'>name and contact</div>
212 |             </div>
213 |           </Step>
214 |           <Step active>
215 |             <div className='content'>
216 |               <div className='title'>Preferences</div>
217 |               <div className='description'>default settings</div>
218 |             </div>
219 |           </Step>
220 | 
221 |           <Step>
222 |             <div className='content'>
223 |               <div className='title'>Team</div>
224 |               <div className='description'>team settings</div>
225 |             </div>
226 |           </Step>
227 |         </StepGroup>
228 |       </Segment>
229 | 
230 |       <Segment>
231 |         <h3>Attached</h3>
232 |         <StepGroup steps={3} ordered attached='top'>
233 |           <Step completed>
234 |             <div className='content'>
235 |               <div className='title'>Registration</div>
236 |               <div className='description'>email and password</div>
237 |             </div>
238 |           </Step>
239 |           <Step completed>
240 |             <div className='content'>
241 |               <div className='title'>Profile</div>
242 |               <div className='description'>name and contact</div>
243 |             </div>
244 |           </Step>
245 |           <Step active>
246 |             <div className='content'>
247 |               <div className='title'>Preferences</div>
248 |               <div className='description'>default settings</div>
249 |             </div>
250 |           </Step>
251 |         </StepGroup>
252 | 
253 |         <Segment attached='both'>
254 |           <Image src={paragraph} style={{opacity: '0.5'}} />
255 |         </Segment>
256 | 
257 |         <StepGroup steps={3} ordered attached='bottom'>
258 |           <Step completed>
259 |             <div className='content'>
260 |               <div className='title'>Registration</div>
261 |               <div className='description'>email and password</div>
262 |             </div>
263 |           </Step>
264 |           <Step completed>
265 |             <div className='content'>
266 |               <div className='title'>Profile</div>
267 |               <div className='description'>name and contact</div>
268 |             </div>
269 |           </Step>
270 |           <Step active>
271 |             <div className='content'>
272 |               <div className='title'>Preferences</div>
273 |               <div className='description'>default settings</div>
274 |             </div>
275 |           </Step>
276 |         </StepGroup>
277 |       </Segment>
278 | 
279 | 
280 |       <Segment>
281 |         <h3>Sizes</h3>
282 |         <StepGroup size='small'>
283 |           <Step completed>
284 |             <i className='info circle icon' />
285 |             <div className='content'>
286 |               <div className='title'>Preferences</div>
287 |               <div className='description'>default settings</div>
288 |             </div>
289 |           </Step>
290 |           <Step active>
291 |             <i className='info circle icon' />
292 |             <div className='content'>
293 |               <div className='title'>Preferences</div>
294 |               <div className='description'>default settings</div>
295 |             </div>
296 |           </Step>
297 |         </StepGroup>
298 | 
299 |         <Divider />
300 |         <StepGroup size='large'>
301 |           <Step completed>
302 |             <i className='info circle icon' />
303 |             <div className='content'>
304 |               <div className='title'>Preferences</div>
305 |               <div className='description'>default settings</div>
306 |             </div>
307 |           </Step>
308 |           <Step active>
309 |             <i className='info circle icon' />
310 |             <div className='content'>
311 |               <div className='title'>Preferences</div>
312 |               <div className='description'>default settings</div>
313 |             </div>
314 |           </Step>
315 |         </StepGroup>
316 |       </Segment>
317 |     </div>
318 |   )
319 | }
320 | 
321 | export default StepDemo
322 | 


--------------------------------------------------------------------------------
/demo/bomi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinzui/react-semantic-ui-kit/151e3540aa5aa1f2b29237c6d101403e995b5086/demo/bomi.jpg


--------------------------------------------------------------------------------
/demo/bomi_square.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinzui/react-semantic-ui-kit/151e3540aa5aa1f2b29237c6d101403e995b5086/demo/bomi_square.jpg


--------------------------------------------------------------------------------
/demo/example.css:
--------------------------------------------------------------------------------
 1 | .examplePage {
 2 |   margin-top: 20px;
 3 | }
 4 | 
 5 | .gridExample .grid:before {
 6 |   position: absolute;
 7 |   top: 1rem;
 8 |   left: 1rem;
 9 |   background-color: #fafafa;
10 |   content: "";
11 |   width: calc(100% - 2rem);
12 |   height: calc(100% - 2rem);
13 |   box-shadow: 0px 0px 0px 1px #dddddd inset;
14 | }
15 | 
16 | .gridExample .grid {
17 |   position: relative;
18 | }
19 | .gridExample .row {
20 |   position: relative;
21 | }
22 | .gridExample .grid > .column {
23 |   position: relative;
24 |   z-index: 11;
25 | }
26 | 
27 | .gridExample .grid .column:not(.grid):not(.row):after {
28 |   background-color: rgba(86, 61, 124, .1);
29 |   -webkit-box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
30 |   box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
31 |   content: "";
32 |   display: block;
33 |   min-height: 50px;
34 | }
35 | 
36 | .iconExample .grid {
37 |   text-align: left;
38 | }
39 | 
40 | .iconExample .grid > .column {
41 |   opacity: 0.7;
42 |   text-align: center;
43 |   color: #777777;
44 |   align-items: center;
45 | }
46 | 
47 | .iconExample .column .icon {
48 |   opacity: 1;
49 |   height: 1em;
50 |   display: block;
51 |   color: #333333;
52 |   font-size: 2em;
53 |   margin: 0em auto 0.25em;
54 | }
55 | 


--------------------------------------------------------------------------------
/demo/genji.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinzui/react-semantic-ui-kit/151e3540aa5aa1f2b29237c6d101403e995b5086/demo/genji.jpg


--------------------------------------------------------------------------------
/demo/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinzui/react-semantic-ui-kit/151e3540aa5aa1f2b29237c6d101403e995b5086/demo/image.png


--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component }  from 'react'
  2 | import ReactDOM from 'react-dom'
  3 | 
  4 | import 'semantic-ui-css/semantic.css'
  5 | 
  6 | import { Container, Message, Grid, Column, Menu, MenuItem } from '../src/index'
  7 | import FormDemo from './FormDemo'
  8 | import ButtonDemo from './ButtonDemo'
  9 | import DividerDemo from './DividerDemo'
 10 | import ImageDemo from './ImageDemo'
 11 | import LabelDemo from './LabelDemo'
 12 | import MessageDemo from './MessageDemo'
 13 | import StatisticDemo from './StatisticDemo'
 14 | import ItemDemo from './ItemDemo'
 15 | import HeaderDemo from './HeaderDemo'
 16 | import ListDemo from './ListDemo'
 17 | import RailDemo from './RailDemo'
 18 | import SegmentDemo from './SegmentDemo'
 19 | import FlagDemo from './FlagDemo'
 20 | import ContainerDemo from './ContainerDemo'
 21 | import GridDemo from './GridDemo'
 22 | import InputDemo from './InputDemo'
 23 | import StepDemo from './StepDemo'
 24 | import TableDemo from './TableDemo'
 25 | import CardDemo from './CardDemo'
 26 | import CheckboxDemo from './CheckboxDemo'
 27 | import MenuDemo from './MenuDemo'
 28 | import FeedDemo from './FeedDemo'
 29 | import CommentDemo from './CommentDemo'
 30 | import IconDemo from './IconDemo'
 31 | import BreadcrumbDemo from './BreadcrumbDemo'
 32 | 
 33 | import './example.css'
 34 | 
 35 | const root = document.createElement('div')
 36 | root.classList.add('examplePage')
 37 | document.body.appendChild(root)
 38 | 
 39 | class Page extends Component {
 40 | 
 41 |   constructor(props) {
 42 |     super(props)
 43 |     this.onHashChange = ::this.onHashChange
 44 |   }
 45 | 
 46 |   state = {
 47 |     Page:  undefined
 48 |   }
 49 | 
 50 |   componentDidMount() {
 51 |     this.setPage()
 52 |     window.addEventListener('hashchange', this.onHashChange)
 53 |   }
 54 | 
 55 |   setPage() {
 56 |     const pages = {
 57 |       forms: FormDemo,
 58 |       buttons: ButtonDemo,
 59 |       images: ImageDemo,
 60 |       divider: DividerDemo,
 61 |       labels: LabelDemo,
 62 |       messages: MessageDemo,
 63 |       statistic: StatisticDemo,
 64 |       item: ItemDemo,
 65 |       header: HeaderDemo,
 66 |       list: ListDemo,
 67 |       rail: RailDemo,
 68 |       segment: SegmentDemo,
 69 |       flag: FlagDemo,
 70 |       container: ContainerDemo,
 71 |       grid: GridDemo,
 72 |       input: InputDemo,
 73 |       step: StepDemo,
 74 |       table: TableDemo,
 75 |       card: CardDemo,
 76 |       checkbox: CheckboxDemo,
 77 |       menu: MenuDemo,
 78 |       feed: FeedDemo,
 79 |       comment: CommentDemo,
 80 |       icon: IconDemo,
 81 |       breadcrumb: BreadcrumbDemo
 82 |     }
 83 | 
 84 |     let hash = window.location.hash
 85 |     let newPage = pages[hash.substring(1)]
 86 | 
 87 |     if(newPage) {
 88 |       this.setState({ Page: newPage})
 89 |     } else {
 90 |       this.setState({ Page: undefined })
 91 |     }
 92 |   }
 93 | 
 94 |   onHashChange()  {
 95 |     this.setPage()
 96 |   }
 97 | 
 98 |   render() {
 99 |     const { Page } = this.state
100 | 
101 |     const content = Page ? <Page /> : undefined
102 | 
103 |     const items = ['forms', 'input', 'buttons', 'images', 'labels',
104 |       'messages', 'divider', 'statistic', 'item', 'header',
105 |       'list', 'rail', 'segment', 'flag', 'container', 'grid', 'step',
106 |       'table', 'card', 'checkbox', 'menu', 'feed', 'comment', 'icon',
107 |       'breadcrumb']
108 | 
109 |     return (
110 |       <Grid page>
111 |         <Column width={3}>
112 |           <Menu vertical>
113 |             {items.map( item => <MenuItem key={item} href={`#${item}`}>{item.charAt(0).toUpperCase() + item.slice(1)}</MenuItem>)}
114 |           </Menu>
115 |         </Column>
116 |         <Column width={13}>
117 |           {content}
118 |         </Column>
119 |       </Grid>
120 |     )
121 |   }
122 | }
123 | 
124 | ReactDOM.render(<Page />, root)
125 | 


--------------------------------------------------------------------------------
/demo/paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinzui/react-semantic-ui-kit/151e3540aa5aa1f2b29237c6d101403e995b5086/demo/paragraph.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-semantic-ui-kit",
 3 |   "version": "0.1.9",
 4 |   "description": "Semantic UI components built with React",
 5 |   "main": "lib/index.js",
 6 |   "files": [
 7 |     "lib"
 8 |   ],
 9 |   "scripts": {
10 |     "compile": "babel -d lib/ src/",
11 |     "prepublish": "npm run compile",
12 |     "demo": "webpack-dev-server --config webpack.config.dev.js",
13 |     "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'",
14 |     "test:watch": "npm run test -- --watch",
15 |     "preversion": "npm test",
16 |     "version": "npm run compile",
17 |     "postversion": "git push && git push --tags && npm publish"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "https://github.com/shinzui/react-semantic-ui-kit.git"
22 |   },
23 |   "keywords": [
24 |     "semantic-ui",
25 |     "react"
26 |   ],
27 |   "author": "Nadeem Bitar <nadeem@productatelier.com> (https://productatelier.com)",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/shinzui/react-semantic-ui-kit/issues"
31 |   },
32 |   "homepage": "https://github.com/shinzui/react-semantic-ui-kit#readme",
33 |   "peerDependencies": {
34 |     "classnames": "^2.2.0",
35 |     "react": "^15.1.0",
36 |     "react-dom": "^15.1.0",
37 |     "react-immutable-proptypes": "^1.5.0",
38 |     "semantic-ui-css": "^2.1.8"
39 |   },
40 |   "devDependencies": {
41 |     "babel-cli": "^6.2.0",
42 |     "babel-eslint": "^6.0.4",
43 |     "babel-loader": "^6.2.0",
44 |     "babel-plugin-transform-runtime": "^6.1.18",
45 |     "babel-preset-es2015": "^6.1.18",
46 |     "babel-preset-react": "^6.1.18",
47 |     "babel-preset-stage-0": "^6.1.18",
48 |     "chai": "^3.4.1",
49 |     "chai-enzyme": "^0.4.2",
50 |     "classnames": "^2.2.0",
51 |     "css-loader": "^0.23.0",
52 |     "enzyme": "^2.3.0",
53 |     "eslint": "^2.10.2",
54 |     "eslint-loader": "^1.1.1",
55 |     "eslint-plugin-react": "^5.1.1",
56 |     "extract-text-webpack-plugin": "^1.0.1",
57 |     "file-loader": "^0.8.4",
58 |     "html-webpack-plugin": "^2.17.0",
59 |     "immutable": "^3.7.5",
60 |     "install": "^0.8.1",
61 |     "mocha": "^2.3.4",
62 |     "react": "^15.1.0",
63 |     "react-addons-test-utils": "^15.1.0",
64 |     "react-dom": "^15.1.0",
65 |     "react-immutable-proptypes": "^1.5.0",
66 |     "semantic-ui-css": "^2.1.8",
67 |     "style-loader": "^0.13.0",
68 |     "url-loader": "^0.5.6",
69 |     "webpack": "^1.12.8",
70 |     "webpack-dev-server": "^1.12.1"
71 |   },
72 |   "dependencies": {
73 |     "react": "^15.1.0"
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/collections/Message.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../common/SemanticUiPropTypes'
 7 | 
 8 | export default class Message extends Component {
 9 | 
10 |   static propTypes = {
11 |     children: PropTypes.node,
12 |     size: PropTypes.oneOf(['small', 'large', 'huge', 'massive']),
13 |     dismissible: PropTypes.bool,
14 |     compact: PropTypes.bool,
15 |     warning: PropTypes.bool,
16 |     info: PropTypes.bool,
17 |     positive: PropTypes.bool,
18 |     success: PropTypes.bool,
19 |     error: PropTypes.bool,
20 |     success: PropTypes.bool,
21 |     icon: PropTypes.bool,
22 |     hidden: PropTypes.bool,
23 |     visible: PropTypes.bool,
24 |     floating: PropTypes.bool,
25 |     color: SemanticUiPropTypes.color,
26 |     attached: PropTypes.oneOf(['top', 'bottom'])
27 |   }
28 | 
29 |   constructor(props) {
30 |     super(props)
31 |     this.dismiss = this.dismiss.bind(this)
32 |   }
33 | 
34 |   state = {
35 |     dismissed: false
36 |   }
37 | 
38 |   attachedClasses() {
39 |     const { attached } = this.props
40 | 
41 |     if(attached === 'top') {
42 |       return 'attached'
43 |     } else if(attached === 'bottom') {
44 |       return 'bottom attached'
45 |     }
46 |   }
47 | 
48 | 
49 |   dismiss() {
50 |     this.setState({dismissed: true})
51 |   }
52 | 
53 |   render() {
54 |     const { size, className, color } = this.props
55 |     const { dismissed } = this.state
56 | 
57 |     const classesFromProps = propsToClasses(['hidden', 'visible', 'floating',
58 |                                             'positive', 'success', 'negative', 'error',
59 |                                             'compact', 'info', 'warning', 'icon'], this.props)
60 | 
61 |     let classes = classNames('ui', this.attachedClasses(), classesFromProps,
62 |                              {'hidden': dismissed},
63 |                              size, color, 'message', className)
64 |     let dismissIcon = this.props.dismissible ? <i className='close icon' onClick={this.dismiss} /> : undefined
65 | 
66 |     return (
67 |       <div {...this.props} className={classes}>
68 |         {dismissIcon}
69 |         {this.props.children}
70 |       </div>)
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/collections/breadcrumb/Breadcrumb.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 4 | import classNames from 'classnames'
 5 | 
 6 | export default class Breadcrumb extends Component {
 7 | 
 8 |   static propTypes = {
 9 |     size: SemanticUiPropTypes.size,
10 |     children: PropTypes.node.isRequired
11 |   }
12 | 
13 |   render() {
14 |     const { size, children } = this.props
15 |     const classes = classNames('ui', size, 'breadcrumb')
16 | 
17 |     return (
18 |       <div className={classes}>
19 |         {children}
20 |       </div>
21 |     )
22 |   }
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/src/collections/breadcrumb/BreadcrumbDivider.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | const BreadcrumbDivider = (props) => {
 4 |   const { divider } = props
 5 |   return (
 6 |     <span className='divider'>{divider}</span>
 7 |   )
 8 | }
 9 | 
10 | BreadcrumbDivider.defaultProps = {
11 |   divider: '/'
12 | }
13 | 
14 | BreadcrumbDivider.propTypes = {
15 |   divider: PropTypes.string.isRequired
16 | }
17 | 
18 | export default BreadcrumbDivider
19 | 


--------------------------------------------------------------------------------
/src/collections/breadcrumb/BreadcrumbSection.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | export default class BreadcrumbSection extends Component {
 6 | 
 7 |   static propTypes = {
 8 |     active: PropTypes.bool,
 9 |     href: PropTypes.string,
10 |     text: PropTypes.string
11 |   }
12 | 
13 |   render() {
14 |     const { active, href, text, children } = this.props
15 |     const classes = classNames({'active': active}, 'section')
16 | 
17 |     const sectionBody = text ? text : children
18 | 
19 |     if(active || !href) {
20 |       return <span className={classes}>{sectionBody}</span>
21 |     } else {
22 |       return <a href={href} className={classes}>{sectionBody}</a>
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/collections/form/Form.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | export default class Form extends Component {
 8 | 
 9 |   static propTypes = {
10 |     valid: PropTypes.bool,
11 |     reply: PropTypes.bool,
12 |     loading: PropTypes.bool,
13 |     equalWidth: PropTypes.bool,
14 |     inverted: PropTypes.bool,
15 |     size: PropTypes.oneOf(['small', 'large'])
16 |   }
17 | 
18 |   render() {
19 |     const { size, className } = this.props
20 |     const classesFromProps = propsToClasses(['reply', 'equalWidth', 'loading', 'inverted'], this.props)
21 |     const classes = classNames('ui', classesFromProps, size, 'form', {'error' : !this.props.valid}, className)
22 | 
23 |     return (
24 |       <form className={classes}>
25 |         {this.props.children}
26 |       </form>
27 |     )
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/collections/form/FormField.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import ImmutablePropTypes from 'react-immutable-proptypes'
 5 | 
 6 | import spellNumber from '../../util/spellNumber'
 7 | import propsToClasses from '../../util/propsToClasses'
 8 | 
 9 | import Label from '../../index'
10 | 
11 | export default class FormField extends Component {
12 | 
13 |   static propTypes = {
14 |     name: (props, propName, componentName) => {
15 |       if(!props.hasOwnProperty('children')) {
16 |         if(!props.hasOwnProperty(propName)) {
17 |           return new Error(`Required ${propName} was not specified in ${componentName}`)
18 |         }
19 |       }
20 |     },
21 |     label: PropTypes.string,
22 |     placeholder: PropTypes.string,
23 |     width: PropTypes.number,
24 |     errors: ImmutablePropTypes.list,
25 |     onChange: PropTypes.func.isRequired,
26 |     onBlur: PropTypes.func.isRequired,
27 |     onFocus: PropTypes.func.isRequired,
28 |     disabled: PropTypes.bool,
29 |     inline: PropTypes.bool,
30 |     required: PropTypes.bool,
31 |     readOnly: PropTypes.bool
32 |   }
33 | 
34 |   static defaultProps = {
35 |     value: '',
36 |     onChange: () => {},
37 |     onBlur: () => {},
38 |     onFocus: () => {}
39 |   }
40 | 
41 |   constructor(props) {
42 |     super(props)
43 |   }
44 | 
45 |   widthClasses() {
46 |     const { width } = this.props
47 | 
48 |     if(width) return `${spellNumber(width)} wide`
49 |   }
50 | 
51 |   inputControl() {
52 |     const { errors, label: labelText, name, value, placeholder, readOnly } = this.props
53 |     const { onBlur, onFocus, onChange } = this.props
54 | 
55 |     const input =
56 |       <input type='text' name={name} value={value}
57 |              onChange={onChange}
58 |              onBlur={onBlur}
59 |              onFocus={onFocus}
60 |              placeholder={placeholder} readOnly={readOnly}/>
61 | 
62 |     if(this.props.busy) {
63 |       return (<div className='ui input icon loading'>
64 |         {input}
65 |         <i className='icon' />
66 |       </div>)
67 |     } else {
68 |       return (
69 |         <div className='ui input'>
70 |           {input}
71 |         </div>
72 |       )
73 |     }
74 |   }
75 | 
76 |   render() {
77 |     const { errors, label: labelText, name, value, className, children } = this.props
78 |     const hasErrors = errors && errors.size > 0
79 | 
80 |     let widthClasses = this.widthClasses()
81 |     let label = labelText ? <label>{labelText}</label> : ''
82 |     const classFromProps = propsToClasses(['disabled', 'inline', 'required'], this.props)
83 |     let fieldClasses = classNames('ui', classFromProps, 'field', {'error': hasErrors}, widthClasses, className )
84 |     let pointingLabel = hasErrors ? <Label basic pointing className='prompt red'>{errors.get(0)}</Label> : undefined
85 | 
86 |     const input = children ? <div className='ui input'>{children}</div> : this.inputControl()
87 |     return (
88 |       <div className={fieldClasses}>
89 |         {label}
90 |         {input}
91 |         {pointingLabel}
92 |       </div>
93 |     )
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/collections/form/FormFieldGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import spellNumber from '../../util/spellNumber'
 6 | import propsToClasses from '../../util/propsToClasses'
 7 | import FormField from './FormField'
 8 | 
 9 | export default class FormFieldGroup extends Component {
10 | 
11 |   static propTypes = {
12 |     children: (props, propName, componentName) => {
13 |       const prop = props[propName]
14 |       if(Array.isArray(prop)) {
15 |         if(prop.some( p => p.type !== FormField)) {
16 |           return new Error(`${componentName} should only have FormField as children`)
17 |         }
18 |       } else {
19 |         if(prop.type !== FormField) {
20 |           return new Error(`${componentName} should only have FormField as children`)
21 |         }
22 |       }
23 |     },
24 |     fields: PropTypes.number,
25 |     inline: PropTypes.bool,
26 |     equalWidth: PropTypes.bool,
27 |     grouped: PropTypes.bool
28 |   }
29 | 
30 |   render() {
31 |     const { className, children, fields } = this.props
32 |     const classFromProps = propsToClasses(['inline', 'equalWidth', 'grouped'], this.props)
33 |     const classes = classNames(spellNumber(fields), classFromProps, 'fields', className)
34 | 
35 |     return <div className={classes}>{children}</div>
36 | 
37 |   }
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/src/collections/grid/Column.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import { deviceWidthClasses, widthClasses,
 5 |          floatedClasses, alignedClasses } from '../../common/semanticClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | 
 8 | export default class Column extends Component {
 9 | 
10 |   static propTypes = {
11 |     width: PropTypes.number,
12 |     mobileWidth: PropTypes.number,
13 |     tabletWidth: PropTypes.number,
14 |     computerWidth: PropTypes.number,
15 |     color: SemanticUiPropTypes.color,
16 |     floated: SemanticUiPropTypes.floated,
17 |     aligned: SemanticUiPropTypes.aligned,
18 |     style: PropTypes.object
19 |   }
20 | 
21 |   render() {
22 |     const { className, style, color } = this.props
23 |     const classes = classNames(widthClasses(this.props), deviceWidthClasses(this.props),
24 |                                alignedClasses(this.props), floatedClasses(this.props),
25 |                                color, 'column', className)
26 | 
27 |     return <div className={classes} style={style}>{this.props.children}</div>
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/collections/grid/Grid.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import { columnClasses } from '../../common/semanticClasses'
 6 | import propsToClasses from '../../util/propsToClasses'
 7 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 8 | import { reversedDevicesClasses, alignedClasses } from '../../common/semanticClasses'
 9 | 
10 | export default class Grid extends Component {
11 | 
12 |   static propTypes = {
13 |     children: PropTypes.node,
14 |     columns: PropTypes.number,
15 |     page: PropTypes.bool,
16 |     container: PropTypes.bool,
17 |     relaxed: PropTypes.bool,
18 |     celled: PropTypes.bool,
19 |     centered: PropTypes.bool,
20 |     stackable: PropTypes.bool,
21 |     padded: PropTypes.bool,
22 |     internallyCelled: PropTypes.bool,
23 |     equalWidth: PropTypes.bool,
24 |     aligned: SemanticUiPropTypes.verticalAndHorizontalAlignment,
25 |     reversedDevices: SemanticUiPropTypes.commonDevices,
26 |     style: PropTypes.object
27 |   }
28 | 
29 |   render() {
30 |     const { page, container, internallyCelled, style, equalWidth, className } = this.props
31 |     const classesFromProps = propsToClasses(['relaxed', 'celled', 'centered', 'stackable', 'padded'], this.props)
32 |     const classes = classNames('ui', alignedClasses(this.props), columnClasses(this.props), classesFromProps,
33 |                                reversedDevicesClasses(this.props),
34 |                                {'internally celled': internallyCelled},
35 |                                {'equal width': equalWidth},
36 |                                'grid', {'container': page || container},  className)
37 | 
38 |     return <div {...this.props} className={classes} style={style}>{this.props.children}</div>
39 |   }
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/src/collections/grid/Row.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import spellNumber from '../../util/spellNumber'
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | import { deviceClasses, alignedClasses } from '../../common/semanticClasses'
 8 | 
 9 | export default class Row extends Component {
10 | 
11 |   static propTypes = {
12 |     children: PropTypes.node,
13 |     columns: PropTypes.number,
14 |     doubling: PropTypes.bool,
15 |     centered: PropTypes.bool,
16 |     equalWidth: PropTypes.bool,
17 |     aligned: SemanticUiPropTypes.aligned,
18 |     devices: SemanticUiPropTypes.devices,
19 |     style: PropTypes.object
20 |   }
21 | 
22 |   columnClasses() {
23 |     const { columns } = this.props
24 | 
25 |     if(columns) return `${spellNumber(columns)} column`
26 |   }
27 | 
28 |   render() {
29 |     const { style, className, equalWidth } = this.props
30 |     const classesFromProps = propsToClasses(['centered', 'doubling'], this.props)
31 |     let classes = classNames('ui', deviceClasses(this.props), alignedClasses(this.props),
32 |                              this.columnClasses(), {'equal width': equalWidth},
33 |                              classesFromProps, 'row', className)
34 | 
35 |     return <div className={classes} style={style}>{this.props.children}</div>
36 |   }
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/src/collections/menu/Menu.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import { itemClasses } from '../../common/semanticClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | 
 8 | import MenuItem from './MenuItem'
 9 | 
10 | export default class Menu extends Component {
11 | 
12 |   static propTypes = {
13 |     children: (props, propName, componentName) => {
14 |       const prop = props[propName]
15 | 
16 |       if(Array.isArray(prop)) {
17 |         if(prop.some( p => (p.type !== MenuItem && p.type !== Menu))) {
18 |           return new Error(`${componentName} should only have MenuItem or Menu as children`)
19 |         }
20 |       } else {
21 |         if(prop.type !== MenuItem && prop.type !== Menu) {
22 |           return new Error(`${componentName} should only have MenuItem or Menu as children`)
23 |         }
24 |       }
25 |     },
26 |     items: PropTypes.number,
27 |     vertical: PropTypes.bool,
28 |     basic: PropTypes.bool,
29 |     borderless: PropTypes.bool,
30 |     tabular: PropTypes.bool,
31 |     text: PropTypes.bool,
32 |     right: PropTypes.bool,
33 |     parentMenu: PropTypes.bool,
34 |     secondary: PropTypes.bool,
35 |     pointing: PropTypes.bool,
36 |     pagination: PropTypes.bool,
37 |     compact: PropTypes.bool,
38 |     stackable: PropTypes.bool,
39 |     inverted: PropTypes.bool,
40 |     icon: PropTypes.bool,
41 |     labeledIcon: PropTypes.bool,
42 |     fluid: PropTypes.bool,
43 |     color: SemanticUiPropTypes.color,
44 |     size: PropTypes.oneOf(['small', 'large'])
45 |   }
46 | 
47 |   render() {
48 |     const { className, parentMenu, color, labeledIcon, size } = this.props
49 |     const classesFromProps = propsToClasses(['secondary', 'right', 'vertical',
50 |                                             'borderless', 'compact', 'pointing', 'pagination',
51 |                                             'icon', 'text', 'basic', 'fluid',
52 |                                             'tabular', 'stackable', 'inverted'], this.props)
53 |     const classes = classNames({'ui': !parentMenu}, color, size, itemClasses(this.props),
54 |                                {'labeled icon': labeledIcon}, classesFromProps, 'menu', className)
55 | 
56 |     const children = React.Children.map(this.props.children, (child) => {
57 |       if(child.type === MenuItem) {
58 |         return child
59 |       } else if(child.type === Menu) {
60 |         return React.cloneElement(child, { parentMenu: true })
61 |       }
62 |     })
63 | 
64 |     return <div className={classes}>{children}</div>
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/collections/menu/MenuItem.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { fittedClasses } from '../../common/semanticClasses'
 7 | 
 8 | export default class MenuItem extends Component {
 9 | 
10 |   static propTypes = {
11 |     active: PropTypes.bool,
12 |     href: PropTypes.string,
13 |     header: PropTypes.bool,
14 |     disabled: PropTypes.bool,
15 |     link: PropTypes.bool,
16 |     down: PropTypes.bool,
17 |     fitted: SemanticUiPropTypes.fitted,
18 |     onClick: PropTypes.func,
19 |     color: SemanticUiPropTypes.color
20 |   }
21 | 
22 |   render() {
23 |     const { className, href, children, onClick, color } = this.props
24 |     const classesFromProps = propsToClasses(['active', 'disabled', 'link', 'down', 'header'], this.props)
25 |     const classes = classNames(color, classesFromProps, fittedClasses(this.props), 'item', className)
26 | 
27 |     if(href) {
28 |       return <a href={href} className={classes} onClick={onClick}>{children}</a>
29 |     } else {
30 |       return <div className={classes} onClick={onClick}>{children}</div>
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/collections/table/Table.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import propsToClasses from '../../util/propsToClasses'
 7 | import { columnClasses } from '../../common/semanticClasses'
 8 | 
 9 | export default class Table extends Component {
10 | 
11 |   static propTypes = {
12 |     children: PropTypes.node.isRequired,
13 |     celled: PropTypes.bool,
14 |     definition: PropTypes.bool,
15 |     structured: PropTypes.bool,
16 |     singleLine: PropTypes.bool,
17 |     fixed: PropTypes.bool,
18 |     selectable: PropTypes.bool,
19 |     striped: PropTypes.bool,
20 |     basic: PropTypes.bool,
21 |     color: SemanticUiPropTypes.color,
22 |     inverted: PropTypes.bool,
23 |     compact: PropTypes.bool,
24 |     veryCompact: PropTypes.bool,
25 |     padded: PropTypes.bool,
26 |     veryPadded: PropTypes.bool,
27 |     columns: PropTypes.number,
28 |     stackable: PropTypes.bool,
29 |     unstackable: PropTypes.bool,
30 |     collapsing: PropTypes.bool,
31 |     sortable: PropTypes.bool,
32 |     size: PropTypes.oneOf(['small', 'large'])
33 |   }
34 | 
35 |   render() {
36 |     const { className, singleLine, color, veryCompact, veryPadded, size } = this.props
37 |     const classesFromProps = propsToClasses(['selectable', 'structured', 'striped', 'basic',
38 |                                             'celled', 'definition', 'fixed', 'sortable',
39 |                                             'collapsing', 'inverted', 'compact', 'padded',
40 |                                             'stackable', 'unstackable'], this.props)
41 | 
42 |     const classes = classNames('ui', columnClasses(this.props), size, classesFromProps,
43 |                                {'single line': singleLine}, {'very compact': veryCompact}, {'very padded': veryPadded},
44 |                                color, 'table', className)
45 | 
46 |     return(
47 |       <table className={classes}>
48 |         {this.props.children}
49 |       </table>
50 |     )
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/collections/table/TableCell.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | import { alignedClasses, widthClasses, sortedClasses } from '../../common/semanticClasses'
 8 | 
 9 | export default class TableCell extends Component {
10 | 
11 |   static propTypes = {
12 |     positive: PropTypes.bool,
13 |     negative: PropTypes.bool,
14 |     error: PropTypes.bool,
15 |     warning: PropTypes.bool,
16 |     active: PropTypes.bool,
17 |     disabled: PropTypes.bool,
18 |     collapsing: PropTypes.bool,
19 |     aligned: SemanticUiPropTypes.verticalAndHorizontalAlignment,
20 |     header: PropTypes.bool,
21 |     selectable: PropTypes.bool,
22 |     width: PropTypes.number,
23 |     sorted: PropTypes.oneOf(['ascending', 'descending'])
24 |   }
25 | 
26 |   render() {
27 |     const { className, header } = this.props
28 |     const classesFromProps = propsToClasses(['selectable', 'positive', 'negative', 'error',
29 |                                             'warning', 'active', 'disabled', 'collapsing'], this.props)
30 | 
31 |     const classes = classNames(widthClasses(this.props), classesFromProps, alignedClasses(this.props),
32 |                                sortedClasses(this.props),className)
33 | 
34 |     if(header) {
35 |       return <th className={classes}>{this.props.children}</th>
36 |     } else {
37 |       return <td className={classes}>{this.props.children}</td>
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/collections/table/TableFooter.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | const TableFooter = (props) => {
 8 |   const { className, fullWidth, children } = props
 9 |   const classes = classNames({'full-width': fullWidth}, className)
10 | 
11 |   return <tfoot className={classes}>{children}</tfoot>
12 | }
13 | 
14 | TableFooter.propTypes = {
15 |   fullWidth: PropTypes.bool
16 | }
17 | 
18 | export default TableFooter
19 | 


--------------------------------------------------------------------------------
/src/collections/table/TableHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | const TableHeader = (props) => {
 8 |   const { className, fullWidth, children } = props
 9 |   const classes = classNames({'full-width': fullWidth}, className)
10 | 
11 |   return <thead className={classes}>{children}</thead>
12 | }
13 | 
14 | TableHeader.propTypes = {
15 |   fullWidth: PropTypes.bool
16 | }
17 | 
18 | export default TableHeader
19 | 


--------------------------------------------------------------------------------
/src/collections/table/TableRow.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | import { alignedClasses } from '../../common/semanticClasses'
 8 | 
 9 | export default class TableRow extends Component {
10 | 
11 |   static propTypes = {
12 |     positive: PropTypes.bool,
13 |     negative: PropTypes.bool,
14 |     error: PropTypes.bool,
15 |     warning: PropTypes.bool,
16 |     active: PropTypes.bool,
17 |     disabled: PropTypes.bool,
18 |     aligned: SemanticUiPropTypes.verticalAndHorizontalAlignment,
19 |   }
20 | 
21 |   render() {
22 |     const { className } = this.props
23 |     const classesFromProps = propsToClasses(['positive', 'negative',
24 |                                   'error', 'warning', 'active', 'disabled'], this.props)
25 | 
26 |     const classes = classNames(classesFromProps, alignedClasses(this.props), className)
27 | 
28 |     return <tr className={classes}>{this.props.children}</tr>
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/common/SemanticUiPropTypes.js:
--------------------------------------------------------------------------------
 1 | import { PropTypes } from 'react'
 2 | 
 3 | const size = PropTypes.oneOf(['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive'])
 4 | const attached = PropTypes.oneOf(['top', 'bottom', 'both'])
 5 | const labelAttachment = PropTypes.oneOf(['top', 'bottom', 'right', 'left', 'topLeft', 'bottomLeft', 'topRight', 'bottomRight'])
 6 | const aligned = PropTypes.oneOf(['right', 'left', 'center'])
 7 | const verticalAndHorizontalAlignment = PropTypes.oneOf(['right', 'left', 'center', 'top', 'bottom', 'center'])
 8 | const verticalAlignment = PropTypes.oneOf(['top', 'bottom', 'middle'])
 9 | const floated = PropTypes.oneOf(['right', 'left'])
10 | const color = PropTypes.oneOf(['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue',
11 |                               'violet', 'purple', 'pink', 'brown', 'grey', 'black'])
12 | const social = PropTypes.oneOf(['facebook', 'twitter', 'googlePlus' , 'vk', 'linkedIn', 'instagram', 'youtube'])
13 | const fitted = PropTypes.oneOf(['both', 'horizontally', 'vertically'])
14 | 
15 | const devices = PropTypes.arrayOf(PropTypes.oneOf(['computer', 'tablet', 'mobile', 'largeScreen']))
16 | const commonDevices = PropTypes.arrayOf(PropTypes.oneOf(['computer', 'tablet', 'mobile']))
17 | 
18 | const SemanticUiPropTypes = {
19 |   attached,
20 |   aligned,
21 |   color,
22 |   commonDevices,
23 |   devices,
24 |   fitted,
25 |   floated,
26 |   social,
27 |   verticalAlignment,
28 |   verticalAndHorizontalAlignment,
29 |   labelAttachment,
30 |   size
31 | }
32 | 
33 | export default SemanticUiPropTypes
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/src/common/semanticClasses.js:
--------------------------------------------------------------------------------
  1 | import spellNumber from '../util/spellNumber'
  2 | import { splitAndLowerCamelCase } from '../util/string'
  3 | 
  4 | export const attachedClasses = (props) => {
  5 |   const { attached } = props
  6 | 
  7 |   if(attached === 'top') {
  8 |     return 'top attached'
  9 |   } else if(attached === 'bottom') {
 10 |     return 'bottom attached'
 11 |   } else if(attached === 'both') {
 12 |     return 'attached'
 13 |   } else if(attached === 'topRight') {
 14 |     return 'top right attached'
 15 |   } else if(attached === 'topLeft') {
 16 |     return 'top left attached'
 17 |   } else if(attached === 'bottomRight') {
 18 |     return 'bottom right attached'
 19 |   } else if(attached === 'bottomLeft') {
 20 |     return 'bottom left attached'
 21 |   } else if(attached === 'left') {
 22 |     return 'left attached'
 23 |   } else if(attached === 'right') {
 24 |     return 'right attached'
 25 |   }
 26 | }
 27 | 
 28 | export const alignedClasses = (props) => {
 29 |   const { aligned } = props
 30 | 
 31 |   if(aligned === 'right') {
 32 |     return 'right aligned'
 33 |   } else if(aligned === 'left') {
 34 |     return 'left aligned'
 35 |   } else if(aligned === 'center') {
 36 |     return 'center aligned'
 37 |   } else if(aligned === 'middle') {
 38 |     return 'middle aligned'
 39 |   } else if(aligned === 'top') {
 40 |     return 'top aligned'
 41 |   } else if(aligned === 'bottom') {
 42 |     return 'bottom aligned'
 43 |   }
 44 | }
 45 | 
 46 | export const floatedClasses = (props) => {
 47 |   const { floated } = props
 48 | 
 49 |   if(floated === 'right') {
 50 |     return 'right floated'
 51 |   } else if(floated === 'left') {
 52 |     return 'left floated'
 53 |   }
 54 | }
 55 | 
 56 | export const columnClasses = (props) => {
 57 |   const { columns } = props
 58 | 
 59 |   if(columns) return `${spellNumber(columns)} column`
 60 | }
 61 | 
 62 | export const fittedClasses = (props) => {
 63 |   const { fitted } = props
 64 | 
 65 |   if(fitted === 'both') {
 66 |     return 'fitted'
 67 |   } else if(fitted === 'horizontally') {
 68 |     return 'horizontally fitted'
 69 |   } else if(fitted === 'vertically') {
 70 |     return 'vertically fitted'
 71 |   }
 72 | }
 73 | 
 74 | export const itemClasses = (props) => {
 75 |   const { items } = props
 76 | 
 77 |   if(items) return `${spellNumber(items)} item`
 78 | }
 79 | 
 80 | export const widthClasses = (props) => {
 81 |   const { width } = props
 82 | 
 83 |   if(width) return `${spellNumber(width)} wide`
 84 | }
 85 | 
 86 | export const reversedDevicesClasses = (props) => {
 87 |   const classes = []
 88 |   const { reversedDevices } = props
 89 | 
 90 |   if(reversedDevices) {
 91 |     reversedDevices.forEach( (device) => {
 92 |       classes.push(`${device} reversed`)
 93 |     })
 94 | 
 95 |     return classes.join(' ')
 96 |   }
 97 | }
 98 | 
 99 | export const deviceWidthClasses = (props) => {
100 |   const classes = []
101 |   const devices = ['mobile', 'tablet', 'computer']
102 | 
103 |   devices.forEach( (device) => {
104 |     let width = props[`${device}Width`]
105 | 
106 |     if(width) {
107 |       classes.push(`${spellNumber(width)} wide ${device}`)
108 |     }
109 |   })
110 | 
111 |   if(classes.length > 0) {
112 |     return classes.join(' ')
113 |   }
114 | }
115 | 
116 | export const buttonClasses = (props) => {
117 |   const { buttons } = props
118 | 
119 |   if(buttons) return spellNumber(buttons)
120 | }
121 | 
122 | export const sortedClasses = (props) => {
123 |   const { sorted } = props
124 | 
125 |   if(sorted === 'ascending') {
126 |     return 'sorted ascending'
127 |   } else if(sorted === 'descending') {
128 |     return 'sorted descending'
129 |   }
130 | }
131 | 
132 | export const socialClasses = (props) => {
133 |   const { social } = props
134 | 
135 |   if(social === 'googlePlus') {
136 |     return 'google plus'
137 |   } else if(social === 'linkedIn') {
138 |     return 'linkedin'
139 |   } else if(social) {
140 |     return social
141 |   }
142 | }
143 | 
144 | export const deviceClasses = (props) => {
145 |   const { devices } = props
146 | 
147 |   if(devices) {
148 |     const classes = []
149 | 
150 |     devices.forEach( (device) => {
151 |       classes.push(splitAndLowerCamelCase(device))
152 |     })
153 | 
154 |     return `${classes.join(' ')} only`
155 |   }
156 | }
157 | 


--------------------------------------------------------------------------------
/src/elements/Container.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../common/SemanticUiPropTypes'
 5 | import { alignedClasses }from '../common/semanticClasses'
 6 | 
 7 | export default class Container extends Component {
 8 | 
 9 |   static propTypes = {
10 |     text: PropTypes.bool,
11 |     fluid: PropTypes.bool,
12 |     justified: PropTypes.bool,
13 |     aligned: SemanticUiPropTypes.aligned
14 |   }
15 | 
16 |   render() {
17 |     const { text, fluid, justified, className } = this.props
18 |     const classes = classNames('ui', {'fluid': fluid}, {'text': text},
19 |                              alignedClasses(this.props), {'justified': justified},
20 |                              'container', className)
21 | 
22 |     return <div className={classes}>{this.props.children}</div>
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/src/elements/Divider.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../util/propsToClasses'
 5 | 
 6 | export default class Divider extends Component {
 7 | 
 8 |   static propTypes = {
 9 |     element: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5']),
10 |     horizontal: PropTypes.bool,
11 |     inverted: PropTypes.bool,
12 |     vertical: PropTypes.bool,
13 |     header: PropTypes.bool,
14 |     fitted: PropTypes.bool,
15 |     hidden: PropTypes.bool,
16 |     section: PropTypes.bool,
17 |     clearing: PropTypes.bool
18 |   }
19 | 
20 |   render() {
21 |     const { header, element } = this.props
22 |     const classesFromProps = propsToClasses(['vertical', 'horizontal', 'inverted', 'fitted', 'hidden', 'section', 'clearing'], this.props)
23 |     const classes = classNames('ui', classesFromProps, 'divider', {'header': header})
24 | 
25 |     if(element) {
26 |       return <this.props.element className={classes}>{this.props.children}</this.props.element>
27 |     } else {
28 |       return <div className={classes}>{this.props.children}</div>
29 |     }
30 |   }
31 | 
32 | 
33 | }
34 | 


--------------------------------------------------------------------------------
/src/elements/Flag.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class Flag extends Component {
 5 | 
 6 |   static propTypes = {
 7 |     countryName: PropTypes.string,
 8 |     countryCode: PropTypes.string
 9 |   }
10 | 
11 |   render() {
12 |     const { className, countryName, countryCode } = this.props
13 |     const classes = classNames(countryName, countryCode, 'flag')
14 | 
15 | 
16 |     return <i className={classes} />
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/elements/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propToClasses from '../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../common/SemanticUiPropTypes'
 6 | import { attachedClasses, alignedClasses, floatedClasses } from '../common/semanticClasses'
 7 | 
 8 | export default class Header extends Component {
 9 | 
10 |   static propTypes = {
11 |     element: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5']),
12 |     header: PropTypes.string,
13 |     subheader: PropTypes.string,
14 |     icon: PropTypes.bool,
15 |     disabled: PropTypes.bool,
16 |     dividing: PropTypes.bool,
17 |     block: PropTypes.bool,
18 |     inverted: PropTypes.bool,
19 |     justified: PropTypes.bool,
20 |     attached: SemanticUiPropTypes.attached,
21 |     aligned: SemanticUiPropTypes.aligned,
22 |     floated: SemanticUiPropTypes.floated
23 |   }
24 | 
25 |   render() {
26 |     const { className, element, header, subheader } = this.props
27 |     const subheaderOnly = subheader && (header === undefined)
28 |     const classesFromProps = propToClasses(['icon', 'disabled', 'dividing', 'justified', 'block', 'inverted'], this.props)
29 |     const classes = classNames('ui', classesFromProps, {'sub': subheaderOnly},
30 |                                attachedClasses(this.props), alignedClasses(this.props), floatedClasses(this.props),
31 |                                'header', className)
32 | 
33 |     let subheaderEl
34 |     let headerText = header
35 | 
36 |     if(header && subheader) {
37 |       subheaderEl = <div className='sub header'>{subheader}</div>
38 |     } else if(subheader) {
39 |       headerText = subheader
40 |     }
41 | 
42 |     if(element) {
43 |       return <this.props.element className={classes}>{headerText}{this.props.children}{subheaderEl}</this.props.element>
44 |     } else {
45 |       return <div className={classes}>{headerText}{this.props.children}</div>
46 |     }
47 | 
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/elements/Icon.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import { lowercase, splitAndLowerCamelCase } from '../util/string'
 5 | 
 6 | const Icon = (props) => {
 7 | 
 8 |   const { className, type, outline, slash, square, circle, divider } = props
 9 |   const classes = classNames(splitAndLowerCamelCase(type), {'square': square}, {'circle': circle},
10 |                              {'slash': slash}, {'outline': outline}, 'icon', className, {'divider': divider})
11 | 
12 |   return <i className={classes} />
13 | }
14 | 
15 | Icon.propTypes = {
16 |   type: PropTypes.string.isRequired,
17 |   outline: PropTypes.bool,
18 |   square: PropTypes.bool,
19 |   slash: PropTypes.bool,
20 |   divider: PropTypes.bool
21 | }
22 | 
23 | export default Icon
24 | 


--------------------------------------------------------------------------------
/src/elements/Input.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component, PropTypes } from 'react'
  2 | 
  3 | import classNames from 'classnames'
  4 | 
  5 | import propsToClasses from '../util/propsToClasses'
  6 | import SemanticUiPropTypes from '../common/SemanticUiPropTypes'
  7 | 
  8 | import { Label } from '../index'
  9 | 
 10 | export default class Input extends Component {
 11 | 
 12 |   static propTypes = {
 13 |     loading: PropTypes.bool,
 14 |     disabled: PropTypes.bool,
 15 |     error: PropTypes.bool,
 16 |     focus: PropTypes.bool,
 17 |     transparent: PropTypes.bool,
 18 |     inverted: PropTypes.bool,
 19 |     fluid: PropTypes.bool,
 20 |     icon: PropTypes.bool,
 21 |     iconPosition: PropTypes.oneOf(['left', 'right']),
 22 |     label: PropTypes.oneOfType([
 23 |      PropTypes.string,
 24 |      PropTypes.element,
 25 |      PropTypes.bool
 26 |     ]),
 27 |     labelPosition: PropTypes.oneOf(['left', 'right']),
 28 |     action: PropTypes.bool,
 29 |     actionPosition: PropTypes.oneOf(['left', 'right']),
 30 |     size: SemanticUiPropTypes.size
 31 |   }
 32 | 
 33 |   iconClasses() {
 34 |     const { icon, iconPosition } = this.props
 35 | 
 36 |     if(icon) {
 37 |       return `${iconPosition} icon`
 38 |     }
 39 |   }
 40 | 
 41 |   labelClasses() {
 42 |     const { label, labelPosition, labeled } = this.props
 43 | 
 44 |     if(label) {
 45 |       return `${labelPosition} labeled`
 46 |     }
 47 |   }
 48 | 
 49 |   actionClasses() {
 50 |     const { action, actionPosition } = this.props
 51 | 
 52 |     if(action) {
 53 |       return `${actionPosition} action`
 54 |     }
 55 |   }
 56 | 
 57 |   labelElement() {
 58 |     const { label } = this.props
 59 | 
 60 |     if(label) {
 61 | 
 62 |       if(typeof label === 'string') {
 63 |         return <Label>{label}</Label>
 64 |       } else if(typeof label === 'boolean') {
 65 |         return undefined
 66 |       }
 67 |       else {
 68 |         return label
 69 |       }
 70 |     }
 71 |   }
 72 | 
 73 |   render() {
 74 |     const { size, className, loading, error, focus, label,
 75 |             iconPosition, labelPosition, actionPosition } = this.props
 76 | 
 77 |     const classesFromProps = propsToClasses(['disabled', 'transparent', 'inverted', 'fluid'], this.props)
 78 | 
 79 |     const classes = classNames('ui',this.iconClasses(), this.labelClasses(), this.actionClasses(),
 80 |                                classesFromProps, size, 'input',
 81 |                                {'loading': loading}, {'error': error}, {'focus': focus})
 82 | 
 83 |     let rightLabel, leftLabel
 84 |     if(label) {
 85 |       if(labelPosition === 'right') {
 86 |         rightLabel = this.labelElement()
 87 |       } else {
 88 |         leftLabel = this.labelElement()
 89 |       }
 90 |     }
 91 | 
 92 |     return (
 93 |       <div className={classes}>
 94 |         {leftLabel}
 95 |         {this.props.children}
 96 |         {rightLabel}
 97 |       </div>
 98 |     )
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/src/elements/List.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../common/SemanticUiPropTypes'
 6 | import { alignedClasses } from '../common/semanticClasses'
 7 | 
 8 | /*eslint "react/no-multi-comp": 0 */
 9 | class List extends Component {
10 | 
11 |   static propTypes = {
12 |     relaxed: PropTypes.bool,
13 |     veryRelaxed: PropTypes.bool,
14 |     divided: PropTypes.bool,
15 |     celled: PropTypes.bool,
16 |     bulleted: PropTypes.bool,
17 |     ordered: PropTypes.bool,
18 |     simple: PropTypes.bool,
19 |     link: PropTypes.bool,
20 |     horizontal: PropTypes.bool,
21 |     inverted: PropTypes.bool,
22 |     selection: PropTypes.bool,
23 |     animated: PropTypes.bool,
24 |     aligned: SemanticUiPropTypes.verticalAlignment,
25 |     size: SemanticUiPropTypes.size
26 |   }
27 | 
28 |   element = 'div'
29 | 
30 |   render() {
31 |     const { bulleted, ordered, simple, link, size, veryRelaxed } = this.props
32 |     const classesFromProps = propsToClasses(['relaxed', 'animated', 'horizontal', 
33 |                                             'divided', 'celled', 'selection',
34 |                                             'bulleted', 'ordered', 'link', 'inverted'], this.props)
35 | 
36 |     const classes = classNames('ui', size, {'very relaxed': veryRelaxed}, 
37 |                              alignedClasses(this.props), classesFromProps, 'list', this.props.className)
38 | 
39 |     if(bulleted && simple) this.element = 'ul'
40 |     if(ordered && simple) this.element = 'ol'
41 | 
42 |     const children = React.Children.map(this.props.children, (child) => {
43 |       return React.cloneElement(child, { bulleted: bulleted, ordered: ordered, simple: simple, link: link })
44 |     })
45 | 
46 |     return (
47 |       <this.element className={classes}>
48 |         {children}
49 |       </this.element>
50 |     )
51 |   }
52 | }
53 | 
54 | class ListItem extends Component {
55 | 
56 |   static propTypes = {
57 |     bulleted: PropTypes.bool,
58 |     ordered: PropTypes.bool,
59 |     simple: PropTypes.bool,
60 |     href: PropTypes.string,
61 |     link: PropTypes.bool,
62 |     active: PropTypes.bool
63 |   }
64 | 
65 |   element = 'div'
66 | 
67 |   render() {
68 |     const { bulleted, ordered, simple, href, link, active } = this.props
69 |     const classes = classNames('item', {'active': active}, {'bulleted': bulleted && !simple}, { 'ordered': ordered && !simple},  this.props.className)
70 | 
71 |     if((bulleted || ordered) && simple) this.element = 'li'
72 | 
73 |     if(href) this.element = 'a'
74 |     if(link && !active) this.element = 'a'
75 | 
76 |     return (
77 |       <this.element className={classes} href={href}>
78 |         {this.props.children}
79 |       </this.element>
80 |     )
81 |   }
82 | 
83 | }
84 | 
85 | export {
86 |   List,
87 |   ListItem
88 | }
89 | 


--------------------------------------------------------------------------------
/src/elements/Rail.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class Rail extends Component {
 5 | 
 6 |   static propTypes = {
 7 |     position: PropTypes.oneOf(['left', 'right']).isRequired,
 8 |     attached: PropTypes.bool,
 9 |     dividing: PropTypes.bool,
10 |     internal: PropTypes.bool,
11 |     close: PropTypes.bool
12 |   }
13 | 
14 |   render() {
15 |     const { position, close, internal, dividing, attached, className } = this.props
16 |     const classes = classNames('ui', position, {'dividing': dividing}, {'internal': internal}, {'attached': attached}, {'close': close}, 'rail', className)
17 | 
18 |     return (
19 |       <div className={classes}>{this.props.children}</div>
20 |     )
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/elements/button/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import { floatedClasses, attachedClasses, socialClasses } from '../../common/semanticClasses'
 7 | 
 8 | export default class Button extends Component {
 9 | 
10 |   static propTypes = {
11 |     basic: PropTypes.bool,
12 |     compact: PropTypes.bool,
13 |     primary: PropTypes.bool,
14 |     secondary: PropTypes.bool,
15 |     submit: PropTypes.bool,
16 |     positive: PropTypes.bool,
17 |     negative: PropTypes.bool,
18 |     icon: PropTypes.bool,
19 |     labeled: PropTypes.bool,
20 |     labelPosition: PropTypes.oneOf(['left', 'right']),
21 |     floated: SemanticUiPropTypes.floated,
22 |     fluid: PropTypes.bool,
23 |     circular: PropTypes.bool,
24 |     fluid: PropTypes.bool,
25 |     floated: SemanticUiPropTypes.floated,
26 |     size: SemanticUiPropTypes.size,
27 |     social: SemanticUiPropTypes.social,
28 |     attached: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
29 |     icon: PropTypes.bool,
30 |     labeledIcon: PropTypes.bool,
31 |     inverted: PropTypes.bool,
32 |     active: PropTypes.bool,
33 |     disabled: PropTypes.bool,
34 |     loading: PropTypes.bool,
35 |     color: SemanticUiPropTypes.color,
36 |     animation: PropTypes.oneOf(['horizontal', 'vertical', 'fade']),
37 |     onClick: PropTypes.func
38 |   }
39 | 
40 |   static defaultProps = {
41 |     onClick: (event) => {
42 |       console.error('You did not implement onClick for your <Button>')
43 |     }
44 |   }
45 | 
46 |   labelClasses() {
47 |     const { labeled, labelPosition } = this.props
48 | 
49 |     if(labeled) {
50 |       return `${labelPosition} labeled`
51 |     }
52 |   }
53 | 
54 |   animationClasses() {
55 |     const { animation } = this.props
56 | 
57 |     if(animation === 'horizontal') {
58 |       return 'animated'
59 |     } else if (animation === 'vertical') {
60 |       return 'vertical animated'
61 |     } else if(animation === 'fade') {
62 |       return 'animated fade'
63 |     }
64 |   }
65 | 
66 |   render() {
67 |     const { labeledIcon, className, color, attached, labeled, size, onClick, ...other } = this.props
68 |     const classesFromProps = propsToClasses(['circular', 'inverted', 'primary', 'secondary', 'basic',
69 |                                             'active', 'disabled', 'loading', 'submit',
70 |                                             'fluid', 'icon', 'compact'], this.props)
71 | 
72 |     const initialClassesFromProps = propsToClasses(['positive', 'negative', 'fluid'], this.props)
73 | 
74 |     const classes = classNames(initialClassesFromProps, 'ui', attachedClasses(this.props),
75 |                                this.labelClasses(this.props), classesFromProps,
76 |                                {'labeled icon': labeledIcon}, size,
77 |                                socialClasses(this.props), this.animationClasses(),
78 |                                floatedClasses(this.props), color,
79 |                                'button', className)
80 | 
81 |     const Component = labeled || attached ? 'div' : 'button'
82 | 
83 |     return <Component className={classes} onClick={onClick} {...other}>{this.props.children}</Component>
84 |   }
85 | 
86 | }
87 | 


--------------------------------------------------------------------------------
/src/elements/button/ButtonGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { buttonClasses } from '../../common/semanticClasses'
 7 | 
 8 | export default class ButtonGroup extends Component {
 9 | 
10 |   static propTypes = {
11 |     icon: PropTypes.bool,
12 |     vertical: PropTypes.bool,
13 |     color: SemanticUiPropTypes.color,
14 |     labeledIcon: PropTypes.bool,
15 |     basic: PropTypes.bool,
16 |     buttons: PropTypes.number,
17 |     size: SemanticUiPropTypes.size
18 |   }
19 | 
20 |   render() {
21 |     const { className, color, labeledIcon, size } = this.props
22 |     const classesFromProps = propsToClasses(['icon', 'vertical', 'basic'], this.props)
23 |     const classes = classNames(color, buttonClasses(this.props), 'ui', size, classesFromProps,
24 |                                {'labeled icon': labeledIcon}, 'buttons', className)
25 | 
26 |     return <div className={classes}>{this.props.children}</div>
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/elements/extra/Actions.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const Actions = (props) => {
 6 |   const { className, children } = props
 7 |   const classes = classNames('actions', className)
 8 | 
 9 |   return <div className={classes}>{children}</div>
10 | }
11 | 
12 | export default Actions
13 | 


--------------------------------------------------------------------------------
/src/elements/extra/Author.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classnames from 'classnames'
 4 | 
 5 | const Author = (props) => {
 6 |   const { classname, children, href } = props
 7 |   const classes = classnames('author', classname)
 8 | 
 9 |   if(href) {
10 |     return <a href={href} className={classes}>{children}</a>
11 |   } else {
12 |     return <div className={classes}>{children}</div>
13 |   }
14 | }
15 | 
16 | Author.propTypes = {
17 |   href: PropTypes.string
18 | }
19 | 
20 | export default Author
21 | 


--------------------------------------------------------------------------------
/src/elements/extra/Avatar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classnames from 'classnames'
 4 | 
 5 | const Avatar = (props) => {
 6 |   const { classname, src, href } = props
 7 |   const classes = classnames('avatar', classname)
 8 | 
 9 |   if(href) {
10 |     return <a href={href} className={classes}><img src={src} /></a>
11 |   } else {
12 |     return <div className={classes}><img src={src} /></div>
13 |   }
14 | }
15 | 
16 | Avatar.propTypes = {
17 |   src: PropTypes.string.isRequired,
18 |   href: PropTypes.string
19 | }
20 | 
21 | export default Avatar
22 | 


--------------------------------------------------------------------------------
/src/elements/extra/Content.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | import { alignedClasses } from '../../common/semanticClasses'
 8 | 
 9 | const Content = (props) => {
10 |   const { className, children } = props
11 |   const classesFromProps = propsToClasses(['extra', 'visible', 'hidden'], props)
12 |   const classes = classNames(alignedClasses(props), classesFromProps, 'content', className)
13 | 
14 |   return <div className={classes}>{children}</div>
15 | }
16 | 
17 | Content.propTypes = {
18 |   extra: PropTypes.bool,
19 |   visible: PropTypes.bool,
20 |   hidden: PropTypes.bool,
21 |   aligned: SemanticUiPropTypes.verticalAlignment
22 | }
23 | 
24 | export default Content
25 | 


--------------------------------------------------------------------------------
/src/elements/extra/ContentDescription.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const ContentDescription = (props) => {
 6 |   const { className, children } = props
 7 |   const classes = classNames('description', className)
 8 | 
 9 |   return <div className={classes}>{children}</div>
10 | }
11 | 
12 | export default ContentDescription
13 | 


--------------------------------------------------------------------------------
/src/elements/extra/ContentHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const ContentHeader = (props) => {
 6 |   const { className, children, href } = props
 7 |   const classes = classNames('header', className)
 8 | 
 9 |   if(href) {
10 |     return <a href={href} className={classes}>{children}</a>
11 |   } else {
12 |     return <div className={classes}>{children}</div>
13 |   }
14 | }
15 | 
16 | export default ContentHeader
17 | 


--------------------------------------------------------------------------------
/src/elements/extra/ContentImages.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const ContentImages = (props) => {
 6 |   const { className, extra, children } = props
 7 |   const classes = classNames({'extra': extra}, 'images', className)
 8 | 
 9 |   return <div className={classes}>{children}</div>
10 | }
11 | 
12 | ContentImages.propTypes = {
13 |   extra: PropTypes.bool
14 | }
15 | 
16 | export default ContentImages
17 | 


--------------------------------------------------------------------------------
/src/elements/extra/ContentSummary.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const ContentSummary = (props) => {
 6 |   const { className, children } = props
 7 |   const classes = classNames('summary', className)
 8 | 
 9 |   return <div className={classes}>{children}</div>
10 | }
11 | 
12 | export default ContentSummary
13 | 


--------------------------------------------------------------------------------
/src/elements/extra/Date.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const Date = (props) => {
 6 |   const { className, children, inline } = props
 7 |   const classes = classNames('date', className)
 8 | 
 9 |   if(inline) {
10 |     return <span className={classes}>{children}</span>
11 |   } else {
12 |     return <div className={classes}>{children}</div>
13 |   }
14 | }
15 | 
16 | Date.propTypes = {
17 |   inline: PropTypes.bool
18 | }
19 | 
20 | export default Date
21 | 
22 | 


--------------------------------------------------------------------------------
/src/elements/extra/Extra.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const Extra = (props) => {
 6 |   const { className, style, children } = props
 7 |   const classes = classNames('extra', className)
 8 | 
 9 |   return <div className={classes} style={style}>{children}</div>
10 | }
11 | 
12 | Extra.propTypes = {
13 |   style: PropTypes.object
14 | }
15 | 
16 | export default Extra
17 | 
18 | 


--------------------------------------------------------------------------------
/src/elements/extra/Meta.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { floatedClasses } from '../../common/semanticClasses'
 7 | 
 8 | const Meta = (props) => {
 9 |   const { className, children, floated } = props
10 |   const classes = classNames(floatedClasses(props), 'metadata', className)
11 | 
12 |   return <div className={classes}>{children}</div>
13 | }
14 | 
15 | Meta.PropTypes = {
16 |   floated: SemanticUiPropTypes.floated
17 | }
18 | 
19 | export default Meta
20 | 


--------------------------------------------------------------------------------
/src/elements/extra/MetaData.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { floatedClasses } from '../../common/semanticClasses'
 7 | 
 8 | const MetaData = (props) => {
 9 |   const { className, children, floated } = props
10 |   const classes = classNames(floatedClasses(props), 'metadata', className)
11 | 
12 |   return <div className={classes}>{children}</div>
13 | }
14 | 
15 | MetaData.PropTypes = {
16 |   floated: SemanticUiPropTypes.floated
17 | }
18 | 
19 | export default MetaData
20 | 


--------------------------------------------------------------------------------
/src/elements/extra/Text.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | const Text = (props) => {
 6 |   const { className, extra, children } = props
 7 |   const classes = classNames({'extra': extra}, 'text', className)
 8 | 
 9 |   return <div className={classes}>{children}</div>
10 | }
11 | 
12 | Text.propTypes = {
13 |   extra: PropTypes.bool
14 | }
15 | 
16 | export default Text
17 | 


--------------------------------------------------------------------------------
/src/elements/image/Image.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 5 | import { alignedClasses, floatedClasses } from '../../common/semanticClasses'
 6 | import propsToClasses from '../../util/propsToClasses'
 7 | 
 8 | export default class Image extends Component {
 9 | 
10 |   static propTypes = {
11 |     children: PropTypes.node,
12 |     src: PropTypes.string,
13 |     href: PropTypes.string,
14 |     size: SemanticUiPropTypes.size,
15 |     wrapper: PropTypes.bool,
16 |     avatar: PropTypes.bool,
17 |     bordered: PropTypes.bool,
18 |     fluid: PropTypes.bool,
19 |     rounded: PropTypes.bool,
20 |     circular: PropTypes.bool,
21 |     centered: PropTypes.bool,
22 |     hidden: PropTypes.bool,
23 |     disabled: PropTypes.bool,
24 |     aligned: SemanticUiPropTypes.verticalAlignment,
25 |     floated: SemanticUiPropTypes.floated,
26 |     dependent: PropTypes.bool
27 |   }
28 | 
29 |   static defaultProps = {
30 |     wrapper: false
31 |   }
32 | 
33 |   render() {
34 |     const { wrapper, size, src, href, hidden, disabled, className, style, children, dependent } = this.props
35 |     const classesFromProps = propsToClasses(['avatar', 'bordered', 'fluid', 'rounded', 'circular', 'centered' ], this.props)
36 |     const classes = classNames({'hidden': hidden}, {'disabled': disabled}, {'ui': !dependent},
37 |                                alignedClasses(this.props), size, floatedClasses(this.props),
38 |                                classesFromProps, 'image', className)
39 | 
40 |     if(wrapper && src) {
41 |       return <div className={classes} style={style}><img src={src} />{children}</div>
42 |     } else if(wrapper) {
43 |       return <div className={classes} style={style}>{children}</div>
44 |     } else if(href) {
45 |       return <a href={href} className={classes} style={style}><img src={src} />{children}</a>
46 |     } else {
47 |       return <img className={classes} src={src} style={style} />
48 |     }
49 |   }
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------
/src/elements/image/ImageGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 5 | 
 6 | export default class ImageGroup extends Component {
 7 | 
 8 |   static propTypes = {
 9 |     size: SemanticUiPropTypes.size
10 |   }
11 | 
12 |   render() {
13 |     const { size, className } = this.props
14 | 
15 |     const classes = classNames('ui', size, 'images', className)
16 | 
17 |     return <div className={classes}>{this.props.children}</div>
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/elements/label/Label.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { attachedClasses } from '../../common/semanticClasses'
 7 | 
 8 | export default class Label extends Component {
 9 | 
10 |   static propTypes = {
11 |     basic: PropTypes.bool,
12 |     tag: PropTypes.bool,
13 |     circular: PropTypes.bool,
14 |     horizontal: PropTypes.bool,
15 |     image: PropTypes.bool,
16 |     pointing: PropTypes.bool,
17 |     floating: PropTypes.bool,
18 |     size: SemanticUiPropTypes.size,
19 |     pointingDirection: PropTypes.oneOf(['below', 'left', 'right']),
20 |     attached: SemanticUiPropTypes.labelAttachment,
21 |     color: SemanticUiPropTypes.color,
22 |     leftCorner: PropTypes.bool,
23 |     rightCornor: PropTypes.bool,
24 |     leftRibbon: PropTypes.bool,
25 |     rightRibbon: PropTypes.bool,
26 |     href: PropTypes.string,
27 |     generic: PropTypes.bool
28 |   }
29 | 
30 |   pointingClasses() {
31 |     const { pointing, pointingDirection } = this.props
32 | 
33 |     if(pointingDirection) {
34 |       if(pointingDirection === 'below') {
35 |         return 'pointing below'
36 |       } else {
37 |         return `${pointingDirection} pointing`
38 |       }
39 |     }
40 | 
41 |     if(pointing) {
42 |       return 'pointing'
43 |     }
44 | 
45 |   }
46 | 
47 |   cornerClasses() {
48 |     const { leftCorner, rightCorner } = this.props
49 | 
50 |     if(leftCorner) {
51 |       return 'left corner'
52 |     } else if(rightCorner) {
53 |       return 'right corner'
54 |     }
55 |   }
56 | 
57 |   ribbonClasses() {
58 |     const { leftRibbon, rightRibbon} = this.props
59 | 
60 |     if(leftRibbon) {
61 |       return 'left ribbon'
62 |     } else if(rightRibbon) {
63 |       return 'right ribbon'
64 |     }
65 |   }
66 | 
67 |   render() {
68 |     const { className, pointingDirection, color, size, floating, href, generic } = this.props
69 | 
70 |     const classesFromProps = propsToClasses(['basic', 'tag', 'circular', 'image', 'horizontal'], this.props)
71 | 
72 |     const classes = classNames({'floating': floating}, {'ui': !generic}, this.pointingClasses(),
73 |                                color, attachedClasses(this.props),
74 |                                this.ribbonClasses(), this.cornerClasses(),
75 |                                classesFromProps, size, 'label', className )
76 | 
77 |     if(href) {
78 |       return <a className={classes} href={href}>{this.props.children}</a>
79 |     } else {
80 |       return <div className={classes}>{this.props.children}</div>
81 |     }
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/elements/label/LabelGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | 
 7 | export default class LabelGroup extends Component {
 8 | 
 9 |   static propTypes = {
10 |     tag: PropTypes.bool,
11 |     circular: PropTypes.bool,
12 |     size: SemanticUiPropTypes.size,
13 |     color: SemanticUiPropTypes.color
14 |   }
15 | 
16 |   render() {
17 |     const { className, color, size } = this.props
18 | 
19 |     const classesFromProps = propsToClasses(['tag', 'circular'], this.props)
20 | 
21 |     const classes = classNames('ui', color, classesFromProps, size, 'labels', className)
22 | 
23 |     return <div className={classes}>{this.props.children}</div>
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/elements/segment/Segment.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 7 | import { attachedClasses, alignedClasses, floatedClasses } from '../../common/semanticClasses'
 8 | 
 9 | export default class Segment extends Component {
10 | 
11 |   static propTypes = {
12 |     raised: PropTypes.bool,
13 |     stacked: PropTypes.bool,
14 |     piled: PropTypes.bool,
15 |     vertical: PropTypes.bool,
16 |     disabled: PropTypes.bool,
17 |     loading: PropTypes.bool,
18 |     inverted: PropTypes.bool,
19 |     padded: PropTypes.bool,
20 |     veryPadded: PropTypes.bool,
21 |     compact: PropTypes.bool,
22 |     secondary: PropTypes.bool,
23 |     tertiary: PropTypes.bool,
24 |     circular: PropTypes.bool,
25 |     clearing: PropTypes.bool,
26 |     container: PropTypes.bool,
27 |     basic: PropTypes.bool,
28 |     color: SemanticUiPropTypes.color,
29 |     attached: SemanticUiPropTypes.attached,
30 |     aligned: SemanticUiPropTypes.aligned,
31 |     floated: SemanticUiPropTypes.floated
32 |   }
33 | 
34 |   render() {
35 |     const props = ['basic', 'raised', 'stacked', 'piled', 'vertical', 'disabled', 'loading',
36 |       'secondary', 'tertiary', 'inverted', 'padded', 'compact', 'circular', 'clearing', 'container']
37 | 
38 |     const classesFromProps = propsToClasses(props, this.props)
39 |     const classes = classNames('ui', classesFromProps, this.props.color,
40 |                                attachedClasses(this.props), alignedClasses(this.props), floatedClasses(this.props),
41 |                                {'very padded': this.props.veryPadded},
42 |                                'segment', this.props.className)
43 | 
44 |     return <div className={classes} style={this.props.style}>{this.props.children}</div>
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/elements/segment/SegmentGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | export default class SegmentGroup extends Component {
 8 | 
 9 |   static propTypes = {
10 |     horizontal: PropTypes.bool,
11 |     raised: PropTypes.bool,
12 |     stacked: PropTypes.bool,
13 |     piled: PropTypes.bool,
14 |     compact: PropTypes.bool
15 |   }
16 | 
17 |   render() {
18 | 
19 |     const classesFromProps = propsToClasses(['horizontal', 'raised', 'stacked', 'piled', 'compact'], this.props)
20 |     const classes = classNames('ui', classesFromProps, 'segments', this.props.className)
21 | 
22 |     return <div className={classes}>{this.props.children}</div>
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/elements/step/Step.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | 
 7 | export default class Step extends Component {
 8 | 
 9 |   static propTypes = {
10 |     completed: PropTypes.bool,
11 |     active: PropTypes.bool,
12 |     disabled: PropTypes.bool
13 |   }
14 | 
15 |   render() {
16 |     const { className }  = this.props
17 |     const classesFromProps = propsToClasses(['completed', 'active', 'disabled'], this.props)
18 |     const classes = classNames(classesFromProps, 'step', className)
19 | 
20 |     return <div className={classes}>{this.props.children}</div>
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/elements/step/StepGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | import { attachedClasses } from '../../common/semanticClasses'
 7 | import spellNumber from '../../util/spellNumber'
 8 | 
 9 | import Step from './Step'
10 | 
11 | export default class StepGroup extends Component {
12 | 
13 |   static propTypes = {
14 |     ordered: PropTypes.bool,
15 |     vertical: PropTypes.bool,
16 |     fluid: PropTypes.bool,
17 |     size: PropTypes.oneOf(['small', 'large']),
18 |     steps: PropTypes.number,
19 |     attached: SemanticUiPropTypes.attached,
20 |     stackable: PropTypes.bool,
21 |     children: (props, propName, componentName) => {
22 |       const prop = props[propName]
23 | 
24 |       if(Array.isArray(prop)) {
25 |         if(prop.some( p => p.type !== Step)) {
26 |           return new Error(`${componentName} should only have Step as children`)
27 |         }
28 |       } else {
29 |         if(prop.type !== Step) {
30 |           return new Error(`${componentName} should only have Step as children`)
31 |         }
32 |       }
33 |     }
34 |   }
35 | 
36 |   stepsClasses() {
37 |     const { steps} = this.props
38 | 
39 |     if(steps) return spellNumber(steps)
40 |   }
41 | 
42 |   render() {
43 |     const { className, size, stackable }  = this.props
44 |     const classesFromProps = propsToClasses(['fluid', 'ordered', 'vertical'], this.props)
45 |     const classes = classNames('ui', classesFromProps, this.stepsClasses(), attachedClasses(this.props),
46 |                                {'tablet stackable': stackable },
47 |                                size, 'steps', className)
48 | 
49 |     return <div className={classes}>{this.props.children}</div>
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import Breadcrumb from './collections/breadcrumb/Breadcrumb'
  2 | import BreadcrumbDivider from './collections/breadcrumb/BreadcrumbDivider'
  3 | import BreadcrumbSection from './collections/breadcrumb/BreadcrumbSection'
  4 | import Form from './collections/form/Form'
  5 | import FormField from './collections/form/FormField'
  6 | import FormFieldGroup from './collections/form/FormFieldGroup'
  7 | import Grid from './collections/grid/Grid'
  8 | import Column from './collections/grid/Column'
  9 | import Row from './collections/grid/Row'
 10 | import Message from './collections/Message'
 11 | import Menu from './collections/menu/Menu'
 12 | import MenuItem from './collections/menu/MenuItem'
 13 | import Table from './collections/table/Table'
 14 | import TableCell from './collections/table/TableCell'
 15 | import TableRow from './collections/table/TableRow'
 16 | import TableHeader from './collections/table/TableHeader'
 17 | import TableFooter from './collections/table/TableFooter'
 18 | 
 19 | import Modal from './modules/Modal'
 20 | import ModalHeader from './modules/ModalHeader'
 21 | import ModalContent from './modules/ModalContent'
 22 | import ModalActions from './modules/ModalActions'
 23 | 
 24 | import Button from './elements/button/Button'
 25 | import ButtonGroup from './elements/button/ButtonGroup'
 26 | import Container from './elements/Container'
 27 | import Divider from './elements/Divider'
 28 | import Flag from './elements/Flag'
 29 | import Header from './elements/Header'
 30 | import Icon from './elements/Icon'
 31 | import Input from './elements/Input'
 32 | import Label from './elements/label/Label'
 33 | import LabelGroup from './elements/label/LabelGroup'
 34 | import Segment from './elements/segment/Segment'
 35 | import SegmentGroup from './elements/segment/SegmentGroup'
 36 | import Image from './elements/image/Image'
 37 | import ImageGroup from './elements/image/ImageGroup'
 38 | import { List, ListItem} from './elements/List'
 39 | import Rail from './elements/Rail'
 40 | import Step from './elements/step/Step'
 41 | import StepGroup from './elements/step/StepGroup'
 42 | 
 43 | import Card from './views/card/Card'
 44 | import CardGroup from './views/card/CardGroup'
 45 | import Comment from './views/comment/Comment'
 46 | import CommentGroup from './views/comment/CommentGroup'
 47 | import Feed from './views/feed/Feed'
 48 | import FeedEvent from './views/feed/FeedEvent'
 49 | import Item from './views/item/Item'
 50 | import ItemGroup from './views/item/ItemGroup'
 51 | import Statistic from './views/statistic/Statistic'
 52 | import StatisticGroup from './views/statistic/StatisticGroup'
 53 | 
 54 | import Actions from './elements/extra/Actions'
 55 | import Author from './elements/extra/Author'
 56 | import Avatar from './elements/extra/Avatar'
 57 | import Content from './elements/extra/Content'
 58 | import ContentHeader from './elements/extra/ContentHeader'
 59 | import ContentDescription from './elements/extra/ContentDescription'
 60 | import ContentImages from './elements/extra/ContentImages'
 61 | import ContentSummary from './elements/extra/ContentSummary'
 62 | import Date from './elements/extra/Date'
 63 | import Extra from './elements/extra/Extra'
 64 | import Meta from './elements/extra/Meta'
 65 | import MetaData from './elements/extra/MetaData'
 66 | import Text from './elements/extra/Text'
 67 | 
 68 | import Checkbox from './modules/Checkbox'
 69 | 
 70 | export {
 71 |   Actions,
 72 |   Author,
 73 |   Avatar,
 74 |   Breadcrumb,
 75 |   BreadcrumbDivider,
 76 |   BreadcrumbSection,
 77 |   Button,
 78 |   ButtonGroup,
 79 |   Card,
 80 |   CardGroup,
 81 |   Checkbox,
 82 |   Column,
 83 |   Comment,
 84 |   CommentGroup,
 85 |   Container,
 86 |   Content,
 87 |   ContentHeader,
 88 |   ContentDescription,
 89 |   ContentImages,
 90 |   ContentSummary,
 91 |   Date,
 92 |   Divider,
 93 |   Extra,
 94 |   Feed,
 95 |   FeedEvent,
 96 |   Header,
 97 |   Icon,
 98 |   Input,
 99 |   Flag,
100 |   Form,
101 |   FormField,
102 |   FormFieldGroup,
103 |   Grid,
104 |   Image,
105 |   ImageGroup,
106 |   Item,
107 |   ItemGroup,
108 |   Label,
109 |   LabelGroup,
110 |   List,
111 |   ListItem,
112 |   Menu,
113 |   MenuItem,
114 |   Meta,
115 |   MetaData,
116 |   Modal,
117 |   ModalHeader,
118 |   ModalContent,
119 |   ModalActions,
120 |   Message,
121 |   Rail,
122 |   Row,
123 |   Segment,
124 |   SegmentGroup,
125 |   Statistic,
126 |   StatisticGroup,
127 |   Step,
128 |   StepGroup,
129 |   Table,
130 |   TableCell,
131 |   TableRow,
132 |   TableHeader,
133 |   TableFooter,
134 |   Text
135 | }
136 | 


--------------------------------------------------------------------------------
/src/modules/Checkbox.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../util/propsToClasses'
 6 | 
 7 | const Checkbox = (props) => {
 8 |   const { label, name, checked, className, children, onChange, radio } = props
 9 |   const classesFromProps = propsToClasses(['fitted', 'radio'], props)
10 |   const classes = classNames('ui', classesFromProps, 'checkbox', className)
11 | 
12 |   const labelEl = label ? <label>{label}</label> : undefined
13 | 
14 |   const type = radio ? 'radio' : 'checkbox'
15 | 
16 |   return (
17 |     <div className={classes}>
18 |       <input type={type} name={name} checked={checked} onChange={onChange} />
19 |       {labelEl}
20 |       {children}
21 |     </div>
22 |   )
23 | }
24 | 
25 | Checkbox.propTypes = {
26 |   label: PropTypes.string,
27 |   name: PropTypes.string.isRequired,
28 |   checked: PropTypes.bool,
29 |   onChange: PropTypes.func,
30 |   fitted: PropTypes.bool,
31 |   radio: PropTypes.bool
32 | }
33 | 
34 | export default Checkbox
35 | 


--------------------------------------------------------------------------------
/src/modules/Modal.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class Modal extends Component {
 5 | 
 6 |   static propTypes = {
 7 |     isVisible: PropTypes.bool.isRequired,
 8 |     ref: PropTypes.string
 9 |   }
10 | 
11 |   static defaultProps = {
12 |     ref: 'modal',
13 |     isVisible: false
14 |   }
15 | 
16 |   render() {
17 |     let classes = classNames('ui', this.props.className, 'modal', {'transition visible active': this.props.isVisible})
18 | 
19 |     return (
20 |       <div {...this.props} className={classes}>
21 |         {this.props.children}
22 |       </div>
23 |     )
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/modules/ModalActions.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class ModalActions extends Component {
 5 | 
 6 |   static propTypes = {
 7 |     submitHandler: PropTypes.func.isRequired,
 8 |     cancelHandler: PropTypes.func.isRequired
 9 |   }
10 | 
11 |   static defaultProps = {
12 |     cancelText: 'Cancel',
13 |     submitText: 'Submit'
14 |   }
15 | 
16 |   render() {
17 | 
18 |     return (
19 |       <div className='actions'>
20 |         <div className='ui black deny button' onClick={this.props.cancelHandler}>
21 |           {this.props.cancelText}
22 |         </div>
23 |         <div className='ui positive right labeled icon button' onClick={this.props.submitHandler}>
24 |           {this.props.submitText}
25 |           <i className='checkmark icon'></i>
26 |         </div>
27 | 
28 |       </div>
29 |     )
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/modules/ModalContent.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class Modal extends Component {
 5 | 
 6 |   render() {
 7 |     return (
 8 |       <div className='content'>
 9 |         {this.props.children}
10 |       </div>
11 |     )
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/modules/ModalHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | export default class ModelHeader extends Component {
 5 | 
 6 |   render() {
 7 |     const classes = classNames('header', this.props.className)
 8 |     return (
 9 |       <div className={classes}>
10 |         {this.props.children}
11 |       </div>
12 |     )
13 |   }
14 |   
15 | }
16 | 


--------------------------------------------------------------------------------
/src/util/propsToClasses.js:
--------------------------------------------------------------------------------
 1 | import { splitAndLowerCamelCase } from './string'
 2 | 
 3 | const propToClasses = (propNames, props) => {
 4 |   let classes = []
 5 | 
 6 |   propNames.forEach( (prop) => {
 7 |     if(props[prop]) {
 8 |       classes.push(splitAndLowerCamelCase(prop))
 9 |     }
10 |   })
11 | 
12 |   return classes
13 | }
14 | 
15 | export default propToClasses
16 | 


--------------------------------------------------------------------------------
/src/util/spellNumber.js:
--------------------------------------------------------------------------------
 1 | const spellNumber = (number) => {
 2 |   const intNumber = parseInt(number, 10)
 3 | 
 4 |   const nums = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen']
 5 | 
 6 |   return nums[intNumber - 1]
 7 | }
 8 | 
 9 | export default spellNumber
10 | 


--------------------------------------------------------------------------------
/src/util/string.js:
--------------------------------------------------------------------------------
 1 | export const capitalize = (string) => {
 2 |   if(string) {
 3 |     return string.charAt(0).toUpperCase() + string.slice(1)
 4 |   }
 5 | }
 6 | 
 7 | export const lowercase = (string) => {
 8 |   if(string) {
 9 |     return string.charAt(0).toLowerCase() + string.slice(1)
10 |   }
11 | }
12 | 
13 | export const splitAndLowerCamelCase = (string) => {
14 |   const upperToSpaceLower = (match) => {
15 |     return ` ${match.toLowerCase()}`
16 |   }
17 | 
18 |   if(string) {
19 |     return string.replace(/[A-Z]/g, upperToSpaceLower).trim()
20 |   }
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/src/views/card/Card.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 6 | 
 7 | export default class Card extends Component {
 8 | 
 9 |   static propTypes = {
10 |     children: PropTypes.node,
11 |     fluid: PropTypes.bool,
12 |     centered: PropTypes.bool,
13 |     href: PropTypes.string,
14 |     grouped: PropTypes.bool,
15 |     color: SemanticUiPropTypes.color
16 |   }
17 | 
18 |   render() {
19 |     const { className, href, children, grouped, color } = this.props
20 |     const classesFromProps = propsToClasses(['fluid', 'centered'], this.props)
21 |     const classes = classNames({'ui': !grouped}, classesFromProps, color,
22 |                                'card', className)
23 | 
24 | 
25 |     if(href) {
26 |       return <a href={href} className={classes}>{children}</a>
27 |     } else {
28 |       return <div className={classes}>{children}</div>
29 |     }
30 |   }
31 | }
32 | 
33 | 


--------------------------------------------------------------------------------
/src/views/card/CardGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | import spellNumber from '../../util/spellNumber'
 7 | import Card from './Card'
 8 | 
 9 | export default class CardGroup extends Component {
10 | 
11 |   static propTypes = {
12 |     columns: PropTypes.number,
13 |     stackable: PropTypes.bool,
14 |     doubling: PropTypes.bool,
15 |     children: (props, propName, componentName) => {
16 |       const prop = props[propName]
17 | 
18 |       if(Array.isArray(prop)) {
19 |         if(prop.some( p => p.type !== Card)) {
20 |           return new Error(`${componentName} should only have Card as children`)
21 |         }
22 |       } else {
23 |         if(prop.type !== Card) {
24 |           return new Error(`${componentName} should only have Card as children`)
25 |         }
26 |       }
27 |     }
28 |   }
29 | 
30 |   render() {
31 |     const { className, children, columns } = this.props
32 |     const classFromProps = propsToClasses(['stackable', 'doubling'], this.props)
33 |     const classes = classNames('ui', spellNumber(columns), classFromProps, 'cards', className)
34 | 
35 |     return (
36 |       <div className={classes}>
37 |         {React.Children.map(children, (child) => {
38 |           return React.cloneElement(child, { grouped: true})
39 |         })}
40 |       </div>
41 |     )
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/views/comment/Comment.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | export default class CommentGroup extends Component {
 6 | 
 7 |   render() {
 8 |     const { className } = this.props
 9 |     const classes = classNames('comment', className)
10 | 
11 |     return <div className={classes}>{this.props.children}</div>
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/views/comment/CommentGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | export default class CommentGroup extends Component {
 8 | 
 9 |   static propTypes = {
10 |     minimal: PropTypes.bool,
11 |     collapsed: PropTypes.bool,
12 |     threaded: PropTypes.bool
13 |   }
14 | 
15 |   render() {
16 |     const { className } = this.props
17 |     const classesFromProps = propsToClasses(['minimal', 'collapsed', 'threaded'], this.props)
18 |     const classes = classNames('ui', classesFromProps, 'comments', className)
19 | 
20 |     return <div className={classes}>{this.props.children}</div>
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/views/feed/Feed.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | import FeedEvent from './FeedEvent'
 6 | 
 7 | export default class Feed extends Component {
 8 | 
 9 |   static propTypes = {
10 |     size: PropTypes.oneOf(['small', 'large']),
11 |     children: (props, propName, componentName) => {
12 |       const prop = props[propName]
13 | 
14 |       if(Array.isArray(prop)) {
15 |         if(prop.some( p => (p.type !== FeedEvent))) {
16 |           return new Error(`${componentName} should only have FeedEvent as children`)
17 |         }
18 |       } else {
19 |         if(prop.type !== FeedEvent) {
20 |           return new Error(`${componentName} should only have FeedEvent as children`)
21 |         }
22 |       }
23 |     }
24 |   }
25 | 
26 |   render() {
27 |     const { className, size } = this.props
28 |     const classes = classNames('ui', size, 'feed', className)
29 | 
30 |     return <div className={classes}>{this.props.children}</div>
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/views/feed/FeedEvent.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | export default class FeedEvent extends Component {
 6 | 
 7 |   static propTypes = {
 8 |     children: PropTypes.node
 9 |   }
10 | 
11 |   render() {
12 |     const { className } = this.props
13 |     const classes = classNames('event', className)
14 | 
15 |     return <div className={classes}>{this.props.children}</div>
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/views/item/Item.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import classNames from 'classnames'
 4 | 
 5 | export default class Item extends Component {
 6 | 
 7 |   render() {
 8 |     const classes = classNames('item', this.props.className)
 9 | 
10 |     return <div className={classes}>{this.props.children}</div>
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/views/item/ItemGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import propsToClasses from '../../util/propsToClasses'
 5 | 
 6 | export default class ItemGroup extends Component {
 7 | 
 8 |   static proptypes = {
 9 |     divided: PropTypes.bool,
10 |     relaxed: PropTypes.bool,
11 |     link: PropTypes.bool,
12 |   }
13 | 
14 |   render() {
15 |     const propsFromClasses = propsToClasses(['divided', 'relaxed', 'link'], this.props)
16 |     const classes = classNames('ui', propsFromClasses, 'items', this.props.className)
17 | 
18 |     return <div className={classes}>{this.props.children}</div>
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/views/statistic/Statistic.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 5 | import propsToClasses from '../../util/propsToClasses'
 6 | 
 7 | export default class Statistic extends Component {
 8 | 
 9 |   static propTypes = {
10 |     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
11 |     label: PropTypes.string.isRequired,
12 |     size: SemanticUiPropTypes.size,
13 |     color: SemanticUiPropTypes.color,
14 |     labelPosition: PropTypes.oneOf(['top', 'bottom']),
15 |     horizontal: PropTypes.bool,
16 |     inverted: PropTypes.bool,
17 |     textValue: PropTypes.bool,
18 |     style: PropTypes.object
19 |   }
20 | 
21 |   static defaultProps = {
22 |     labelPosition: 'bottom'
23 |   }
24 | 
25 |   render() {
26 |     const { value, label, className, size, style, textValue,
27 |       horizontal, labelPosition, color, inverted, children } = this.props
28 | 
29 |     const classesFromProps = propsToClasses(['inverted', 'horizontal'], this.props)
30 | 
31 |     const classes = classNames('ui', classesFromProps, size, color, 'statistic', className)
32 |     const valueClasses = classNames({'text': textValue}, 'value')
33 | 
34 |     const valueEl = <div className={valueClasses}>{value}</div>
35 |     const labelEl = <div className='label'>{label}</div>
36 | 
37 |     const top = labelPosition === 'top' ?  labelEl : valueEl
38 |     const bottom = labelPosition === 'bottom' ? labelEl : valueEl
39 | 
40 |     return (
41 |       <div className={classes} style={style}>
42 |         {top}
43 |         {bottom}
44 |       </div>
45 |     )
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/views/statistic/StatisticGroup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | 
 4 | import SemanticUiPropTypes from '../../common/SemanticUiPropTypes'
 5 | import spellNumber from '../../util/spellNumber'
 6 | 
 7 | import Statistic from './Statistic'
 8 | 
 9 | export default class StatisticGroup extends Component {
10 | 
11 |   static propTypes = {
12 |     style: PropTypes.object,
13 |     horizontal: PropTypes.bool,
14 |     stats: PropTypes.number,
15 |     children: (props, propName, componentName) => {
16 |       const prop = props[propName]
17 | 
18 |       if(Array.isArray(prop)) {
19 |         if(prop.some( p => p.type !== Statistic)) {
20 |           return new Error(`${componentName} should only have Statistic as children`)
21 |         }
22 |       } else {
23 |         if(prop.type !== Statistic) {
24 |           return new Error(`${componentName} should only have Statistic as children`)
25 |         }
26 |       }
27 |     }
28 |   }
29 | 
30 |   render() {
31 |     const { className, children, style, horizontal, stats } = this.props
32 |     const classes = classNames('ui', {'horizontal': horizontal}, spellNumber(stats), 'statistics', className)
33 | 
34 |     return <div className={classes} style={style}>{children}</div>
35 |   }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/test/common/semanticClasses_spec.js:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai'
 2 | 
 3 | import { deviceWidthClasses, reversedDevicesClasses } from '../../src/common/semanticClasses'
 4 | 
 5 | describe('deviceWidthClasses ', () => {
 6 | 
 7 |   it('should return the specific device width classes', () => {
 8 |     const expectedWidth = 'ten wide mobile five wide tablet two wide computer'
 9 |     expect(deviceWidthClasses({mobileWidth: 10, tabletWidth: 5, computerWidth: 2})).to.eq(expectedWidth)
10 |   })
11 | 
12 |   it('should support only one device', () => {
13 |     const expectedWidth = 'two wide computer'
14 |     expect(deviceWidthClasses({computerWidth: 2})).to.eq(expectedWidth)
15 |   })
16 | 
17 |   it('should not break with missing props', () => {
18 |     expect(deviceWidthClasses({})).to.eq(undefined)
19 |   })
20 | })
21 | 
22 | describe('reversedDeviceWidthClasses', () => {
23 | 
24 |   it('should return the reversed devices classes', () => {
25 |     const expectedClasses = 'mobile reversed tablet reversed'
26 |     expect(reversedDevicesClasses({reversedDevices: ['mobile', 'tablet']})).to.eq(expectedClasses)
27 |   })
28 | 
29 |   it('should not break with missing props', () => {
30 |     expect(deviceWidthClasses({})).to.eq(undefined)
31 |   })
32 | 
33 | })
34 | 


--------------------------------------------------------------------------------
/test/components/elements/Rail_spec.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import { expect } from 'chai'
 4 | 
 5 | import { Rail } from '../../../src/index'
 6 | 
 7 | describe('<Rail />', () => {
 8 | 
 9 |   it('should have ui rail classes', () => {
10 |     const wrapper = shallow(<Rail position='right'><p>Right rail</p></Rail>)
11 |     expect(wrapper.find('div')).to.have.className('ui right rail')
12 |   })
13 | 
14 | })
15 | 


--------------------------------------------------------------------------------
/test/test_helper.js:
--------------------------------------------------------------------------------
1 | import chai from 'chai'
2 | import chaiEnzyme from 'chai-enzyme'
3 | 
4 | chai.use(chaiEnzyme())
5 | 


--------------------------------------------------------------------------------
/test/util/string_spec.js:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai'
 2 | 
 3 | import { splitAndLowerCamelCase } from '../../src/util/string'
 4 | 
 5 | 
 6 | describe('splitAndLowerCamelCase', () => {
 7 | 
 8 |   it('should split a camel case word and lower case it', () => {
 9 |     expect(splitAndLowerCamelCase('fullScreen')).to.eq('full screen')
10 |   })
11 | 
12 |   it('should support more than two words', () => {
13 |     expect(splitAndLowerCamelCase('fullScreenComputer')).to.eq('full screen computer')
14 |   })
15 | 
16 |   it('should not break with empty strings', () => {
17 |     expect(splitAndLowerCamelCase(' ')).to.eq('')
18 |   })
19 | 
20 |   it('should not change non camelcased words', () => {
21 |     expect(splitAndLowerCamelCase('mobile')).to.eq('mobile')
22 |   })
23 | 
24 | })
25 | 


--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | var ROOT_PATH = path.resolve(__dirname)
 6 | 
 7 | module.exports = {
 8 |   devtool: '#source-map',
 9 |   resolve: {
10 |     extensions: ['', '.js', '.jsx']
11 |   },
12 |   devServer: {
13 |     contentBase: './demo/'
14 |   },
15 |   entry: [
16 |     'webpack-dev-server/client?http://0.0.0.0:8080',
17 |     'webpack/hot/only-dev-server',
18 |     path.join(__dirname, 'demo/index.js')
19 |   ],
20 |   output: {
21 |     path: path.join(__dirname, '/dist/'),
22 |     filename: '[name].js',
23 |     publicPath: '/'
24 |   },
25 |   plugins: [
26 |     new webpack.optimize.OccurenceOrderPlugin(),
27 |     new webpack.HotModuleReplacementPlugin(),
28 |     new webpack.NoErrorsPlugin(),
29 |     new HtmlWebpackPlugin({
30 |       inject: 'body',
31 |       filename: 'demo/index.html'
32 |     }),
33 | 
34 |     new webpack.DefinePlugin({
35 |       'process.env.NODE_ENV': JSON.stringify('development'),
36 |       '__DEV__': JSON.stringify(process.env.NODE_ENV)
37 |     })
38 |   ],
39 |   module: {
40 |     preLoaders: [{
41 |       test: /\.jsx?$/,
42 |       loader: 'eslint-loader',
43 |       includes: [path.resolve(ROOT_PATH, 'src'), path.resolve(ROOT_PATH, 'demo')],
44 |       exclude: /node_modules/
45 |     }],
46 | 
47 |     loaders: [{
48 |       test: /\.jsx?$/,
49 |       exclude: /node_modules/,
50 |       includes: [path.resolve(ROOT_PATH, 'src'), path.resolve(ROOT_PATH, 'demo')],
51 |       loader: 'babel'
52 |     }, {
53 |       test: /\.json?$/,
54 |       loader: 'json'
55 |     }, {
56 |       test: /\.css$/,
57 |       loaders: ['style', 'css']
58 |     }, {
59 |       test: /\.(otf|eot|jpg|png|gif|svg|ttf|woff|woff2)(\?(\d+#?.*|v=[0-9]\.[0-9]\.[0-9]))?$/,
60 |       loader: 'url?limit=8192'
61 |     }]
62 |   },
63 |   eslint: {
64 |     failOnError: false
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------