by default', () => {
10 | shallow()
11 | .should.have.tagName('i')
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/test/specs/modules/Dimmer/DimmerDimmable-test.js:
--------------------------------------------------------------------------------
1 | import DimmerDimmable from 'src/modules/Dimmer/DimmerDimmable'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('DimmerDimmable', () => {
5 | common.isConformant(DimmerDimmable)
6 | common.rendersChildren(DimmerDimmable)
7 |
8 | common.propKeyOnlyToClassName(DimmerDimmable, 'blurring')
9 | common.propKeyOnlyToClassName(DimmerDimmable, 'dimmed')
10 | })
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchSelection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { stateOptions } from '../common'
5 |
6 | const DropdownExampleMultipleSearchSelection = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleMultipleSearchSelection
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Usage/PopupExampleFocus.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExampleFocus = () => (
5 | }
7 | header='Movie Search'
8 | content='You may search by genre, header, year and actors'
9 | on='focus'
10 | />
11 | )
12 |
13 | export default PopupExampleFocus
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleMessageProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleMessageProps = () => (
5 |
9 | )
10 |
11 | export default MessageExampleMessageProps
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Groups/IconExampleTwitterGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleTwitterGroup = () => (
5 |
6 |
7 |
8 |
9 |
10 | Add on Twitter
11 |
12 | )
13 |
14 | export default IconExampleTwitterGroup
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import ContentVariations from './ContentVariations'
5 | import Types from './Types'
6 | import Variations from './Variations'
7 |
8 | const ListExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default ListExamples
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/Types/LoaderExampleLoader.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
3 |
4 | const LoaderExampleLoader = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default LoaderExampleLoader
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Card/Content/CardExampleLinkCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Card } from 'semantic-ui-react'
3 |
4 | const CardExampleLinkCard = () => (
5 |
11 | )
12 |
13 | export default CardExampleLinkCard
14 |
--------------------------------------------------------------------------------
/test/specs/collections/Table/TableHeaderCell-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import * as common from 'test/specs/commonTests'
4 | import TableHeaderCell from 'src/collections/Table/TableHeaderCell'
5 |
6 | describe('TableHeaderCell', () => {
7 | common.isConformant(TableHeaderCell)
8 |
9 | it('renders as a th by default', () => {
10 | shallow()
11 | .should.have.tagName('th')
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Menu/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import States from './States'
6 | import Variations from './Variations'
7 |
8 | const MenuExamples = () => {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 | )
17 | }
18 |
19 | export default MenuExamples
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Divider/Types/DividerExampleHorizontal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment, Button, Divider } from 'semantic-ui-react'
3 |
4 | const DividerExampleHorizontal = () => (
5 |
6 |
7 | Or
8 |
9 |
10 | )
11 |
12 | export default DividerExampleHorizontal
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Divider/Variations/DividerExampleInverted.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Segment, Divider } from 'semantic-ui-react'
3 |
4 | export default class DividerExampleInverted extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Horizontal
10 |
11 | )
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledTag.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleRightLabeledTag = () => (
5 |
12 | )
13 |
14 | export default InputExampleRightLabeledTag
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Types/ListExampleBulletedHorizontal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleBulletedHorizontal = () => (
5 |
6 | About Us
7 | Sitemap
8 | Contact
9 |
10 | )
11 |
12 | export default ListExampleBulletedHorizontal
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/States/DropdownExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const DropdownExampleActive = () => (
5 |
6 |
7 | Choice 1
8 | Choice 2
9 |
10 |
11 | )
12 |
13 | export default DropdownExampleActive
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/States/DropdownExampleError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const DropdownExampleError = () => (
5 |
6 |
7 | Choice 1
8 | Choice 2
9 |
10 |
11 | )
12 |
13 | export default DropdownExampleError
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/States/RadioExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form, Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleDisabled = () => (
5 |
13 | )
14 |
15 | export default RadioExampleDisabled
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const BreadcrumbExampleSection = () => (
5 |
6 | Home
7 |
8 | Search
9 |
10 | )
11 |
12 | export default BreadcrumbExampleSection
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 | import ResponsiveVariations from './ResponsiveVariations'
7 |
8 | const GridExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default GridExamples
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/States/ButtonExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleLoading = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default ButtonExampleLoading
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleInline.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { friendOptions } from '../common'
5 |
6 | const DropdownExampleInline = () => (
7 |
8 | Show me posts by
9 | {' '}
10 |
11 |
12 | )
13 |
14 | export default DropdownExampleInline
15 |
--------------------------------------------------------------------------------
/test/specs/collections/Message/MessageItem-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import MessageItem from 'src/collections/Message/MessageItem'
3 | import * as common from 'test/specs/commonTests'
4 |
5 | describe('MessageItem', () => {
6 | common.isConformant(MessageItem)
7 | common.rendersChildren(MessageItem)
8 |
9 | it('renders an li tag', () => {
10 | shallow()
11 | .should.have.tagName('li')
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/test/specs/collections/Table/TableBody-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import * as common from 'test/specs/commonTests'
4 | import TableBody from 'src/collections/Table/TableBody'
5 |
6 | describe('TableBody', () => {
7 | common.isConformant(TableBody)
8 | common.rendersChildren(TableBody)
9 |
10 | it('renders as a tbody by default', () => {
11 | shallow()
12 | .should.have.tagName('tbody')
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Content/ButtonExampleMultipleConditionals.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleMultipleConditionals = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default ButtonExampleMultipleConditionals
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupIconSize = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default ButtonExampleGroupIconSize
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Variations/HeaderExampleFloating.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Segment } from 'semantic-ui-react'
3 |
4 | const HeaderExampleFloating = () => (
5 |
6 |
9 |
12 |
13 | )
14 |
15 | export default HeaderExampleFloating
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Groups/SegmentExampleSegments.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleSegments = () => (
5 |
6 | Top
7 | Middle
8 | Middle
9 | Middle
10 | Bottom
11 |
12 | )
13 |
14 | export default SegmentExampleSegments
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const DropdownExampleDisabled = () => (
5 |
6 |
7 | Choice 1
8 | Choice 2
9 |
10 |
11 | )
12 |
13 | export default DropdownExampleDisabled
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/States/DropdownExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const DropdownExampleLoading = () => (
5 |
6 |
7 | Choice 1
8 | Choice 2
9 |
10 |
11 | )
12 |
13 | export default DropdownExampleLoading
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchSelectionTwo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { countryOptions } from '../common'
5 |
6 | const DropdownExampleMultipleSearchSelectionTwo = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleMultipleSearchSelectionTwo
11 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Tasks live in the tasks directory.
3 | * This file just loads all the gulp tasks.
4 | */
5 | const { task, parallel } = require('gulp')
6 | const requireDir = require('require-dir')
7 |
8 | requireDir('./gulp/tasks')
9 |
10 | // do not use tasks/default
11 | // the default task must be loaded after all other tasks
12 | // requireDir above loads all our tasks in alphabetical order
13 | task('default', parallel('umd', 'docs'))
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/Types/GridExampleGrid.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import React from 'react'
3 | import { Grid, Image } from 'semantic-ui-react'
4 |
5 | const columns = _.times(16, (i) => (
6 |
7 |
8 |
9 | ))
10 |
11 | const GridExampleGrid = () => (
12 | {columns}
13 | )
14 |
15 | export default GridExampleGrid
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleListProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const list = [
5 | 'You can now have cover images on blog pages',
6 | 'Drafts will now auto-save while writing',
7 | ]
8 |
9 | const MessageExampleListProp = () => (
10 |
14 | )
15 |
16 | export default MessageExampleListProp
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupVertical = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default ButtonExampleGroupVertical
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Variations/IconExampleCircular.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleCircular = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default IconExampleCircular
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Groups from './Groups'
4 | import States from './States'
5 | import Types from './Types'
6 | import Usage from './Usage'
7 | import Variations from './Variations'
8 |
9 | const ImageExamples = () => (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | export default ImageExamples
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Step/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Groups from './Groups'
5 | import States from './States'
6 | import Types from './Types'
7 | import Variations from './Variations'
8 |
9 | const StepExamples = () => (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | export default StepExamples
20 |
--------------------------------------------------------------------------------
/docs/app/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Router, useRouterHistory } from 'react-router'
3 | import { createHistory } from 'history'
4 |
5 | import routes from './routes'
6 |
7 | const history = useRouterHistory(createHistory)({
8 | basename: __BASE__,
9 | })
10 |
11 | export default class App extends Component {
12 | render() {
13 | return (
14 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Menu/Types/MenuExampleProps.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Menu } from 'semantic-ui-react'
3 |
4 | export default class MenuExampleProps extends Component {
5 | state = {}
6 |
7 | render() {
8 | const items = [
9 | { active: true, name: 'Editorials' },
10 | { name: 'Reviews' },
11 | { name: 'Upcoming Events' },
12 | ]
13 |
14 | return
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupBasicColored = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupBasicColored
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Groups/LabelExampleGroupCircular.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleGroupCircular = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default LabelExampleGroupCircular
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Groups/LabelExampleGroupTag.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleGroupTag = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default LabelExampleGroupTag
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExampleCompactGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleCompactGroup = () => (
5 |
6 |
7 | Pellentesque habitant morbi
8 |
9 |
10 | Pellentesque habitant morbi
11 |
12 |
13 | )
14 |
15 | export default SegmentExampleCompactGroup
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Embed/Usage/EmbedExampleSettings.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Embed } from 'semantic-ui-react'
3 |
4 | const EmbedExampleSettings = () => (
5 |
14 | )
15 |
16 | export default EmbedExampleSettings
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Usage/PopupExampleClick.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExampleClick = () => (
5 | }
7 | content={}
8 | on='click'
9 | positioning='top right'
10 | />
11 | )
12 |
13 | export default PopupExampleClick
14 |
--------------------------------------------------------------------------------
/src/addons/Select/Select.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { META } from '../../lib'
4 | import Dropdown from '../../modules/Dropdown'
5 |
6 | /**
7 | * A Select is sugar for .
8 | * @see Dropdown
9 | * @see Form
10 | */
11 | function Select(props) {
12 | return
13 | }
14 |
15 | Select._meta = {
16 | name: 'Select',
17 | type: META.TYPES.ADDON,
18 | }
19 |
20 | export default Select
21 |
--------------------------------------------------------------------------------
/src/collections/Table/TableFooter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { META } from '../../lib'
4 | import TableHeader from './TableHeader'
5 |
6 | function TableFooter(props) {
7 | return
8 | }
9 |
10 | TableFooter._meta = {
11 | name: 'TableFooter',
12 | type: META.TYPES.COLLECTION,
13 | parent: 'Table',
14 | }
15 |
16 | TableFooter.defaultProps = {
17 | as: 'tfoot',
18 | }
19 |
20 | export default TableFooter
21 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const sections = [
5 | { content: 'Home', link: true },
6 | { content: 'Store', link: true },
7 | { content: 'T-Shirt', active: true },
8 | ]
9 |
10 | const BreadcrumbExampleProps = () => (
11 |
12 | )
13 |
14 | export default BreadcrumbExampleProps
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupLabeledIcon = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupLabeledIcon
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Variations/IconExampleBordered.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleBordered = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default IconExampleBordered
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExampleFloated.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleFloated = () => (
5 |
6 |
7 | This segment will appear to the left
8 |
9 |
10 | This segment will appear to the right
11 |
12 |
13 | )
14 |
15 | export default SegmentExampleFloated
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import States from './States'
5 | import Types from './Types'
6 | import Usage from './Usage'
7 | import Variations from './Variations'
8 |
9 | const DropdownExamples = () => (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | export default DropdownExamples
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Statistic } from 'semantic-ui-react'
3 |
4 | const items = [
5 | { label: 'Views', value: '2,204' },
6 | { label: 'Downloads', value: '3,322' },
7 | { label: 'Tasks', value: '22' },
8 | ]
9 |
10 | const StatisticExampleHorizontalGroup = () =>
11 |
12 | export default StatisticExampleHorizontalGroup
13 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentAction-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import * as common from 'test/specs/commonTests'
4 | import CommentAction from 'src/views/Comment/CommentAction'
5 |
6 | describe('CommentAction', () => {
7 | common.isConformant(CommentAction)
8 | common.rendersChildren(CommentAction)
9 |
10 | it('renders an a element by default', () => {
11 | shallow()
12 | .should.have.tagName('a')
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Menu } from 'semantic-ui-react'
3 |
4 | const MenuExampleButtons = () => {
5 | return (
6 |
15 | )
16 | }
17 |
18 | export default MenuExampleButtons
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleImageShorthand.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleImageShorthand = () => {
5 | const imageProps = {
6 | avatar: true,
7 | spaced: 'right',
8 | src: 'http://semantic-ui.com/images/avatar/small/elliot.jpg',
9 | }
10 |
11 | return
12 | }
13 |
14 | export default LabelExampleImageShorthand
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Variations/ListExampleHorizontalBulleted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleHorizontalBulleted = () => (
5 |
6 | Terms and Conditions
7 | Privacy Policy
8 | Contact Us
9 |
10 | )
11 |
12 | export default ListExampleHorizontalBulleted
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/States/CheckboxExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form, Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleDisabled = () => (
5 |
13 | )
14 |
15 | export default CheckboxExampleDisabled
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/Variations/RadioExampleFitted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio, Segment } from 'semantic-ui-react'
3 |
4 | const RadioExampleFitted = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | )
17 |
18 | export default RadioExampleFitted
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Menu/Variations/MenuExampleFixed.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MenuExampleFixed = () => {
5 | return (
6 |
7 | You can view examples of the fixed variation in the
8 | official documentation.
9 |
10 | )
11 | }
12 |
13 | export default MenuExampleFixed
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Types/HeaderExampleSettingsIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Icon } from 'semantic-ui-react'
3 |
4 | const HeaderExampleSettingsIcon = () => (
5 |
6 |
7 | Account Settings
8 |
9 | Manage your account settings and set e-mail preferences.
10 |
11 |
12 | )
13 |
14 | export default HeaderExampleSettingsIcon
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import faker from 'faker'
3 | import React from 'react'
4 | import { Accordion } from 'semantic-ui-react'
5 |
6 | const panels = _.times(3, () => ({
7 | title: faker.lorem.sentence(),
8 | content: faker.lorem.paragraphs(),
9 | }))
10 |
11 | const AccordionExampleStyled = () => (
12 |
13 | )
14 |
15 | export default AccordionExampleStyled
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import faker from 'faker'
3 | import React from 'react'
4 | import { Accordion } from 'semantic-ui-react'
5 |
6 | const panels = _.times(3, () => ({
7 | title: faker.lorem.sentence(),
8 | content: faker.lorem.paragraphs(),
9 | }))
10 |
11 | const AccordionExampleFluid = () => (
12 |
13 | )
14 |
15 | export default AccordionExampleFluid
16 |
--------------------------------------------------------------------------------
/src/collections/Table/TableHeaderCell.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { META } from '../../lib'
4 | import TableCell from './TableCell'
5 |
6 | function TableHeaderCell(props) {
7 | return
8 | }
9 |
10 | TableHeaderCell._meta = {
11 | name: 'TableHeaderCell',
12 | type: META.TYPES.COLLECTION,
13 | parent: 'Table',
14 | }
15 |
16 | TableHeaderCell.defaultProps = {
17 | as: 'th',
18 | }
19 |
20 | export default TableHeaderCell
21 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldGroup-test.js:
--------------------------------------------------------------------------------
1 | import FormGroup from 'src/collections/Form/FormGroup'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('FormGroup', () => {
5 | common.isConformant(FormGroup)
6 | common.rendersChildren(FormGroup)
7 | common.propKeyOnlyToClassName(FormGroup, 'grouped')
8 | common.propKeyOnlyToClassName(FormGroup, 'inline')
9 | common.implementsWidthProp(FormGroup, { propKey: 'widths', canEqual: true })
10 | })
11 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentGroup-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentGroup from 'src/views/Comment/CommentGroup'
3 |
4 | describe('CommentGroup', () => {
5 | common.isConformant(CommentGroup)
6 | common.rendersChildren(CommentGroup)
7 |
8 | common.propKeyOnlyToClassName(CommentGroup, 'collapsed')
9 | common.propKeyOnlyToClassName(CommentGroup, 'minimal')
10 | common.propKeyOnlyToClassName(CommentGroup, 'threaded')
11 | })
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message, Icon } from 'semantic-ui-react'
3 |
4 | const MessageExampleIcon = () => (
5 |
6 |
7 |
8 | Just one second
9 | We are fetching that content for you.
10 |
11 |
12 | )
13 |
14 | export default MessageExampleIcon
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Accordion } from 'semantic-ui-react'
3 | import faker from 'faker'
4 | import _ from 'lodash'
5 |
6 | const panels = _.times(3, () => ({
7 | title: faker.lorem.sentence(),
8 | content: faker.lorem.paragraphs(),
9 | }))
10 |
11 | const AccordionExamplePanelsProp = () => (
12 |
13 | )
14 |
15 | export default AccordionExamplePanelsProp
16 |
--------------------------------------------------------------------------------
/test/specs/views/Feed/FeedLike-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import * as common from 'test/specs/commonTests'
4 | import FeedLike from 'src/views/Feed/FeedLike'
5 |
6 | describe('FeedLike', () => {
7 | common.isConformant(FeedLike)
8 | common.implementsIconProp(FeedLike)
9 | common.rendersChildren(FeedLike)
10 |
11 | it('renders text with content prop', () => {
12 | shallow()
13 | .should.contain.text('foo')
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form, Input } from 'semantic-ui-react'
3 |
4 | const FormExampleFieldDisabled = () => (
5 |
11 | )
12 |
13 | export default FormExampleFieldDisabled
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form, Input } from 'semantic-ui-react'
3 |
4 | const FormExampleFieldReadOnly = () => (
5 |
11 | )
12 |
13 | export default FormExampleFieldReadOnly
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLeftActionLabeledButton = () => (
5 |
11 | )
12 |
13 | export default InputExampleLeftActionLabeledButton
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Variations/PopupExampleStyle.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Popup } from 'semantic-ui-react'
3 |
4 | const style = {
5 | borderRadius: 0,
6 | opacity: 0.7,
7 | padding: '2em',
8 | }
9 |
10 | const PopupExampleStyle = () => (
11 | }
13 | content='Popup with a custom style prop'
14 | style={style}
15 | inverted
16 | />
17 | )
18 |
19 | export default PopupExampleStyle
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Statistic/Types/StatisticExampleBottomLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Statistic } from 'semantic-ui-react'
3 |
4 | const StatisticExampleBottomLabel = () => (
5 |
6 |
7 | 5,550
8 | Downloads
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default StatisticExampleBottomLabel
16 |
--------------------------------------------------------------------------------
/test/specs/elements/List/ListIcon-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | import Icon from 'src/elements/Icon/Icon'
5 | import ListIcon from 'src/elements/List/ListIcon'
6 |
7 | describe('ListIcon', () => {
8 | common.isConformant(ListIcon)
9 | common.implementsVerticalAlignProp(ListIcon)
10 |
11 | it('returns Icon component', () => {
12 | shallow()
13 | .should.have.descendants(Icon)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/tests.bundle.js:
--------------------------------------------------------------------------------
1 | import './setup'
2 |
3 | const testsContext = require.context('./', true, /-test\.js$/)
4 |
5 | // only re-run changed tests, or all if none changed
6 | // https://www.npmjs.com/package/karma-webpack-with-fast-source-maps
7 | const __karmaWebpackManifest__ = []
8 | let runnable = testsContext.keys().filter((path) => __karmaWebpackManifest__.indexOf(path) >= 0)
9 |
10 | if (!runnable.length) runnable = testsContext.keys()
11 |
12 | runnable.forEach(testsContext)
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleMessage = () => (
5 |
6 |
7 | Changes in Service
8 |
9 |
10 | We updated our privacy policy here to better service our customers. We recommend reviewing the changes.
11 |
12 |
13 | )
14 |
15 | export default MessageExampleMessage
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupMixed = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupMixed
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Divider/Variations/DividerExampleClearing.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment, Button, Divider } from 'semantic-ui-react'
3 |
4 | const DividerExampleClearing = () => (
5 |
6 |
7 |
8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
9 |
10 | )
11 |
12 | export default DividerExampleClearing
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const sections = [
5 | { content: 'Home', link: true },
6 | { content: 'Registration', link: true },
7 | { content: 'Personal Information', active: true },
8 | ]
9 |
10 | const BreadcrumbExampleDividerProps = () => (
11 |
12 | )
13 |
14 | export default BreadcrumbExampleDividerProps
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleError = () => (
5 |
13 | )
14 |
15 | export default MessageExampleError
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExampleSettingsIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Icon } from 'semantic-ui-react'
3 |
4 | const HeaderExampleSettingsIcon = () => (
5 |
6 |
7 |
8 | Account Settings
9 |
10 | Manage your preferences
11 |
12 |
13 |
14 | )
15 |
16 | export default HeaderExampleSettingsIcon
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Variations/LabelExampleCircular.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const colors = [
5 | 'red', 'orange', 'yellow', 'olive', 'green', 'teal',
6 | 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black',
7 | ]
8 |
9 | const LabelExampleCircular = () => (
10 |
11 | {colors.map(color => )}
12 |
13 | )
14 |
15 | export default LabelExampleCircular
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/Variations/CheckboxExampleFitted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox, Segment } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleFitted = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | )
17 |
18 | export default CheckboxExampleFitted
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUncontrolled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const options = [
5 | { text: 'One', value: 1 },
6 | { text: 'Two', value: 2 },
7 | { text: 'Three', value: 3 },
8 | ]
9 |
10 | const DropdownExampleUncontrolled = () => (
11 |
16 | )
17 |
18 | export default DropdownExampleUncontrolled
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Icon } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupIcon = () => (
5 |
6 |
9 |
12 |
15 |
16 | )
17 |
18 | export default ButtonExampleGroupIcon
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Variations/LabelExampleSize.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import React from 'react'
3 | import { Label } from 'semantic-ui-react'
4 |
5 | const sizes = ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']
6 |
7 | const LabelExampleSize = () => (
8 |
9 | {sizes.map(size => (
10 |
13 | ))}
14 |
15 | )
16 |
17 | export default LabelExampleSize
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabledItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | const DropdownExampleActive = () => (
5 |
6 |
7 | Choice 1
8 | Choice 2
9 | Choice 3
10 |
11 |
12 | )
13 |
14 | export default DropdownExampleActive
15 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldInput-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormInput from 'src/collections/Form/FormInput'
4 | import Input from 'src/elements/Input/Input'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormInput', () => {
8 | common.isConformant(FormInput)
9 |
10 | it('renders a FormField with a Input control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Input)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldRadio-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormRadio from 'src/collections/Form/FormRadio'
4 | import Radio from 'src/addons/Radio/Radio'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormRadio', () => {
8 | common.isConformant(FormRadio)
9 |
10 | it('renders a FormField with a Radio control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Radio)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/specs/views/Feed/FeedDate-test.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 | import React from 'react'
3 |
4 | import * as common from 'test/specs/commonTests'
5 | import FeedDate from 'src/views/Feed/FeedDate'
6 |
7 | describe('FeedDate', () => {
8 | common.isConformant(FeedDate)
9 | common.rendersChildren(FeedDate)
10 |
11 | it('renders text with date prop', () => {
12 | const text = faker.hacker.phrase()
13 |
14 | shallow().should.contain.text(text)
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/test/specs/views/Feed/FeedUser-test.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 | import React from 'react'
3 |
4 | import * as common from 'test/specs/commonTests'
5 | import FeedUser from 'src/views/Feed/FeedUser'
6 |
7 | describe('FeedUser', () => {
8 | common.isConformant(FeedUser)
9 | common.rendersChildren(FeedUser)
10 |
11 | it('renders text with user prop', () => {
12 | const text = faker.hacker.phrase()
13 |
14 | shallow().should.contain.text(text)
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Types/HeaderExampleContent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleContent = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default HeaderExampleContent
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const sections = [
5 | { content: 'Home', link: true },
6 | { content: 'Registration', link: true },
7 | { content: 'Personal Information', active: true },
8 | ]
9 |
10 | const BreadcrumbExampleIconDividerProps = () => (
11 |
12 | )
13 |
14 | export default BreadcrumbExampleIconDividerProps
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobile.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Grid } from 'semantic-ui-react'
3 |
4 | const GridExampleReversedMobile = () => (
5 |
6 | Mobile Fourth
7 | Mobile Third
8 | Mobile Second
9 | Mobile First
10 |
11 | )
12 |
13 | export default GridExampleReversedMobile
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/ResponsiveVariations/GridExampleReversedTablet.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Grid } from 'semantic-ui-react'
3 |
4 | const GridExampleReversedTablet = () => (
5 |
6 | Tablet Fourth
7 | Tablet Third
8 | Tablet Second
9 | Tablet First
10 |
11 | )
12 |
13 | export default GridExampleReversedTablet
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Variations/LabelExampleCircularEmpty.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const colors = [
5 | 'red', 'orange', 'yellow', 'olive', 'green', 'teal',
6 | 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black',
7 | ]
8 |
9 | const LabelExampleCircularEmpty = () => (
10 |
11 | {colors.map(color => )}
12 |
13 | )
14 |
15 | export default LabelExampleCircularEmpty
16 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldButton-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormButton from 'src/collections/Form/FormButton'
4 | import Button from 'src/elements/Button/Button'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormButton', () => {
8 | common.isConformant(FormButton)
9 |
10 | it('renders a FormField with a Button control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Button)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldSelect-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormSelect from 'src/collections/Form/FormSelect'
4 | import Select from 'src/addons/Select/Select'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormSelect', () => {
8 | common.isConformant(FormSelect)
9 |
10 | it('renders a FormField with a Select control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Select)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Segment } from 'semantic-ui-react'
3 |
4 | const ButtonExampleVerticallyAttached = () => (
5 |
6 |
7 |
8 | 
9 |
10 |
11 |
9 | 
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default DimmerExampleActive
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/States/FormExampleSuccess.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Form, Input, Message } from 'semantic-ui-react'
3 |
4 | const FormExampleSuccess = () => (
5 |
14 | )
15 |
16 | export default FormExampleSuccess
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleListItemsProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const items = [
5 | 'You can now have cover images on blog pages',
6 | 'Drafts will now auto-save while writing',
7 | ]
8 |
9 | const MessageExampleListItemsProp = () => (
10 |
11 | New Site Features
12 |
13 |
14 | )
15 |
16 | export default MessageExampleListItemsProp
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Types/HeaderExamplePage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExamplePage = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default HeaderExamplePage
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExampleSizes.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleSizes = () => {
5 | const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
6 |
7 | return (
8 |
9 | {sizes.map(size => (
10 |
11 | It's a {size} segment
12 |
13 | ))}
14 |
15 | )
16 | }
17 |
18 | export default SegmentExampleSizes
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Content/DropdownExampleMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown, Message } from 'semantic-ui-react'
3 |
4 | const DropdownExampleMessage = () => (
5 |
6 | {/* */}
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default DropdownExampleMessage
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Comment/Content/CommentExampleAvatar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Comment } from 'semantic-ui-react'
3 |
4 | const CommentExampleAvatar = () => (
5 |
6 |
7 |
8 |
9 | Elliot Fu
10 |
11 |
12 |
13 | )
14 |
15 | export default CommentExampleAvatar
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Types/MessageExampleList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleList = () => (
5 |
6 | New Site Features
7 |
8 | You can now have cover images on blog pages
9 | Drafts will now auto-save while writing
10 |
11 |
12 | )
13 |
14 | export default MessageExampleList
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleCircularSocial.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleCircularSocial = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default ButtonExampleCircularSocial
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/States/LoaderExampleIndeterminate.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
3 |
4 | const LoaderExampleIndeterminate = () => (
5 |
6 |
7 |
8 | Preparing Files
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | export default LoaderExampleIndeterminate
17 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldCheckbox-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormCheckbox from 'src/collections/Form/FormCheckbox'
4 | import Checkbox from 'src/modules/Checkbox/Checkbox'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormCheckbox', () => {
8 | common.isConformant(FormCheckbox)
9 |
10 | it('renders a FormField with a Checkbox control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Checkbox)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldDropdown-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormDropdown from 'src/collections/Form/FormDropdown'
4 | import Dropdown from 'src/modules/Dropdown/Dropdown'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormDropdown', () => {
8 | common.isConformant(FormDropdown)
9 |
10 | it('renders a FormField with a Dropdown control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', Dropdown)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/specs/collections/Form/FormFieldTextArea-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import FormTextArea from 'src/collections/Form/FormTextArea'
4 | import TextArea from 'src/addons/TextArea/TextArea'
5 | import * as common from 'test/specs/commonTests'
6 |
7 | describe('FormTextArea', () => {
8 | common.isConformant(FormTextArea)
9 |
10 | it('renders a FormField with a TextArea control', () => {
11 | shallow()
12 | .find('FormField')
13 | .should.have.prop('control', TextArea)
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const BreadcrumbExampleStandard = () => (
5 |
6 | Home
7 |
8 | Store
9 |
10 | T-Shirt
11 |
12 | )
13 |
14 | export default BreadcrumbExampleStandard
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Groups from './Groups'
4 | import Content from './Content'
5 | import States from './States'
6 | import Variations from './Variations'
7 | import GroupVariations from './GroupVariations'
8 |
9 | const ButtonExamples = () => (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | )
19 |
20 | export default ButtonExamples
21 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleIconChild.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Input } from 'semantic-ui-react'
3 |
4 | const InputExampleIconChild = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | export default InputExampleIconChild
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import faker from 'faker'
3 | import React from 'react'
4 | import { Accordion, Segment } from 'semantic-ui-react'
5 |
6 | const panels = _.times(3, () => ({
7 | title: faker.lorem.sentence(),
8 | content: faker.lorem.paragraphs(),
9 | }))
10 |
11 | const AccordionExampleInverted = () => (
12 |
13 |
14 |
15 | )
16 |
17 | export default AccordionExampleInverted
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Feed/Content/FeedExampleImageLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Feed } from 'semantic-ui-react'
3 |
4 | const FeedExampleImageLabel = () => (
5 |
6 |
7 |
8 | 
9 |
10 |
11 | You added Elliot Fu to the group Coworkers
12 |
13 |
14 |
15 | )
16 |
17 | export default FeedExampleImageLabel
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/States/FormExampleError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Form, Input, Message } from 'semantic-ui-react'
3 |
4 | const FormExampleError = () => (
5 |
14 | )
15 |
16 | export default FormExampleError
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExampleAttached.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleAttached = () => (
5 |
6 |
7 | This segment is on top
8 |
9 |
10 | This segment is attached on both sides
11 |
12 |
13 | This segment is on bottom
14 |
15 |
16 | )
17 |
18 | export default SegmentExampleAttached
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/Types/RatingExampleOnRate.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | export default class RatingExampleOnRate extends Component {
5 | state = {}
6 |
7 | handleRate = (e, { rating, maxRating }) => this.setState({ rating, maxRating })
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
{JSON.stringify(this.state, null, 2)}
14 |
)
15 | })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Select/Types/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
3 | import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
4 |
5 | const SelectTypeExamples = () => (
6 |
7 |
12 |
13 | )
14 |
15 | export default SelectTypeExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/Variations/GridExampleEqualWidthColumn.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Grid, Segment } from 'semantic-ui-react'
3 |
4 | const GridExampleEqualWidthColumn = () => (
5 |
6 |
7 | 1
8 |
9 |
10 | 2
11 |
12 |
13 | 3
14 |
15 |
16 | )
17 |
18 | export default GridExampleEqualWidthColumn
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleImage = () => (
5 |
6 |
10 |
14 |
6 |
7 | Right aligned content.
8 |
9 |
10 | Left aligned content.
11 |
12 |
13 | Center aligned content.
14 |
15 |
16 | )
17 |
18 | export default SegmentExampleTextAlignment
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Step/Types/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
3 | import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
4 |
5 | const StepTypesExamples = () => (
6 |
7 |
12 |
13 | )
14 |
15 | export default StepTypesExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Groups/IconExampleLoadingGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleLoadingGroup = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default IconExampleLoadingGroup
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Types/LabelExampleFloating.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Label, Menu } from 'semantic-ui-react'
3 |
4 | const LabelExampleFloating = () => (
5 |
15 | )
16 |
17 | export default LabelExampleFloating
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleToggle.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | class ButtonExampleToggle extends Component {
5 | state = {}
6 |
7 | handleClick = () => this.setState({ active: !this.state.active })
8 |
9 | render() {
10 | const { active } = this.state
11 | return (
12 |
15 | )
16 | }
17 | }
18 |
19 | export default ButtonExampleToggle
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleSimple.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimmer, Segment } from 'semantic-ui-react'
3 |
4 | const DimmerExampleSimple = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default DimmerExampleSimple
18 |
--------------------------------------------------------------------------------
/test/specs/elements/Flag/Flag-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Flag from 'src/elements/Flag/Flag'
4 | import * as common from 'test/specs/commonTests'
5 |
6 | const requiredProps = { name: 'us' }
7 |
8 | describe('Flag', () => {
9 | common.isConformant(Flag, { requiredProps })
10 | common.implementsCreateMethod(Flag)
11 | common.propValueOnlyToClassName(Flag, 'name', { requiredProps })
12 |
13 | it('renders an element', () => {
14 | shallow()
15 | .should.have.tagName('i')
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/test/specs/elements/Label/LabelGroup-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import LabelGroup from 'src/elements/Label/LabelGroup'
3 |
4 | describe('LabelGroup', () => {
5 | common.isConformant(LabelGroup)
6 | common.hasUIClassName(LabelGroup)
7 | common.rendersChildren(LabelGroup)
8 |
9 | common.propKeyOnlyToClassName(LabelGroup, 'circular')
10 | common.propKeyOnlyToClassName(LabelGroup, 'tag')
11 |
12 | common.propValueOnlyToClassName(LabelGroup, 'color')
13 | common.propValueOnlyToClassName(LabelGroup, 'size')
14 | })
15 |
--------------------------------------------------------------------------------
/test/specs/views/Item/ItemMeta-test.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 | import React from 'react'
3 |
4 | import * as common from 'test/specs/commonTests'
5 | import ItemMeta from 'src/views/Item/ItemMeta'
6 |
7 | describe('ItemMeta', () => {
8 | common.isConformant(ItemMeta)
9 | common.rendersChildren(ItemMeta)
10 |
11 | describe('content prop', () => {
12 | it('renders text', () => {
13 | const text = faker.hacker.phrase()
14 |
15 | shallow()
16 | .should.contain.text(text)
17 | })
18 | })
19 | })
20 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Grid/Variations/GridExampleFloated.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Grid, Image } from 'semantic-ui-react'
3 |
4 | const GridExampleFloated = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default GridExampleFloated
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Types/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
3 | import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
4 |
5 | const InputTypesExamples = () => (
6 |
7 |
12 |
13 | )
14 |
15 | export default InputTypesExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown, Input } from 'semantic-ui-react'
3 |
4 | const options = [
5 | { text: '.com', value: '.com' },
6 | { text: '.net', value: '.net' },
7 | { text: '.org', value: '.org' },
8 | ]
9 |
10 | const InputExampleRightLabeled = () => (
11 | }
13 | labelPosition='right'
14 | placeholder='Find domain'
15 | />
16 | )
17 |
18 | export default InputExampleRightLabeled
19 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Variations/PopupExampleInverted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Icon, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExampleInverted = () => (
5 |
6 |
}
8 | content='Hello. This is an inverted popup'
9 | inverted
10 | />
11 |
}
13 | content='Hello. This is an inverted popup'
14 | inverted
15 | />
16 |