├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
├── CONTRIBUTING.md
└── ISSUE_TEMPLATE.md
├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── browser
└── index.html
├── circle.yml
├── codecov.yml
├── config.js
├── docs
├── .eslintrc
└── app
│ ├── 404.html
│ ├── App.js
│ ├── Components
│ ├── ComponentDoc
│ │ ├── ComponentDoc.js
│ │ ├── ComponentExample.js
│ │ ├── ComponentExamples.js
│ │ ├── ComponentProps.js
│ │ ├── ContributionPrompt.js
│ │ └── ExampleSection.js
│ ├── Editor
│ │ └── Editor.js
│ ├── Layout.js
│ ├── Logo
│ │ └── Logo.js
│ ├── Root.js
│ ├── Sidebar
│ │ └── Sidebar.js
│ └── TAAttribution
│ │ └── TAAttribution.js
│ ├── Examples
│ ├── addons
│ │ ├── Confirm
│ │ │ ├── Types
│ │ │ │ ├── ConfirmExampleCallbacks.js
│ │ │ │ ├── ConfirmExampleConfirm.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ConfirmExampleButtons.js
│ │ │ │ ├── ConfirmExampleContent.js
│ │ │ │ ├── ConfirmExampleHeader.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Radio
│ │ │ ├── States
│ │ │ │ ├── RadioExampleChecked.js
│ │ │ │ ├── RadioExampleDisabled.js
│ │ │ │ ├── RadioExampleReadOnly.js
│ │ │ │ ├── RadioExampleRemoteControl.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── RadioExampleRadio.js
│ │ │ │ ├── RadioExampleRadioGroup.js
│ │ │ │ ├── RadioExampleSlider.js
│ │ │ │ ├── RadioExampleToggle.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── RadioExampleFitted.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Select
│ │ │ ├── Types
│ │ │ │ ├── SelectExample.js
│ │ │ │ └── index.js
│ │ │ ├── common.js
│ │ │ └── index.js
│ │ └── TextArea
│ │ │ ├── Types
│ │ │ ├── TextAreaExample.js
│ │ │ └── index.js
│ │ │ └── index.js
│ ├── collections
│ │ ├── Breadcrumb
│ │ │ ├── Content
│ │ │ │ ├── BreadcrumbExampleDivider.js
│ │ │ │ ├── BreadcrumbExampleDividerProps.js
│ │ │ │ ├── BreadcrumbExampleIconDivider.js
│ │ │ │ ├── BreadcrumbExampleIconDividerProps.js
│ │ │ │ ├── BreadcrumbExampleLink.js
│ │ │ │ ├── BreadcrumbExampleSection.js
│ │ │ │ ├── BreadcrumbExampleSectionProps.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── BreadcrumbExampleDivider.js
│ │ │ │ ├── BreadcrumbExampleProps.js
│ │ │ │ ├── BreadcrumbExampleStandard.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── BreadcrumbExampleBigSize.js
│ │ │ │ ├── BreadcrumbExampleHugeSize.js
│ │ │ │ ├── BreadcrumbExampleLargeSize.js
│ │ │ │ ├── BreadcrumbExampleMassiveSize.js
│ │ │ │ ├── BreadcrumbExampleMiniSize.js
│ │ │ │ ├── BreadcrumbExampleSmallSize.js
│ │ │ │ ├── BreadcrumbExampleTinySize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Form
│ │ │ ├── Content
│ │ │ │ ├── FormExampleField.js
│ │ │ │ └── index.js
│ │ │ ├── FieldVariations
│ │ │ │ ├── FormExampleInlineField.js
│ │ │ │ └── index.js
│ │ │ ├── GroupVariations
│ │ │ │ ├── FormExampleEvenlyDividedGroup.js
│ │ │ │ ├── FormExampleInlineGroupedFields.js
│ │ │ │ └── index.js
│ │ │ ├── Shorthand
│ │ │ │ ├── FormExampleFieldControl.js
│ │ │ │ ├── FormExampleFieldControlHTML.js
│ │ │ │ ├── FormExampleSubComponentControl.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── FormExampleError.js
│ │ │ │ ├── FormExampleFieldDisabled.js
│ │ │ │ ├── FormExampleFieldError.js
│ │ │ │ ├── FormExampleFieldReadOnly.js
│ │ │ │ ├── FormExampleLoading.js
│ │ │ │ ├── FormExampleSuccess.js
│ │ │ │ ├── FormExampleWarning.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── FormExampleForm.js
│ │ │ │ ├── FormExampleOnSubmit.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── FormExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Grid
│ │ │ ├── Content
│ │ │ │ ├── GridExampleColumns.js
│ │ │ │ ├── GridExampleRows.js
│ │ │ │ └── index.js
│ │ │ ├── ResponsiveVariations
│ │ │ │ ├── GridExampleDeviceVisibility.js
│ │ │ │ ├── GridExampleDoubling.js
│ │ │ │ ├── GridExampleResponsiveWidth.js
│ │ │ │ ├── GridExampleReversedComputer.js
│ │ │ │ ├── GridExampleReversedComputerVertically.js
│ │ │ │ ├── GridExampleReversedMobile.js
│ │ │ │ ├── GridExampleReversedMobileVertically.js
│ │ │ │ ├── GridExampleReversedTablet.js
│ │ │ │ ├── GridExampleReversedTabletVertically.js
│ │ │ │ ├── GridExampleStackable.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── GridExampleCelled.js
│ │ │ │ ├── GridExampleCelledInternally.js
│ │ │ │ ├── GridExampleDividedNumber.js
│ │ │ │ ├── GridExampleDividedPhrase.js
│ │ │ │ ├── GridExampleDividedVertically.js
│ │ │ │ ├── GridExampleGrid.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── GridExampleCentered.js
│ │ │ │ ├── GridExampleColoredColumn.js
│ │ │ │ ├── GridExampleColoredRow.js
│ │ │ │ ├── GridExampleColumnCount.js
│ │ │ │ ├── GridExampleColumnWidth.js
│ │ │ │ ├── GridExampleEqualWidthColumn.js
│ │ │ │ ├── GridExampleEqualWidthRow.js
│ │ │ │ ├── GridExampleFloated.js
│ │ │ │ ├── GridExamplePadded.js
│ │ │ │ ├── GridExamplePaddedHorizontally.js
│ │ │ │ ├── GridExamplePaddedVertically.js
│ │ │ │ ├── GridExampleRelaxed.js
│ │ │ │ ├── GridExampleRelaxedVery.js
│ │ │ │ ├── GridExampleStretched.js
│ │ │ │ ├── GridExampleStretchedEqual.js
│ │ │ │ ├── GridExampleTextAlignmentCenter.js
│ │ │ │ ├── GridExampleTextAlignmentMixed.js
│ │ │ │ ├── GridExampleTextAlignmentRight.js
│ │ │ │ ├── GridExampleVerticalAlignment.js
│ │ │ │ ├── GridExampleVerticalAlignmentRow.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Menu
│ │ │ ├── Content
│ │ │ │ ├── MenuExampleButtons.js
│ │ │ │ ├── MenuExampleDropdownItem.js
│ │ │ │ ├── MenuExampleHeader.js
│ │ │ │ ├── MenuExampleHeaderVertical.js
│ │ │ │ ├── MenuExampleInputs.js
│ │ │ │ ├── MenuExampleLinkItem.js
│ │ │ │ ├── MenuExampleMenus.js
│ │ │ │ ├── MenuExampleSubMenu.js
│ │ │ │ ├── MenuExampleText.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── MenuExampleActive.js
│ │ │ │ ├── MenuExampleHover.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── MenuExampleAttached.js
│ │ │ │ ├── MenuExampleBasic.js
│ │ │ │ ├── MenuExampleContentProp.js
│ │ │ │ ├── MenuExampleNameProp.js
│ │ │ │ ├── MenuExamplePagination.js
│ │ │ │ ├── MenuExamplePointing.js
│ │ │ │ ├── MenuExampleProps.js
│ │ │ │ ├── MenuExampleSecondary.js
│ │ │ │ ├── MenuExampleSecondaryPointing.js
│ │ │ │ ├── MenuExampleTabular.js
│ │ │ │ ├── MenuExampleTabularOnBottom.js
│ │ │ │ ├── MenuExampleTabularOnLeft.js
│ │ │ │ ├── MenuExampleTabularOnRight.js
│ │ │ │ ├── MenuExampleTabularOnTop.js
│ │ │ │ ├── MenuExampleText.js
│ │ │ │ ├── MenuExampleVertical.js
│ │ │ │ ├── MenuExampleVerticalDropdown.js
│ │ │ │ ├── MenuExampleVerticalPointing.js
│ │ │ │ ├── MenuExampleVerticalSecondary.js
│ │ │ │ ├── MenuExampleVerticalText.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── MenuExampleAttachedTabular.js
│ │ │ │ ├── MenuExampleAttachedToSegment.js
│ │ │ │ ├── MenuExampleBorderless.js
│ │ │ │ ├── MenuExampleColored.js
│ │ │ │ ├── MenuExampleColoredInverted.js
│ │ │ │ ├── MenuExampleColoredInvertedMenus.js
│ │ │ │ ├── MenuExampleColoredMenus.js
│ │ │ │ ├── MenuExampleCompact.js
│ │ │ │ ├── MenuExampleCompactVertical.js
│ │ │ │ ├── MenuExampleEvenlyDivided.js
│ │ │ │ ├── MenuExampleFitted.js
│ │ │ │ ├── MenuExampleFixed.js
│ │ │ │ ├── MenuExampleFluid.js
│ │ │ │ ├── MenuExampleIcons.js
│ │ │ │ ├── MenuExampleIconsVertical.js
│ │ │ │ ├── MenuExampleInverted.js
│ │ │ │ ├── MenuExampleInvertedPointing.js
│ │ │ │ ├── MenuExampleInvertedSecondary.js
│ │ │ │ ├── MenuExampleInvertedSegment.js
│ │ │ │ ├── MenuExampleInvertedVertical.js
│ │ │ │ ├── MenuExampleLabeledIcons.js
│ │ │ │ ├── MenuExampleLabeledIconsVertical.js
│ │ │ │ ├── MenuExampleSizeHuge.js
│ │ │ │ ├── MenuExampleSizeLarge.js
│ │ │ │ ├── MenuExampleSizeMassive.js
│ │ │ │ ├── MenuExampleSizeMini.js
│ │ │ │ ├── MenuExampleSizeSmall.js
│ │ │ │ ├── MenuExampleSizeTiny.js
│ │ │ │ ├── MenuExampleSizeVerticalLarge.js
│ │ │ │ ├── MenuExampleSizeVerticalMassive.js
│ │ │ │ ├── MenuExampleSizeVerticalMini.js
│ │ │ │ ├── MenuExampleSizeVerticalSmall.js
│ │ │ │ ├── MenuExampleStackable.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Message
│ │ │ ├── States
│ │ │ │ ├── MessageExampleHidden.js
│ │ │ │ ├── MessageExampleVisible.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── MessageExampleDismissibleBlock.js
│ │ │ │ ├── MessageExampleIcon.js
│ │ │ │ ├── MessageExampleIconProp.js
│ │ │ │ ├── MessageExampleList.js
│ │ │ │ ├── MessageExampleListItemsProp.js
│ │ │ │ ├── MessageExampleListProp.js
│ │ │ │ ├── MessageExampleMessage.js
│ │ │ │ ├── MessageExampleMessageProps.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── MessageExampleAttached.js
│ │ │ │ ├── MessageExampleColor.js
│ │ │ │ ├── MessageExampleCompact.js
│ │ │ │ ├── MessageExampleCompactProps.js
│ │ │ │ ├── MessageExampleError.js
│ │ │ │ ├── MessageExampleFloating.js
│ │ │ │ ├── MessageExampleFloatingProps.js
│ │ │ │ ├── MessageExampleInfo.js
│ │ │ │ ├── MessageExampleInfoProps.js
│ │ │ │ ├── MessageExampleNegative.js
│ │ │ │ ├── MessageExamplePositive.js
│ │ │ │ ├── MessageExampleSize.js
│ │ │ │ ├── MessageExampleSuccess.js
│ │ │ │ ├── MessageExampleWarning.js
│ │ │ │ ├── MessageExampleWarningProps.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── Table
│ │ │ ├── States
│ │ │ ├── TableExampleActive.js
│ │ │ ├── TableExampleDisabled.js
│ │ │ ├── TableExampleError.js
│ │ │ ├── TableExamplePositiveNegative.js
│ │ │ ├── TableExampleWarning.js
│ │ │ ├── TableExampleWarningShorthand.js
│ │ │ └── index.js
│ │ │ ├── Types
│ │ │ ├── TableExampleApprove.js
│ │ │ ├── TableExampleCollapsing.js
│ │ │ ├── TableExampleDefinition.js
│ │ │ ├── TableExamplePadded.js
│ │ │ ├── TableExamplePagination.js
│ │ │ ├── TableExampleStriped.js
│ │ │ ├── TableExampleStructured.js
│ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ ├── TableExampleAttached.js
│ │ │ ├── TableExampleBasic.js
│ │ │ ├── TableExampleCelled.js
│ │ │ ├── TableExampleCollapsing.js
│ │ │ ├── TableExampleCollapsingCell.js
│ │ │ ├── TableExampleColors.js
│ │ │ ├── TableExampleColumnCount.js
│ │ │ ├── TableExampleColumnWidth.js
│ │ │ ├── TableExampleCompact.js
│ │ │ ├── TableExampleFixed.js
│ │ │ ├── TableExampleFixedLine.js
│ │ │ ├── TableExampleFullWidth.js
│ │ │ ├── TableExampleInverted.js
│ │ │ ├── TableExampleInvertedColors.js
│ │ │ ├── TableExampleLarge.js
│ │ │ ├── TableExamplePadded.js
│ │ │ ├── TableExampleSelectableCell.js
│ │ │ ├── TableExampleSelectableInvertedRow.js
│ │ │ ├── TableExampleSelectableRow.js
│ │ │ ├── TableExampleSingleLine.js
│ │ │ ├── TableExampleSmall.js
│ │ │ ├── TableExampleStackable.js
│ │ │ ├── TableExampleStriped.js
│ │ │ ├── TableExampleTextAlign.js
│ │ │ ├── TableExampleUnstackable.js
│ │ │ ├── TableExampleVerticalAlign.js
│ │ │ ├── TableExampleVeryBasic.js
│ │ │ ├── TableExampleVeryCompact.js
│ │ │ ├── TableExampleVeryPadded.js
│ │ │ └── index.js
│ │ │ └── index.js
│ ├── elements
│ │ ├── Button
│ │ │ ├── Content
│ │ │ │ ├── ButtonExampleConditionals.js
│ │ │ │ ├── ButtonExampleMultipleConditionals.js
│ │ │ │ └── index.js
│ │ │ ├── GroupVariations
│ │ │ │ ├── ButtonExampleGroupBasic.js
│ │ │ │ ├── ButtonExampleGroupBasicColored.js
│ │ │ │ ├── ButtonExampleGroupColored.js
│ │ │ │ ├── ButtonExampleGroupEqualWidth.js
│ │ │ │ ├── ButtonExampleGroupIcon.js
│ │ │ │ ├── ButtonExampleGroupIconShorthand.js
│ │ │ │ ├── ButtonExampleGroupIconSize.js
│ │ │ │ ├── ButtonExampleGroupLabeledIcon.js
│ │ │ │ ├── ButtonExampleGroupMixed.js
│ │ │ │ ├── ButtonExampleGroupOrSize.js
│ │ │ │ ├── ButtonExampleGroupSize.js
│ │ │ │ ├── ButtonExampleGroupVertical.js
│ │ │ │ └── index.js
│ │ │ ├── Groups
│ │ │ │ ├── ButtonExampleGroup.js
│ │ │ │ ├── ButtonExampleGroupIcon.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── ButtonExampleActive.js
│ │ │ │ ├── ButtonExampleDisabled.js
│ │ │ │ ├── ButtonExampleLoading.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── ButtonExampleAnimated.js
│ │ │ │ ├── ButtonExampleBasic.js
│ │ │ │ ├── ButtonExampleButton.js
│ │ │ │ ├── ButtonExampleContentProp.js
│ │ │ │ ├── ButtonExampleEmphasis.js
│ │ │ │ ├── ButtonExampleIcon.js
│ │ │ │ ├── ButtonExampleIconProp.js
│ │ │ │ ├── ButtonExampleInverted.js
│ │ │ │ ├── ButtonExampleLabeled.js
│ │ │ │ ├── ButtonExampleLabeledBasic.js
│ │ │ │ ├── ButtonExampleLabeledIcon.js
│ │ │ │ ├── ButtonExampleLabeledProps.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ButtonExampleCircular.js
│ │ │ │ ├── ButtonExampleCircularSocial.js
│ │ │ │ ├── ButtonExampleColored.js
│ │ │ │ ├── ButtonExampleCompact.js
│ │ │ │ ├── ButtonExampleFloated.js
│ │ │ │ ├── ButtonExampleFluid.js
│ │ │ │ ├── ButtonExampleHorizontallyAttached.js
│ │ │ │ ├── ButtonExampleNegative.js
│ │ │ │ ├── ButtonExamplePositive.js
│ │ │ │ ├── ButtonExampleSize.js
│ │ │ │ ├── ButtonExampleSocial.js
│ │ │ │ ├── ButtonExampleToggle.js
│ │ │ │ ├── ButtonExampleVerticallyAttached.js
│ │ │ │ ├── ButtonExampleVerticallyAttachedGroup.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Container
│ │ │ ├── Types
│ │ │ │ ├── ContainerExampleContainer.js
│ │ │ │ ├── ContainerExampleText.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ContainerExampleAlignment.js
│ │ │ │ ├── ContainerExampleFluid.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Divider
│ │ │ ├── Types
│ │ │ │ ├── DividerExampleDivider.js
│ │ │ │ ├── DividerExampleHorizontal.js
│ │ │ │ ├── DividerExampleVertical.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── DividerExampleClearing.js
│ │ │ │ ├── DividerExampleFitted.js
│ │ │ │ ├── DividerExampleHidden.js
│ │ │ │ ├── DividerExampleInverted.js
│ │ │ │ ├── DividerExampleSection.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Flag
│ │ │ ├── Types
│ │ │ │ ├── FlagExampleFlag.js
│ │ │ │ ├── FlagExampleTable.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Header
│ │ │ ├── Content
│ │ │ │ ├── HeaderExampleIconProp.js
│ │ │ │ ├── HeaderExampleImage.js
│ │ │ │ ├── HeaderExampleImageProp.js
│ │ │ │ ├── HeaderExamplePlugIcon.js
│ │ │ │ ├── HeaderExampleSettingsIcon.js
│ │ │ │ ├── HeaderExampleSubheader.js
│ │ │ │ ├── HeaderExampleSubheaderProp.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── HeaderExampleDisabled.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── HeaderExampleContent.js
│ │ │ │ ├── HeaderExamplePage.js
│ │ │ │ ├── HeaderExampleSettingsIcon.js
│ │ │ │ ├── HeaderExampleSubheaders.js
│ │ │ │ ├── HeaderExampleUsersIcon.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── HeaderExampleAttached.js
│ │ │ │ ├── HeaderExampleBlock.js
│ │ │ │ ├── HeaderExampleColored.js
│ │ │ │ ├── HeaderExampleDividing.js
│ │ │ │ ├── HeaderExampleFloating.js
│ │ │ │ ├── HeaderExampleInverted.js
│ │ │ │ ├── HeaderExampleTextAlignment.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Icon
│ │ │ ├── Groups
│ │ │ │ ├── IconExampleCornerGroup.js
│ │ │ │ ├── IconExampleIconGroup.js
│ │ │ │ ├── IconExampleLoadingGroup.js
│ │ │ │ ├── IconExampleTwitterGroup.js
│ │ │ │ └── index.js
│ │ │ ├── IconSet
│ │ │ │ ├── IconExampleAccessibility.js
│ │ │ │ ├── IconExampleAudio.js
│ │ │ │ ├── IconExampleBrands.js
│ │ │ │ ├── IconExampleComputer.js
│ │ │ │ ├── IconExampleComputerAndFileSystem.js
│ │ │ │ ├── IconExampleCurrency.js
│ │ │ │ ├── IconExampleGenderAndSexuality.js
│ │ │ │ ├── IconExampleItemSelection.js
│ │ │ │ ├── IconExampleLayoutAdjustment.js
│ │ │ │ ├── IconExampleMap.js
│ │ │ │ ├── IconExampleMedia.js
│ │ │ │ ├── IconExampleMessage.js
│ │ │ │ ├── IconExampleMobile.js
│ │ │ │ ├── IconExampleObjects.js
│ │ │ │ ├── IconExamplePaymentOptions.js
│ │ │ │ ├── IconExamplePointers.js
│ │ │ │ ├── IconExampleRating.js
│ │ │ │ ├── IconExampleShapes.js
│ │ │ │ ├── IconExampleTables.js
│ │ │ │ ├── IconExampleTechnologies.js
│ │ │ │ ├── IconExampleTextEditor.js
│ │ │ │ ├── IconExampleUserActions.js
│ │ │ │ ├── IconExampleUserTypes.js
│ │ │ │ ├── IconExampleWebContent.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── IconExampleDisabled.js
│ │ │ │ ├── IconExampleLoading.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── IconExampleBordered.js
│ │ │ │ ├── IconExampleCircular.js
│ │ │ │ ├── IconExampleColored.js
│ │ │ │ ├── IconExampleFitted.js
│ │ │ │ ├── IconExampleFlipped.js
│ │ │ │ ├── IconExampleInvertedColored.js
│ │ │ │ ├── IconExampleLink.js
│ │ │ │ ├── IconExampleRotated.js
│ │ │ │ ├── IconExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Image
│ │ │ ├── Groups
│ │ │ │ ├── ImageExampleGroupSize.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── ImageExampleDisabled.js
│ │ │ │ ├── ImageExampleHidden.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── ImageExampleImage.js
│ │ │ │ ├── ImageExampleLink.js
│ │ │ │ ├── ImageExampleWrapped.js
│ │ │ │ └── index.js
│ │ │ ├── Usage
│ │ │ │ ├── ImageExampleChildren.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ImageExampleAvatar.js
│ │ │ │ ├── ImageExampleBordered.js
│ │ │ │ ├── ImageExampleCentered.js
│ │ │ │ ├── ImageExampleCircular.js
│ │ │ │ ├── ImageExampleFloated.js
│ │ │ │ ├── ImageExampleFluid.js
│ │ │ │ ├── ImageExampleRounded.js
│ │ │ │ ├── ImageExampleSize.js
│ │ │ │ ├── ImageExampleSpaced.js
│ │ │ │ ├── ImageExampleVerticallyAligned.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Input
│ │ │ ├── States
│ │ │ │ ├── InputExampleDisabled.js
│ │ │ │ ├── InputExampleError.js
│ │ │ │ ├── InputExampleFocus.js
│ │ │ │ ├── InputExampleLeftLoading.js
│ │ │ │ ├── InputExampleLoading.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── InputExampleInput.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── InputExampleAction.js
│ │ │ │ ├── InputExampleActionDropdown.js
│ │ │ │ ├── InputExampleActionIconButton.js
│ │ │ │ ├── InputExampleActionLabeledButton.js
│ │ │ │ ├── InputExampleActions.js
│ │ │ │ ├── InputExampleFluid.js
│ │ │ │ ├── InputExampleIcon.js
│ │ │ │ ├── InputExampleIconChild.js
│ │ │ │ ├── InputExampleIconElement.js
│ │ │ │ ├── InputExampleIconPosition.js
│ │ │ │ ├── InputExampleIconProps.js
│ │ │ │ ├── InputExampleInverted.js
│ │ │ │ ├── InputExampleLabeled.js
│ │ │ │ ├── InputExampleLeftActionLabeledButton.js
│ │ │ │ ├── InputExampleLeftCornerLabeled.js
│ │ │ │ ├── InputExampleRightCornerLabeled.js
│ │ │ │ ├── InputExampleRightLabeled.js
│ │ │ │ ├── InputExampleRightLabeledBasic.js
│ │ │ │ ├── InputExampleRightLabeledTag.js
│ │ │ │ ├── InputExampleRightLeftLabeled.js
│ │ │ │ ├── InputExampleSize.js
│ │ │ │ ├── InputExampleTransparent.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Label
│ │ │ ├── Content
│ │ │ │ ├── LabelExampleDetail.js
│ │ │ │ ├── LabelExampleIcon.js
│ │ │ │ ├── LabelExampleIconShorthand.js
│ │ │ │ ├── LabelExampleImage.js
│ │ │ │ ├── LabelExampleImageShorthand.js
│ │ │ │ ├── LabelExampleLink.js
│ │ │ │ ├── LabelExampleLinkDetail.js
│ │ │ │ └── index.js
│ │ │ ├── Groups
│ │ │ │ ├── LabelExampleGroupCircular.js
│ │ │ │ ├── LabelExampleGroupColored.js
│ │ │ │ ├── LabelExampleGroupSize.js
│ │ │ │ ├── LabelExampleGroupTag.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── LabelExampleAttached.js
│ │ │ │ ├── LabelExampleBasic.js
│ │ │ │ ├── LabelExampleCorner.js
│ │ │ │ ├── LabelExampleFloating.js
│ │ │ │ ├── LabelExampleHorizontal.js
│ │ │ │ ├── LabelExampleIcon.js
│ │ │ │ ├── LabelExampleImage.js
│ │ │ │ ├── LabelExampleImageColored.js
│ │ │ │ ├── LabelExamplePointing.js
│ │ │ │ ├── LabelExamplePointingColored.js
│ │ │ │ ├── LabelExampleRibbon.js
│ │ │ │ ├── LabelExampleRibbonImage.js
│ │ │ │ ├── LabelExampleTag.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── LabelExampleBasic.js
│ │ │ │ ├── LabelExampleCircular.js
│ │ │ │ ├── LabelExampleCircularEmpty.js
│ │ │ │ ├── LabelExampleColored.js
│ │ │ │ ├── LabelExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── List
│ │ │ ├── Content
│ │ │ │ ├── ListExampleDescription.js
│ │ │ │ ├── ListExampleHeader.js
│ │ │ │ ├── ListExampleIcon.js
│ │ │ │ ├── ListExampleImage.js
│ │ │ │ ├── ListExampleItem.js
│ │ │ │ ├── ListExampleLink.js
│ │ │ │ ├── ListExampleLinkComplex.js
│ │ │ │ └── index.js
│ │ │ ├── ContentVariations
│ │ │ │ ├── ListExampleFloated.js
│ │ │ │ ├── ListExampleFloatedHorizontal.js
│ │ │ │ ├── ListExampleVerticallyAligned.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── ListExampleBasic.js
│ │ │ │ ├── ListExampleBasicShorthand.js
│ │ │ │ ├── ListExampleBulleted.js
│ │ │ │ ├── ListExampleBulletedHorizontal.js
│ │ │ │ ├── ListExampleBulletedSimple.js
│ │ │ │ ├── ListExampleDivided.js
│ │ │ │ ├── ListExampleIcon.js
│ │ │ │ ├── ListExampleIconShorthand.js
│ │ │ │ ├── ListExampleLink.js
│ │ │ │ ├── ListExampleOrdered.js
│ │ │ │ ├── ListExampleOrderedSimple.js
│ │ │ │ ├── ListExampleOrderedValue.js
│ │ │ │ ├── ListExampleTree.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ListExampleAnimated.js
│ │ │ │ ├── ListExampleCelled.js
│ │ │ │ ├── ListExampleCelledHorizontal.js
│ │ │ │ ├── ListExampleCelledOrdered.js
│ │ │ │ ├── ListExampleDivided.js
│ │ │ │ ├── ListExampleHorizontal.js
│ │ │ │ ├── ListExampleHorizontalBulleted.js
│ │ │ │ ├── ListExampleHorizontalOrdered.js
│ │ │ │ ├── ListExampleInverted.js
│ │ │ │ ├── ListExampleRelaxed.js
│ │ │ │ ├── ListExampleRelaxedHorizontal.js
│ │ │ │ ├── ListExampleSelection.js
│ │ │ │ ├── ListExampleSizes.js
│ │ │ │ ├── ListExampleVeryRelaxed.js
│ │ │ │ ├── ListExampleVeryRelaxedHorizontal.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Loader
│ │ │ ├── States
│ │ │ │ ├── LoaderExampleActive.js
│ │ │ │ ├── LoaderExampleDisabled.js
│ │ │ │ ├── LoaderExampleIndeterminate.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── LoaderExampleLoader.js
│ │ │ │ ├── LoaderExampleText.js
│ │ │ │ ├── LoaderExampleTextShorthand.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── LoaderExampleInline.js
│ │ │ │ ├── LoaderExampleInlineCentered.js
│ │ │ │ ├── LoaderExampleInverted.js
│ │ │ │ ├── LoaderExampleSizes.js
│ │ │ │ ├── LoaderExampleSizesInverted.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Rail
│ │ │ ├── Types
│ │ │ │ ├── RailExampleDividing.js
│ │ │ │ ├── RailExampleInternal.js
│ │ │ │ ├── RailExampleRail.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── RailExampleAttached.js
│ │ │ │ ├── RailExampleAttachedInternal.js
│ │ │ │ ├── RailExampleClose.js
│ │ │ │ ├── RailExampleCloseVery.js
│ │ │ │ ├── RailExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Reveal
│ │ │ ├── Content
│ │ │ │ ├── RevealExampleHidden.js
│ │ │ │ ├── RevealExampleVisible.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── RevealExampleActive.js
│ │ │ │ ├── RevealExampleDisabled.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── RevealExampleFade.js
│ │ │ │ ├── RevealExampleFadeSmall.js
│ │ │ │ ├── RevealExampleMove.js
│ │ │ │ ├── RevealExampleMoveDown.js
│ │ │ │ ├── RevealExampleMoveRight.js
│ │ │ │ ├── RevealExampleMoveUp.js
│ │ │ │ ├── RevealExampleRotate.js
│ │ │ │ ├── RevealExampleRotateLeft.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── RevealExampleInstant.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Segment
│ │ │ ├── Groups
│ │ │ │ ├── SegmentExampleHorizontalSegments.js
│ │ │ │ ├── SegmentExampleNestedSegments.js
│ │ │ │ ├── SegmentExamplePiledSegments.js
│ │ │ │ ├── SegmentExampleRaisedSegments.js
│ │ │ │ ├── SegmentExampleSegments.js
│ │ │ │ ├── SegmentExampleStackedSegments.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── SegmentExampleDisabled.js
│ │ │ │ ├── SegmentExampleLoading.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── SegmentExamplePiled.js
│ │ │ │ ├── SegmentExampleRaised.js
│ │ │ │ ├── SegmentExampleSegment.js
│ │ │ │ ├── SegmentExampleStacked.js
│ │ │ │ ├── SegmentExampleVerticalSegment.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── SegmentExampleAttached.js
│ │ │ │ ├── SegmentExampleAttachedComplex.js
│ │ │ │ ├── SegmentExampleBasic.js
│ │ │ │ ├── SegmentExampleCircular.js
│ │ │ │ ├── SegmentExampleClearing.js
│ │ │ │ ├── SegmentExampleColored.js
│ │ │ │ ├── SegmentExampleColoredInverted.js
│ │ │ │ ├── SegmentExampleCompact.js
│ │ │ │ ├── SegmentExampleCompactGroup.js
│ │ │ │ ├── SegmentExampleEmphasis.js
│ │ │ │ ├── SegmentExampleEmphasisColoredInverted.js
│ │ │ │ ├── SegmentExampleEmphasisInverted.js
│ │ │ │ ├── SegmentExampleFloated.js
│ │ │ │ ├── SegmentExampleGroupSizes.js
│ │ │ │ ├── SegmentExampleInverted.js
│ │ │ │ ├── SegmentExamplePadded.js
│ │ │ │ ├── SegmentExampleSizes.js
│ │ │ │ ├── SegmentExampleTextAlignment.js
│ │ │ │ ├── SegmentExampleVeryPadded.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── Step
│ │ │ ├── Content
│ │ │ ├── StepExampleDescriptions.js
│ │ │ ├── StepExampleIcons.js
│ │ │ ├── StepExampleLinks.js
│ │ │ └── index.js
│ │ │ ├── Groups
│ │ │ ├── StepExampleGroups.js
│ │ │ ├── StepExampleOrdered.js
│ │ │ ├── StepExampleVertical.js
│ │ │ └── index.js
│ │ │ ├── States
│ │ │ ├── StepExampleActive.js
│ │ │ ├── StepExampleCompleted.js
│ │ │ ├── StepExampleDisabled.js
│ │ │ └── index.js
│ │ │ ├── Types
│ │ │ ├── StepExampleBasic.js
│ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ ├── StepExampleFluid.js
│ │ │ ├── StepExampleSizes.js
│ │ │ ├── StepExampleStackable.js
│ │ │ └── index.js
│ │ │ └── index.js
│ ├── modules
│ │ ├── Accordion
│ │ │ ├── Types
│ │ │ │ ├── AccordionExampleActiveIndex.js
│ │ │ │ ├── AccordionExamplePanelsProp.js
│ │ │ │ ├── AccordionExampleStandard.js
│ │ │ │ ├── AccordionExampleStyled.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── AccordionExampleFluid.js
│ │ │ │ ├── AccordionExampleInverted.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Checkbox
│ │ │ ├── States
│ │ │ │ ├── CheckboxExampleChecked.js
│ │ │ │ ├── CheckboxExampleDisabled.js
│ │ │ │ ├── CheckboxExampleReadOnly.js
│ │ │ │ ├── CheckboxExampleRemoteControl.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── CheckboxExampleCheckbox.js
│ │ │ │ ├── CheckboxExampleRadio.js
│ │ │ │ ├── CheckboxExampleRadioGroup.js
│ │ │ │ ├── CheckboxExampleSlider.js
│ │ │ │ ├── CheckboxExampleToggle.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── CheckboxExampleFitted.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Dimmer
│ │ │ ├── States
│ │ │ │ ├── DimmerExampleActive.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── DimmerExampleContent.js
│ │ │ │ ├── DimmerExampleDimmer.js
│ │ │ │ ├── DimmerExamplePage.js
│ │ │ │ └── index.js
│ │ │ ├── Usage
│ │ │ │ ├── DimmerExampleEvents.js
│ │ │ │ ├── DimmerExampleLoader.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── DimmerExampleBlurring.js
│ │ │ │ ├── DimmerExampleBlurringInverted.js
│ │ │ │ ├── DimmerExampleInverted.js
│ │ │ │ ├── DimmerExampleSimple.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Dropdown
│ │ │ ├── Content
│ │ │ │ ├── DropdownExampleDescription.js
│ │ │ │ ├── DropdownExampleDivider.js
│ │ │ │ ├── DropdownExampleFloatedContent.js
│ │ │ │ ├── DropdownExampleHeader.js
│ │ │ │ ├── DropdownExampleIcon.js
│ │ │ │ ├── DropdownExampleImage.js
│ │ │ │ ├── DropdownExampleInput.js
│ │ │ │ ├── DropdownExampleLabel.js
│ │ │ │ ├── DropdownExampleMessage.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── DropdownExampleActive.js
│ │ │ │ ├── DropdownExampleDisabled.js
│ │ │ │ ├── DropdownExampleDisabledItem.js
│ │ │ │ ├── DropdownExampleError.js
│ │ │ │ ├── DropdownExampleLoading.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── DropdownExampleDropdown.js
│ │ │ │ ├── DropdownExampleFloating.js
│ │ │ │ ├── DropdownExampleInline.js
│ │ │ │ ├── DropdownExampleInlineTwo.js
│ │ │ │ ├── DropdownExampleMultipleSearchInMenu.js
│ │ │ │ ├── DropdownExampleMultipleSearchSelection.js
│ │ │ │ ├── DropdownExampleMultipleSearchSelectionTwo.js
│ │ │ │ ├── DropdownExampleMultipleSelection.js
│ │ │ │ ├── DropdownExamplePointing.js
│ │ │ │ ├── DropdownExamplePointingTwo.js
│ │ │ │ ├── DropdownExampleSearchDropdown.js
│ │ │ │ ├── DropdownExampleSearchInMenu.js
│ │ │ │ ├── DropdownExampleSearchSelection.js
│ │ │ │ ├── DropdownExampleSearchSelectionTwo.js
│ │ │ │ ├── DropdownExampleSelection.js
│ │ │ │ ├── DropdownExampleSimple.js
│ │ │ │ └── index.js
│ │ │ ├── Usage
│ │ │ │ ├── DropdownExampleAdditionLabelComponent.js
│ │ │ │ ├── DropdownExampleAdditionLabelString.js
│ │ │ │ ├── DropdownExampleAllowAdditions.js
│ │ │ │ ├── DropdownExampleItemContent.js
│ │ │ │ ├── DropdownExampleMultipleAllowAdditions.js
│ │ │ │ ├── DropdownExampleMultipleCustomLabel.js
│ │ │ │ ├── DropdownExampleRemote.js
│ │ │ │ ├── DropdownExampleTrigger.js
│ │ │ │ ├── DropdownExampleTriggerImage.js
│ │ │ │ ├── DropdownExampleUncontrolled.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── DropdownExampleCompact.js
│ │ │ │ ├── DropdownExampleFluid.js
│ │ │ │ ├── DropdownExampleMenuDirection.js
│ │ │ │ ├── DropdownExampleMenuDirectionLeft.js
│ │ │ │ ├── DropdownExampleScrolling.js
│ │ │ │ ├── DropdownExampleSearchInMenuScrolling.js
│ │ │ │ └── index.js
│ │ │ ├── common.js
│ │ │ └── index.js
│ │ ├── Embed
│ │ │ ├── States
│ │ │ │ ├── EmbedExampleActive.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── EmbedExampleCustom.js
│ │ │ │ ├── EmbedExampleVimeo.js
│ │ │ │ ├── EmbedExampleYoutube.js
│ │ │ │ └── index.js
│ │ │ ├── Usage
│ │ │ │ ├── EmbedExampleSettings.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── EmbedExampleAspectRatio.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Modal
│ │ │ ├── Types
│ │ │ │ ├── ModalExampleBasic.js
│ │ │ │ ├── ModalExampleControlled.js
│ │ │ │ ├── ModalExampleModal.js
│ │ │ │ ├── ModalExampleMultiple.js
│ │ │ │ ├── ModalExampleScrolling.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ModalExampleCloseConfig.js
│ │ │ │ ├── ModalExampleCloseIcon.js
│ │ │ │ ├── ModalExampleDimmer.js
│ │ │ │ ├── ModalExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Popup
│ │ │ ├── Types
│ │ │ │ ├── PopupExample.js
│ │ │ │ ├── PopupExampleHtml.js
│ │ │ │ ├── PopupExampleTitled.js
│ │ │ │ └── index.js
│ │ │ ├── Usage
│ │ │ │ ├── PopupExampleClick.js
│ │ │ │ ├── PopupExampleControlled.js
│ │ │ │ ├── PopupExampleFocus.js
│ │ │ │ ├── PopupExampleHover.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── PopupExampleBasic.js
│ │ │ │ ├── PopupExampleFlowing.js
│ │ │ │ ├── PopupExampleHideOnScroll.js
│ │ │ │ ├── PopupExampleInverted.js
│ │ │ │ ├── PopupExampleOffset.js
│ │ │ │ ├── PopupExamplePosition.js
│ │ │ │ ├── PopupExampleSize.js
│ │ │ │ ├── PopupExampleStyle.js
│ │ │ │ ├── PopupExampleWide.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Progress
│ │ │ ├── Content
│ │ │ │ ├── ProgressExampleBar.js
│ │ │ │ ├── ProgressExampleLabel.js
│ │ │ │ ├── ProgressExampleProgress.js
│ │ │ │ └── index.js
│ │ │ ├── States
│ │ │ │ ├── ProgressExampleActive.js
│ │ │ │ ├── ProgressExampleDisabled.js
│ │ │ │ ├── ProgressExampleError.js
│ │ │ │ ├── ProgressExampleSuccess.js
│ │ │ │ ├── ProgressExampleWarning.js
│ │ │ │ └── index.js
│ │ │ ├── Types
│ │ │ │ ├── ProgressExampleAutoSuccess.js
│ │ │ │ ├── ProgressExampleIndicating.js
│ │ │ │ ├── ProgressExampleStandard.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── ProgressExampleAttached.js
│ │ │ │ ├── ProgressExampleColor.js
│ │ │ │ ├── ProgressExampleInverted.js
│ │ │ │ ├── ProgressExampleInvertedColor.js
│ │ │ │ ├── ProgressExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Rating
│ │ │ ├── Types
│ │ │ │ ├── RatingExampleClearable.js
│ │ │ │ ├── RatingExampleControlled.js
│ │ │ │ ├── RatingExampleDisabled.js
│ │ │ │ ├── RatingExampleHeart.js
│ │ │ │ ├── RatingExampleOnRate.js
│ │ │ │ ├── RatingExampleRating.js
│ │ │ │ ├── RatingExampleStar.js
│ │ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ │ ├── RatingExampleSize.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── Search
│ │ │ ├── Types
│ │ │ ├── SearchExampleCategory.js
│ │ │ ├── SearchExampleCategoryCustom.js
│ │ │ ├── SearchExampleStandard.js
│ │ │ ├── SearchExampleStandardCustom.js
│ │ │ └── index.js
│ │ │ ├── Variations
│ │ │ ├── SearchExampleAligned.js
│ │ │ ├── SearchExampleFluid.js
│ │ │ └── index.js
│ │ │ └── index.js
│ └── views
│ │ ├── Card
│ │ ├── Content
│ │ │ ├── CardExampleContentBlock.js
│ │ │ ├── CardExampleExtraContent.js
│ │ │ ├── CardExampleHeaderCard.js
│ │ │ ├── CardExampleImageCard.js
│ │ │ ├── CardExampleLinkCard.js
│ │ │ └── index.js
│ │ ├── Types
│ │ │ ├── CardExampleGroupProps.js
│ │ │ ├── CardExampleGroups.js
│ │ │ ├── CardExampleIndividualCard.js
│ │ │ ├── CardExampleIndividualCardProps.js
│ │ │ └── index.js
│ │ ├── Variations
│ │ │ ├── CardExampleColored.js
│ │ │ ├── CardExampleColumnCount.js
│ │ │ ├── CardExampleFluid.js
│ │ │ └── index.js
│ │ └── index.js
│ │ ├── Comment
│ │ ├── Content
│ │ │ ├── CommentExampleActions.js
│ │ │ ├── CommentExampleAvatar.js
│ │ │ ├── CommentExampleMetadata.js
│ │ │ ├── CommentExampleReplyForm.js
│ │ │ ├── CommentExampleReplyFormOuter.js
│ │ │ └── index.js
│ │ ├── States
│ │ │ ├── CommentExampleCollapsed.js
│ │ │ └── index.js
│ │ ├── Types
│ │ │ ├── CommentExampleComment.js
│ │ │ └── index.js
│ │ ├── Variations
│ │ │ ├── CommentExampleMinimal.js
│ │ │ ├── CommentExampleThreaded.js
│ │ │ └── index.js
│ │ └── index.js
│ │ ├── Feed
│ │ ├── Content
│ │ │ ├── FeedExampleContentDate.js
│ │ │ ├── FeedExampleContentDateShorthand.js
│ │ │ ├── FeedExampleDate.js
│ │ │ ├── FeedExampleDateShorthand.js
│ │ │ ├── FeedExampleExtraImages.js
│ │ │ ├── FeedExampleExtraImagesShorthand.js
│ │ │ ├── FeedExampleExtraText.js
│ │ │ ├── FeedExampleExtraTextShorthand.js
│ │ │ ├── FeedExampleIconLabel.js
│ │ │ ├── FeedExampleIconLabelShorthand.js
│ │ │ ├── FeedExampleImageLabel.js
│ │ │ ├── FeedExampleImageLabelShorthand.js
│ │ │ ├── FeedExampleSummaryDate.js
│ │ │ ├── FeedExampleSummaryDateShorthand.js
│ │ │ └── index.js
│ │ ├── Types
│ │ │ ├── FeedExampleBasic.js
│ │ │ ├── FeedExampleEventsProp.js
│ │ │ ├── FeedExampleShorthand.js
│ │ │ └── index.js
│ │ ├── Variations
│ │ │ ├── FeedExampleSizeLarge.js
│ │ │ ├── FeedExampleSizeSmall.js
│ │ │ └── index.js
│ │ └── index.js
│ │ ├── Item
│ │ ├── Content
│ │ │ ├── ItemExampleContents.js
│ │ │ ├── ItemExampleDescriptions.js
│ │ │ ├── ItemExampleExtraContent.js
│ │ │ ├── ItemExampleHeaders.js
│ │ │ ├── ItemExampleImages.js
│ │ │ ├── ItemExampleLink.js
│ │ │ ├── ItemExampleMetadata.js
│ │ │ ├── ItemExampleRatings.js
│ │ │ └── index.js
│ │ ├── Types
│ │ │ ├── ItemExampleItems.js
│ │ │ ├── ItemExampleProps.js
│ │ │ └── index.js
│ │ ├── Variations
│ │ │ ├── ItemExampleAlignment.js
│ │ │ ├── ItemExampleDivided.js
│ │ │ ├── ItemExampleFloated.js
│ │ │ ├── ItemExampleLink.js
│ │ │ ├── ItemExampleRelaxed.js
│ │ │ ├── ItemExampleVeryRelaxed.js
│ │ │ └── index.js
│ │ └── index.js
│ │ └── Statistic
│ │ ├── Content
│ │ ├── StatisticExampleLabels.js
│ │ ├── StatisticExampleProps.js
│ │ ├── StatisticExampleValues.js
│ │ └── index.js
│ │ ├── Types
│ │ ├── StatisticExampleBottomLabel.js
│ │ ├── StatisticExampleGroups.js
│ │ ├── StatisticExampleTopLabel.js
│ │ └── index.js
│ │ ├── Variations
│ │ ├── StatisticExampleColored.js
│ │ ├── StatisticExampleEvenlyDivided.js
│ │ ├── StatisticExampleFloated.js
│ │ ├── StatisticExampleHorizontal.js
│ │ ├── StatisticExampleHorizontalGroup.js
│ │ ├── StatisticExampleInverted.js
│ │ ├── StatisticExampleSize.js
│ │ ├── StatisticExampleSizeDivided.js
│ │ └── index.js
│ │ └── index.js
│ ├── Style.js
│ ├── Views
│ ├── Introduction.js
│ ├── PageNotFound.js
│ └── Usage.js
│ ├── assets
│ ├── images
│ │ ├── avatar
│ │ │ ├── large
│ │ │ │ ├── ade.jpg
│ │ │ │ ├── chris.jpg
│ │ │ │ ├── christian.jpg
│ │ │ │ ├── daniel.jpg
│ │ │ │ ├── elliot.jpg
│ │ │ │ ├── helen.jpg
│ │ │ │ ├── jenny.jpg
│ │ │ │ ├── joe.jpg
│ │ │ │ ├── justen.jpg
│ │ │ │ ├── laura.jpg
│ │ │ │ ├── matt.jpg
│ │ │ │ ├── nan.jpg
│ │ │ │ ├── nom.jpg
│ │ │ │ ├── steve.jpg
│ │ │ │ ├── stevie.jpg
│ │ │ │ ├── tom.jpg
│ │ │ │ ├── veronika.jpg
│ │ │ │ └── zoe.jpg
│ │ │ └── small
│ │ │ │ ├── ade.jpg
│ │ │ │ ├── chris.jpg
│ │ │ │ ├── christian.jpg
│ │ │ │ ├── daniel.jpg
│ │ │ │ ├── elliot.jpg
│ │ │ │ ├── helen.jpg
│ │ │ │ ├── jenny.jpg
│ │ │ │ ├── joe.jpg
│ │ │ │ ├── justen.jpg
│ │ │ │ ├── laura.jpg
│ │ │ │ ├── matt.jpg
│ │ │ │ ├── nan.jpg
│ │ │ │ ├── nom.jpg
│ │ │ │ ├── steve.jpg
│ │ │ │ ├── stevie.jpg
│ │ │ │ ├── tom.jpg
│ │ │ │ ├── veronika.jpg
│ │ │ │ └── zoe.jpg
│ │ └── wireframe
│ │ │ ├── centered-paragraph.png
│ │ │ ├── image-square.png
│ │ │ ├── image-text.png
│ │ │ ├── image.png
│ │ │ ├── media-paragraph-alt.png
│ │ │ ├── media-paragraph.png
│ │ │ ├── paragraph.png
│ │ │ ├── short-paragraph.png
│ │ │ ├── square-image.png
│ │ │ ├── text-image.png
│ │ │ └── white-image.png
│ └── technologyadvice-logo-dark.png
│ ├── index.ejs
│ ├── index.js
│ ├── logo.png
│ ├── routes.js
│ └── utils.js
├── gulp
├── plugins
│ └── gulp-react-docgen.js
└── tasks
│ ├── dll.js
│ ├── docs.js
│ └── umd.js
├── gulpfile.js
├── karma.conf.js
├── package.json
├── src
├── addons
│ ├── Confirm
│ │ ├── Confirm.js
│ │ └── index.js
│ ├── Portal
│ │ ├── Portal.js
│ │ └── index.js
│ ├── Radio
│ │ ├── Radio.js
│ │ └── index.js
│ ├── Select
│ │ ├── Select.js
│ │ └── index.js
│ └── TextArea
│ │ ├── TextArea.js
│ │ └── index.js
├── collections
│ ├── Breadcrumb
│ │ ├── Breadcrumb.js
│ │ ├── BreadcrumbDivider.js
│ │ ├── BreadcrumbSection.js
│ │ └── index.js
│ ├── Form
│ │ ├── Form.js
│ │ ├── FormButton.js
│ │ ├── FormCheckbox.js
│ │ ├── FormDropdown.js
│ │ ├── FormField.js
│ │ ├── FormGroup.js
│ │ ├── FormInput.js
│ │ ├── FormRadio.js
│ │ ├── FormSelect.js
│ │ ├── FormTextArea.js
│ │ └── index.js
│ ├── Grid
│ │ ├── Grid.js
│ │ ├── GridColumn.js
│ │ ├── GridRow.js
│ │ └── index.js
│ ├── Menu
│ │ ├── Menu.js
│ │ ├── MenuHeader.js
│ │ ├── MenuItem.js
│ │ ├── MenuMenu.js
│ │ └── index.js
│ ├── Message
│ │ ├── Message.js
│ │ ├── MessageContent.js
│ │ ├── MessageHeader.js
│ │ ├── MessageItem.js
│ │ ├── MessageList.js
│ │ └── index.js
│ └── Table
│ │ ├── Table.js
│ │ ├── TableBody.js
│ │ ├── TableCell.js
│ │ ├── TableFooter.js
│ │ ├── TableHeader.js
│ │ ├── TableHeaderCell.js
│ │ ├── TableRow.js
│ │ └── index.js
├── elements
│ ├── Button
│ │ ├── Button.js
│ │ ├── ButtonContent.js
│ │ ├── ButtonGroup.js
│ │ ├── ButtonOr.js
│ │ └── index.js
│ ├── Container
│ │ ├── Container.js
│ │ └── index.js
│ ├── Divider
│ │ ├── Divider.js
│ │ └── index.js
│ ├── Flag
│ │ ├── Flag.js
│ │ └── index.js
│ ├── Header
│ │ ├── Header.js
│ │ ├── HeaderContent.js
│ │ ├── HeaderSubheader.js
│ │ └── index.js
│ ├── Icon
│ │ ├── Icon.js
│ │ ├── IconGroup.js
│ │ └── index.js
│ ├── Image
│ │ ├── Image.js
│ │ ├── ImageGroup.js
│ │ └── index.js
│ ├── Input
│ │ ├── Input.js
│ │ └── index.js
│ ├── Label
│ │ ├── Label.js
│ │ ├── LabelDetail.js
│ │ ├── LabelGroup.js
│ │ └── index.js
│ ├── List
│ │ ├── List.js
│ │ ├── ListContent.js
│ │ ├── ListDescription.js
│ │ ├── ListHeader.js
│ │ ├── ListIcon.js
│ │ ├── ListItem.js
│ │ ├── ListList.js
│ │ └── index.js
│ ├── Loader
│ │ ├── Loader.js
│ │ └── index.js
│ ├── Rail
│ │ ├── Rail.js
│ │ └── index.js
│ ├── Reveal
│ │ ├── Reveal.js
│ │ ├── RevealContent.js
│ │ └── index.js
│ ├── Segment
│ │ ├── Segment.js
│ │ ├── SegmentGroup.js
│ │ └── index.js
│ └── Step
│ │ ├── Step.js
│ │ ├── StepContent.js
│ │ ├── StepDescription.js
│ │ ├── StepGroup.js
│ │ ├── StepTitle.js
│ │ └── index.js
├── index.js
├── lib
│ ├── AutoControlledComponent.js
│ ├── META.js
│ ├── SUI.js
│ ├── childrenUtils.js
│ ├── classNameBuilders.js
│ ├── customPropTypes.js
│ ├── debug.js
│ ├── factories.js
│ ├── getElementType.js
│ ├── getUnhandledProps.js
│ ├── index.js
│ ├── isBrowser.js
│ ├── keyboardKey.js
│ ├── numberToWord.js
│ └── objectDiff.js
├── modules
│ ├── Accordion
│ │ ├── Accordion.js
│ │ ├── AccordionContent.js
│ │ ├── AccordionTitle.js
│ │ └── index.js
│ ├── Checkbox
│ │ ├── Checkbox.js
│ │ └── index.js
│ ├── Dimmer
│ │ ├── Dimmer.js
│ │ ├── DimmerDimmable.js
│ │ └── index.js
│ ├── Dropdown
│ │ ├── Dropdown.js
│ │ ├── DropdownDivider.js
│ │ ├── DropdownHeader.js
│ │ ├── DropdownItem.js
│ │ ├── DropdownMenu.js
│ │ ├── TODO.md
│ │ └── index.js
│ ├── Embed
│ │ ├── Embed.js
│ │ └── index.js
│ ├── Modal
│ │ ├── Modal.js
│ │ ├── ModalActions.js
│ │ ├── ModalContent.js
│ │ ├── ModalDescription.js
│ │ ├── ModalHeader.js
│ │ └── index.js
│ ├── Popup
│ │ ├── Popup.js
│ │ ├── PopupContent.js
│ │ ├── PopupHeader.js
│ │ └── index.js
│ ├── Progress
│ │ ├── Progress.js
│ │ └── index.js
│ ├── Rating
│ │ ├── Rating.js
│ │ ├── RatingIcon.js
│ │ └── index.js
│ └── Search
│ │ ├── Search.js
│ │ ├── SearchCategory.js
│ │ ├── SearchResult.js
│ │ ├── SearchResults.js
│ │ └── index.js
├── umd.js
└── views
│ ├── Card
│ ├── Card.js
│ ├── CardContent.js
│ ├── CardDescription.js
│ ├── CardGroup.js
│ ├── CardHeader.js
│ ├── CardMeta.js
│ └── index.js
│ ├── Comment
│ ├── Comment.js
│ ├── CommentAction.js
│ ├── CommentActions.js
│ ├── CommentAuthor.js
│ ├── CommentAvatar.js
│ ├── CommentContent.js
│ ├── CommentGroup.js
│ ├── CommentMetadata.js
│ ├── CommentText.js
│ └── index.js
│ ├── Feed
│ ├── Feed.js
│ ├── FeedContent.js
│ ├── FeedDate.js
│ ├── FeedEvent.js
│ ├── FeedExtra.js
│ ├── FeedLabel.js
│ ├── FeedLike.js
│ ├── FeedMeta.js
│ ├── FeedSummary.js
│ ├── FeedUser.js
│ └── index.js
│ ├── Item
│ ├── Item.js
│ ├── ItemContent.js
│ ├── ItemDescription.js
│ ├── ItemExtra.js
│ ├── ItemGroup.js
│ ├── ItemHeader.js
│ ├── ItemImage.js
│ ├── ItemMeta.js
│ └── index.js
│ └── Statistic
│ ├── Statistic.js
│ ├── StatisticGroup.js
│ ├── StatisticLabel.js
│ ├── StatisticValue.js
│ └── index.js
├── test
├── .eslintrc
├── setup.js
├── specs
│ ├── addons
│ │ ├── Confirm-test.js
│ │ ├── Portal
│ │ │ └── Portal-test.js
│ │ ├── Radio
│ │ │ └── Radio-test.js
│ │ ├── Select
│ │ │ └── Select-test.js
│ │ └── TextArea-test.js
│ ├── collections
│ │ ├── Breadcrumb
│ │ │ ├── Breadcrumb-test.js
│ │ │ ├── BreadcrumbDivider-test.js
│ │ │ └── BreadcrumbSection-test.js
│ │ ├── Form
│ │ │ ├── Form-test.js
│ │ │ ├── FormField-test.js
│ │ │ ├── FormFieldButton-test.js
│ │ │ ├── FormFieldCheckbox-test.js
│ │ │ ├── FormFieldDropdown-test.js
│ │ │ ├── FormFieldGroup-test.js
│ │ │ ├── FormFieldInput-test.js
│ │ │ ├── FormFieldRadio-test.js
│ │ │ ├── FormFieldSelect-test.js
│ │ │ └── FormFieldTextArea-test.js
│ │ ├── Grid
│ │ │ ├── Grid-test.js
│ │ │ ├── GridColumn-test.js
│ │ │ └── GridRow-test.js
│ │ ├── Menu
│ │ │ ├── Menu-test.js
│ │ │ ├── MenuHeader-test.js
│ │ │ ├── MenuItem-test.js
│ │ │ └── MenuMenu-test.js
│ │ ├── Message
│ │ │ ├── Message-test.js
│ │ │ ├── MessageContent-test.js
│ │ │ ├── MessageHeader-test.js
│ │ │ ├── MessageItem-test.js
│ │ │ └── MessageList-test.js
│ │ └── Table
│ │ │ ├── Table-test.js
│ │ │ ├── TableBody-test.js
│ │ │ ├── TableCell-test.js
│ │ │ ├── TableFooter-test.js
│ │ │ ├── TableHeader-test.js
│ │ │ ├── TableHeaderCell-test.js
│ │ │ └── TableRow-test.js
│ ├── commonTests.js
│ ├── elements
│ │ ├── Button
│ │ │ ├── Button-test.js
│ │ │ ├── ButtonContent-test.js
│ │ │ ├── ButtonGroup-test.js
│ │ │ └── ButtonOr-test.js
│ │ ├── Container
│ │ │ └── Container-test.js
│ │ ├── Divider
│ │ │ └── Divider-test.js
│ │ ├── Flag
│ │ │ └── Flag-test.js
│ │ ├── Header
│ │ │ ├── Header-test.js
│ │ │ ├── HeaderContent-test.js
│ │ │ └── HeaderSubheader-test.js
│ │ ├── Icon
│ │ │ ├── Icon-test.js
│ │ │ └── IconGroup-test.js
│ │ ├── Image
│ │ │ ├── Image-test.js
│ │ │ └── ImageGroup-test.js
│ │ ├── Input
│ │ │ └── Input-test.js
│ │ ├── Label
│ │ │ ├── Label-test.js
│ │ │ ├── LabelDetail-test.js
│ │ │ └── LabelGroup-test.js
│ │ ├── List
│ │ │ ├── List-test.js
│ │ │ ├── ListContent-test.js
│ │ │ ├── ListDescription-test.js
│ │ │ ├── ListHeader-test.js
│ │ │ ├── ListIcon-test.js
│ │ │ ├── ListItem-test.js
│ │ │ └── ListList-test.js
│ │ ├── Loader
│ │ │ └── Loader-test.js
│ │ ├── Rail
│ │ │ └── Rail-test.js
│ │ ├── Reveal
│ │ │ ├── Reveal-test.js
│ │ │ └── RevealContent-test.js
│ │ ├── Segment
│ │ │ ├── Segment-test.js
│ │ │ └── SegmentGroup-test.js
│ │ └── Step
│ │ │ ├── Step-test.js
│ │ │ ├── StepContent-test.js
│ │ │ ├── StepDescription-test.js
│ │ │ ├── StepGroup-test.js
│ │ │ └── StepTitle-test.js
│ ├── lib
│ │ ├── AutoControlledComponent-test.js
│ │ ├── factories-test.js
│ │ ├── getUnhandledProps-test.js
│ │ ├── isBrowser-test.js
│ │ ├── keyboardKey-test.js
│ │ ├── numberToWord-test.js
│ │ └── objectDiff-test.js
│ ├── modules
│ │ ├── Accordion
│ │ │ ├── Accordion-test.js
│ │ │ ├── AccordionContent-test.js
│ │ │ └── AccordionTitle-test.js
│ │ ├── Checkbox
│ │ │ └── Checkbox-test.js
│ │ ├── Dimmer
│ │ │ ├── Dimmer-test.js
│ │ │ └── DimmerDimmable-test.js
│ │ ├── Dropdown
│ │ │ ├── Dropdown-test.js
│ │ │ ├── DropdownDivider-test.js
│ │ │ ├── DropdownHeader-test.js
│ │ │ ├── DropdownItem-test.js
│ │ │ └── DropdownMenu-test.js
│ │ ├── Embed
│ │ │ └── Embed-test.js
│ │ ├── Modal
│ │ │ ├── Modal-test.js
│ │ │ ├── ModalActions-test.js
│ │ │ ├── ModalContent-test.js
│ │ │ ├── ModalDescription-test.js
│ │ │ └── ModalHeader-test.js
│ │ ├── Popup
│ │ │ ├── Popup-test.js
│ │ │ ├── PopupContent-test.js
│ │ │ └── PopupHeader-test.js
│ │ ├── Progress
│ │ │ └── Progress-test.js
│ │ ├── Rating
│ │ │ ├── Rating-test.js
│ │ │ └── RatingIcon-test.js
│ │ └── Search
│ │ │ ├── Search-test.js
│ │ │ ├── SearchCategory-test.js
│ │ │ ├── SearchResult-test.js
│ │ │ └── SearchResults-test.js
│ └── views
│ │ ├── Card
│ │ ├── Card-test.js
│ │ ├── CardContent-test.js
│ │ ├── CardDescription-test.js
│ │ ├── CardGroup-test.js
│ │ ├── CardHeader-test.js
│ │ └── CardMeta-test.js
│ │ ├── Comment
│ │ ├── Comment-test.js
│ │ ├── CommentAction-test.js
│ │ ├── CommentActions-test.js
│ │ ├── CommentAuthor-test.js
│ │ ├── CommentAvatar-test.js
│ │ ├── CommentContent-test.js
│ │ ├── CommentGroup-test.js
│ │ ├── CommentMetadata-test.js
│ │ └── CommentText-test.js
│ │ ├── Feed
│ │ ├── Feed-test.js
│ │ ├── FeedContent-test.js
│ │ ├── FeedDate-test.js
│ │ ├── FeedEvent-test.js
│ │ ├── FeedExtra-test.js
│ │ ├── FeedLabel-test.js
│ │ ├── FeedLike-test.js
│ │ ├── FeedMeta-test.js
│ │ ├── FeedSummary-test.js
│ │ └── FeedUser-test.js
│ │ ├── Item
│ │ ├── Item-test.js
│ │ ├── ItemContent-test.js
│ │ ├── ItemDescription-test.js
│ │ ├── ItemExtra-test.js
│ │ ├── ItemGroup-test.js
│ │ ├── ItemHeader-test.js
│ │ ├── ItemImage-test.js
│ │ └── ItemMeta-test.js
│ │ └── Stastistic
│ │ ├── Statistic-test.js
│ │ ├── StatisticGroup-test.js
│ │ ├── StatisticLabel-test.js
│ │ └── StatisticValue-test.js
├── tests.bundle.js
└── utils
│ ├── assertNodeContains.js
│ ├── consoleUtil.js
│ ├── domEvent.js
│ ├── index.js
│ ├── sandbox.js
│ └── syntheticEvent.js
├── webpack.config.js
├── webpack.dll.js
└── webpack.umd.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react",
5 | "stage-1"
6 | ],
7 | "plugins": [
8 | "lodash"
9 | ],
10 | "env": {
11 | "test": {
12 | "plugins": [
13 | ["__coverage__", { "ignore": "test/" }]
14 | ]
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/*
2 | dist/*
3 | docs/build/*
4 | dll/*
5 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ### Steps
4 | 1. Do something.
5 | 2. Do something else.
6 |
7 | ### Expected Result
8 |
9 | ### Actual Result
10 |
11 | ### Version
12 | x.y.z
13 |
14 | ### Testcase
15 | Fork: http://codepen.io/levithomason/pen/ZpBaJX
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log*
2 | node_modules/
3 | bower_components/
4 | coverage/
5 | dist/
6 | docs/build/
7 | docs/app/docgenInfo.json
8 | dll/
9 |
10 | .DS_Store
11 | .idea/
12 |
13 | *.iml
14 |
--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
1 | coverage:
2 | ignore:
3 | - src/factories.js
4 | - src/lib/*
5 |
--------------------------------------------------------------------------------
/docs/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "globals": {
3 | "__BASE__": false,
4 | "__DEV__": false,
5 | "__DEBUG__": false,
6 | "__STAGING__": false,
7 | "__TEST__": false,
8 | "__PATH_SEP__": false,
9 | "__PROD__": false
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/docs/app/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/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/Components/Logo/Logo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Image } from 'src'
4 |
5 | const Logo = (props) =>
6 |
7 | Logo.propTypes = Image.propTypes
8 |
9 | export default Logo
10 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Confirm/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Variations from './Variations'
4 |
5 | const ConfirmExamples = () => (
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ConfirmExamples
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/States/RadioExampleChecked.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleChecked = () => (
5 |
6 | )
7 |
8 | export default RadioExampleChecked
9 |
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default RadioExampleDisabled
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/States/RadioExampleReadOnly.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleReadOnly = () => (
5 |
6 | )
7 |
8 | export default RadioExampleReadOnly
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/Types/RadioExampleRadio.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleRadio = () => (
5 |
6 | )
7 |
8 | export default RadioExampleRadio
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/Types/RadioExampleSlider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleSlider = () => (
5 |
6 | )
7 |
8 | export default RadioExampleSlider
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Radio/Types/RadioExampleToggle.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'semantic-ui-react'
3 |
4 | const RadioExampleToggle = () => (
5 |
6 | )
7 |
8 | export default RadioExampleToggle
9 |
--------------------------------------------------------------------------------
/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/addons/Radio/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import States from './States'
4 | import Variations from './Variations'
5 |
6 | const RadioExamples = () => (
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default RadioExamples
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/Select/Types/SelectExample.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Select } from 'semantic-ui-react'
3 |
4 | import { countryOptions } from '../common'
5 | // [{ value: 'af', flag: 'af', text: 'Afghanistan' }, ...{}]
6 |
7 | const SelectExample = () => (
8 |
9 | )
10 |
11 | export default SelectExample
12 |
--------------------------------------------------------------------------------
/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/addons/Select/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 |
4 | const SelectExamples = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default SelectExamples
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/TextArea/Types/TextAreaExample.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TextArea } from 'semantic-ui-react'
3 |
4 | const TextAreaExample = () => (
5 |
6 | )
7 |
8 | export default TextAreaExample
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/addons/TextArea/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 |
4 | const TextAreaExamples = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default TextAreaExamples
11 |
--------------------------------------------------------------------------------
/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/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/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/Breadcrumb/Content/BreadcrumbExampleSectionProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Breadcrumb } from 'semantic-ui-react'
3 |
4 | const sections = [
5 | { content: 'Home', link: true },
6 | { content: 'Search', active: true },
7 | ]
8 |
9 | const BreadcrumbExampleSectionProps = () => (
10 |
11 | )
12 |
13 | export default BreadcrumbExampleSectionProps
14 |
--------------------------------------------------------------------------------
/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/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/collections/Breadcrumb/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Content from './Content'
4 | import Variations from './Variations'
5 |
6 | const BreadcrumbExamples = () => (
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default BreadcrumbExamples
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/Content/FormExampleField.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form } from 'semantic-ui-react'
3 |
4 | const FormExampleField = () => (
5 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default FormExampleField
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form, Input } from 'semantic-ui-react'
3 |
4 | const FormExampleInlineField = () => (
5 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default FormExampleInlineField
14 |
--------------------------------------------------------------------------------
/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 |
7 |
12 |
13 |
14 | )
15 |
16 | export default FormExampleError
17 |
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 |
10 |
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 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default FormExampleFieldReadOnly
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Form/States/FormExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Form, Input } from 'semantic-ui-react'
3 |
4 | const FormExampleLoading = () => (
5 |
7 |
8 |
9 | )
10 |
11 | export default FormExampleLoading
12 |
--------------------------------------------------------------------------------
/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 |
7 |
12 |
13 |
14 | )
15 |
16 | export default FormExampleSuccess
17 |
--------------------------------------------------------------------------------
/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/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/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/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/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/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/collections/Menu/States/MenuExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Menu } from 'semantic-ui-react'
3 |
4 | const MenuExampleActive = () => {
5 | return (
6 |
11 | )
12 | }
13 |
14 | export default MenuExampleActive
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Menu/States/MenuExampleHover.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Menu } from 'semantic-ui-react'
3 |
4 | const MenuExampleHover = () => {
5 | return (
6 |
10 | )
11 | }
12 |
13 | export default MenuExampleHover
14 |
--------------------------------------------------------------------------------
/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/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/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/collections/Message/States/MessageExampleHidden.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleHidden = () => (
5 |
6 | You can't see me
7 |
8 | )
9 |
10 | export default MessageExampleHidden
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/States/MessageExampleVisible.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleVisible = () => (
5 |
6 | You can always see me
7 |
8 | )
9 |
10 | export default MessageExampleVisible
11 |
--------------------------------------------------------------------------------
/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/collections/Message/Types/MessageExampleIconProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleIconProp = () => (
5 |
10 | )
11 |
12 | export default MessageExampleIconProp
13 |
--------------------------------------------------------------------------------
/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/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/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/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/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/collections/Message/Variations/MessageExampleCompact.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleCompact = () => (
5 |
6 | Get all the best inventions in your e-mail every day. Sign up now!
7 |
8 | )
9 |
10 | export default MessageExampleCompact
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleCompactProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleCompactProps = () => (
5 |
9 | )
10 |
11 | export default MessageExampleCompactProps
12 |
--------------------------------------------------------------------------------
/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/collections/Message/Variations/MessageExampleFloating.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleFloating = () => (
5 |
6 | Way to go!
7 |
8 | )
9 |
10 | export default MessageExampleFloating
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleFloatingProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleFloatingProps = () => (
5 |
9 | )
10 |
11 | export default MessageExampleFloatingProps
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleInfo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleInfo = () => (
5 |
6 | Was this what you wanted?
7 | Did you know it's been a while?
8 |
9 | )
10 |
11 | export default MessageExampleInfo
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleInfoProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleInfoProps = () => (
5 |
10 | )
11 |
12 | export default MessageExampleInfoProps
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleNegative.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleNegative = () => (
5 |
6 | We're sorry we can't apply that discount
7 | That offer has expired
8 |
9 | )
10 |
11 | export default MessageExampleNegative
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExamplePositive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExamplePositive = () => (
5 |
6 | You are eligible for a reward
7 | Go to your special offers page to see now.
8 |
9 | )
10 |
11 | export default MessageExamplePositive
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleSuccess.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleSuccess = () => (
5 |
10 | )
11 |
12 | export default MessageExampleSuccess
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleWarning.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleWarning = () => (
5 |
6 | You must register before you can do that!
7 | Visit our registration page, then try again.
8 |
9 | )
10 |
11 | export default MessageExampleWarning
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/Variations/MessageExampleWarningProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'semantic-ui-react'
3 |
4 | const MessageExampleWarningProps = () => (
5 |
10 | )
11 |
12 | export default MessageExampleWarningProps
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Message/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import States from './States'
5 | import Variations from './Variations'
6 |
7 | const MessageExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default MessageExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/collections/Table/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import States from './States'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const TableExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default TableExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Content/ButtonExampleConditionals.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleConditionals = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleConditionals
13 |
--------------------------------------------------------------------------------
/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/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/Button/GroupVariations/ButtonExampleGroupColored.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupColored = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupColored
13 |
--------------------------------------------------------------------------------
/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/Button/GroupVariations/ButtonExampleGroupIconShorthand.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupIconShorthand = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupIconShorthand
13 |
--------------------------------------------------------------------------------
/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/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/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/Button/GroupVariations/ButtonExampleGroupOrSize.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupOrSize = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupOrSize
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroupSize = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroupSize
13 |
--------------------------------------------------------------------------------
/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/Button/Groups/ButtonExampleGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleGroup = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ButtonExampleGroup
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/States/ButtonExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleActive = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleActive
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/States/ButtonExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleDisabled = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleDisabled
9 |
--------------------------------------------------------------------------------
/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/elements/Button/Types/ButtonExampleButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleButton = () => (
5 |
8 | )
9 |
10 | export default ButtonExampleButton
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Types/ButtonExampleContentProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleContentProp = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleContentProp
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Types/ButtonExampleEmphasis.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleEmphasis = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleEmphasis
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Types/ButtonExampleIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Icon } from 'semantic-ui-react'
3 |
4 | const ButtonExampleIcon = () => (
5 |
8 | )
9 |
10 | export default ButtonExampleIcon
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Types/ButtonExampleIconProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleIconProp = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleIconProp
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleLabeledIcon = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleLabeledIcon
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleCircular.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleCircular = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleCircular
9 |
--------------------------------------------------------------------------------
/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/Button/Variations/ButtonExampleCompact.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleCompact = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleCompact
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleFloated.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleFloated = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleFloated
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleFluid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleFluid = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleFluid
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleHorizontallyAttached.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleHorizontallyAttached = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleHorizontallyAttached
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExampleNegative.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExampleNegative = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default ButtonExampleNegative
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Button/Variations/ButtonExamplePositive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from 'semantic-ui-react'
3 |
4 | const ButtonExamplePositive = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default ButtonExamplePositive
11 |
--------------------------------------------------------------------------------
/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/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 |
12 | )
13 |
14 | export default ButtonExampleVerticallyAttached
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/Container/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Variations from './Variations'
4 |
5 | const ContainerExamples = () => (
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default ContainerExamples
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Divider/Types/DividerExampleDivider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Divider } from 'semantic-ui-react'
3 |
4 | const DividerExampleDivider = () => (
5 |
6 | )
7 |
8 | export default DividerExampleDivider
9 |
--------------------------------------------------------------------------------
/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/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/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/Divider/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Variations from './Variations'
4 |
5 | const DividerExamples = () => (
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default DividerExamples
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Flag/Types/FlagExampleFlag.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Flag, Segment } from 'semantic-ui-react'
3 |
4 | const FlagExampleFlag = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default FlagExampleFlag
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Flag/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 |
4 | const FlagExamples = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default FlagExamples
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExampleIconProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleIconProp = () => (
5 |
6 | )
7 |
8 | export default HeaderExampleIconProp
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExampleImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Image } from 'semantic-ui-react'
3 |
4 | const HeaderExampleImage = () => (
5 |
9 | )
10 |
11 | export default HeaderExampleImage
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExampleImageProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleImageProp = () => (
5 |
10 | )
11 |
12 | export default HeaderExampleImageProp
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExamplePlugIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Icon } from 'semantic-ui-react'
3 |
4 | const HeaderExamplePlugIcon = () => (
5 |
6 |
7 |
8 | Uptime Guarantee
9 |
10 |
11 | )
12 |
13 | export default HeaderExamplePlugIcon
14 |
--------------------------------------------------------------------------------
/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/Header/Content/HeaderExampleSubheader.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleSubheader = () => (
5 |
6 | Account Settings
7 |
8 | Manage your account settings and set email preferences
9 |
10 |
11 | )
12 |
13 | export default HeaderExampleSubheader
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Content/HeaderExampleSubheaderProp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleSubheaderProp = () => (
5 |
6 | )
7 |
8 | export default HeaderExampleSubheaderProp
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/States/HeaderExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleDisabled = () => (
5 |
8 | )
9 |
10 | export default HeaderExampleDisabled
11 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/elements/Header/Types/HeaderExampleSubheaders.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleSubheaders = () => (
5 |
6 |
7 | $10.99
8 |
9 | )
10 |
11 | export default HeaderExampleSubheaders
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Variations/HeaderExampleBlock.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleBlock = () => (
5 |
8 | )
9 |
10 | export default HeaderExampleBlock
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Header/Variations/HeaderExampleDividing.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header } from 'semantic-ui-react'
3 |
4 | const HeaderExampleDividing = () => (
5 |
8 | )
9 |
10 | export default HeaderExampleDividing
11 |
--------------------------------------------------------------------------------
/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/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Content from './Content'
4 | import States from './States'
5 | import Variations from './Variations'
6 |
7 | const HeaderExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | export default HeaderExamples
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Groups/IconExampleCornerGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleCornerGroup = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default IconExampleCornerGroup
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Groups/IconExampleIconGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleIconGroup = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default IconExampleIconGroup
12 |
--------------------------------------------------------------------------------
/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/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/Icon/States/IconExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleDisabled = () => (
5 |
6 | )
7 |
8 | export default IconExampleDisabled
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/States/IconExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleLoading = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default IconExampleLoading
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/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/Icon/Variations/IconExampleFitted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleFitted = () => (
5 |
6 |
Tight spacing
7 |
8 |
Tight spacing
9 |
10 | )
11 |
12 | export default IconExampleFitted
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Variations/IconExampleFlipped.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleFlipped = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default IconExampleFlipped
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Variations/IconExampleLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleLink = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default IconExampleLink
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/Variations/IconExampleRotated.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'semantic-ui-react'
3 |
4 | const IconExampleRotated = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default IconExampleRotated
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Icon/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import IconSet from './IconSet'
3 | import States from './States'
4 | import Variations from './Variations'
5 | import Groups from './Groups'
6 |
7 | const IconExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | export default IconExamples
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/States/ImageExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleDisabled = () => (
5 |
6 | )
7 |
8 | export default ImageExampleDisabled
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/States/ImageExampleHidden.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleHidden = () => (
5 |
6 | )
7 |
8 | export default ImageExampleHidden
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Types/ImageExampleImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleImage = () => (
5 |
6 | )
7 |
8 | export default ImageExampleImage
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Types/ImageExampleLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleLink = () => (
5 |
11 | )
12 |
13 | export default ImageExampleLink
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Types/ImageExampleWrapped.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleWrapped = () => (
5 |
6 | )
7 |
8 | export default ImageExampleWrapped
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Usage/ImageExampleChildren.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Label } from 'semantic-ui-react'
3 |
4 | const ImageExampleChildren = () => (
5 |
6 |
7 |
8 |
9 | Some other content
10 |
11 | )
12 |
13 | export default ImageExampleChildren
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Variations/ImageExampleAvatar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleAvatar = () => (
5 |
6 |
7 | Username
8 |
9 | )
10 |
11 | export default ImageExampleAvatar
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Variations/ImageExampleBordered.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleBordered = () => (
5 |
6 | )
7 |
8 | export default ImageExampleBordered
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Variations/ImageExampleCircular.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleCircular = () => (
5 |
6 | )
7 |
8 | export default ImageExampleCircular
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Variations/ImageExampleFluid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleFluid = () => (
5 |
6 | )
7 |
8 | export default ImageExampleFluid
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Image/Variations/ImageExampleRounded.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image } from 'semantic-ui-react'
3 |
4 | const ImageExampleRounded = () => (
5 |
6 | )
7 |
8 | export default ImageExampleRounded
9 |
--------------------------------------------------------------------------------
/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/Input/States/InputExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputDisabled = () => (
5 |
6 | )
7 |
8 | export default InputDisabled
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/States/InputExampleError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleError = () => (
5 |
6 | )
7 |
8 | export default InputExampleError
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/States/InputExampleFocus.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleFocus = () => (
5 |
6 | )
7 |
8 | export default InputExampleFocus
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/States/InputExampleLeftLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLeftLoading = () => (
5 |
6 | )
7 |
8 | export default InputExampleLeftLoading
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/States/InputExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLoading = () => (
5 |
6 | )
7 |
8 | export default InputExampleLoading
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Types/InputExampleInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleInput = () => (
5 |
6 | )
7 |
8 | export default InputExampleInput
9 |
--------------------------------------------------------------------------------
/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/InputExampleAction.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleAction = () => (
5 |
6 | )
7 |
8 | export default InputExampleAction
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleActionIconButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleActionIconButton = () => (
5 |
6 | )
7 |
8 | export default InputExampleActionIconButton
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleActionLabeledButton = () => (
5 |
9 | )
10 |
11 | export default InputExampleActionLabeledButton
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleFluid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleFluid = () => (
5 |
6 | )
7 |
8 | export default InputExampleFluid
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleIcon = () => (
5 |
6 | )
7 |
8 | export default InputExampleIcon
9 |
--------------------------------------------------------------------------------
/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/elements/Input/Variations/InputExampleIconElement.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Input } from 'semantic-ui-react'
3 |
4 | const InputExampleIconElement = () => (
5 | }
7 | placeholder='Search...'
8 | />
9 | )
10 |
11 | export default InputExampleIconElement
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleIconPosition.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleIconPosition = () => (
5 |
6 | )
7 |
8 | export default InputExampleIconPosition
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleIconProps.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleIconProps = () => (
5 |
9 | )
10 |
11 | export default InputExampleIconProps
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleInverted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment, Input } from 'semantic-ui-react'
3 |
4 | const InputExampleInverted = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default InputExampleInverted
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleLabeled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLabeled = () => (
5 |
6 | )
7 |
8 | export default InputExampleLabeled
9 |
--------------------------------------------------------------------------------
/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/elements/Input/Variations/InputExampleLeftCornerLabeled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLeftCornerLabeled = () => (
5 |
10 | )
11 |
12 | export default InputExampleLeftCornerLabeled
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleRightCornerLabeled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleLeftCornerLabeled = () => (
5 |
10 | )
11 |
12 | export default InputExampleLeftCornerLabeled
13 |
--------------------------------------------------------------------------------
/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/elements/Input/Variations/InputExampleRightLabeledBasic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleRightLabeledBasic = () => (
5 |
10 | )
11 |
12 | export default InputExampleRightLabeledBasic
13 |
--------------------------------------------------------------------------------
/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/Input/Variations/InputExampleRightLeftLabeled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input, Label } from 'semantic-ui-react'
3 |
4 | const InputExampleRightLeftLabeled = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default InputExampleRightLeftLabeled
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/Variations/InputExampleTransparent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Input } from 'semantic-ui-react'
3 |
4 | const InputExampleTransparent = () => (
5 |
6 | )
7 |
8 | export default InputExampleTransparent
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Input/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import States from './States'
4 | import Variations from './Variations'
5 |
6 | const InputExamples = () => (
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default InputExamples
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleDetail.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleDetail = () => (
5 |
9 | )
10 |
11 | export default LabelExampleDetail
12 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleIcon = () => (
5 |
6 |
10 |
14 |
15 | )
16 |
17 | export default LabelExampleIcon
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleIconShorthand.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleIconShorthand = () => (
5 |
6 | )
7 |
8 | export default LabelExampleIconShorthand
9 |
--------------------------------------------------------------------------------
/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 |
15 | )
16 |
17 | export default LabelExampleImage
18 |
--------------------------------------------------------------------------------
/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/Label/Content/LabelExampleLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleLink = () => (
5 |
8 | )
9 |
10 | export default LabelExampleLink
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Label/Content/LabelExampleLinkDetail.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleLinkDetail = () => (
5 |
10 | )
11 |
12 | export default LabelExampleLinkDetail
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/LabelExampleGroupSize.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleGroupSize = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default LabelExampleGroupSize
14 |
--------------------------------------------------------------------------------
/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/Label/Types/LabelExampleBasic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon, Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleBasic = () => (
5 |
8 | )
9 |
10 | export default LabelExampleBasic
11 |
--------------------------------------------------------------------------------
/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/Label/Types/LabelExampleTag.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Label } from 'semantic-ui-react'
3 |
4 | const LabelExampleTag = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default LabelExampleTag
13 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/elements/Label/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Groups from './Groups'
5 | import Types from './Types'
6 | import Variations from './Variations'
7 |
8 | const LabelExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default LabelExamples
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Content/ListExampleItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleItem = () => (
5 |
6 | 1
7 | 2
8 | 3
9 |
10 | )
11 |
12 | export default ListExampleItem
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Content/ListExampleLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleLink = () => (
5 |
6 | What is a FAQ?
7 | Who is our user?
8 | Where is our office located?
9 |
10 | )
11 |
12 | export default ListExampleLink
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Types/ListExampleBasic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleBasic = () => (
5 |
6 | Apples
7 | Pears
8 | Oranges
9 |
10 | )
11 |
12 | export default ListExampleBasic
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Types/ListExampleBasicShorthand.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleBasicShorthand = () => (
5 |
6 | )
7 |
8 | export default ListExampleBasicShorthand
9 |
--------------------------------------------------------------------------------
/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/elements/List/Types/ListExampleLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleLink = () => (
5 |
6 | Home
7 | About
8 | Jobs
9 | Team
10 |
11 | )
12 |
13 | export default ListExampleLink
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/List/Variations/ListExampleCelledHorizontal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { List } from 'semantic-ui-react'
3 |
4 | const ListExampleCelledHorizontal = () => (
5 |
6 | About Us
7 | Contact
8 | Support
9 |
10 | )
11 |
12 | export default ListExampleCelledHorizontal
13 |
--------------------------------------------------------------------------------
/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/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/States/LoaderExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Loader, Image, Segment } from 'semantic-ui-react'
3 |
4 | const LoaderExampleActive = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default LoaderExampleActive
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/States/LoaderExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Loader, Image, Segment } from 'semantic-ui-react'
3 |
4 | const LoaderExampleDisabled = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default LoaderExampleDisabled
13 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/elements/Loader/Variations/LoaderExampleInline.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Loader } from 'semantic-ui-react'
3 |
4 | const LoaderExampleInline = () => (
5 |
6 | )
7 |
8 | export default LoaderExampleInline
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/Variations/LoaderExampleInlineCentered.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Loader } from 'semantic-ui-react'
3 |
4 | const LoaderExampleInlineCentered = () => (
5 |
6 | )
7 |
8 | export default LoaderExampleInlineCentered
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/Variations/LoaderExampleInverted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Loader, Segment } from 'semantic-ui-react'
3 |
4 | const LoaderExampleInverted = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default LoaderExampleInverted
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Loader/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import States from './States'
5 | import Variations from './Variations'
6 |
7 | const LoaderExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default LoaderExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Rail/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const RailExamples = () => (
7 |
8 |
9 |
10 |
11 | )
12 | export default RailExamples
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Reveal/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Content from './Content'
5 | import States from './States'
6 | import Variations from './Variations'
7 |
8 | const RevealExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default RevealExamples
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleHorizontalSegments = () => (
5 |
6 | Left
7 | Middle
8 | Right
9 |
10 | )
11 |
12 | export default SegmentExampleHorizontalSegments
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Groups/SegmentExamplePiledSegments.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExamplePiledSegments = () => (
5 |
6 | Top
7 | Middle
8 | Bottom
9 |
10 | )
11 |
12 | export default SegmentExamplePiledSegments
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleRaisedSegments = () => (
5 |
6 | Left
7 | Middle
8 | Right
9 |
10 | )
11 |
12 | export default SegmentExampleRaisedSegments
13 |
--------------------------------------------------------------------------------
/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/elements/Segment/Groups/SegmentExampleStackedSegments.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleStackedSegments = () => (
5 |
6 | Top
7 | Middle
8 | Bottom
9 |
10 | )
11 |
12 | export default SegmentExampleStackedSegments
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/States/SegmentExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleDisabled = () => (
5 |
6 | Disabled content
7 |
8 | )
9 |
10 | export default SegmentExampleDisabled
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/States/SegmentExampleLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleLoading = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default SegmentExampleLoading
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Types/SegmentExamplePiled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExamplePiled = () => (
5 |
6 | Pellentesque habitant morbi tristique senectus.
7 |
8 | )
9 |
10 | export default SegmentExamplePiled
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Types/SegmentExampleRaised.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleRaised = () => (
5 |
6 | Pellentesque habitant morbi tristique senectus.
7 |
8 | )
9 |
10 | export default SegmentExampleRaised
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Types/SegmentExampleSegment.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleSegment = () => (
5 |
6 | Pellentesque habitant morbi tristique senectus.
7 |
8 | )
9 |
10 | export default SegmentExampleSegment
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Types/SegmentExampleStacked.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleStacked = () => (
5 |
6 | Pellentesque habitant morbi tristique senectus.
7 |
8 | )
9 |
10 | export default SegmentExampleStacked
11 |
--------------------------------------------------------------------------------
/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/elements/Segment/Variations/SegmentExampleClearing.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleClearing = () => (
5 |
6 |
9 |
10 | )
11 |
12 | export default SegmentExampleClearing
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExampleCompact.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleCompact = () => (
5 |
6 | Compact content.
7 |
8 | )
9 |
10 | export default SegmentExampleCompact
11 |
--------------------------------------------------------------------------------
/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/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/elements/Segment/Variations/SegmentExampleInverted.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleInverted = () => (
5 |
6 | Inverted content.
7 |
8 | )
9 |
10 | export default SegmentExampleInverted
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/Variations/SegmentExamplePadded.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExamplePadded = () => (
5 |
6 | Padded content.
7 |
8 | )
9 |
10 | export default SegmentExamplePadded
11 |
--------------------------------------------------------------------------------
/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/elements/Segment/Variations/SegmentExampleTextAlignment.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleTextAlignment = () => (
5 |
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/Segment/Variations/SegmentExampleVeryPadded.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Segment } from 'semantic-ui-react'
3 |
4 | const SegmentExampleVeryPadded = () => (
5 |
6 | Very padded content.
7 |
8 | )
9 |
10 | export default SegmentExampleVeryPadded
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Segment/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Groups from './Groups'
4 | import States from './States'
5 | import Variations from './Variations'
6 |
7 | const SegmentExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | export default SegmentExamples
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Step/States/StepExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Step } from 'semantic-ui-react'
3 |
4 | const StepExampleDisabled = () => (
5 |
6 | Billing
7 |
8 | )
9 |
10 | export default StepExampleDisabled
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/elements/Step/Types/StepExampleBasic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Step } from 'semantic-ui-react'
3 |
4 | const StepExampleBasic = () => (
5 |
6 | Shipping
7 |
8 | )
9 |
10 | export default StepExampleBasic
11 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/modules/Accordion/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Variations from './Variations'
4 |
5 | const AccordionExamples = () => (
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default AccordionExamples
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/States/CheckboxExampleChecked.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleChecked = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleChecked
9 |
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default CheckboxExampleDisabled
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/States/CheckboxExampleReadOnly.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleReadOnly = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleReadOnly
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/Types/CheckboxExampleCheckbox.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleCheckbox = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleCheckbox
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/Types/CheckboxExampleRadio.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleRadio = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleRadio
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/Types/CheckboxExampleSlider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleSlider = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleSlider
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Checkbox/Types/CheckboxExampleToggle.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Checkbox } from 'semantic-ui-react'
3 |
4 | const CheckboxExampleToggle = () => (
5 |
6 | )
7 |
8 | export default CheckboxExampleToggle
9 |
--------------------------------------------------------------------------------
/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/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import States from './States'
4 | import Variations from './Variations'
5 |
6 | const CheckboxExamples = () => (
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default CheckboxExamples
15 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dimmer/States/DimmerExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimmer, Segment } from 'semantic-ui-react'
3 |
4 | const DimmerExampleActive = () => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default DimmerExampleActive
18 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dimmer/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import States from './States'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 | import Usage from './Usage'
7 |
8 | const DimmerExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default DimmerExamples
18 |
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleSearchSelection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { countryOptions } from '../common'
5 |
6 | const DropdownExampleSearchSelection = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleSearchSelection
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleSearchSelectionTwo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { stateOptions } from '../common'
5 |
6 | const DropdownExampleSearchSelectionTwo = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleSearchSelectionTwo
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Types/DropdownExampleSelection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { friendOptions } from '../common'
5 |
6 | const DropdownExampleSelection = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleSelection
11 |
--------------------------------------------------------------------------------
/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/modules/Dropdown/Variations/DropdownExampleCompact.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { getOptions } from '../common'
5 |
6 | const DropdownExampleCompact = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleCompact
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Dropdown/Variations/DropdownExampleScrolling.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'semantic-ui-react'
3 |
4 | import { getOptions } from '../common'
5 |
6 | const DropdownExampleScrolling = () => (
7 |
8 | )
9 |
10 | export default DropdownExampleScrolling
11 |
--------------------------------------------------------------------------------
/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/modules/Embed/Types/EmbedExampleCustom.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Embed } from 'semantic-ui-react'
3 |
4 | const EmbedExampleCustom = () => (
5 |
10 | )
11 |
12 | export default EmbedExampleCustom
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Embed/Types/EmbedExampleVimeo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Embed } from 'semantic-ui-react'
3 |
4 | const EmbedExampleVimeo = () => (
5 |
10 | )
11 |
12 | export default EmbedExampleVimeo
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Embed/Types/EmbedExampleYoutube.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Embed } from 'semantic-ui-react'
3 |
4 | const EmbedExampleYouTube = () => (
5 |
10 | )
11 |
12 | export default EmbedExampleYouTube
13 |
--------------------------------------------------------------------------------
/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/Embed/Variations/EmbedExampleAspectRatio.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Embed } from 'semantic-ui-react'
3 |
4 | const EmbedExampleAspectRatio = () => (
5 |
11 | )
12 |
13 | export default EmbedExampleAspectRatio
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Embed/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import States from './States'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 | import Usage from './Usage'
7 |
8 | const EmbedExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default EmbedExamples
18 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Modal/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const DropdownExamples = () => (
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default DropdownExamples
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Types/PopupExample.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExample = () => (
5 | }
7 | content='Add users to your feed'
8 | />
9 | )
10 |
11 | export default PopupExample
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/modules/Popup/Usage/PopupExampleHover.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExampleHover = () => (
5 | }
7 | content='Sends an email invite to a friend.'
8 | on='hover'
9 | />
10 | )
11 |
12 | export default PopupExampleHover
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Popup/Variations/PopupExampleBasic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Popup } from 'semantic-ui-react'
3 |
4 | const PopupExampleBasic = () => (
5 | }
7 | content="The default theme's basic popup removes the pointing arrow."
8 | basic
9 | />
10 | )
11 |
12 | export default PopupExampleBasic
13 |
--------------------------------------------------------------------------------
/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/modules/Popup/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Usage from './Usage'
5 | import Variations from './Variations'
6 |
7 | const PopupExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default PopupExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/Content/ProgressExampleBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleBar = () => (
5 |
6 | )
7 |
8 | export default ProgressExampleBar
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/Content/ProgressExampleLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleLabel = () => (
5 |
6 | )
7 |
8 | export default ProgressExampleLabel
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/Content/ProgressExampleProgress.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleProgress = () => (
5 |
6 | )
7 |
8 | export default ProgressExampleProgress
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/States/ProgressExampleActive.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleActive = () => (
5 |
8 | )
9 |
10 | export default ProgressExampleActive
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/States/ProgressExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleDisabled = () => (
5 |
8 | )
9 |
10 | export default ProgressExampleDisabled
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/States/ProgressExampleError.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleError = () => (
5 |
8 | )
9 |
10 | export default ProgressExampleError
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/States/ProgressExampleSuccess.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleSuccess = () => (
5 |
8 | )
9 |
10 | export default ProgressExampleSuccess
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/States/ProgressExampleWarning.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleWarning = () => (
5 |
8 | )
9 |
10 | export default ProgressExampleWarning
11 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/Types/ProgressExampleStandard.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress } from 'semantic-ui-react'
3 |
4 | const ProgressExampleStandard = () => (
5 |
6 | )
7 |
8 | export default ProgressExampleStandard
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/Variations/ProgressExampleAttached.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Progress, Segment } from 'semantic-ui-react'
3 |
4 | const ProgressExampleAttached = () => (
5 |
6 |
7 | La la la la
8 |
9 |
10 | )
11 |
12 | export default ProgressExampleAttached
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Progress/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Types from './Types'
3 | import Content from './Content'
4 | import States from './States'
5 | import Variations from './Variations'
6 |
7 | const ProgressExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | export default ProgressExamples
17 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/Types/RatingExampleClearable.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | const RatingExampleClearable = () => (
5 |
6 | )
7 |
8 | export default RatingExampleClearable
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/Types/RatingExampleDisabled.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | const RatingExampleDisabled = () => (
5 |
6 | )
7 |
8 | export default RatingExampleDisabled
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/Types/RatingExampleHeart.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | const RatingExampleHeart = () => (
5 |
6 | )
7 |
8 | export default RatingExampleHeart
9 |
--------------------------------------------------------------------------------
/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/modules/Rating/Types/RatingExampleRating.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | const RatingExampleRating = () => (
5 |
6 | )
7 |
8 | export default RatingExampleRating
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/Types/RatingExampleStar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Rating } from 'semantic-ui-react'
3 |
4 | const RatingExampleStar = () => (
5 |
6 | )
7 |
8 | export default RatingExampleStar
9 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Rating/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const RatingExamples = () => (
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default RatingExamples
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Search/Variations/SearchExampleAligned.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import SearchExampleStandard from '../Types/SearchExampleStandard'
4 |
5 | const SearchExampleAligned = () =>
6 |
7 | export default SearchExampleAligned
8 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Search/Variations/SearchExampleFluid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import SearchExampleStandard from '../Types/SearchExampleStandard'
4 |
5 | const SearchExampleFluid = () => (
6 |
7 | )
8 |
9 | export default SearchExampleFluid
10 |
--------------------------------------------------------------------------------
/docs/app/Examples/modules/Search/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const SearchExamples = () => (
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default SearchExamples
14 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Card/Variations/CardExampleFluid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Card } from 'semantic-ui-react'
3 |
4 | const CardExampleFluid = () => (
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default CardExampleFluid
13 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Card/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const CardExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default CardExamples
16 |
--------------------------------------------------------------------------------
/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/views/Comment/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 CommentExamples = () => (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default CommentExamples
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/views/Feed/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const FeedExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default FeedExamples
16 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Item/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const ItemExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default ItemExamples
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Statistic/Types/StatisticExampleTopLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Statistic } from 'semantic-ui-react'
3 |
4 | const StatisticExampleTopLabel = () => (
5 |
6 |
7 | Views
8 | 40,509
9 |
10 |
11 | )
12 |
13 | export default StatisticExampleTopLabel
14 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Statistic/Variations/StatisticExampleHorizontal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Statistic } from 'semantic-ui-react'
3 |
4 | const StatisticExampleHorizontal = () =>
5 |
6 | export default StatisticExampleHorizontal
7 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/docs/app/Examples/views/Statistic/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Content from './Content'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const StatisticExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default StatisticExamples
16 |
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/ade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/ade.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/chris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/chris.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/christian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/christian.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/daniel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/daniel.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/elliot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/elliot.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/helen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/helen.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/jenny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/jenny.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/joe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/joe.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/justen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/justen.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/laura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/laura.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/matt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/matt.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/nan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/nan.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/nom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/nom.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/steve.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/steve.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/stevie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/stevie.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/tom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/tom.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/veronika.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/veronika.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/large/zoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/large/zoe.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/ade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/ade.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/chris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/chris.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/christian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/christian.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/daniel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/daniel.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/elliot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/elliot.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/helen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/helen.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/jenny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/jenny.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/joe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/joe.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/justen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/justen.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/laura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/laura.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/matt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/matt.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/nan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/nan.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/nom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/nom.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/steve.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/steve.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/stevie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/stevie.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/tom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/tom.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/veronika.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/veronika.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/avatar/small/zoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/avatar/small/zoe.jpg
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/centered-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/centered-paragraph.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/image-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/image-square.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/image-text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/image-text.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/image.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/media-paragraph-alt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/media-paragraph-alt.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/media-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/media-paragraph.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/paragraph.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/short-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/short-paragraph.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/square-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/square-image.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/text-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/text-image.png
--------------------------------------------------------------------------------
/docs/app/assets/images/wireframe/white-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/images/wireframe/white-image.png
--------------------------------------------------------------------------------
/docs/app/assets/technologyadvice-logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/assets/technologyadvice-logo-dark.png
--------------------------------------------------------------------------------
/docs/app/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abbasikov/Semantic-UI-React/c2940c6418724913dcfb764af83fd4cbf7aea02a/docs/app/logo.png
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/addons/Confirm/index.js:
--------------------------------------------------------------------------------
1 | export default from './Confirm'
2 |
--------------------------------------------------------------------------------
/src/addons/Portal/index.js:
--------------------------------------------------------------------------------
1 | export default from './Portal'
2 |
--------------------------------------------------------------------------------
/src/addons/Radio/index.js:
--------------------------------------------------------------------------------
1 | export default from './Radio'
2 |
--------------------------------------------------------------------------------
/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/addons/Select/index.js:
--------------------------------------------------------------------------------
1 | export default from './Select'
2 |
--------------------------------------------------------------------------------
/src/addons/TextArea/index.js:
--------------------------------------------------------------------------------
1 | export default from './TextArea'
2 |
--------------------------------------------------------------------------------
/src/collections/Breadcrumb/index.js:
--------------------------------------------------------------------------------
1 | export default from './Breadcrumb'
2 |
--------------------------------------------------------------------------------
/src/collections/Form/index.js:
--------------------------------------------------------------------------------
1 | export default from './Form'
2 |
--------------------------------------------------------------------------------
/src/collections/Grid/index.js:
--------------------------------------------------------------------------------
1 | export default from './Grid'
2 |
--------------------------------------------------------------------------------
/src/collections/Menu/index.js:
--------------------------------------------------------------------------------
1 | export default from './Menu'
2 |
--------------------------------------------------------------------------------
/src/collections/Message/index.js:
--------------------------------------------------------------------------------
1 | export default from './Message'
2 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/collections/Table/index.js:
--------------------------------------------------------------------------------
1 | export default from './Table'
2 |
--------------------------------------------------------------------------------
/src/elements/Button/index.js:
--------------------------------------------------------------------------------
1 | export default from './Button'
2 |
--------------------------------------------------------------------------------
/src/elements/Container/index.js:
--------------------------------------------------------------------------------
1 | export default from './Container'
2 |
--------------------------------------------------------------------------------
/src/elements/Divider/index.js:
--------------------------------------------------------------------------------
1 | export default from './Divider'
2 |
--------------------------------------------------------------------------------
/src/elements/Flag/index.js:
--------------------------------------------------------------------------------
1 | export default from './Flag'
2 |
--------------------------------------------------------------------------------
/src/elements/Header/index.js:
--------------------------------------------------------------------------------
1 | export default from './Header'
2 |
--------------------------------------------------------------------------------
/src/elements/Icon/index.js:
--------------------------------------------------------------------------------
1 | export default from './Icon'
2 |
--------------------------------------------------------------------------------
/src/elements/Image/index.js:
--------------------------------------------------------------------------------
1 | export default from './Image'
2 |
--------------------------------------------------------------------------------
/src/elements/Input/index.js:
--------------------------------------------------------------------------------
1 | export default from './Input'
2 |
--------------------------------------------------------------------------------
/src/elements/Label/index.js:
--------------------------------------------------------------------------------
1 | export default from './Label'
2 |
--------------------------------------------------------------------------------
/src/elements/List/index.js:
--------------------------------------------------------------------------------
1 | export default from './List'
2 |
--------------------------------------------------------------------------------
/src/elements/Loader/index.js:
--------------------------------------------------------------------------------
1 | export default from './Loader'
2 |
--------------------------------------------------------------------------------
/src/elements/Rail/index.js:
--------------------------------------------------------------------------------
1 | export default from './Rail'
2 |
--------------------------------------------------------------------------------
/src/elements/Reveal/index.js:
--------------------------------------------------------------------------------
1 | export default from './Reveal'
2 |
--------------------------------------------------------------------------------
/src/elements/Segment/index.js:
--------------------------------------------------------------------------------
1 | export default from './Segment'
2 |
--------------------------------------------------------------------------------
/src/elements/Step/index.js:
--------------------------------------------------------------------------------
1 | export default from './Step'
2 |
--------------------------------------------------------------------------------
/src/lib/isBrowser.js:
--------------------------------------------------------------------------------
1 | const hasDocument = typeof document === 'object' && document !== null
2 | const hasWindow = typeof window === 'object' && window !== null && window.self === window
3 |
4 | export default hasDocument && hasWindow
5 |
--------------------------------------------------------------------------------
/src/modules/Accordion/index.js:
--------------------------------------------------------------------------------
1 | export default from './Accordion'
2 |
--------------------------------------------------------------------------------
/src/modules/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | export default from './Checkbox'
2 |
--------------------------------------------------------------------------------
/src/modules/Dimmer/index.js:
--------------------------------------------------------------------------------
1 | export default from './Dimmer'
2 |
--------------------------------------------------------------------------------
/src/modules/Dropdown/index.js:
--------------------------------------------------------------------------------
1 | export default from './Dropdown'
2 |
--------------------------------------------------------------------------------
/src/modules/Embed/index.js:
--------------------------------------------------------------------------------
1 | export default from './Embed'
2 |
--------------------------------------------------------------------------------
/src/modules/Modal/index.js:
--------------------------------------------------------------------------------
1 | export default from './Modal'
2 |
--------------------------------------------------------------------------------
/src/modules/Popup/index.js:
--------------------------------------------------------------------------------
1 | export default from './Popup'
2 |
--------------------------------------------------------------------------------
/src/modules/Progress/index.js:
--------------------------------------------------------------------------------
1 | export default from './Progress'
2 |
--------------------------------------------------------------------------------
/src/modules/Rating/index.js:
--------------------------------------------------------------------------------
1 | export default from './Rating'
2 |
--------------------------------------------------------------------------------
/src/modules/Search/index.js:
--------------------------------------------------------------------------------
1 | export default from './Search'
2 |
--------------------------------------------------------------------------------
/src/umd.js:
--------------------------------------------------------------------------------
1 | // Heads Up!
2 | //
3 | // Do not replace this with named exports.
4 | // We need to export an object here for browser builds.
5 | // Otherwise, we end up with every component on the window.
6 | import * as semanticUIReact from './index'
7 |
8 | module.exports = {
9 | ...semanticUIReact,
10 | }
11 |
--------------------------------------------------------------------------------
/src/views/Card/index.js:
--------------------------------------------------------------------------------
1 | export default from './Card'
2 |
--------------------------------------------------------------------------------
/src/views/Comment/index.js:
--------------------------------------------------------------------------------
1 | export default from './Comment'
2 |
--------------------------------------------------------------------------------
/src/views/Feed/index.js:
--------------------------------------------------------------------------------
1 | export default from './Feed'
2 |
--------------------------------------------------------------------------------
/src/views/Item/index.js:
--------------------------------------------------------------------------------
1 | export default from './Item'
2 |
--------------------------------------------------------------------------------
/src/views/Statistic/index.js:
--------------------------------------------------------------------------------
1 | export default from './Statistic'
2 |
--------------------------------------------------------------------------------
/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/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/specs/collections/Menu/MenuMenu-test.js:
--------------------------------------------------------------------------------
1 | import MenuMenu from 'src/collections/Menu/MenuMenu'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('MenuMenu', () => {
5 | common.isConformant(MenuMenu)
6 | common.rendersChildren(MenuMenu)
7 | common.propValueOnlyToClassName(MenuMenu, 'position')
8 | })
9 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/specs/collections/Table/TableFooter-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import * as common from 'test/specs/commonTests'
4 | import TableFooter from 'src/collections/Table/TableFooter'
5 |
6 | describe('TableFooter', () => {
7 | common.isConformant(TableFooter)
8 |
9 | it('renders as a tfoot by default', () => {
10 | shallow()
11 | .should.have.tagName('tfoot')
12 | })
13 | })
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 |
--------------------------------------------------------------------------------
/test/specs/elements/Button/ButtonContent-test.js:
--------------------------------------------------------------------------------
1 | import ButtonContent from 'src/elements/Button/ButtonContent'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ButtonContent', () => {
5 | common.isConformant(ButtonContent)
6 | common.propKeyOnlyToClassName(ButtonContent, 'hidden')
7 | common.propKeyOnlyToClassName(ButtonContent, 'visible')
8 | common.rendersChildren(ButtonContent)
9 | })
10 |
--------------------------------------------------------------------------------
/test/specs/elements/Button/ButtonOr-test.js:
--------------------------------------------------------------------------------
1 | import ButtonOr from 'src/elements/Button/ButtonOr'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ButtonOr', () => {
5 | common.isConformant(ButtonOr)
6 | })
7 |
--------------------------------------------------------------------------------
/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/Header/HeaderContent-test.js:
--------------------------------------------------------------------------------
1 | import HeaderContent from 'src/elements/Header/HeaderContent'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('HeaderContent', () => {
5 | common.isConformant(HeaderContent)
6 | common.rendersChildren(HeaderContent)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/elements/Icon/IconGroup-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import IconGroup from 'src/elements/Icon/IconGroup'
3 | import * as common from 'test/specs/commonTests'
4 |
5 | describe('IconGroup', () => {
6 | common.isConformant(IconGroup)
7 | common.rendersChildren(IconGroup)
8 |
9 | it('renders as an by default', () => {
10 | shallow()
11 | .should.have.tagName('i')
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/test/specs/elements/Image/ImageGroup-test.js:
--------------------------------------------------------------------------------
1 | import ImageGroup from 'src/elements/Image/ImageGroup'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ImageGroup', () => {
5 | common.isConformant(ImageGroup)
6 | common.hasUIClassName(ImageGroup)
7 | common.rendersChildren(ImageGroup)
8 |
9 | common.propValueOnlyToClassName(ImageGroup, 'size')
10 | })
11 |
--------------------------------------------------------------------------------
/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/elements/List/ListDescription-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import ListDescription from 'src/elements/List/ListDescription'
3 |
4 | describe('ListDescription', () => {
5 | common.isConformant(ListDescription)
6 | common.rendersChildren(ListDescription)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/elements/List/ListHeader-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import ListHeader from 'src/elements/List/ListHeader'
3 |
4 | describe('ListHeader', () => {
5 | common.isConformant(ListHeader)
6 | common.rendersChildren(ListHeader)
7 | })
8 |
--------------------------------------------------------------------------------
/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/specs/elements/Reveal/RevealContent-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import RevealContent from 'src/elements/Reveal/RevealContent'
3 |
4 | describe('RevealContent', () => {
5 | common.isConformant(RevealContent)
6 | common.rendersChildren(RevealContent)
7 |
8 | common.propKeyOnlyToClassName(RevealContent, 'hidden')
9 | common.propKeyOnlyToClassName(RevealContent, 'visible')
10 | })
11 |
--------------------------------------------------------------------------------
/test/specs/modules/Accordion/AccordionContent-test.js:
--------------------------------------------------------------------------------
1 | import AccordionContent from 'src/modules/Accordion/AccordionContent'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('AccordionContent', () => {
5 | common.isConformant(AccordionContent)
6 | common.rendersChildren(AccordionContent)
7 | common.propKeyOnlyToClassName(AccordionContent, 'active')
8 | })
9 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/specs/modules/Dropdown/DropdownDivider-test.js:
--------------------------------------------------------------------------------
1 | import DropdownDivider from 'src/modules/Dropdown/DropdownDivider'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('DropdownDivider', () => {
5 | common.isConformant(DropdownDivider)
6 | })
7 |
--------------------------------------------------------------------------------
/test/specs/modules/Dropdown/DropdownHeader-test.js:
--------------------------------------------------------------------------------
1 | import DropdownHeader from 'src/modules/Dropdown/DropdownHeader'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('DropdownHeader', () => {
5 | common.isConformant(DropdownHeader)
6 | common.rendersChildren(DropdownHeader)
7 | common.implementsIconProp(DropdownHeader)
8 | })
9 |
--------------------------------------------------------------------------------
/test/specs/modules/Dropdown/DropdownMenu-test.js:
--------------------------------------------------------------------------------
1 | import DropdownMenu from 'src/modules/Dropdown/DropdownMenu'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('DropdownMenu', () => {
5 | common.isConformant(DropdownMenu)
6 | common.rendersChildren(DropdownMenu)
7 |
8 | common.propKeyOnlyToClassName(DropdownMenu, 'scrolling')
9 | })
10 |
--------------------------------------------------------------------------------
/test/specs/modules/Modal/ModalActions-test.js:
--------------------------------------------------------------------------------
1 | import ModalActions from 'src/modules/Modal/ModalActions'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ModalActions', () => {
5 | common.isConformant(ModalActions)
6 | common.rendersChildren(ModalActions)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Modal/ModalContent-test.js:
--------------------------------------------------------------------------------
1 | import ModalContent from 'src/modules/Modal/ModalContent'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ModalContent', () => {
5 | common.isConformant(ModalContent)
6 | common.rendersChildren(ModalContent)
7 |
8 | common.propKeyOnlyToClassName(ModalContent, 'image')
9 | })
10 |
--------------------------------------------------------------------------------
/test/specs/modules/Modal/ModalDescription-test.js:
--------------------------------------------------------------------------------
1 | import ModalDescription from 'src/modules/Modal/ModalDescription'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ModalDescription', () => {
5 | common.isConformant(ModalDescription)
6 | common.rendersChildren(ModalDescription)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Modal/ModalHeader-test.js:
--------------------------------------------------------------------------------
1 | import ModalHeader from 'src/modules/Modal/ModalHeader'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('ModalHeader', () => {
5 | common.isConformant(ModalHeader)
6 | common.rendersChildren(ModalHeader)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Popup/PopupContent-test.js:
--------------------------------------------------------------------------------
1 | import PopupContent from 'src/modules/Popup/PopupContent'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('PopupContent', () => {
5 | common.isConformant(PopupContent)
6 | common.rendersChildren(PopupContent)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Popup/PopupHeader-test.js:
--------------------------------------------------------------------------------
1 | import PopupHeader from 'src/modules/Popup/PopupHeader'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('PopupHeader', () => {
5 | common.isConformant(PopupHeader)
6 | common.rendersChildren(PopupHeader)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Search/SearchCategory-test.js:
--------------------------------------------------------------------------------
1 | import SearchCategory from 'src/modules/Search/SearchCategory'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('SearchCategory', () => {
5 | common.isConformant(SearchCategory)
6 | common.rendersChildren(SearchCategory)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/modules/Search/SearchResults-test.js:
--------------------------------------------------------------------------------
1 | import SearchResults from 'src/modules/Search/SearchResults'
2 | import * as common from 'test/specs/commonTests'
3 |
4 | describe('SearchResults', () => {
5 | common.isConformant(SearchResults)
6 | common.rendersChildren(SearchResults)
7 | })
8 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentActions-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentActions from 'src/views/Comment/CommentActions'
3 |
4 | describe('CommentActions', () => {
5 | common.isConformant(CommentActions)
6 | common.rendersChildren(CommentActions)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentAuthor-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentAuthor from 'src/views/Comment/CommentAuthor'
3 |
4 | describe('CommentAuthor', () => {
5 | common.isConformant(CommentAuthor)
6 | common.rendersChildren(CommentAuthor)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentAvatar-test.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 | import React from 'react'
3 |
4 | import * as common from 'test/specs/commonTests'
5 | import CommentAvatar from 'src/views/Comment/CommentAvatar'
6 |
7 | describe('CommentAvatar', () => {
8 | common.isConformant(CommentAvatar)
9 |
10 | describe('src', () => {
11 | it('renders img', () => {
12 | const url = faker.image.imageUrl()
13 | shallow()
14 | .should.contain(
)
15 | })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentContent-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentContent from 'src/views/Comment/CommentContent'
3 |
4 | describe('CommentContent', () => {
5 | common.isConformant(CommentContent)
6 | common.rendersChildren(CommentContent)
7 | })
8 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentMetadata-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentMetadata from 'src/views/Comment/CommentMetadata'
3 |
4 | describe('CommentMetadata', () => {
5 | common.isConformant(CommentMetadata)
6 | common.rendersChildren(CommentMetadata)
7 | })
8 |
--------------------------------------------------------------------------------
/test/specs/views/Comment/CommentText-test.js:
--------------------------------------------------------------------------------
1 | import * as common from 'test/specs/commonTests'
2 | import CommentText from 'src/views/Comment/CommentText'
3 |
4 | describe('CommentText', () => {
5 | common.isConformant(CommentText)
6 | common.rendersChildren(CommentText)
7 | })
8 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/utils/index.js:
--------------------------------------------------------------------------------
1 | export * from './assertNodeContains'
2 | export { default as consoleUtil } from './consoleUtil'
3 | export { default as domEvent } from './domEvent'
4 | export { default as sandbox } from './sandbox'
5 | export { default as syntheticEvent } from './syntheticEvent'
6 |
--------------------------------------------------------------------------------
/test/utils/sandbox.js:
--------------------------------------------------------------------------------
1 | import sinon from 'sinon'
2 |
3 | /**
4 | * Sinon Sandbox
5 | * http://sinonjs.org/docs/#sinon-sandbox
6 | *
7 | * A sandbox to house spy(), stub(), mock(), etc. that is automatically reset after each test.
8 | */
9 | const sandbox = sinon.sandbox.create()
10 |
11 | afterEach(() => {
12 | sandbox.restore()
13 | })
14 |
15 | export default sandbox
16 |
--------------------------------------------------------------------------------