From bc32a25ad16541a09a8f054f6a153d2c88ae3915 Mon Sep 17 00:00:00 2001 From: zallen <47335686+redallen@users.noreply.github.com> Date: Wed, 3 Apr 2019 11:06:15 -0400 Subject: [PATCH] feat(gatsby): Refactor Gatsby (#1656) * minimum working docs * add nav * prettier props and token rendering * refactor * live editing * sloppy dynamic imports * Convert react-core docs to markdown * react-core layouts and demos * #### to ## * navbar * titles * pretty css variables * chart docs * table docs * icon docs * remember to super * add static assets * add prop description * change build target * clean * make static copy (cleaner) * order is very important * pretty fullscreen links that will never conflict * fix bundle size * axe * add docs for new components * fix lerna run build * fix nav * add styled system * more styling * versions on index page * add handlebars * clean + favicon * yarn.lock * add docs * fix build * doc updates * pretty table * style * remove console.log * fix active link * style index, fix nav flash? * real nice index * remove console.log --- .circleci/config.yml | 3 +- .travis.yml | 1 + CONTRIBUTING.md | 9 +- GETTING-STARTED.md | 55 +- .../components/AreaChart/AreaChart.docs.js | 20 - .../AreaChart/examples/CustomColorsChart.js | 81 - .../AreaChart/examples/DarkGreenThemeChart.js | 65 - .../AreaChart/examples/SimpleChart.js | 65 - .../examples/common/getContainerProps.js | 19 - .../examples/common/getContainerPropsDark.js | 26 - .../src/components/BarChart/BarChart.docs.js | 13 - .../BarChart/examples/SimpleChart.js | 37 - .../examples/common/getContainerProps.js | 27 - .../BulletChart/examples/SimpleChart.js | 32 - .../examples/common/getContainerProps.js | 14 - .../src/components/ChartArea/ChartArea.md | 230 +++ .../src/components/ChartBar/ChartBar.md | 39 + .../src/components/ChartDonut/ChartDonut.md | 58 + .../src/components/ChartLine/ChartLine.md | 129 ++ .../src/components/ChartPie/ChartPie.md | 50 + .../src/components/ChartStack/ChartStack.md | 79 + .../components/DonutChart/DonutChart.docs.js | 13 - .../DonutChart/examples/SimpleChart.js | 66 - .../examples/common/getContainerProps.js | 24 - .../HeatMap/examples/SimpleHeatMap.js | 32 - .../examples/common/getContainerProps.js | 14 - .../components/LineChart/LineChart.docs.js | 13 - .../LineChart/examples/SimpleChart.js | 97 - .../examples/common/getContainerProps.js | 33 - .../src/components/PieChart/PieChart.docs.js | 12 - .../PieChart/examples/SimpleChart.js | 53 - .../examples/common/getContainerProps.js | 21 - .../components/StackChart/StackChart.docs.js | 18 - .../StackChart/examples/HorizontalChart.js | 37 - .../StackChart/examples/SimpleChart.js | 37 - .../examples/common/getContainerProps.js | 27 - packages/patternfly-4/react-core/.babelrc.js | 4 +- .../patternfly-4/react-core/CONTRIBUTING.md | 66 +- packages/patternfly-4/react-core/package.json | 4 +- .../components/AboutModal/AboutModal.docs.js | 16 - .../SimpleAboutModal.js => AboutModal.md} | 34 +- .../{pf_mini_logo_white.svg => brandImg.svg} | 0 .../examples/{pf_logo.svg => logoImg.svg} | 0 .../src/components/Alert/Alert.docs.js | 41 - .../react-core/src/components/Alert/Alert.md | 176 ++ .../components/Alert/examples/DangerAlert.js | 36 - .../components/Alert/examples/InfoAlert.js | 36 - .../components/Alert/examples/SuccessAlert.js | 40 - .../components/Alert/examples/WarningAlert.js | 40 - .../examples/common/getContainerProps.js | 11 - .../ApplicationLauncher.docs.js | 15 - .../ApplicationLauncher.md | 116 ++ .../examples/SimpleApplicationLauncher.js | 46 - .../examples/TooltipApplicationLauncher.js | 57 - .../src/components/Avatar/Avatar.docs.js | 17 - .../src/components/Avatar/Avatar.md | 11 + .../Avatar/examples/SimpleAvatar.js | 11 - .../{img_avatar.svg => avatarImg.svg} | 0 .../BackgroundImage/BackgroundImage.docs.js | 15 - .../BackgroundImage/BackgroundImage.md | 29 + .../examples/SimpleBackgroundImage.js | 22 - .../src/components/Badge/Badge.docs.js | 24 - .../react-core/src/components/Badge/Badge.md | 34 + .../components/Badge/examples/ReadBadge.js | 14 - .../components/Badge/examples/UnreadBadge.js | 14 - .../examples/common/getContainerProps.js | 9 - .../src/components/Brand/Brand.docs.js | 10 - .../react-core/src/components/Brand/Brand.md | 12 + .../components/Brand/examples/SimpleBrand.js | 11 - .../examples/{pf_logo.svg => pfLogo.svg} | 0 .../components/Breadcrumb/Breadcrumb.docs.js | 28 - .../src/components/Breadcrumb/Breadcrumb.md | 55 + .../Breadcrumb/examples/HeadingBreadcrumbs.js | 18 - .../Breadcrumb/examples/SimpleBreadcrumbs.js | 19 - .../examples/WithoutLinkBreadcrumbs.js | 21 - .../src/components/Button/Button.docs.js | 24 - .../src/components/Button/Button.md | 53 + .../components/Button/examples/BlockButton.js | 10 - .../Button/examples/ButtonVariants.js | 22 - .../components/Button/examples/LinkButton.js | 22 - .../src/components/Card/Card.docs.js | 22 - .../react-core/src/components/Card/Card.md | 55 + .../Card/examples/ContentOnlyCard.js | 14 - .../components/Card/examples/NoFooterCard.js | 15 - .../components/Card/examples/NoHeaderCard.js | 15 - .../components/Card/examples/SimpleCard.js | 16 - .../src/components/Checkbox/Checkbox.docs.js | 17 - .../src/components/Checkbox/Checkbox.md | 78 + .../Checkbox/examples/ControlledCheckbox.js | 39 - .../Checkbox/examples/DisabledCheckbox.js | 21 - .../Checkbox/examples/UncontrolledCheckbox.js | 15 - .../components/ChipGroup/ChipGroup.docs.js | 28 - .../src/components/ChipGroup/ChipGroup.md | 150 ++ .../ChipGroup/examples/BadgeChip.js | 46 - .../examples/MultiSelectChipGroup.js | 32 - .../ChipGroup/examples/ToolbarChipGroup.js | 58 - .../ContextSelector/ContextSelector.docs.js | 11 - .../ContextSelector/ContextSelector.md | 79 + .../examples/SimpleContextSelector.js | 72 - .../src/components/DataList/DataList.docs.js | 50 - .../src/components/DataList/DataList.md | 344 ++++ .../DataList/examples/ActionsDataList.js | 72 - .../examples/CheckboxActionDataList.js | 38 - .../DataList/examples/ExpandableDataList.js | 77 - .../DataList/examples/ModifiersDataList.js | 118 -- .../DataList/examples/SimpleDataList.js | 25 - .../src/components/Dropdown/Dropdown.docs.js | 40 - .../src/components/Dropdown/Dropdown.md | 397 ++++ .../Dropdown/examples/DirectionUpDropdown.js | 53 - .../Dropdown/examples/DisabledDropdown.js | 52 - .../Dropdown/examples/DropdownPanel.js | 36 - .../Dropdown/examples/IconDropdown.js | 55 - .../Dropdown/examples/KebabDropdown.js | 53 - .../examples/PositionRightDropdown.js | 53 - .../Dropdown/examples/ReactLinkDropdown.js | 29 - .../Dropdown/examples/SimpleDropdown.js | 52 - .../components/EmptyState/EmptyState.docs.js | 14 - .../src/components/EmptyState/EmptyState.md | 37 + .../EmptyState/examples/SimpleEmptyState.js | 36 - .../src/components/Form/Form.docs.js | 19 - .../react-core/src/components/Form/Form.md | 254 +++ .../Form/examples/HorizontalForm.js | 115 -- .../components/Form/examples/InvalidForm.js | 40 - .../components/Form/examples/SimpleForm.js | 90 - .../components/FormSelect/FormSelect.docs.js | 21 - .../src/components/FormSelect/FormSelect.md | 179 ++ .../FormSelect/examples/FormSelectInput.js | 34 - .../examples/FormSelectInputDisabled.js | 32 - .../examples/FormSelectInputGrouped.js | 59 - .../examples/FormSelectInputInvalid.js | 38 - .../components/InputGroup/InputGroup.docs.js | 16 - .../SimpleInputGroups.js => InputGroup.md} | 44 +- .../src/components/Label/Label.docs.js | 11 - .../react-core/src/components/Label/Label.md | 15 + .../components/Label/examples/SimpleLabel.js | 14 - .../src/components/List/List.docs.js | 18 - .../react-core/src/components/List/List.md | 48 + .../src/components/List/examples/GridList.js | 19 - .../components/List/examples/InlineList.js | 16 - .../components/List/examples/SimpleList.js | 16 - .../components/LoginPage/LoginPage.docs.js | 13 - .../SimpleLoginPage.js => LoginPage.md} | 73 +- .../{pf_logo_color.svg => brandImgColor.svg} | 0 .../src/components/Modal/Modal.docs.js | 21 - .../react-core/src/components/Modal/Modal.md | 261 +++ .../components/Modal/examples/LargeModal.js | 48 - .../src/components/Modal/examples/NoHeader.js | 47 - .../components/Modal/examples/SimpleModal.js | 47 - .../components/Modal/examples/SmallModal.js | 48 - .../components/Modal/examples/WidthModal.js | 48 - .../react-core/src/components/Nav/Nav.docs.js | 34 - .../react-core/src/components/Nav/Nav.md | 504 +++++ .../components/Nav/examples/NavDefaultList.js | 38 - .../Nav/examples/NavExpandableList.js | 99 - .../Nav/examples/NavExpandableTitlesList.js | 86 - .../components/Nav/examples/NavGroupedList.js | 46 - .../Nav/examples/NavHorizontalList.js | 37 - .../components/Nav/examples/NavMixedList.js | 89 - .../components/Nav/examples/NavSimpleList.js | 38 - .../Nav/examples/NavTertiaryList.js | 38 - .../src/components/Page/Page.docs.js | 22 - .../{examples/VerticalPage.js => Page.md} | 43 +- .../Page/examples/HorizontalPage.js | 25 - .../Page/examples/common/getContainerProps.js | 19 - .../components/Pagination/Pagination.docs.js | 18 - .../src/components/Pagination/Pagination.md | 82 + .../Pagination/examples/PaginationBottom.js | 35 - .../Pagination/examples/PaginationTop.js | 36 - .../src/components/Popover/Popover.docs.js | 22 - .../AdvancedPopover.js => Popover.md} | 86 +- .../Popover/examples/HeadlessPopover.js | 23 - .../Popover/examples/SimplePopover.js | 23 - .../src/components/Progress/Progress.docs.js | 44 - .../src/components/Progress/Progress.md | 136 ++ .../Progress/examples/LabeledProgress.js | 17 - .../Progress/examples/LargeProgress.js | 10 - .../Progress/examples/ProgressFailure.js | 10 - .../examples/ProgressFailureWithoutMeasure.js | 17 - .../Progress/examples/ProgressInside.js | 10 - .../examples/ProgressInsideSuccess.js | 17 - .../Progress/examples/ProgressOutside.js | 10 - .../examples/ProgressOutsideFailure.js | 17 - .../Progress/examples/ProgressSuccess.js | 10 - .../ProgressWithDynamicDescription.js | 10 - .../examples/ProgressWithoutMeasure.js | 10 - .../Progress/examples/SimpleProgress.js | 10 - .../Progress/examples/SingleLineProgress.js | 10 - .../Progress/examples/SmallProgress.js | 10 - .../src/components/Radio/Radio.docs.js | 18 - .../react-core/src/components/Radio/Radio.md | 72 + .../Radio/examples/ControlledRadio.js | 38 - .../Radio/examples/DisabledRadio.js | 15 - .../Radio/examples/UncontrolledRadio.js | 15 - .../examples/common/getContainerProps.js | 9 - .../{examples => }/CheckboxSelectInput.js | 0 .../GroupedCheckboxSelectInput.js | 0 .../src/components/Select/Select.docs.js | 20 - .../src/components/Select/Select.js | 2 +- .../src/components/Select/Select.md | 242 +++ .../Select/examples/SingleSelectInput.js | 75 - .../src/components/Switch/Switch.docs.js | 19 - .../src/components/Switch/Switch.md | 124 ++ .../Switch/examples/DisabledSwitch.js | 36 - .../Switch/examples/NoLabelSwitch.js | 26 - .../Switch/examples/SimpleSwitch.js | 27 - .../Switch/examples/UncontrolledSwitch.js | 28 - .../src/components/Tabs/Tabs.docs.js | 28 - .../react-core/src/components/Tabs/Tabs.md | 333 ++++ .../Tabs/examples/AccessibleSecondaryTabs.js | 51 - .../Tabs/examples/AccessibleTabs.js | 33 - .../components/Tabs/examples/FilledTabs.js | 33 - .../Tabs/examples/ScrollButtonsTabs.js | 60 - .../components/Tabs/examples/SecondaryTabs.js | 51 - .../Tabs/examples/SeparateTabContent.js | 36 - .../components/Tabs/examples/SimpleTabs.js | 33 - .../src/components/Text/Text.docs.js | 41 - .../react-core/src/components/Text/Text.md | 103 ++ .../src/components/Text/examples/BodyText.js | 30 - .../src/components/Text/examples/DataList.js | 23 - .../src/components/Text/examples/Headings.js | 19 - .../components/Text/examples/OrderedList.js | 22 - .../components/Text/examples/UnorderedList.js | 25 - .../src/components/TextArea/TextArea.docs.js | 12 - .../src/components/TextArea/TextArea.md | 60 + .../TextArea/examples/InvalidTextArea.js | 28 - .../TextArea/examples/SimpleTextArea.js | 20 - .../components/TextInput/TextInput.docs.js | 19 - .../src/components/TextInput/TextInput.md | 83 + .../TextInput/examples/DisabledTextInput.js | 27 - .../TextInput/examples/InvalidTextInput.js | 29 - .../TextInput/examples/ReadOnlyTextInput.js | 16 - .../TextInput/examples/SimpleTextInput.js | 22 - .../src/components/Title/Title.docs.js | 14 - .../react-core/src/components/Title/Title.md | 19 + .../components/Title/examples/TitleSizes.js | 19 - .../src/components/Tooltip/Tooltip.docs.js | 20 - .../src/components/Tooltip/Tooltip.md | 81 + .../src/components/Wizard/Wizard.docs.js | 20 - .../src/components/Wizard/Wizard.md | 207 +++ .../examples/{Steps => }/SampleFormOne.js | 0 .../examples/{Steps => }/SampleFormTwo.js | 0 .../Wizard/examples/SimpleWizard.js | 68 - .../Wizard/examples/ValidationWizard.js | 134 -- .../src/demos/PageLayout/PageLayout.md | 22 + .../demos/PageLayout/PageLayoutDemo.docs.js | 28 - .../examples/PageLayoutDefaultNav.js | 8 +- .../examples/PageLayoutExpandableNav.js | 8 +- .../examples/PageLayoutGroupsNav.js | 8 +- .../examples/PageLayoutHorizontalNav.js | 8 +- .../examples/PageLayoutManualNav.js | 8 +- .../examples/PageLayoutSimpleNav.js | 8 +- .../{img_avatar.svg => imgAvatar.svg} | 0 .../{l_pf-reverse-164x11.png => imgBrand.png} | Bin .../react-core/src/demos/README.md | 1 - .../src/demos/Toolbar/ToolbarDemo.docs.js | 12 - .../Toolbar/examples/ComplexToolbarDemo.js | 152 -- .../Toolbar/examples/SimpleToolbarDemo.js | 146 -- .../react-core/src/demos/ToolbarDemo.md | 157 ++ .../src/layouts/Bullseye/Bullseye.docs.js | 13 - .../src/layouts/Bullseye/Bullseye.md | 13 + .../Bullseye/examples/SimpleBullseye.js | 14 - .../examples/common/getContainerProps.js | 22 - .../src/layouts/Gallery/Gallery.docs.js | 19 - .../react-core/src/layouts/Gallery/Gallery.md | 35 + .../Gallery/examples/GalleryWithGutters.js | 19 - .../layouts/Gallery/examples/SimpleGallery.js | 22 - .../examples/common/getContainerProps.js | 15 - .../react-core/src/layouts/Grid/Grid.docs.js | 25 - .../react-core/src/layouts/Grid/Grid.md | 158 ++ .../layouts/Grid/examples/GridOverrides.js | 28 - .../layouts/Grid/examples/GridPlayground.js | 67 - .../Grid/examples/GridPlayground.styles.js | 26 - .../layouts/Grid/examples/GridWithGutters.js | 30 - .../Grid/examples/{common => }/ItemControl.js | 4 +- .../src/layouts/Grid/examples/SimpleGrid.js | 30 - .../Grid/examples/{common => }/SpanSlider.js | 9 +- .../examples/common/ItemControl.styles.js | 26 - .../Grid/examples/common/SpanSlider.styles.js | 23 - .../Grid/examples/common/getContainerProps.js | 19 - .../src/layouts/Level/Level.docs.js | 18 - .../react-core/src/layouts/Level/Level.md | 27 + .../Level/examples/LevelWithGutters.js | 16 - .../src/layouts/Level/examples/SimpleLevel.js | 16 - .../examples/common/getContainerProps.js | 14 - .../src/layouts/Split/Split.docs.js | 20 - .../react-core/src/layouts/Split/Split.md | 27 + .../src/layouts/Split/examples/SimpleSplit.js | 16 - .../layouts/Split/examples/SplitWithGutter.js | 16 - .../examples/common/getContainerProps.js | 14 - .../src/layouts/Stack/Stack.docs.js | 20 - .../react-core/src/layouts/Stack/Stack.md | 27 + .../src/layouts/Stack/examples/SimpleStack.js | 16 - .../layouts/Stack/examples/StackWithGutter.js | 16 - .../examples/common/getContainerProps.js | 18 - .../src/layouts/Toolbar/Toolbar.docs.js | 18 - .../react-core/src/layouts/Toolbar/Toolbar.md | 50 + .../examples/common/getContainerProps.js | 25 - .../patternfly-4/react-docs/.env.development | 1 - .../patternfly-4/react-docs/.env.production | 1 - packages/patternfly-4/react-docs/.eslintrc | 6 - packages/patternfly-4/react-docs/.eslintrc.js | 9 + packages/patternfly-4/react-docs/.gitignore | 30 +- packages/patternfly-4/react-docs/.npmignore | 4 +- packages/patternfly-4/react-docs/README.md | 99 +- .../patternfly-4/react-docs/build/copyDocs.js | 58 - .../patternfly-4/react-docs/gatsby-browser.js | 6 +- .../patternfly-4/react-docs/gatsby-config.js | 88 +- .../patternfly-4/react-docs/gatsby-node.js | 264 +-- packages/patternfly-4/react-docs/package.json | 57 +- .../gatsby-node.js | 86 + .../package.json | 19 + .../gatsby-node.js | 64 + .../package.json | 17 + .../react-docs/src/assets/logo.png | Bin 14711 -> 0 bytes .../components/componentDocs/componentDocs.js | 170 -- .../componentDocs/componentDocs.styles.js | 8 - .../src/components/componentDocs/cssvars.js | 65 + .../src/components/componentDocs/index.js | 4 +- .../src/components/componentDocs/liveEdit.js | 98 + .../src/components/componentDocs/props.js | 32 + .../components/componentDocs/propsHelper.js | 143 -- .../src/components/content/content.js | 14 - .../src/components/content/content.styles.js | 8 - .../src/components/content/index.js | 1 - .../src/components/css-variables.js | 183 -- .../src/components/example/example.js | 121 -- .../src/components/example/example.styles.js | 13 - .../src/components/example/index.js | 1 - .../src/components/example/liveDemo.js | 186 -- .../src/components/example/liveDemo.styles.js | 33 - .../gridPlayground/gridPlayground.js | 70 - .../gridPlayground/gridPlayground.styles.js | 26 - .../src/components/gridPlayground/index.js | 1 - .../components/gridPlayground/itemControl.js | 61 - .../gridPlayground/itemControl.styles.js | 26 - .../components/gridPlayground/spanSlider.js | 44 - .../gridPlayground/spanSlider.styles.js | 23 - .../src/components/layouts/fullPage.js | 13 - .../src/components/layouts/index.js | 169 -- .../src/components/navigation/index.js | 1 - .../src/components/navigation/navigation.js | 172 -- .../navigation/navigation.styles.js | 43 - .../components/navigation/navigationItem.js | 76 - .../navigation/navigationItem.styles.js | 54 - .../navigation/navigationItemGroup.js | 30 - .../navigation/navigationItemGroup.styles.js | 12 - .../react-docs/src/components/page/index.js | 1 - .../react-docs/src/components/page/page.js | 34 - .../src/components/page/page.styles.js | 19 - .../src/components/propsTable/index.js | 1 - .../src/components/propsTable/propsTable.js | 82 - .../propsTable/propsTable.styles.js | 10 - .../src/components/propsTableTs/index.js | 1 - .../components/propsTableTs/propsTableTs.js | 64 - .../propsTableTs/propsTableTs.styles.js | 10 - .../src/components/section/index.js | 1 - .../src/components/section/section.js | 48 - .../src/components/section/section.styles.js | 19 - .../react-docs/src/components/siteNav.js | 114 ++ .../react-docs/src/components/table/index.js | 1 - .../react-docs/src/components/table/table.js | 50 - .../src/components/table/table.styles.js | 33 - .../react-docs/src/helpers/astHelpers.js | 50 + .../react-docs/src/helpers/dynamicImports.js | 49 + .../react-docs/src/helpers/navHelpers.js | 11 + .../src/pages/getting-started/faqs.js | 3 - .../src/pages/getting-started/index.js | 3 - .../react-docs/src/pages/icons/icons.js | 59 + .../react-docs/src/pages/index.js | 138 +- .../react-docs/src/pages/styles/icons.js | 42 - .../react-docs/src/pages/styles/tokens.js | 18 - .../src/pages/tokens/global-css-variables.js | 15 + .../src/templates/markdownTemplate.js | 131 ++ .../react-docs/src/templates/sidebarLayout.js | 68 + .../react-docs/static/favicon.ico | Bin 0 -> 6518 bytes .../components/InlineEdit/InlineEdit.docs.js | 13 - .../src/components/InlineEdit/InlineEdit.md | 762 ++++++++ .../examples/CollapsibleEditableTable.js | 284 --- .../InlineEdit/examples/EditableTable.js | 313 ---- .../examples/EditableTableColumn.js | 158 -- .../TableTextInput/TableTextInput.docs.js | 10 - ...pleTableTextInput.js => TableTextInput.md} | 24 +- .../StyledSystem/StyledSystem.docs.js | 84 - .../components/StyledSystem/StyledSystem.md | 341 ++++ .../StyledSystem/examples/BorderStyles.js | 40 - .../StyledSystem/examples/BoxShadowStyles.js | 37 - .../StyledSystem/examples/ColorStyles.js | 22 - .../StyledSystem/examples/FlexStyles.js | 32 - .../StyledSystem/examples/FontSizeStyles.js | 21 - .../StyledSystem/examples/OverrideTheme.js | 45 - .../StyledSystem/examples/PositionStyles.js | 40 - .../StyledSystem/examples/ResponsiveStyles.js | 34 - .../StyledSystem/examples/SpaceStyles.js | 25 - .../StyledSystem/examples/TypographyStyles.js | 34 - .../StyledSystem/examples/WidthStyles.js | 31 - .../src/components/Table/Table.docs.js | 31 - .../react-table/src/components/Table/Table.md | 462 +++++ .../components/Table/examples/ActionsTable.js | 82 - .../components/Table/examples/CellHeader.js | 31 - .../Table/examples/CollapsibleTable.js | 77 - .../components/Table/examples/CompactTable.js | 30 - .../Table/examples/SelectableTable.js | 52 - .../Table/examples/SimpleActionsTable.js | 53 - .../components/Table/examples/SimpleTable.js | 36 - .../Table/examples/SortableTable.js | 44 - .../components/Table/examples/WidthTable.js | 34 - .../patternfly-4-component/index.js | 10 +- .../templates/component/component.docs.js.hbs | 10 - .../{example.js.hbs => component.md.hbs} | 10 +- yarn.lock | 1631 ++++++++++------- 410 files changed, 9529 insertions(+), 12042 deletions(-) delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/AreaChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/examples/CustomColorsChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/examples/DarkGreenThemeChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerPropsDark.js delete mode 100644 packages/patternfly-4/react-charts/src/components/BarChart/BarChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/BarChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/BarChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/BulletChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/BulletChart/examples/common/getContainerProps.js create mode 100644 packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md create mode 100644 packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md create mode 100644 packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md create mode 100644 packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md create mode 100644 packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md create mode 100644 packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md delete mode 100644 packages/patternfly-4/react-charts/src/components/DonutChart/DonutChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/DonutChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/DonutChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/HeatMap/examples/SimpleHeatMap.js delete mode 100644 packages/patternfly-4/react-charts/src/components/HeatMap/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/LineChart/LineChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/PieChart/PieChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/PieChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/PieChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-charts/src/components/StackChart/StackChart.docs.js delete mode 100644 packages/patternfly-4/react-charts/src/components/StackChart/examples/HorizontalChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/StackChart/examples/SimpleChart.js delete mode 100644 packages/patternfly-4/react-charts/src/components/StackChart/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.docs.js rename packages/patternfly-4/react-core/src/components/AboutModal/{examples/SimpleAboutModal.js => AboutModal.md} (82%) rename packages/patternfly-4/react-core/src/components/AboutModal/examples/{pf_mini_logo_white.svg => brandImg.svg} (100%) rename packages/patternfly-4/react-core/src/components/AboutModal/examples/{pf_logo.svg => logoImg.svg} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/Alert.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Alert/Alert.md delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/examples/DangerAlert.js delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/examples/InfoAlert.js delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/examples/SuccessAlert.js delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/examples/WarningAlert.js delete mode 100644 packages/patternfly-4/react-core/src/components/Alert/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/SimpleApplicationLauncher.js delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/TooltipApplicationLauncher.js delete mode 100644 packages/patternfly-4/react-core/src/components/Avatar/Avatar.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Avatar/Avatar.md delete mode 100644 packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js rename packages/patternfly-4/react-core/src/components/Avatar/examples/{img_avatar.svg => avatarImg.svg} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.md delete mode 100644 packages/patternfly-4/react-core/src/components/BackgroundImage/examples/SimpleBackgroundImage.js delete mode 100644 packages/patternfly-4/react-core/src/components/Badge/Badge.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Badge/Badge.md delete mode 100644 packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js delete mode 100644 packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js delete mode 100644 packages/patternfly-4/react-core/src/components/Badge/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.md delete mode 100644 packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js rename packages/patternfly-4/react-core/src/components/Brand/examples/{pf_logo.svg => pfLogo.svg} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.md delete mode 100644 packages/patternfly-4/react-core/src/components/Breadcrumb/examples/HeadingBreadcrumbs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Breadcrumb/examples/SimpleBreadcrumbs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Breadcrumb/examples/WithoutLinkBreadcrumbs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Button/Button.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Button/Button.md delete mode 100644 packages/patternfly-4/react-core/src/components/Button/examples/BlockButton.js delete mode 100644 packages/patternfly-4/react-core/src/components/Button/examples/ButtonVariants.js delete mode 100644 packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js delete mode 100644 packages/patternfly-4/react-core/src/components/Card/Card.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Card/Card.md delete mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/ContentOnlyCard.js delete mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/NoFooterCard.js delete mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/NoHeaderCard.js delete mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/SimpleCard.js delete mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.md delete mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js delete mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js delete mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js delete mode 100644 packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.md delete mode 100644 packages/patternfly-4/react-core/src/components/ChipGroup/examples/BadgeChip.js delete mode 100644 packages/patternfly-4/react-core/src/components/ChipGroup/examples/MultiSelectChipGroup.js delete mode 100644 packages/patternfly-4/react-core/src/components/ChipGroup/examples/ToolbarChipGroup.js delete mode 100644 packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md delete mode 100644 packages/patternfly-4/react-core/src/components/ContextSelector/examples/SimpleContextSelector.js delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/DataList/DataList.md delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.md delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/DisabledDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/DropdownPanel.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/IconDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/ReactLinkDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js delete mode 100644 packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.md delete mode 100644 packages/patternfly-4/react-core/src/components/EmptyState/examples/SimpleEmptyState.js delete mode 100644 packages/patternfly-4/react-core/src/components/Form/Form.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Form/Form.md delete mode 100644 packages/patternfly-4/react-core/src/components/Form/examples/HorizontalForm.js delete mode 100644 packages/patternfly-4/react-core/src/components/Form/examples/InvalidForm.js delete mode 100644 packages/patternfly-4/react-core/src/components/Form/examples/SimpleForm.js delete mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.md delete mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/examples/FormSelectInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/examples/FormSelectInputDisabled.js delete mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/examples/FormSelectInputGrouped.js delete mode 100644 packages/patternfly-4/react-core/src/components/FormSelect/examples/FormSelectInputInvalid.js delete mode 100644 packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.docs.js rename packages/patternfly-4/react-core/src/components/InputGroup/{examples/SimpleInputGroups.js => InputGroup.md} (91%) delete mode 100644 packages/patternfly-4/react-core/src/components/Label/Label.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Label/Label.md delete mode 100644 packages/patternfly-4/react-core/src/components/Label/examples/SimpleLabel.js delete mode 100644 packages/patternfly-4/react-core/src/components/List/List.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/List/List.md delete mode 100644 packages/patternfly-4/react-core/src/components/List/examples/GridList.js delete mode 100644 packages/patternfly-4/react-core/src/components/List/examples/InlineList.js delete mode 100644 packages/patternfly-4/react-core/src/components/List/examples/SimpleList.js delete mode 100644 packages/patternfly-4/react-core/src/components/LoginPage/LoginPage.docs.js rename packages/patternfly-4/react-core/src/components/LoginPage/{examples/SimpleLoginPage.js => LoginPage.md} (82%) rename packages/patternfly-4/react-core/src/components/LoginPage/examples/{pf_logo_color.svg => brandImgColor.svg} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/Modal.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Modal/Modal.md delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/NoHeader.js delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/SmallModal.js delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/WidthModal.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.md delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavDefaultList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableTitlesList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavGroupedList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavHorizontalList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavMixedList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavSimpleList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavTertiaryList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Page/Page.docs.js rename packages/patternfly-4/react-core/src/components/Page/{examples/VerticalPage.js => Page.md} (54%) delete mode 100644 packages/patternfly-4/react-core/src/components/Page/examples/HorizontalPage.js delete mode 100644 packages/patternfly-4/react-core/src/components/Page/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/components/Pagination/Pagination.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Pagination/Pagination.md delete mode 100644 packages/patternfly-4/react-core/src/components/Pagination/examples/PaginationBottom.js delete mode 100644 packages/patternfly-4/react-core/src/components/Pagination/examples/PaginationTop.js delete mode 100644 packages/patternfly-4/react-core/src/components/Popover/Popover.docs.js rename packages/patternfly-4/react-core/src/components/Popover/{examples/AdvancedPopover.js => Popover.md} (60%) delete mode 100644 packages/patternfly-4/react-core/src/components/Popover/examples/HeadlessPopover.js delete mode 100644 packages/patternfly-4/react-core/src/components/Popover/examples/SimplePopover.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/Progress.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Progress/Progress.md delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/LabeledProgress.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/LargeProgress.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressFailure.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressInside.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressInsideSuccess.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressOutside.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressOutsideFailure.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressSuccess.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressWithDynamicDescription.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/ProgressWithoutMeasure.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/SimpleProgress.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/SingleLineProgress.js delete mode 100644 packages/patternfly-4/react-core/src/components/Progress/examples/SmallProgress.js delete mode 100644 packages/patternfly-4/react-core/src/components/Radio/Radio.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Radio/Radio.md delete mode 100644 packages/patternfly-4/react-core/src/components/Radio/examples/ControlledRadio.js delete mode 100644 packages/patternfly-4/react-core/src/components/Radio/examples/DisabledRadio.js delete mode 100644 packages/patternfly-4/react-core/src/components/Radio/examples/UncontrolledRadio.js delete mode 100644 packages/patternfly-4/react-core/src/components/Radio/examples/common/getContainerProps.js rename packages/patternfly-4/react-core/src/components/Select/{examples => }/CheckboxSelectInput.js (100%) rename packages/patternfly-4/react-core/src/components/Select/{examples => }/GroupedCheckboxSelectInput.js (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Select/Select.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Select/Select.md delete mode 100644 packages/patternfly-4/react-core/src/components/Select/examples/SingleSelectInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/Switch/Switch.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Switch/Switch.md delete mode 100644 packages/patternfly-4/react-core/src/components/Switch/examples/DisabledSwitch.js delete mode 100644 packages/patternfly-4/react-core/src/components/Switch/examples/NoLabelSwitch.js delete mode 100644 packages/patternfly-4/react-core/src/components/Switch/examples/SimpleSwitch.js delete mode 100644 packages/patternfly-4/react-core/src/components/Switch/examples/UncontrolledSwitch.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/Tabs.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Tabs/Tabs.md delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/AccessibleSecondaryTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/AccessibleTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/FilledTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/ScrollButtonsTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/SecondaryTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/SeparateTabContent.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tabs/examples/SimpleTabs.js delete mode 100644 packages/patternfly-4/react-core/src/components/Text/Text.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Text/Text.md delete mode 100644 packages/patternfly-4/react-core/src/components/Text/examples/BodyText.js delete mode 100644 packages/patternfly-4/react-core/src/components/Text/examples/DataList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Text/examples/Headings.js delete mode 100644 packages/patternfly-4/react-core/src/components/Text/examples/OrderedList.js delete mode 100644 packages/patternfly-4/react-core/src/components/Text/examples/UnorderedList.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.md delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/examples/InvalidTextArea.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/examples/SimpleTextArea.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextInput/TextInput.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/TextInput.md delete mode 100644 packages/patternfly-4/react-core/src/components/TextInput/examples/DisabledTextInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextInput/examples/InvalidTextInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextInput/examples/ReadOnlyTextInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/TextInput/examples/SimpleTextInput.js delete mode 100644 packages/patternfly-4/react-core/src/components/Title/Title.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Title/Title.md delete mode 100644 packages/patternfly-4/react-core/src/components/Title/examples/TitleSizes.js delete mode 100644 packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.md delete mode 100644 packages/patternfly-4/react-core/src/components/Wizard/Wizard.docs.js create mode 100644 packages/patternfly-4/react-core/src/components/Wizard/Wizard.md rename packages/patternfly-4/react-core/src/components/Wizard/examples/{Steps => }/SampleFormOne.js (100%) rename packages/patternfly-4/react-core/src/components/Wizard/examples/{Steps => }/SampleFormTwo.js (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Wizard/examples/SimpleWizard.js delete mode 100644 packages/patternfly-4/react-core/src/components/Wizard/examples/ValidationWizard.js create mode 100644 packages/patternfly-4/react-core/src/demos/PageLayout/PageLayout.md delete mode 100644 packages/patternfly-4/react-core/src/demos/PageLayout/PageLayoutDemo.docs.js rename packages/patternfly-4/react-core/src/demos/PageLayout/examples/{img_avatar.svg => imgAvatar.svg} (100%) rename packages/patternfly-4/react-core/src/demos/PageLayout/examples/{l_pf-reverse-164x11.png => imgBrand.png} (100%) delete mode 100644 packages/patternfly-4/react-core/src/demos/README.md delete mode 100644 packages/patternfly-4/react-core/src/demos/Toolbar/ToolbarDemo.docs.js delete mode 100644 packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js delete mode 100644 packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js create mode 100644 packages/patternfly-4/react-core/src/demos/ToolbarDemo.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Bullseye/examples/SimpleBullseye.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Bullseye/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Gallery/examples/GalleryWithGutters.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Gallery/examples/SimpleGallery.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Gallery/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/Grid.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/Grid.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/GridOverrides.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.styles.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/GridWithGutters.js rename packages/patternfly-4/react-core/src/layouts/Grid/examples/{common => }/ItemControl.js (91%) delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/SimpleGrid.js rename packages/patternfly-4/react-core/src/layouts/Grid/examples/{common => }/SpanSlider.js (74%) delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/common/ItemControl.styles.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/common/SpanSlider.styles.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Grid/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Level/Level.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Level/Level.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Level/examples/LevelWithGutters.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Level/examples/SimpleLevel.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Level/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Split/Split.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Split/Split.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Split/examples/SimpleSplit.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Split/examples/SplitWithGutter.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Split/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Stack/Stack.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Stack/Stack.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Stack/examples/SimpleStack.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Stack/examples/StackWithGutter.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Stack/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-core/src/layouts/Toolbar/Toolbar.docs.js create mode 100644 packages/patternfly-4/react-core/src/layouts/Toolbar/Toolbar.md delete mode 100644 packages/patternfly-4/react-core/src/layouts/Toolbar/examples/common/getContainerProps.js delete mode 100644 packages/patternfly-4/react-docs/.env.development delete mode 100644 packages/patternfly-4/react-docs/.env.production delete mode 100644 packages/patternfly-4/react-docs/.eslintrc create mode 100644 packages/patternfly-4/react-docs/.eslintrc.js delete mode 100644 packages/patternfly-4/react-docs/build/copyDocs.js create mode 100644 packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-docgen-typescript/gatsby-node.js create mode 100644 packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-docgen-typescript/package.json create mode 100644 packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-examples/gatsby-node.js create mode 100644 packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-examples/package.json delete mode 100644 packages/patternfly-4/react-docs/src/assets/logo.png delete mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js delete mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.styles.js create mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/cssvars.js create mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js create mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/props.js delete mode 100644 packages/patternfly-4/react-docs/src/components/componentDocs/propsHelper.js delete mode 100644 packages/patternfly-4/react-docs/src/components/content/content.js delete mode 100644 packages/patternfly-4/react-docs/src/components/content/content.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/content/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/css-variables.js delete mode 100644 packages/patternfly-4/react-docs/src/components/example/example.js delete mode 100644 packages/patternfly-4/react-docs/src/components/example/example.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/example/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/example/liveDemo.js delete mode 100644 packages/patternfly-4/react-docs/src/components/example/liveDemo.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/gridPlayground.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/gridPlayground.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/itemControl.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/itemControl.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/spanSlider.js delete mode 100644 packages/patternfly-4/react-docs/src/components/gridPlayground/spanSlider.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/layouts/fullPage.js delete mode 100644 packages/patternfly-4/react-docs/src/components/layouts/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigation.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigation.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigationItem.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigationItem.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.js delete mode 100644 packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/page/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/page/page.js delete mode 100644 packages/patternfly-4/react-docs/src/components/page/page.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTable/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTable/propsTable.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTable/propsTable.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTableTs/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTableTs/propsTableTs.js delete mode 100644 packages/patternfly-4/react-docs/src/components/propsTableTs/propsTableTs.styles.js delete mode 100644 packages/patternfly-4/react-docs/src/components/section/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/section/section.js delete mode 100644 packages/patternfly-4/react-docs/src/components/section/section.styles.js create mode 100644 packages/patternfly-4/react-docs/src/components/siteNav.js delete mode 100644 packages/patternfly-4/react-docs/src/components/table/index.js delete mode 100644 packages/patternfly-4/react-docs/src/components/table/table.js delete mode 100644 packages/patternfly-4/react-docs/src/components/table/table.styles.js create mode 100644 packages/patternfly-4/react-docs/src/helpers/astHelpers.js create mode 100644 packages/patternfly-4/react-docs/src/helpers/dynamicImports.js create mode 100644 packages/patternfly-4/react-docs/src/helpers/navHelpers.js delete mode 100644 packages/patternfly-4/react-docs/src/pages/getting-started/faqs.js delete mode 100644 packages/patternfly-4/react-docs/src/pages/getting-started/index.js create mode 100644 packages/patternfly-4/react-docs/src/pages/icons/icons.js delete mode 100644 packages/patternfly-4/react-docs/src/pages/styles/icons.js delete mode 100644 packages/patternfly-4/react-docs/src/pages/styles/tokens.js create mode 100644 packages/patternfly-4/react-docs/src/pages/tokens/global-css-variables.js create mode 100644 packages/patternfly-4/react-docs/src/templates/markdownTemplate.js create mode 100644 packages/patternfly-4/react-docs/src/templates/sidebarLayout.js create mode 100644 packages/patternfly-4/react-docs/static/favicon.ico delete mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/InlineEdit.docs.js create mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/InlineEdit.md delete mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/examples/CollapsibleEditableTable.js delete mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/examples/EditableTable.js delete mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/examples/EditableTableColumn.js delete mode 100644 packages/patternfly-4/react-inline-edit-extension/src/components/TableTextInput/TableTextInput.docs.js rename packages/patternfly-4/react-inline-edit-extension/src/components/TableTextInput/{examples/SimpleTableTextInput.js => TableTextInput.md} (57%) delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledSystem.docs.js create mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledSystem.md delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/BorderStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/BoxShadowStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/ColorStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/FlexStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/FontSizeStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/OverrideTheme.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/PositionStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/ResponsiveStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/SpaceStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/TypographyStyles.js delete mode 100644 packages/patternfly-4/react-styled-system/src/components/StyledSystem/examples/WidthStyles.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/Table.docs.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/Table.md delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/ActionsTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/CellHeader.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/CollapsibleTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/CompactTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/SelectableTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/SimpleActionsTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/SimpleTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/SortableTable.js delete mode 100644 packages/patternfly-4/react-table/src/components/Table/examples/WidthTable.js delete mode 100644 scripts/generators/patternfly-4-component/templates/component/component.docs.js.hbs rename scripts/generators/patternfly-4-component/templates/component/{example.js.hbs => component.md.hbs} (65%) diff --git a/.circleci/config.yml b/.circleci/config.yml index 21c9620978a..a18a9039981 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -39,7 +39,8 @@ jobs: command: | yarn build:docs && cp -r packages/patternfly-4/react-docs/public .public/patternfly-4 && - cp -r packages/patternfly-4/react-docs/public/assets .public/assets + cp -r .public/patternfly-4/assets .public/assets && + cp .public/patternfly-4/favicon* .public no_output_timeout: 30m - run: name: Deploy Docs diff --git a/.travis.yml b/.travis.yml index f1c97f45c5b..5e388a44eab 100644 --- a/.travis.yml +++ b/.travis.yml @@ -86,5 +86,6 @@ jobs: - yarn build:storybook - mv .out .public/patternfly-3 - mv packages/patternfly-4/react-docs/public .public/patternfly-4 + - cp .public/patternfly-4/favicon* .public - cp -r .public/patternfly-4/assets .public/assets - .circleci/conditional_upload.sh diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eb78d705300..39ad4adb3b9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -192,9 +192,8 @@ Please ensure that all React UI components contributed meet the following guidel - When your stories contain multiple files, put them in a subfolder named `Stories` - `src/**/*.stories.js` and `src/**/Stories/` are excluded from the package build output - Documentation for PatternFly 4 - - Provide documentation for your component with examples in the component's example directory. examples (e.g `Listgroup/examples/SimpleListGroup.js`) - - All examples should be added to the component's documentation file (`ComponentName.docs.js`) exports. - See the getting started guide for more information on [Adding documentation](./GETTING-STARTED.md#adding-component-documentation) + - Provide documentation for your component with a single Markdown file. (e.g., `ListGroup.md`) + See how to write documentation in the [`react-docs` README](./packages/patternfly-4/react-docs/README.md) - When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - `import classNames from 'classnames'` - When destructuring or spreading expressions , use ...props as the variable name. - Exporting components from other libraries (without manipulating them) @@ -256,9 +255,7 @@ $ git checkout -b my-branch -t upstream/master index.js - Barrel File exporting public exports ComponentName.js - Component Implementation ComponentName.test.js - Component Tests - ComponentName.docs.js - Component Docs - examples/ - dir for all examples - SimpleComp + ComponentName.md - Component Docs ``` 4. Develop your component. After development is complete, ensure tests and lint standards pass. diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 48509a8d795..101718c2b94 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -18,63 +18,16 @@ After you have written your new PatternFly component, tests, and Storybook stori ## PatternFly React Doc -PatternFly 4 React uses Gatsby. Examples are created toe demonstrate of the use of the React components. Documents are generated from these examples. - -### Adding Component Documentation - -Component Documentation has two parts. a `[Component].docs.js` file, and files under `[Component]/examples/`. Each file must follow a few guidelines for them to be consumed properly by the docs website. - -The `docs.js` file has the following structure - -```js -import SimpleExample from './examples/SimpleComponent'; -import { Component, ComponentSize } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed - -export default { - title: 'Component', // Title to display at the top of the docs page - description: 'description', // Opening description for the component - components: { - Component: Component // Key value pair for components to include prop documentation - }, - enumValues: { - // Optional - ComponentSize: Object.values(ComponentSize) // key value pair for any enums that cannot be statically analyzed. - }, - examples: [SimpleExample] // Array of examples to include on the page. They must be stored under /examples/ -}; -``` - -An example file has the following structure - -```jsx -import React from 'react'; -import { Component } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed -import something from './common/something'; // any directory under examples/ is ignored in page generation. -import styles from './Example.styles.js'; // any .styles.js file under examples/ is ignored in page generation - -// note: this can be a function too with the title, etc, set similar to setting Component.propTypes -class Example extends React.Component { - static title = 'Simple Example'; // Sets the examples title - static description = 'description'; // Optional: Extra description for the example - static getContainerProps = () => ({ - // Optional: Adds any extra props to the container. Useful for example specific styles - style: styles - }); - - render() { - return ; - } -} - -export default Example; -``` +PatternFly 4 React uses Gatsby. Examples are created to demonstrate of the use of the React components. Documents are generated from these examples. +See how to write documentation in the [`react-docs` README](./packages/patternfly-4/react-docs/README.md) Some things to keep in mind when writing examples: 1. Keep them simple. It is much easier for a person to understand what is going on. 1. Do not do any iteration of variants, sizes, etc in the render. This is easier for the developer, but it makes it much harder to reason for the consumer. -1. Keep anything you think is useful inside this file. The source view (coming soon) will only include the source of the example. If everything is broken out it will not be useful to the consumer. Remember, you are writing examples not a super optimized application. 1. Try not to add extra external dependencies. These will only be approved on a case by case basis. +1. You are unable to use experimental language features like [class properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) as [Buble](https://github.com/bublejs/buble) does not support them. +1. The easiest way to develop your example is by creating an empty code block and then editing it in your browser. Once your happy, copy the code back to your Markdown file. ## Testing diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/AreaChart.docs.js b/packages/patternfly-4/react-charts/src/components/AreaChart/AreaChart.docs.js deleted file mode 100644 index 4b3f8f5ed60..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/AreaChart.docs.js +++ /dev/null @@ -1,20 +0,0 @@ -import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts'; -import CustomColorsChart from './examples/CustomColorsChart'; -import SimpleChart from './examples/SimpleChart'; -import DarkGreenThemeChart from './examples/DarkGreenThemeChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Area Chart', - components: { - ChartArea, - ChartGroup, - ChartLegend, - ChartVoronoiContainer - }, - examples: [ - { component: SimpleChart, title: 'Simple Chart', getContainerProps }, - { component: CustomColorsChart, title: 'Custom Colors Chart', getContainerProps }, - { component: DarkGreenThemeChart, title: 'Dark, Green Theme Chart', getContainerProps } - ] -}; diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/CustomColorsChart.js b/packages/patternfly-4/react-charts/src/components/AreaChart/examples/CustomColorsChart.js deleted file mode 100644 index 3158bbe9b2c..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/CustomColorsChart.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts'; - -class CustomColorsChart extends React.Component { - containerRef = React.createRef(); - state = { - width: 0 - }; - - componentDidMount() { - setTimeout(() => { - this.setState({ width: this.containerRef.current.clientWidth }); - window.addEventListener('resize', this.handleResize); - }); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); - } - - getTooltipLabel = datum => `${datum.name}: ${datum.y}`; - - handleResize = () => { - this.setState({ width: this.containerRef.current.clientWidth }); - }; - - render() { - const { width } = this.state; - const container = ; - const cats = { - data: { - fill: '#486b00', // global_success_color_200.value, - // fill: global_success_color_200.value, - stroke: '#92d400' // global_success_color_100.value - } - }; - const dogs = { - data: { - fill: '#007bba', // global_primary_color_100.value, - stroke: '#00659c' // global_primary_color_200.value - } - }; - - return ( -
-
- - - - -
- -
- ); - } -} - -export default CustomColorsChart; diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/DarkGreenThemeChart.js b/packages/patternfly-4/react-charts/src/components/AreaChart/examples/DarkGreenThemeChart.js deleted file mode 100644 index 597990d372c..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/DarkGreenThemeChart.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts'; - -class DarkGreenThemeChart extends React.Component { - containerRef = React.createRef(); - state = { - width: 0 - }; - - componentDidMount() { - setTimeout(() => { - this.setState({ width: this.containerRef.current.clientWidth }); - window.addEventListener('resize', this.handleResize); - }); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); - } - - getTooltipLabel = datum => `${datum.name}: ${datum.y}`; - - handleResize = () => { - this.setState({ width: this.containerRef.current.clientWidth }); - }; - render() { - const { width } = this.state; - const container = ; - - return ( -
-
- - - - -
- -
- ); - } -} - -export default DarkGreenThemeChart; diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/AreaChart/examples/SimpleChart.js deleted file mode 100644 index 93b7b5cc5c3..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/SimpleChart.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts'; - -class SimpleChart extends React.Component { - containerRef = React.createRef(); - state = { - width: 0 - }; - - componentDidMount() { - setTimeout(() => { - this.setState({ width: this.containerRef.current.clientWidth }); - window.addEventListener('resize', this.handleResize); - }); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); - } - - getTooltipLabel = datum => `${datum.name}: ${datum.y}`; - - handleResize = () => { - this.setState({ width: this.containerRef.current.clientWidth }); - }; - - render() { - const { width } = this.state; - const container = ; - - return ( -
-
- - - - -
- -
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerProps.js deleted file mode 100644 index 34aa7949884..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,19 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-overflow': { - '& svg': { - overflow: 'visible' - } - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerPropsDark.js b/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerPropsDark.js deleted file mode 100644 index 2ee49cb06b1..00000000000 --- a/packages/patternfly-4/react-charts/src/components/AreaChart/examples/common/getContainerPropsDark.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable camelcase */ -import { global_BackgroundColor_dark_100, global_Color_light_100 } from '@patternfly/react-tokens'; -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - backgroundColor: global_BackgroundColor_dark_100.value, - backgroundImage: 'url("/assets/images/pfbg_1200.jpg")', - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - '& > *': { - '.chart-overflow': { - '& svg': { - overflow: 'visible' - } - }, - '.chart-title': { - color: global_Color_light_100.value, - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/BarChart/BarChart.docs.js b/packages/patternfly-4/react-charts/src/components/BarChart/BarChart.docs.js deleted file mode 100644 index fabe30ae049..00000000000 --- a/packages/patternfly-4/react-charts/src/components/BarChart/BarChart.docs.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Chart, ChartBar, ChartGroup } from '@patternfly/react-charts'; -import SimpleChart from './examples/SimpleChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Bar Chart', - components: { - Chart, - ChartBar, - ChartGroup - }, - examples: [{ component: SimpleChart, title: 'Simple Chart', getContainerProps }] -}; diff --git a/packages/patternfly-4/react-charts/src/components/BarChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/BarChart/examples/SimpleChart.js deleted file mode 100644 index d0c665454d1..00000000000 --- a/packages/patternfly-4/react-charts/src/components/BarChart/examples/SimpleChart.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class SimpleChart extends React.Component { - getChart = theme => ( - - - - - - - - - ); - - render() { - return ( - - - - Blue Theme - -
{this.getChart(ChartTheme.light.blue)}
-
- - - Multi Color Theme - -
{this.getChart(ChartTheme.light.multi)}
-
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/BarChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/BarChart/examples/common/getContainerProps.js deleted file mode 100644 index 49cf072870c..00000000000 --- a/packages/patternfly-4/react-charts/src/components/BarChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,27 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-container': { - height: '200px', - width: '300px' - }, - '.chart-margin': { - marginBottom: '30px', - marginLeft: '20px' - }, - '.chart-overflow': { - '& svg': { - overflow: 'visible' - } - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/BulletChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/BulletChart/examples/SimpleChart.js deleted file mode 100644 index 92ff3a6d9c1..00000000000 --- a/packages/patternfly-4/react-charts/src/components/BulletChart/examples/SimpleChart.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; -import getContainerProps from './common/getContainerProps'; - -class SimpleChart extends React.Component { - static getContainerProps = getContainerProps; - static title = 'Simple Chart'; - - getHeatMap = theme => Coming soon...; - - render() { - return ( - - - - Blue Theme - -
{this.getHeatMap(ChartTheme.light.blue)}
-
- - - Green Theme - -
{this.getHeatMap(ChartTheme.light.multi)}
-
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/BulletChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/BulletChart/examples/common/getContainerProps.js deleted file mode 100644 index 7ff3108749a..00000000000 --- a/packages/patternfly-4/react-charts/src/components/BulletChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,14 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md new file mode 100644 index 00000000000..e6027763b15 --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.md @@ -0,0 +1,230 @@ +--- +title: "Area Chart" +section: "charts" +--- +## Simple Chart +```js +import React from 'react'; +import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts'; + +class SimpleChart extends React.Component { + constructor(props) { + super(props); + this.containerRef = React.createRef(); + this.state = { + width: 0 + }; + + this.getTooltipLabel = datum => `${datum.name}: ${datum.y}`; + + this.handleResize = () => { + this.setState({ width: this.containerRef.current.clientWidth }); + }; + } + + componentDidMount() { + setTimeout(() => { + this.setState({ width: this.containerRef.current.clientWidth }); + window.addEventListener('resize', this.handleResize); + }); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + } + + render() { + const { width } = this.state; + const container = ; + + return ( +
+
+ + + + +
+ +
+ ); + } +} +``` + +## Custom Colors Chart +```js +import React from 'react'; +import { ChartArea, ChartGroup, ChartLegend, ChartVoronoiContainer } from '@patternfly/react-charts'; + +class CustomColorsChart extends React.Component { + constructor(props) { + super(props); + this.containerRef = React.createRef(); + this.state = { + width: 0 + }; + + this.getTooltipLabel = datum => `${datum.name}: ${datum.y}`; + + this.handleResize = () => { + this.setState({ width: this.containerRef.current.clientWidth }); + }; + } + + componentDidMount() { + setTimeout(() => { + this.setState({ width: this.containerRef.current.clientWidth }); + window.addEventListener('resize', this.handleResize); + }); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + } + + render() { + const { width } = this.state; + const container = ; + const cats = { + data: { + fill: '#486b00', // global_success_color_200.value, + // fill: global_success_color_200.value, + stroke: '#92d400' // global_success_color_100.value + } + }; + const dogs = { + data: { + fill: '#007bba', // global_primary_color_100.value, + stroke: '#00659c' // global_primary_color_200.value + } + }; + + return ( +
+
+ + + + +
+ +
+ ); + } +} +``` + +## Dark Green Theme Chart +```js +import React from 'react'; +import { ChartArea, ChartGroup, ChartLegend, ChartTheme, ChartVoronoiContainer } from '@patternfly/react-charts'; + +class DarkGreenThemeChart extends React.Component { + constructor(props) { + super(props); + this.containerRef = React.createRef(); + this.state = { + width: 0 + }; + + this.getTooltipLabel = datum => `${datum.name}: ${datum.y}`; + + this.handleResize = () => { + this.setState({ width: this.containerRef.current.clientWidth }); + }; + } + + componentDidMount() { + setTimeout(() => { + this.setState({ width: this.containerRef.current.clientWidth }); + window.addEventListener('resize', this.handleResize); + }); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + } + + render() { + const { width } = this.state; + const container = ; + + return ( +
+
+ + + + +
+ +
+ ); + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md new file mode 100644 index 00000000000..7798fae5564 --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.md @@ -0,0 +1,39 @@ +--- +title: "Bar Chart" +section: "charts" +--- +## Blue Theme Bar Chart +```js +import React from 'react'; +import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` + +## Multi-Color Theme Bar Char +```js +import React from 'react'; +import { Chart, ChartBar, ChartGroup, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md b/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md new file mode 100644 index 00000000000..6b25e7822f9 --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.md @@ -0,0 +1,58 @@ +--- +title: "Donut Chart" +section: "charts" +--- +## Blue Theme Donut Chart +```js +import React from 'react'; +import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+
+ + + + + `${datum.x}: ${datum.y}`} + theme={ChartTheme.light.blue} + /> +
+ +
+``` + +## Multi-color Theme Donut Chart +```js +import React from 'react'; +import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+
+ + + + + `${datum.x}: ${datum.y}`} + theme={ChartTheme.light.multi} + /> +
+ +
+``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md b/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md new file mode 100644 index 00000000000..c9459a3d0ee --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.md @@ -0,0 +1,129 @@ +--- +title: "Line Chart" +section: "charts" +--- +## Green Themed Line Chart +```js +import React from 'react'; +import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+``` + +## Multi-color Themed Line Chart +```js +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md b/packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md new file mode 100644 index 00000000000..ac9113fb03a --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartPie/ChartPie.md @@ -0,0 +1,50 @@ +--- +title: "Pie Chart" +section: "charts" +--- +## Blue-Themed Pie Chart +```js +import React from 'react'; +import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+
+ `${datum.x}: ${datum.y}`} + theme={ChartTheme.light.blue} + /> +
+ +
+``` + +## Multi-Color Themed Pie Chart +```js +import React from 'react'; +import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+
+ `${datum.x}: ${datum.y}`} + theme={ChartTheme.light.multi} + /> +
+ +
+``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md b/packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md new file mode 100644 index 00000000000..f845e0e2fd6 --- /dev/null +++ b/packages/patternfly-4/react-charts/src/components/ChartStack/ChartStack.md @@ -0,0 +1,79 @@ +--- +title: "Stack Chart" +section: "charts" +--- +### Known Problem +All of the `` elements on this page need to have `overflow: 'visible'` set on them to display axes. + + +## Vertical Blue Themed Stack Chart +```js +import React from 'react'; +import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` + +## Vertical Multi-Color Themed Stack Chart +```js +import React from 'react'; +import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` + +## Horizontal Blue Themed Stack Chart +```js +import React from 'react'; +import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` + +## Horizontal Multi-Color Stack Chart +```js +import React from 'react'; +import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; +import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; + +
+ + + + + + + + +
+``` \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/src/components/DonutChart/DonutChart.docs.js b/packages/patternfly-4/react-charts/src/components/DonutChart/DonutChart.docs.js deleted file mode 100644 index 597997be142..00000000000 --- a/packages/patternfly-4/react-charts/src/components/DonutChart/DonutChart.docs.js +++ /dev/null @@ -1,13 +0,0 @@ -import { ChartDonut, ChartLabel, ChartLegend } from '@patternfly/react-charts'; -import SimpleChart from './examples/SimpleChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Donut Chart', - components: { - ChartDonut, - ChartLabel, - ChartLegend - }, - examples: [{ component: SimpleChart, title: 'Simple Chart', getContainerProps }] -}; diff --git a/packages/patternfly-4/react-charts/src/components/DonutChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/DonutChart/examples/SimpleChart.js deleted file mode 100644 index 1d2281c61a1..00000000000 --- a/packages/patternfly-4/react-charts/src/components/DonutChart/examples/SimpleChart.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { ChartDonut, ChartLabel, ChartLegend, ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class SimpleChart extends React.Component { - getChart = theme => ( - - ); - - getLegend = (theme, horizontal) => ( - - ); - - getTooltipLabel = datum => `${datum.x}: ${datum.y}`; - - render() { - const label = ( - - - - - ); - - return ( - - - - Blue Theme - -
-
- {label} - {this.getChart(ChartTheme.light.blue)} -
- {this.getLegend(ChartTheme.light.blue, false)} -
-
- - - Multi Color Theme - -
- {label} - {this.getChart(ChartTheme.light.multi)} -
- {this.getLegend(ChartTheme.light.multi, true)} -
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/DonutChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/DonutChart/examples/common/getContainerProps.js deleted file mode 100644 index 2db42cc386f..00000000000 --- a/packages/patternfly-4/react-charts/src/components/DonutChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,24 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-container': { - height: '200px', - width: '200px' - }, - '.chart-inline': { - display: 'inline-flex' - }, - '.chart-label': { - position: 'absolute' - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/HeatMap/examples/SimpleHeatMap.js b/packages/patternfly-4/react-charts/src/components/HeatMap/examples/SimpleHeatMap.js deleted file mode 100644 index 64e62af76df..00000000000 --- a/packages/patternfly-4/react-charts/src/components/HeatMap/examples/SimpleHeatMap.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; -import getContainerProps from './common/getContainerProps'; - -class SimpleHeatMap extends React.Component { - static getContainerProps = getContainerProps; - static title = 'Simple Heat Map'; - - getHeatMap = theme => Coming soon...; - - render() { - return ( - - - - Blue Theme - -
{this.getHeatMap(ChartTheme.light.blue)}
-
- - - Multi Color Theme - -
{this.getHeatMap(ChartTheme.light.multi)}
-
-
- ); - } -} - -export default SimpleHeatMap; diff --git a/packages/patternfly-4/react-charts/src/components/HeatMap/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/HeatMap/examples/common/getContainerProps.js deleted file mode 100644 index 7ff3108749a..00000000000 --- a/packages/patternfly-4/react-charts/src/components/HeatMap/examples/common/getContainerProps.js +++ /dev/null @@ -1,14 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/LineChart/LineChart.docs.js b/packages/patternfly-4/react-charts/src/components/LineChart/LineChart.docs.js deleted file mode 100644 index 733d5e2eb94..00000000000 --- a/packages/patternfly-4/react-charts/src/components/LineChart/LineChart.docs.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Chart, ChartGroup, ChartLine } from '@patternfly/react-charts'; -import SimpleChart from './examples/SimpleChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Line Chart', - components: { - Chart, - ChartGroup, - ChartLine - }, - examples: [{ component: SimpleChart, title: 'Simple Chart', getContainerProps }] -}; diff --git a/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js deleted file mode 100644 index e4471d889f3..00000000000 --- a/packages/patternfly-4/react-charts/src/components/LineChart/examples/SimpleChart.js +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import { Chart, ChartGroup, ChartLegend, ChartLine, ChartTheme, ChartAxis } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class SimpleChart extends React.Component { - getChart = theme => ( - - - - - - - - - - - ); - - getlegend = theme => ( - - ); - - render() { - return ( - - - - Green Theme - -
-
-
- {this.getChart(ChartTheme.light.green)} -
-
- {this.getlegend(ChartTheme.light.green)} -
-
-
-
- - - Multi Color Theme - -
-
- {this.getChart(ChartTheme.light.multi)} -
-
- {this.getlegend(ChartTheme.light.multi)} -
-
-
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js deleted file mode 100644 index 4212a300bfc..00000000000 --- a/packages/patternfly-4/react-charts/src/components/LineChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,33 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-container': { - height: '250px', - width: '300px' - }, - '.chart-margin': { - marginBottom: '30px', - marginLeft: '40px' - }, - '.chart-inline': { - display: 'inline-flex' - }, - '.chart-legend': { - marginTop: '30px' - }, - '.chart-overflow': { - '& svg': { - overflow: 'visible' - } - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/PieChart/PieChart.docs.js b/packages/patternfly-4/react-charts/src/components/PieChart/PieChart.docs.js deleted file mode 100644 index d84f482a6d0..00000000000 --- a/packages/patternfly-4/react-charts/src/components/PieChart/PieChart.docs.js +++ /dev/null @@ -1,12 +0,0 @@ -import { ChartLegend, ChartPie } from '@patternfly/react-charts'; -import SimpleChart from './examples/SimpleChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Pie Chart', - components: { - ChartLegend, - ChartPie - }, - examples: [{ component: SimpleChart, title: 'Simple Chart', getContainerProps }] -}; diff --git a/packages/patternfly-4/react-charts/src/components/PieChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/PieChart/examples/SimpleChart.js deleted file mode 100644 index 611267e97c1..00000000000 --- a/packages/patternfly-4/react-charts/src/components/PieChart/examples/SimpleChart.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { ChartLegend, ChartTheme, ChartPie } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class SimpleChart extends React.Component { - getChart = theme => ( - - ); - - getLegend = (theme, horizontal) => ( - - ); - - getTooltipLabel = datum => `${datum.x}: ${datum.y}`; - - render() { - return ( - - - - Blue Theme - -
-
{this.getChart(ChartTheme.light.blue)}
- {this.getLegend(ChartTheme.light.blue, false)} -
-
- - - Multi Color Theme - -
{this.getChart(ChartTheme.light.multi)}
- {this.getLegend(ChartTheme.light.multi, true)} -
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/PieChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/PieChart/examples/common/getContainerProps.js deleted file mode 100644 index 60c6593a208..00000000000 --- a/packages/patternfly-4/react-charts/src/components/PieChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,21 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-container': { - height: '200px', - width: '200px' - }, - '.chart-inline': { - display: 'inline-flex' - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-charts/src/components/StackChart/StackChart.docs.js b/packages/patternfly-4/react-charts/src/components/StackChart/StackChart.docs.js deleted file mode 100644 index 92bc89b26f8..00000000000 --- a/packages/patternfly-4/react-charts/src/components/StackChart/StackChart.docs.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Chart, ChartBar, ChartLegend, ChartStack } from '@patternfly/react-charts'; -import HorizontalChart from './examples/HorizontalChart'; -import SimpleChart from './examples/SimpleChart'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Stack Chart', - components: { - Chart, - ChartBar, - ChartLegend, - ChartStack - }, - examples: [ - { component: SimpleChart, title: 'Simple Chart', getContainerProps }, - { component: HorizontalChart, title: 'Horizontal Chart', getContainerProps } - ] -}; diff --git a/packages/patternfly-4/react-charts/src/components/StackChart/examples/HorizontalChart.js b/packages/patternfly-4/react-charts/src/components/StackChart/examples/HorizontalChart.js deleted file mode 100644 index f59c39d3b91..00000000000 --- a/packages/patternfly-4/react-charts/src/components/StackChart/examples/HorizontalChart.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class HorizontalChart extends React.Component { - getChart = theme => ( - - - - - - - - - ); - - render() { - return ( - - - - Blue Theme - -
{this.getChart(ChartTheme.light.blue)}
-
- - - Multi Color Theme - -
{this.getChart(ChartTheme.light.multi)}
-
-
- ); - } -} - -export default HorizontalChart; diff --git a/packages/patternfly-4/react-charts/src/components/StackChart/examples/SimpleChart.js b/packages/patternfly-4/react-charts/src/components/StackChart/examples/SimpleChart.js deleted file mode 100644 index 5eb4487c35b..00000000000 --- a/packages/patternfly-4/react-charts/src/components/StackChart/examples/SimpleChart.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Chart, ChartBar, ChartStack, ChartTheme } from '@patternfly/react-charts'; -import { Grid, GridItem, Text, TextVariants } from '@patternfly/react-core'; - -class SimpleChart extends React.Component { - getChart = theme => ( - - - - - - - - - ); - - render() { - return ( - - - - Blue Theme - -
{this.getChart(ChartTheme.light.blue)}
-
- - - Multi Color Theme - -
{this.getChart(ChartTheme.light.multi)}
-
-
- ); - } -} - -export default SimpleChart; diff --git a/packages/patternfly-4/react-charts/src/components/StackChart/examples/common/getContainerProps.js b/packages/patternfly-4/react-charts/src/components/StackChart/examples/common/getContainerProps.js deleted file mode 100644 index d6870f53700..00000000000 --- a/packages/patternfly-4/react-charts/src/components/StackChart/examples/common/getContainerProps.js +++ /dev/null @@ -1,27 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > *': { - '.chart-container': { - height: '200px', - width: '300px' - }, - '.chart-margin': { - marginBottom: '30px', - marginLeft: '40px' - }, - '.chart-overflow': { - '& svg': { - overflow: 'visible' - } - }, - '.chart-title': { - marginBottom: '25px', - marginLeft: '10px' - } - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-core/.babelrc.js b/packages/patternfly-4/react-core/.babelrc.js index 7a011c3b2d0..1f8acd1a200 100644 --- a/packages/patternfly-4/react-core/.babelrc.js +++ b/packages/patternfly-4/react-core/.babelrc.js @@ -2,7 +2,7 @@ const babelENV = process.env.BABEL_ENV || 'development'; const modules = babelENV !== 'production:esm' ? 'commonjs' : false; module.exports = { - presets: [['@babel/env', { modules }], '@babel/preset-typescript', '@babel/react'], + presets: [['@babel/env', { modules }], '@babel/react'], ignore: (() => { const ignore = ['src/**/__snapshots__']; ignore.push('src/**/*.d.ts'); @@ -14,6 +14,7 @@ module.exports = { env: { 'production:esm': { plugins: [ + '@babel/plugin-transform-typescript', 'babel-plugin-typescript-to-proptypes', '@babel/plugin-proposal-export-default-from', '@babel/proposal-class-properties', @@ -30,6 +31,7 @@ module.exports = { }, 'production:cjs': { plugins: [ + '@babel/plugin-transform-typescript', 'babel-plugin-typescript-to-proptypes', '@babel/plugin-proposal-export-default-from', '@babel/proposal-class-properties', diff --git a/packages/patternfly-4/react-core/CONTRIBUTING.md b/packages/patternfly-4/react-core/CONTRIBUTING.md index 3d0bc63a458..937ddfc72b8 100644 --- a/packages/patternfly-4/react-core/CONTRIBUTING.md +++ b/packages/patternfly-4/react-core/CONTRIBUTING.md @@ -1,3 +1,7 @@ +--- +title: Contributing +section: patternfly-4 +--- # Contributing to @patternfly/react-core ## Adding a new component @@ -9,70 +13,16 @@ index.js - Barrel File exporting public exports ComponentName.js - Component Implementation ComponentName.test.js - Component Tests - ComponentName.docs.js - Component Docs + ComponentName.md - Component Docs examples/ - dir for all examples SimpleComponentName.js - Simple Example ``` 3. Write the component implementation in `[Component].js`. 4. Add tests to `[Component].test.js`. All new components must be tested. 5. Add any additional public exports to `index.js` -6. Update the generated example and add any others. Any examples created must be imported into `[ComponentName].docs.js` [See Below](#adding-component-documentation) - -## Adding Component Documentation - -Component Documentation has two parts. a `[Component].docs.js` file, and files under `[Component]/examples/`. Each file must follow a few guidelines for them to be consumed properly by the docs website. - -The `docs.js` file has the following structure - -```js -import SimpleExample from './examples/SimpleComponent'; -import { Component, ComponentSize } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed - -export default { - title: 'Component', // Title to display at the top of the docs page - description: 'description', // Opening description for the component - components: { - Component: Component // Key value pair for components to include prop documentaion - }, - enumValues: { - // Optional - ComponentSize: Object.values(ComponentSize) // key value pair for any enums that cannot be statically analyzed. - }, - examples: [SimpleExample] // Array of examples to include on the page. They must be stored under /examples/ -}; -``` - -An example file has the following structure - -```jsx -import React from 'react'; -import { Component } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed -import something from './common/something'; // any directory under examples/ is ignored in page generation. -import styles from './Example.styles.js'; // any .styles.js file under examples/ is ignored in page generation - -// note: this can be a function too with the title, etc, set similar to setting Component.propTypes -class Example extends React.Component { - static title = 'Simple Example'; // Sets the examples title - static description = 'description'; // Optional: Extra descrption for the example - static getContainerProps = () => ({ - // Optional: Adds any extra props to the container. Useful for example specific styles - style: styles - }); - - render() { - return ; - } -} - -export default Example; -``` +6. Update the generated `[ComponentName].md.` See how to create [component docs.](../react-core/README.md) -Some things to keep in mind when writing examples: -1. Keep them simple. It is much easier for a person to understand what is going on. -2. Do not do any iteration of variants, sizes, etc in the render. This is easier for the developer, but it makes it much harder to reason for the consumer. -3. Keep anything you think is useful inside this file. The source view (coming soon) will only include the source of the example. If everything is broken out it will not be useful to the consumer. Remember, you are writing examples not a super optimized application. -4. Try not to add extra external dependencies. These will only be approved on a case by case basis. ## Code Contribution Guidelines @@ -108,9 +58,7 @@ $ git checkout -b my-branch -t upstream/master index.js - Barrel File exporting public exports ComponentName.js - Component Implementation ComponentName.test.js - Component Tests - ComponentName.docs.js - Component Docs - examples/ - dir for all examples - SimpleComp + ComponentName.md - Component Docs ``` 4. Develop your component. After development is complete, ensure tests and lint standards pass. diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index a1798c606b7..c71a7b2e999 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -54,10 +54,10 @@ "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@babel/preset-typescript": "^7.0.0", "@patternfly/patternfly": "1.0.250", "@types/enzyme": "3.9.0", "@types/exenv": "^1.2.0", @@ -83,4 +83,4 @@ "react": "^16.4.0", "react-dom": "^15.6.2 || ^16.4.0" } -} +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.docs.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.docs.js deleted file mode 100644 index bc8166ef20d..00000000000 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.docs.js +++ /dev/null @@ -1,16 +0,0 @@ -import { AboutModal } from '@patternfly/react-core'; -import SimpleAboutModal from './examples/SimpleAboutModal'; - -export default { - title: 'AboutModal', - components: { - AboutModal - }, - variablesRoot: 'pf-c-about-modal-box', - examples: [ - { - component: SimpleAboutModal, - title: 'Simple AboutModal' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/examples/SimpleAboutModal.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md similarity index 82% rename from packages/patternfly-4/react-core/src/components/AboutModal/examples/SimpleAboutModal.js rename to packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md index 8934f97dd9f..d439b5e5b29 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/examples/SimpleAboutModal.js +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.md @@ -1,18 +1,27 @@ +--- +title: "About Modal" +cssPrefix: "pf-c-about-modal-box" +--- +## Simple About Modal + +```js import React from 'react'; import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core'; -import brandImg from './pf_mini_logo_white.svg'; -import logoImg from './pf_logo.svg'; +import brandImg from './examples/brandImg.svg'; +import logoImg from './examples/logoImg.svg'; class SimpleAboutModal extends React.Component { - state = { - isModalOpen: false - }; - - handleModalToggle = () => { - this.setState(({ isModalOpen }) => ({ - isModalOpen: !isModalOpen - })); - }; + constructor(props) { + super(props); + this.state = { + isModalOpen: false + }; + this.handleModalToggle = () => { + this.setState(({ isModalOpen }) => ({ + isModalOpen: !isModalOpen + })); + }; + } render() { const { isModalOpen } = this.state; @@ -55,5 +64,4 @@ class SimpleAboutModal extends React.Component { ); } } - -export default SimpleAboutModal; +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/examples/pf_mini_logo_white.svg b/packages/patternfly-4/react-core/src/components/AboutModal/examples/brandImg.svg similarity index 100% rename from packages/patternfly-4/react-core/src/components/AboutModal/examples/pf_mini_logo_white.svg rename to packages/patternfly-4/react-core/src/components/AboutModal/examples/brandImg.svg diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/examples/pf_logo.svg b/packages/patternfly-4/react-core/src/components/AboutModal/examples/logoImg.svg similarity index 100% rename from packages/patternfly-4/react-core/src/components/AboutModal/examples/pf_logo.svg rename to packages/patternfly-4/react-core/src/components/AboutModal/examples/logoImg.svg diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.docs.js b/packages/patternfly-4/react-core/src/components/Alert/Alert.docs.js deleted file mode 100644 index 0d7061db9cb..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/Alert.docs.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Alert, AlertVariant, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; -import SuccessExample from './examples/SuccessAlert'; -import DangerExample from './examples/DangerAlert'; -import InfoExample from './examples/InfoAlert'; -import WarningExample from './examples/WarningAlert'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Alert', - components: { - Alert, - AlertActionCloseButton, - AlertActionLink - }, - enumValues: { - 'Object.values(AlertVariant)': Object.values(AlertVariant) - }, - variablesRoot: 'pf-c-alert', - examples: [ - { - component: SuccessExample, - title: 'Success Alert', - getContainerProps - }, - { - component: DangerExample, - title: 'Danger Alert', - getContainerProps - }, - { - component: WarningExample, - title: 'Warning Alert', - getContainerProps - }, - { - component: InfoExample, - title: 'Info Alert', - getContainerProps - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.md b/packages/patternfly-4/react-core/src/components/Alert/Alert.md new file mode 100644 index 00000000000..3d6d1c3e8f0 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Alert/Alert.md @@ -0,0 +1,176 @@ +--- +title: "Alert" +cssPrefix: "pf-c-alert" +--- +## Info Alert +```js +import React from 'react'; +import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; + +class InfoAlert extends React.Component { + constructor(props) { + super(props); + super(props) + this.state = { alertOneVisible: true, alertTwoVisible: true }; + this.hideAlertOne = () => this.setState({ alertOneVisible: false }); + this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); + } + + render() { + const { alertOneVisible, alertTwoVisible } = this.state; + return ( + + {alertOneVisible && ( + } + > + Info alert description. This is a link. + + )} + {alertTwoVisible && ( + } + /> + )} + Action Button} /> + + + ); + } +} +``` + +## Success Alert +```js +import React from 'react'; +import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; + +class SuccessAlert extends React.Component { + constructor(props) { + super(props); + super(props) + this.state = { alertOneVisible: true, alertTwoVisible: true }; + this.hideAlertOne = () => this.setState({ alertOneVisible: false }); + this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); + } + render() { + const { alertOneVisible, alertTwoVisible } = this.state; + return ( + + {alertOneVisible && ( + } + > + Success alert description. This is a link. + + )} + {alertTwoVisible && ( + } + /> + )} + Action Button} + /> + + + ); + } +} +``` + +## Warning Alert +```js +import React from 'react'; +import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; + +class WarningAlert extends React.Component { + constructor(props) { + super(props); + super(props) + this.state = { alertOneVisible: true, alertTwoVisible: true }; + this.hideAlertOne = () => this.setState({ alertOneVisible: false }); + this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); + } + render() { + const { alertOneVisible, alertTwoVisible } = this.state; + return ( + + {alertOneVisible && ( + } + > + Warning alert description. This is a link. + + )} + {alertTwoVisible && ( + } + /> + )} + Action Button} + /> + + + ); + } +} +``` + +## Danger Alert +```js +import React from 'react'; +import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; + +class DangerAlert extends React.Component { + constructor(props) { + super(props); + super(props) + this.state = { alertOneVisible: true, alertTwoVisible: true }; + this.hideAlertOne = () => this.setState({ alertOneVisible: false }); + this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); + } + render() { + const { alertOneVisible, alertTwoVisible } = this.state; + return ( + + {alertOneVisible && ( + } />} + > + Danger alert description. This is a link. + + )} + {alertTwoVisible && ( + } + /> + )} + Action Button} /> + + + ); + } +} +``` diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/DangerAlert.js b/packages/patternfly-4/react-core/src/components/Alert/examples/DangerAlert.js deleted file mode 100644 index e0d3d3edd5f..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/examples/DangerAlert.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class DangerAlert extends React.Component { - state = { alertOneVisible: true, alertTwoVisible: true }; - hideAlertOne = () => this.setState({ alertOneVisible: false }); - hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } />} - > - Danger alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} /> - - - ); - } -} - -export default DangerAlert; diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/InfoAlert.js b/packages/patternfly-4/react-core/src/components/Alert/examples/InfoAlert.js deleted file mode 100644 index 9675906f7bd..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/examples/InfoAlert.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class InfoAlert extends React.Component { - state = { alertOneVisible: true, alertTwoVisible: true }; - hideAlertOne = () => this.setState({ alertOneVisible: false }); - hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Info alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} /> - - - ); - } -} - -export default InfoAlert; diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/SuccessAlert.js b/packages/patternfly-4/react-core/src/components/Alert/examples/SuccessAlert.js deleted file mode 100644 index edc76b61bb1..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/examples/SuccessAlert.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class SuccessAlert extends React.Component { - state = { alertOneVisible: true, alertTwoVisible: true }; - hideAlertOne = () => this.setState({ alertOneVisible: false }); - hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Success alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} - /> - - - ); - } -} - -export default SuccessAlert; diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/WarningAlert.js b/packages/patternfly-4/react-core/src/components/Alert/examples/WarningAlert.js deleted file mode 100644 index a98febd1958..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/examples/WarningAlert.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class WarningAlert extends React.Component { - state = { alertOneVisible: true, alertTwoVisible: true }; - hideAlertOne = () => this.setState({ alertOneVisible: false }); - hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Warning alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} - /> - - - ); - } -} - -export default WarningAlert; diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/common/getContainerProps.js b/packages/patternfly-4/react-core/src/components/Alert/examples/common/getContainerProps.js deleted file mode 100644 index a0ba63e5aca..00000000000 --- a/packages/patternfly-4/react-core/src/components/Alert/examples/common/getContainerProps.js +++ /dev/null @@ -1,11 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - '& > .pf-c-alert': { - marginBottom: '0.5rem' - } - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.docs.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.docs.js deleted file mode 100644 index 43ab16d433b..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.docs.js +++ /dev/null @@ -1,15 +0,0 @@ -import { ApplicationLauncher } from '@patternfly/react-core'; -import SimpleApplicationLauncher from './examples/SimpleApplicationLauncher'; -import TooltipApplicationLauncher from './examples/TooltipApplicationLauncher'; - -export default { - title: 'Application Launcher', - components: { - ApplicationLauncher - }, - variablesRoot: 'pf-c-app-launcher', - examples: [ - { component: SimpleApplicationLauncher, title: 'Application Launcher' }, - { component: TooltipApplicationLauncher, title: 'Application Launcher with Tool Tip' } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md new file mode 100644 index 00000000000..a4cf82d8607 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md @@ -0,0 +1,116 @@ +--- +title: "Application Launcher" +cssPrefix: "pf-c-app-launcher" +--- +## Simple Application Launcher +```js +import React from 'react'; +import { ApplicationLauncher, DropdownItem } from '@patternfly/react-core'; + +class SimpleApplicationLauncher extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + + Application 1 + , + + Application 2 + , + + Application 3 + , + + Unavailable Application + + ]; + return ( + + ); + } +} +``` + +## Application Launcher with Tooltip +```js +import React from 'react'; +import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core'; + +class TooltipApplicationLauncher extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Launch Application 1}> + + Application 1 + + + , + Launch Application 2} position="right"> + + Application 2 + + + , + Launch Application 3} position="right"> + + Application 3 + + + , + Application Unavailable At This Time} position="bottom"> + + Unavailable Application + + + ]; + return ( + + ); + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/SimpleApplicationLauncher.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/SimpleApplicationLauncher.js deleted file mode 100644 index 8cfb8571be1..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/SimpleApplicationLauncher.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { Component } from 'react'; -import { ApplicationLauncher, DropdownItem } from '@patternfly/react-core'; - -export default class SimpleApplicationLauncher extends Component { - state = { - isOpen: false - }; - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - - Application 1 - , - - Application 2 - , - - Application 3 - , - - Unavailable Application - - ]; - return ( - - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/TooltipApplicationLauncher.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/TooltipApplicationLauncher.js deleted file mode 100644 index 05312357e8a..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/examples/TooltipApplicationLauncher.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Component } from 'react'; -import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core'; - -export default class TooltipApplicationLauncher extends Component { - state = { - isOpen: false - }; - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Launch Application 1}> - - Application 1 - - - , - Launch Application 2} position="right"> - - Application 2 - - - , - Launch Application 3} position="right"> - - Application 3 - - - , - Application Unavailable At This Time} position="bottom"> - - Unavailable Application - - - ]; - return ( - - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Avatar/Avatar.docs.js b/packages/patternfly-4/react-core/src/components/Avatar/Avatar.docs.js deleted file mode 100644 index cabe8b14fe1..00000000000 --- a/packages/patternfly-4/react-core/src/components/Avatar/Avatar.docs.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Avatar } from '@patternfly/react-core'; -import Simple from './examples/SimpleAvatar'; - -export default { - title: 'Avatar', - components: { - Avatar - }, - variablesRoot: 'pf-c-avatar', - examples: [ - { - component: Simple, - displayName: 'SimpleAvatar', - title: 'Simple Avatar' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Avatar/Avatar.md b/packages/patternfly-4/react-core/src/components/Avatar/Avatar.md new file mode 100644 index 00000000000..05d5e7e1095 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Avatar/Avatar.md @@ -0,0 +1,11 @@ +--- +title: "Avatar" +cssPrefix: "pf-c-avatar" +--- +## Simple Avatar +```js +import { Avatar } from '@patternfly/react-core'; +import { avatarImg } from './examples/avatarImg.svg'; + + +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js b/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js deleted file mode 100644 index 85d2ef5cfec..00000000000 --- a/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Avatar } from '@patternfly/react-core'; -import avatarImg from './img_avatar.svg'; - -class SimpleAvatar extends React.Component { - render() { - return ; - } -} - -export default SimpleAvatar; diff --git a/packages/patternfly-4/react-core/src/components/Avatar/examples/img_avatar.svg b/packages/patternfly-4/react-core/src/components/Avatar/examples/avatarImg.svg similarity index 100% rename from packages/patternfly-4/react-core/src/components/Avatar/examples/img_avatar.svg rename to packages/patternfly-4/react-core/src/components/Avatar/examples/avatarImg.svg diff --git a/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.docs.js b/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.docs.js deleted file mode 100644 index a9363124bee..00000000000 --- a/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.docs.js +++ /dev/null @@ -1,15 +0,0 @@ -import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core'; -import SimpleBackgroundImage from './examples/SimpleBackgroundImage'; - -export default { - title: 'Background Image', - components: { - BackgroundImage - }, - enumValues: { - 'Object.values(BackgroundImageSrc)': Object.values(BackgroundImageSrc) - }, - variablesRoot: 'pf-c-background-image', - examples: [{ component: SimpleBackgroundImage, title: 'Simple Background Image' }], - fullPageOnly: true -}; diff --git a/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.md b/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.md new file mode 100644 index 00000000000..8eab0e44416 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.md @@ -0,0 +1,29 @@ +--- +title: "Background Image" +cssPrefix: "pf-c-background-image" +--- +## Simple Background Image +```js +import React from 'react'; +import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core'; + +class SimpleBackgroundImage extends React.Component { + constructor(props) { + super(props); + /** + * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier + */ + this.images = { + [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg', + [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg', + [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg', + [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg', + [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg', + [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay' + }; + } + render() { + return ; + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/BackgroundImage/examples/SimpleBackgroundImage.js b/packages/patternfly-4/react-core/src/components/BackgroundImage/examples/SimpleBackgroundImage.js deleted file mode 100644 index 65f802bb5a5..00000000000 --- a/packages/patternfly-4/react-core/src/components/BackgroundImage/examples/SimpleBackgroundImage.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core'; - -/** - * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier - */ -const images = { - [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg', - [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg', - [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg', - [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg', - [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg', - [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay' -}; - -class SimpleBackgroundImage extends React.Component { - render() { - return ; - } -} - -export default SimpleBackgroundImage; diff --git a/packages/patternfly-4/react-core/src/components/Badge/Badge.docs.js b/packages/patternfly-4/react-core/src/components/Badge/Badge.docs.js deleted file mode 100644 index 58e08282af5..00000000000 --- a/packages/patternfly-4/react-core/src/components/Badge/Badge.docs.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Badge } from '@patternfly/react-core'; -import Read from './examples/ReadBadge'; -import Unread from './examples/UnreadBadge'; -import getContainerProps from './examples/common/getContainerProps'; - -export default { - title: 'Badge', - components: { - Badge - }, - variablesRoot: 'pf-c-badge', - examples: [ - { - component: Read, - title: 'Read Badge', - getContainerProps - }, - { - component: Unread, - title: 'Unread Badge', - getContainerProps - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Badge/Badge.md b/packages/patternfly-4/react-core/src/components/Badge/Badge.md new file mode 100644 index 00000000000..13e2563c909 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Badge/Badge.md @@ -0,0 +1,34 @@ +--- +title: "Badge" +cssPrefix: "pf-c-badge" +--- +## Badge (Read) + +```js +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +ReadBadge = () => ( + + 7 + 24 + 240 + 999+ + +); +``` + +## Badge (Unread) +```js +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +UnreadBadge = () => ( + + 7 + 24 + 240 + 999+ + +); +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js b/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js deleted file mode 100644 index 4e6065cadee..00000000000 --- a/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Badge } from '@patternfly/react-core'; - -class ReadBadge extends React.Component { - render() { - return ( - - 7 24 240 999+ - - ); - } -} - -export default ReadBadge; diff --git a/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js b/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js deleted file mode 100644 index f38334d79cf..00000000000 --- a/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Badge } from '@patternfly/react-core'; - -class UnreadBadge extends React.Component { - render() { - return ( - - 7 24 240 999+ - - ); - } -} - -export default UnreadBadge; diff --git a/packages/patternfly-4/react-core/src/components/Badge/examples/common/getContainerProps.js b/packages/patternfly-4/react-core/src/components/Badge/examples/common/getContainerProps.js deleted file mode 100644 index b3d2b3d3f90..00000000000 --- a/packages/patternfly-4/react-core/src/components/Badge/examples/common/getContainerProps.js +++ /dev/null @@ -1,9 +0,0 @@ -import { css, StyleSheet } from '@patternfly/react-styles'; - -const styles = StyleSheet.create({ - demoLayout: { - backgroundColor: '#fff' - } -}); - -export default () => ({ className: css(styles.demoLayout) }); diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js b/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js deleted file mode 100644 index 1d41ecebfc6..00000000000 --- a/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Brand } from '@patternfly/react-core'; -import Simple from './examples/SimpleBrand'; - -export default { - title: 'Brand', - components: { - Brand - }, - examples: [{ component: Simple, title: 'Simple Brand' }] -}; diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.md b/packages/patternfly-4/react-core/src/components/Brand/Brand.md new file mode 100644 index 00000000000..0fdceb284a4 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Brand/Brand.md @@ -0,0 +1,12 @@ +--- +title: "Brand" +cssPrefix: null +--- +## Simple Brand +```js +import React from 'react'; +import { Brand } from '@patternfly/react-core'; +import pfLogo from './pf_logo.svg'; + + +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js b/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js deleted file mode 100644 index 98f73286a8e..00000000000 --- a/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Brand } from '@patternfly/react-core'; -import brandImg from './pf_logo.svg'; - -class SimpleBrand extends React.Component { - render() { - return ; - } -} - -export default SimpleBrand; diff --git a/packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg b/packages/patternfly-4/react-core/src/components/Brand/examples/pfLogo.svg similarity index 100% rename from packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg rename to packages/patternfly-4/react-core/src/components/Brand/examples/pfLogo.svg diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.docs.js b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.docs.js deleted file mode 100644 index 8b0a57ea20f..00000000000 --- a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.docs.js +++ /dev/null @@ -1,28 +0,0 @@ -import Simple from './examples/SimpleBreadcrumbs'; -import WithoutLinkBreadcrumbs from './examples/WithoutLinkBreadcrumbs'; -import HeadingBreadcrumbs from './examples/HeadingBreadcrumbs'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; - -export default { - title: 'Breadcrumb', - components: { - Breadcrumb, - BreadcrumbItem, - BreadcrumbHeading - }, - variablesRoot: 'pf-c-breadcrumb', - examples: [ - { - component: Simple, - title: 'Breadcrumb' - }, - { - component: WithoutLinkBreadcrumbs, - title: 'Breadcrumb without Home Link' - }, - { - component: HeadingBreadcrumbs, - title: 'Breadcrumb with Heading' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.md b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.md new file mode 100644 index 00000000000..68a12f488aa --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.md @@ -0,0 +1,55 @@ +--- +title: "Breadcrumb" +cssPrefix: "pf-c-breadcrumb" +--- +## Simple Breadcrumb +```js +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; + +SimpleBreadcrumbs = () => ( + + Section Home + Section Title + Section Title + + Section Landing + + +); +``` + +## Breadcrumb without Home Link +```js +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; + +WithoutLinkBreadcrumbs = () => ( + + Section Home + Section Title + Section Title + Section Title + Section Title + + Section Landing + + +); +``` + +## Breadcrumb with Heading +```js +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; + +HeadingBreadcrumbs = () => ( + + Section Home + Section Title + Section Title + Section Title + Section Title + +); +``` diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/HeadingBreadcrumbs.js b/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/HeadingBreadcrumbs.js deleted file mode 100644 index 6a4aa72ecf3..00000000000 --- a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/HeadingBreadcrumbs.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; - -class HeadingBreadcrumbs extends React.Component { - render() { - return ( - - Section Home - Section Title - Section Title - Section Title - Section Title - - ); - } -} - -export default HeadingBreadcrumbs; diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/SimpleBreadcrumbs.js b/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/SimpleBreadcrumbs.js deleted file mode 100644 index 7df3746f893..00000000000 --- a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/SimpleBreadcrumbs.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; - -class SimpleBreadcrumbs extends React.Component { - render() { - return ( - - Section Home - Section Title - Section Title - - Section Landing - - - ); - } -} - -export default SimpleBreadcrumbs; diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/WithoutLinkBreadcrumbs.js b/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/WithoutLinkBreadcrumbs.js deleted file mode 100644 index 692db3ecad7..00000000000 --- a/packages/patternfly-4/react-core/src/components/Breadcrumb/examples/WithoutLinkBreadcrumbs.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; - -class WithoutLinkBreadcrumbs extends React.Component { - render() { - return ( - - Section Home - Section Title - Section Title - Section Title - Section Title - - Section Landing - - - ); - } -} - -export default WithoutLinkBreadcrumbs; diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.docs.js b/packages/patternfly-4/react-core/src/components/Button/Button.docs.js deleted file mode 100644 index 81cf5ffc2f4..00000000000 --- a/packages/patternfly-4/react-core/src/components/Button/Button.docs.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Button, ButtonVariant, ButtonType } from '@patternfly/react-core'; -import VariantsExample from './examples/ButtonVariants'; -import BlockExample from './examples/BlockButton'; -import LinkExample from './examples/LinkButton'; - -export default { - title: 'Button', - components: { - Button - }, - enumValues: { - 'Object.values(ButtonVariant)': Object.values(ButtonVariant), - 'Object.values(ButtonType)': Object.values(ButtonType) - }, - variablesRoot: 'pf-c-button', - examples: [ - { component: VariantsExample, title: 'Button Variants' }, - { component: BlockExample, title: 'Block Button' }, - { - component: LinkExample, - title: 'Links' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.md b/packages/patternfly-4/react-core/src/components/Button/Button.md new file mode 100644 index 00000000000..fc9f87836f9 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Button/Button.md @@ -0,0 +1,53 @@ +--- +title: "Button" +cssPrefix: "pf-c-button" +--- +## Block Button +```js +import React from 'react'; +import { Button } from '@patternfly/react-core'; + +BlockButton = () => ( + +); +``` + +## Button Variants +```js +import React from 'react'; +import { Button } from '@patternfly/react-core'; +import { TimesIcon, PlusCircleIcon } from '@patternfly/react-icons'; + +ButtonVariants = () => ( + + {' '} + {' '} + {' '} + + +); +``` + +## Link Button +```js +import React from 'react'; +import { Button } from '@patternfly/react-core'; + +LinkButton = () => ( + + {' '} + {' '} + + +); +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Button/examples/BlockButton.js b/packages/patternfly-4/react-core/src/components/Button/examples/BlockButton.js deleted file mode 100644 index 2fe6c7c2af6..00000000000 --- a/packages/patternfly-4/react-core/src/components/Button/examples/BlockButton.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { Button } from '@patternfly/react-core'; - -class BlockButton extends React.Component { - render() { - return ; - } -} - -export default BlockButton; diff --git a/packages/patternfly-4/react-core/src/components/Button/examples/ButtonVariants.js b/packages/patternfly-4/react-core/src/components/Button/examples/ButtonVariants.js deleted file mode 100644 index 894537d78a1..00000000000 --- a/packages/patternfly-4/react-core/src/components/Button/examples/ButtonVariants.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { Button } from '@patternfly/react-core'; -import { TimesIcon, PlusCircleIcon } from '@patternfly/react-icons'; - -class ButtonVariants extends React.Component { - render() { - return ( - - {' '} - {' '} - {' '} - - - ); - } -} - -export default ButtonVariants; diff --git a/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js b/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js deleted file mode 100644 index 615ef06d1a2..00000000000 --- a/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { Button } from '@patternfly/react-core'; - -class LinkButton extends React.Component { - render() { - return ( - - {' '} - {' '} - - - ); - } -} - -export default LinkButton; diff --git a/packages/patternfly-4/react-core/src/components/Card/Card.docs.js b/packages/patternfly-4/react-core/src/components/Card/Card.docs.js deleted file mode 100644 index 3f974e93155..00000000000 --- a/packages/patternfly-4/react-core/src/components/Card/Card.docs.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core'; -import Simple from './examples/SimpleCard'; -import NoFooter from './examples/NoFooterCard'; -import NoHeader from './examples/NoHeaderCard'; -import ContentOnly from './examples/ContentOnlyCard'; - -export default { - title: 'Card', - components: { - Card, - CardHeader, - CardBody, - CardFooter - }, - variablesRoot: 'pf-c-card', - examples: [ - { component: Simple, title: 'Card' }, - { component: NoFooter, title: 'Card with no footer' }, - { component: NoHeader, title: 'Card with no header' }, - { component: ContentOnly, title: 'Card with only a content section' } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Card/Card.md b/packages/patternfly-4/react-core/src/components/Card/Card.md new file mode 100644 index 00000000000..75574ff8d5a --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/Card.md @@ -0,0 +1,55 @@ +--- +title: "Card" +cssPrefix: "pf-c-card" +--- +## Simple Card +```js +import React from 'react'; +import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; + +SimpleCard = () => ( + + Header + Body + Footer + +); +``` + +## Card with no Footer +```js +import React from 'react'; +import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; + +NoFooterCard = () => ( + + Header + This card has no footer + +); +``` + +## Card with no Header +```js +import React from 'react'; +import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; + +NoHeaderCard = () => ( + + This card has no header + Footer + +); +``` + +## Card with only a Content Section +```js +import React from 'react'; +import { Card, CardBody } from '@patternfly/react-core'; + +ContentOnlyCard = () => ( + + Body + +); +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/ContentOnlyCard.js b/packages/patternfly-4/react-core/src/components/Card/examples/ContentOnlyCard.js deleted file mode 100644 index e8520c80954..00000000000 --- a/packages/patternfly-4/react-core/src/components/Card/examples/ContentOnlyCard.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; - -class ContentOnlyCard extends React.Component { - render() { - return ( - - Body - - ); - } -} - -export default ContentOnlyCard; diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/NoFooterCard.js b/packages/patternfly-4/react-core/src/components/Card/examples/NoFooterCard.js deleted file mode 100644 index 873a64ff177..00000000000 --- a/packages/patternfly-4/react-core/src/components/Card/examples/NoFooterCard.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; - -class NoFooterCard extends React.Component { - render() { - return ( - - Header - This card has no footer - - ); - } -} - -export default NoFooterCard; diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/NoHeaderCard.js b/packages/patternfly-4/react-core/src/components/Card/examples/NoHeaderCard.js deleted file mode 100644 index 2f0217957c3..00000000000 --- a/packages/patternfly-4/react-core/src/components/Card/examples/NoHeaderCard.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; - -class NoHeaderCard extends React.Component { - render() { - return ( - - This card has no header - Footer - - ); - } -} - -export default NoHeaderCard; diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/SimpleCard.js b/packages/patternfly-4/react-core/src/components/Card/examples/SimpleCard.js deleted file mode 100644 index 31a5577a3e5..00000000000 --- a/packages/patternfly-4/react-core/src/components/Card/examples/SimpleCard.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; - -class SimpleCard extends React.Component { - render() { - return ( - - Header - Body - Footer - - ); - } -} - -export default SimpleCard; diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js deleted file mode 100644 index e967e9f1e06..00000000000 --- a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js +++ /dev/null @@ -1,17 +0,0 @@ -import Controlled from './examples/ControlledCheckbox'; -import Uncontrolled from './examples/UncontrolledCheckbox'; -import Disabled from './examples/DisabledCheckbox'; -import { Checkbox } from '@patternfly/react-core'; - -export default { - title: 'Checkbox', - components: { - Checkbox - }, - variablesRoot: 'pf-c-check', - examples: [ - { component: Controlled, title: 'Controlled Checkbox' }, - { component: Uncontrolled, title: 'Uncontrolled Checkbox' }, - { component: Disabled, title: 'Disabled Checkbox' } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.md b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.md new file mode 100644 index 00000000000..566018fb798 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.md @@ -0,0 +1,78 @@ +--- +title: "Checkbox" +cssPrefix: "pf-c-check" +--- +## Controlled Checkbox +```js +import React from 'react'; +import { Checkbox } from '@patternfly/react-core'; + +class ControlledCheckbox extends React.Component { + constructor(props) { + super(props); + this.state = { + check1: false, + check2: false + }; + this.handleChange = checked => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + return ( + + + + + ); + } +} +``` + +## Uncontrolled Checkbox +```js +import React from 'react'; +import { Checkbox } from '@patternfly/react-core'; + +UncontrolledCheckbox = () => ( + + + + +); +``` + +## Disabled Checkbox +```js +import React from 'react'; +import { Checkbox } from '@patternfly/react-core'; + +DisabledCheckbox = () => ( + + {' '} + + +); +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js deleted file mode 100644 index 75ca950ca0d..00000000000 --- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { Checkbox } from '@patternfly/react-core'; - -class ControlledCheckbox extends React.Component { - state = { - check1: false, - check2: false - }; - - handleChange = checked => { - const target = event.target; - const value = target.type === 'checkbox' ? target.checked : target.value; - const name = target.name; - this.setState({ [name]: value }); - }; - - render() { - return ( - - - - - ); - } -} - -export default ControlledCheckbox; diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js deleted file mode 100644 index b6555c3b799..00000000000 --- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Checkbox } from '@patternfly/react-core'; - -class DisabledCheckbox extends React.Component { - render() { - return ( - - {' '} - - - ); - } -} - -export default DisabledCheckbox; diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js deleted file mode 100644 index f22723112b3..00000000000 --- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Checkbox } from '@patternfly/react-core'; - -class UncontrolledCheckbox extends React.Component { - render() { - return ( - - - - - ); - } -} - -export default UncontrolledCheckbox; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.docs.js b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.docs.js deleted file mode 100644 index bd0aadcd1ca..00000000000 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.docs.js +++ /dev/null @@ -1,28 +0,0 @@ -import { ChipGroup, ChipGroupToolbarItem, Chip } from '@patternfly/react-core'; -import Toolbar from './examples/ToolbarChipGroup'; -import MultiSelect from './examples/MultiSelectChipGroup'; -import BadgeChip from './examples/BadgeChip'; - -export default { - title: 'ChipGroup', - components: { - ChipGroup, - ChipGroupToolbarItem, - Chip - }, - variablesRoot: ['pf-c-chip', 'pf-c-chip-group'], - examples: [ - { - component: Toolbar, - title: 'Chip Group Toolbar' - }, - { - component: MultiSelect, - title: 'Chip Group Multi-Select' - }, - { - component: BadgeChip, - title: 'Badge Chip Group' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.md b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.md new file mode 100644 index 00000000000..5306a69defc --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.md @@ -0,0 +1,150 @@ +--- +title: "Chip Group" +cssPrefix: "pf-c-chip" +--- +## Chip Group Toolbar +```js +import React from 'react'; +import { Chip, ChipGroup, ChipGroupToolbarItem } from '@patternfly/react-core'; + +class ToolbarChipGroup extends React.Component { + constructor(props) { + super(props); + this.state = { + chipGroups: [ + { + category: 'Category 1', + chips: ['Chip 1', 'Chip 2'] + }, + { + category: 'Category 2', + chips: ['Chip 3', 'Chip 4'] + }, + { + category: 'Category 3', + chips: ['Chip 5', 'Chip 6', 'Chip 7', 'Chip 8'] + } + ] + }; + this.deleteItem = id => { + const copyOfChipGroups = this.state.chipGroups; + for (let i = 0; copyOfChipGroups.length > i; i++) { + const index = copyOfChipGroups[i].chips.indexOf(id); + if (index !== -1) { + copyOfChipGroups[i].chips.splice(index, 1); + // check if this is the last item in the group category + if (copyOfChipGroups[i].chips.length === 0) { + copyOfChipGroups.splice(i, 1); + this.setState({ chipGroups: copyOfChipGroups }); + } else { + this.setState({ chipGroups: copyOfChipGroups }); + } + } + } + }; + } + + render() { + const { chipGroups } = this.state; + + return ( + + {chipGroups.map(currentGroup => ( + + {currentGroup.chips.map(chip => ( + this.deleteItem(chip)}> + {chip} + + ))} + + ))} + + ); + } +} +``` + +## Chip Group Multi-Select +```js +import React from 'react'; +import { Chip, ChipGroup, ChipGroupItem } from '@patternfly/react-core'; + +class MultiSelectChipGroup extends React.Component { + constructor(props) { + super(props); + this.state = { + chipObject: ['Chip 1', 'Really long chip that goes on and on', 'Chip 3', 'Chip 4'] + }; + this.deleteItem = id => { + const copyOfChipObject = this.state.chipObject; + const index = copyOfChipObject.indexOf(id); + if (index !== -1) { + copyOfChipObject.splice(index, 1); + this.setState({ chipObject: copyOfChipObject }); + } + }; + } + + render() { + const { chipObject } = this.state; + return ( + + {chipObject.map(currentChip => ( + this.deleteItem(currentChip)}> + {currentChip} + + ))} + + ); + } +} +``` + +## Badge Chip Group +```js +import React from 'react'; +import { Badge, ChipGroup, Chip } from '@patternfly/react-core'; + +class BadgeChip extends React.Component { + constructor(props) { + super(props); + this.state = { + badgeChipArray: [ + { + name: 'Lemons', + isRead: true, + count: 10 + }, + { + name: 'Limes', + isRead: true, + count: 8 + } + ] + }; + this.deleteItem = id => { + const copyOfbadgeChipArray = this.state.badgeChipArray; + const index = copyOfbadgeChipArray.findIndex(chipObj => chipObj.name === id); + + if (index !== -1) { + copyOfbadgeChipArray.splice(index, 1); + this.setState({ badgeChipArray: copyOfbadgeChipArray }); + } + }; + } + + render() { + const { badgeChipArray } = this.state; + return ( + + {badgeChipArray.map(chip => ( + this.deleteItem(chip.name)}> + {chip.name} + {chip.count} + + ))} + + ); + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/BadgeChip.js b/packages/patternfly-4/react-core/src/components/ChipGroup/examples/BadgeChip.js deleted file mode 100644 index 7569aa8aefb..00000000000 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/BadgeChip.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { Badge, ChipGroup, Chip } from '@patternfly/react-core'; - -class BadgeChip extends React.Component { - state = { - badgeChipArray: [ - { - name: 'Lemons', - isRead: true, - count: 10 - }, - { - name: 'Limes', - isRead: true, - count: 8 - } - ] - }; - - deleteItem = id => { - debugger; - const copyOfbadgeChipArray = this.state.badgeChipArray; - const index = copyOfbadgeChipArray.findIndex(chipObj => chipObj.name === id); - - if (index !== -1) { - copyOfbadgeChipArray.splice(index, 1); - this.setState({ badgeChipArray: copyOfbadgeChipArray }); - } - }; - - render() { - const { badgeChipArray } = this.state; - return ( - - {badgeChipArray.map(chip => ( - this.deleteItem(chip.name)}> - {chip.name} - {chip.count} - - ))} - - ); - } -} - -export default BadgeChip; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/MultiSelectChipGroup.js b/packages/patternfly-4/react-core/src/components/ChipGroup/examples/MultiSelectChipGroup.js deleted file mode 100644 index 57f41057082..00000000000 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/MultiSelectChipGroup.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { Chip, ChipGroup, ChipGroupItem } from '@patternfly/react-core'; - -class MultiSelectChipGroup extends React.Component { - state = { - chipObject: ['Chip 1', 'Really long chip that goes on and on', 'Chip 3', 'Chip 4'] - }; - - deleteItem = id => { - const copyOfChipObject = this.state.chipObject; - const index = copyOfChipObject.indexOf(id); - if (index !== -1) { - copyOfChipObject.splice(index, 1); - this.setState({ chipObject: copyOfChipObject }); - } - }; - - render() { - const { chipObject } = this.state; - return ( - - {chipObject.map(currentChip => ( - this.deleteItem(currentChip)}> - {currentChip} - - ))} - - ); - } -} - -export default MultiSelectChipGroup; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/ToolbarChipGroup.js b/packages/patternfly-4/react-core/src/components/ChipGroup/examples/ToolbarChipGroup.js deleted file mode 100644 index 5eb1b78246c..00000000000 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/examples/ToolbarChipGroup.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { Chip, ChipGroup, ChipGroupToolbarItem } from '@patternfly/react-core'; - -class ToolbarChipGroup extends React.Component { - state = { - chipGroups: [ - { - category: 'Category 1', - chips: ['Chip 1', 'Chip 2'] - }, - { - category: 'Category 2', - chips: ['Chip 3', 'Chip 4'] - }, - { - category: 'Category 3', - chips: ['Chip 5', 'Chip 6', 'Chip 7', 'Chip 8'] - } - ] - }; - - deleteItem = id => { - const copyOfChipGroups = this.state.chipGroups; - for (let i = 0; copyOfChipGroups.length > i; i++) { - const index = copyOfChipGroups[i].chips.indexOf(id); - if (index !== -1) { - copyOfChipGroups[i].chips.splice(index, 1); - // check if this is the last item in the group category - if (copyOfChipGroups[i].chips.length === 0) { - copyOfChipGroups.splice(i, 1); - this.setState({ chipGroups: copyOfChipGroups }); - } else { - this.setState({ chipGroups: copyOfChipGroups }); - } - } - } - }; - - render() { - const { chipGroups } = this.state; - - return ( - - {chipGroups.map(currentGroup => ( - - {currentGroup.chips.map(chip => ( - this.deleteItem(chip)}> - {chip} - - ))} - - ))} - - ); - } -} - -export default ToolbarChipGroup; diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.docs.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.docs.js deleted file mode 100644 index 1f7228d60bb..00000000000 --- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.docs.js +++ /dev/null @@ -1,11 +0,0 @@ -import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; -import Simple from './examples/SimpleContextSelector'; - -export default { - title: 'ContextSelector', - components: { - ContextSelector, - ContextSelectorItem - }, - examples: [{ component: Simple, title: 'Simple ContextSelector' }] -}; diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md new file mode 100644 index 00000000000..be25e8a2eeb --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md @@ -0,0 +1,79 @@ +--- +title: "Context Selector" +--- +## Simple Context Selector +```js +import React from 'react'; +import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; + +class SimpleContextSelector extends React.Component { + constructor(props) { + super(props); + this.items = [ + 'My Project', + 'OpenShift Cluster', + 'Production Ansible', + 'AWS', + 'Azure', + 'My Project 2', + 'OpenShift Cluster ', + 'Production Ansible 2 ', + 'AWS 2', + 'Azure 2' + ]; + + this.state = { + isOpen: false, + selected: this.items[0], + searchValue: '', + filteredItems: this.items + }; + + this.onToggle = (event, isOpen) => { + this.setState({ + isOpen + }); + }; + + this.onSelect = (event, value) => { + this.setState({ + selected: value, + isOpen: !this.state.isOpen + }); + }; + + this.onSearchInputChange = value => { + this.setState({ searchValue: value }); + }; + + this.onSearchButtonClick = event => { + const filtered = + this.state.searchValue === '' + ? this.items + : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1); + + this.setState({ filteredItems: filtered || [] }); + }; + } + + render() { + const { isOpen, selected, searchValue, filteredItems } = this.state; + return ( + + {filteredItems.map((item, index) => ( + {item} + ))} + + ); + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/examples/SimpleContextSelector.js b/packages/patternfly-4/react-core/src/components/ContextSelector/examples/SimpleContextSelector.js deleted file mode 100644 index 38309f43158..00000000000 --- a/packages/patternfly-4/react-core/src/components/ContextSelector/examples/SimpleContextSelector.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; - -class SimpleContextSelector extends React.Component { - items = [ - 'My Project', - 'OpenShift Cluster', - 'Production Ansible', - 'AWS', - 'Azure', - 'My Project 2', - 'OpenShift Cluster ', - 'Production Ansible 2 ', - 'AWS 2', - 'Azure 2' - ]; - - state = { - isOpen: false, - selected: this.items[0], - searchValue: '', - filteredItems: this.items - }; - - onToggle = (event, isOpen) => { - this.setState({ - isOpen - }); - }; - - onSelect = (event, value) => { - this.setState({ - selected: value, - isOpen: !this.state.isOpen - }); - }; - - onSearchInputChange = value => { - this.setState({ searchValue: value }); - }; - - onSearchButtonClick = event => { - const filtered = - this.state.searchValue === '' - ? this.items - : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1); - - this.setState({ filteredItems: filtered || [] }); - }; - - render() { - const { isOpen, selected, searchValue, filteredItems } = this.state; - return ( - - {filteredItems.map((item, index) => ( - {item} - ))} - - ); - } -} - -export default SimpleContextSelector; diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js b/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js deleted file mode 100644 index 65c54f6761a..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js +++ /dev/null @@ -1,50 +0,0 @@ -import { - DataList, - DataListItem, - DataListCell, - DataListCheck, - DataListAction, - DataListContent, - DataListToggle -} from '@patternfly/react-core'; -import Simple from './examples/SimpleDataList'; -import CheckboxAction from './examples/CheckboxActionDataList'; -import Expandable from './examples/ExpandableDataList'; -import Modifiers from './examples/ModifiersDataList'; -import Actions from './examples/ActionsDataList'; - -export default { - title: 'DataList', - components: { - DataList, - DataListItem, - DataListCell, - DataListCheck, - DataListAction, - DataListContent, - DataListToggle - }, - variablesRoot: 'pf-c-data-list', - examples: [ - { - component: Simple, - title: 'Data List Simple' - }, - { - component: CheckboxAction, - title: 'Data List Checkboxes, Actions and Additional Cells' - }, - { - component: Actions, - title: 'Data List Actions: single and multiple' - }, - { - component: Expandable, - title: 'Data List Expandable' - }, - { - component: Modifiers, - title: 'Data List Width Modifiers' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.md b/packages/patternfly-4/react-core/src/components/DataList/DataList.md new file mode 100644 index 00000000000..146e1e50ce1 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/DataList/DataList.md @@ -0,0 +1,344 @@ +--- +title: "Data List" +cssPrefix: "pf-c-data-list" +--- +## Simple Data List +```js +import React from 'react'; +import { DataList, DataListItem, DataListCell } from '@patternfly/react-core'; + +SimpleDataList = () => ( + + + + Primary content + + Secondary content + + + + Second list item title + + Secondary content + + +); +``` + +## Data List Checkboxes, Actions and Additional Cells +```js +import React from 'react'; +import { DataList, DataListItem, DataListCell, DataListCheck, DataListAction } from '@patternfly/react-core'; + +CheckboxActionDataList = () => ( + + + + + Primary content + + Secondary content + + + + + + Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod. + + Secondary content + + + +); +``` + +## Data List Actions: single and multiple +```js +import React from 'react'; +import { + Button, + Dropdown, + KebabToggle, + DropdownItem, + DataList, + DataListItem, + DataListCell, + DataListCheck, + DataListAction +} from '@patternfly/react-core'; + +class ActionsDataList extends React.Component { + constructor(props) { + super(props); + this.state = { isOpen: false, isDeleted: false }; + } + render() { + return ( + + + {!this.state.isDeleted && ( + + + Single actionable Primary content + + Single actionable Secondary content + + + + + )} + + + Multi actions Primary content + + Multi actions Secondary content + Link, + + Action + , + + Disabled Link + + ]} + /> + } /> + + + + ); + } +} +``` + +## Data List Expandable +```js +import React from 'react'; +import { + DataList, + DataListItem, + DataListCell, + DataListToggle, + DataListContent, + DataListCheck, + DataListAction +} from '@patternfly/react-core'; + +class ExpandableDataList extends React.Component { + constructor(props) { + super(props); + this.state = { + expanded: ['ex-toggle1'] + }; + } + +render() { + const toggle = id => { + const expanded = this.state.expanded; + const index = expanded.indexOf(id); + const newExpanded = + index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id]; + this.setState(() => ({ expanded: newExpanded })); + }; + return ( + + + toggle('ex-toggle1')} + isExpanded={this.state.expanded.includes('ex-toggle1')} + id="ex-toggle1" + aria-controls="ex-expand1" + /> + + +
Primary content
+ link +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. +

+
+
+ + toggle('ex-toggle2')} + isExpanded={this.state.expanded.includes('ex-toggle2')} + id="ex-toggle2" + aria-controls="ex-expand2" + /> + + +
Primary content
+
+ + Lorem ipsum dolor sit amet. + + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. +

+
+
+
+ ); + } +} +``` + +## Data List Width Modifiers +```js +import React from 'react'; +import { + DataList, + DataListItem, + DataListCell, + DataListCheck, + DataListAction, + DataListToggle, + DataListContent +} from '@patternfly/react-core'; + +class ModifiersDataList extends React.Component { + constructor(props) { + super(props); + this.state = { show: true }; + } + render() { + const previewPlaceholder = { + display: 'block', + width: '100%', + padding: '.25rem .5rem', + color: '#004e8a', + backgroundColor: '#def3ff', + border: '1px solid rgba(0,0,0,.1)', + borderRadius: '4px' + }; + + return [ +
+

Default fitting - example 1

+ + + + +
+ default +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ +
+ default +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. +

+
+
+
+
+
, +
+

Flex modifiers - example 2

+ + + + +
+ width 2 +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

+
+
+ +
+ width 4 +

Lorem ipsum dolor sit amet.

+
+
+ +
+
+
, +
+

Flex modifiers - example 3

+ + + this.setState({ show: !this.state.show })} + /> + + +
+ width 5 +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ +
+ width 2 +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ +
default
+
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. +

+
+
+
+
+ ]; + } +} +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js deleted file mode 100644 index 4d20dbe91c4..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { - Button, - Dropdown, - KebabToggle, - DropdownItem, - DataList, - DataListItem, - DataListCell, - DataListCheck, - DataListAction -} from '@patternfly/react-core'; - -class ActionsDataList extends React.Component { - state = { isOpen: false, isDeleted: false }; - render() { - return ( - - - {!this.state.isDeleted && ( - - - Single actionable Primary content - - Single actionable Secondary content - - - - - )} - - - Multi actions Primary content - - Multi actions Secondary content - Link, - - Action - , - - Disabled Link - - ]} - /> - } /> - - - - ); - } -} - -export default ActionsDataList; diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js deleted file mode 100644 index 8d32f8714b1..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { DataList, DataListItem, DataListCell, DataListCheck, DataListAction } from '@patternfly/react-core'; - -class CheckboxActionDataList extends React.Component { - render() { - return ( - - - - - Primary content - - Secondary content - - - - - - Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing - elit, sed do eiusmod. - - Secondary content - - - - ); - } -} - -export default CheckboxActionDataList; diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js deleted file mode 100644 index d8f348cfc62..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { - DataList, - DataListItem, - DataListCell, - DataListToggle, - DataListContent, - DataListCheck, - DataListAction -} from '@patternfly/react-core'; - -class ExpandableDataList extends React.Component { - state = { - expanded: ['ex-toggle1'] - }; - - render() { - const toggle = id => { - const expanded = this.state.expanded; - const index = expanded.indexOf(id); - const newExpanded = - index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id]; - this.setState(() => ({ expanded: newExpanded })); - }; - return ( - - - toggle('ex-toggle1')} - isExpanded={this.state.expanded.includes('ex-toggle1')} - id="ex-toggle1" - aria-controls="ex-expand1" - /> - - -
Primary content
- link -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. -

-
-
- - toggle('ex-toggle2')} - isExpanded={this.state.expanded.includes('ex-toggle2')} - id="ex-toggle2" - aria-controls="ex-expand2" - /> - - -
Primary content
-
- - Lorem ipsum dolor sit amet. - - - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. -

-
-
-
- ); - } -} - -export default ExpandableDataList; diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js deleted file mode 100644 index d022579def9..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { - DataList, - DataListItem, - DataListCell, - DataListCheck, - DataListAction, - DataListToggle, - DataListContent -} from '@patternfly/react-core'; - -class ModifiersDataList extends React.Component { - state = { show: true }; - render() { - const previewPlaceholder = { - display: 'block', - width: '100%', - padding: '.25rem .5rem', - color: '#004e8a', - backgroundColor: '#def3ff', - border: '1px solid rgba(0,0,0,.1)', - borderRadius: '4px' - }; - - return [ -
-

Default fitting - example 1

- - - - -
- default -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
- -
- default -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. -

-
-
-
-
-
, -
-

Flex modifiers - example 2

- - - - -
- width 2 -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

-
-
- -
- width 4 -

Lorem ipsum dolor sit amet.

-
-
- -
-
-
, -
-

Flex modifiers - example 3

- - - this.setState({ show: !this.state.show })} - /> - - -
- width 5 -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
- -
- width 2 -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
- -
default
-
- - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. -

-
-
-
-
- ]; - } -} - -export default ModifiersDataList; diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js deleted file mode 100644 index d83ba4510b9..00000000000 --- a/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { DataList, DataListItem, DataListCell } from '@patternfly/react-core'; - -class SimpleDataList extends React.Component { - render() { - return ( - - - - Primary content - - Secondary content - - - - Second list item title - - Secondary content - - - ); - } -} - -export default SimpleDataList; diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.docs.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.docs.js deleted file mode 100644 index ec6a8d7c57b..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.docs.js +++ /dev/null @@ -1,40 +0,0 @@ -import { Dropdown, KebabToggle, DropdownItem, DropdownSeparator, DropdownToggle } from '@patternfly/react-core'; -import Panel from './examples/DropdownPanel'; -import Simple from './examples/SimpleDropdown'; -import Disabled from './examples/DisabledDropdown'; -import Kebab from './examples/KebabDropdown'; -import IconDropdown from './examples/IconDropdown'; -import PositionRight from './examples/PositionRightDropdown'; -import DirectionUp from './examples/DirectionUpDropdown'; -import ReactLinkDropdown from './examples/ReactLinkDropdown'; - -export default { - title: 'Dropdown', - components: { - Dropdown, - KebabToggle, - DropdownItem, - DropdownSeparator, - DropdownToggle - }, - variablesRoot: 'pf-c-dropdown', - examples: [ - { component: Simple, title: 'Dropdown' }, - { component: Disabled, title: 'Dropdown - disabled' }, - { component: PositionRight, title: 'Dropdown - position right' }, - { component: DirectionUp, title: 'Dropdown - direction up' }, - { component: Kebab, title: 'Kebab' }, - { component: IconDropdown, title: 'Dropdown - Icon Only' }, - { - component: ReactLinkDropdown, - title: 'React Router Link usage', - description: 'A react-router Link may be wrapped by DropdownItem or used directly within Dropdown.', - live: false - }, - { - component: Panel, - title: 'Dropdown Panel', - description: 'The Basic Dropdown is provided for flexibility in allowing various content within a dropdown.' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.md b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.md new file mode 100644 index 00000000000..d3cc31529e1 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.md @@ -0,0 +1,397 @@ +--- +title: "Dropdown" +cssPrefix: "pf-c-dropdown" +--- +## Simple Dropdown +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +class SimpleDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + Dropdown} + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown (disabled) +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +class DisabledDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + Dropdown} + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown (position right) +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core'; + +class PositionRightDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + Dropdown} + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown (direction up) +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core'; + +class DirectionUpDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + Dropdown} + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown with Kebab +```js +import React from 'react'; +import { Dropdown, KebabToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown (icon only) +```js +import React from 'react'; +import { Dropdown, DropdownItem, DropdownToggle, DropdownSeparator } from '@patternfly/react-core'; +import { ThIcon } from '@patternfly/react-icons'; + +class IconDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + /> + ); + } +} +``` + +## Dropdown Panel +The Basic Dropdown is provided for flexibility in allowing various content within a dropdown. +```js +import React from 'react'; +import { Dropdown, DropdownToggle } from '@patternfly/react-core'; + +class DropdownPanel extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + return ( + Expanded Dropdown} + isOpen={isOpen} + > +
[Panel contents here]
+
+ ); + } +} +``` + +## React Router Link usage +A react-router Link may be wrapped by DropdownItem or used directly within Dropdown. Here's some example HTML: +```nolive +/** Wrapped Link for DropdownItem list **/ + + Link + + +/** Direct child of Dropdown **/ + + Expanded Dropdown + +} +isOpen={isOpen} +> + Link + +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js deleted file mode 100644 index 210570ef171..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core'; - -export default class DirectionUpDropdown extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DisabledDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/DisabledDropdown.js deleted file mode 100644 index 7e898158282..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DisabledDropdown.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -export default class DisabledDropdown extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DropdownPanel.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/DropdownPanel.js deleted file mode 100644 index 4c0b7910fba..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DropdownPanel.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownToggle } from '@patternfly/react-core'; - -export default class DropdownPanel extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - return ( - Expanded Dropdown} - isOpen={isOpen} - > -
[Panel contents here]
-
- ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/IconDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/IconDropdown.js deleted file mode 100644 index 71bad8509bd..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/IconDropdown.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownItem, DropdownToggle, DropdownSeparator } from '@patternfly/react-core'; -import { ThIcon } from '@patternfly/react-icons'; - -export default class IconDropdown extends Component { - state = { - isOpen: false - }; - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - - - - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js deleted file mode 100644 index 32abc69cfd2..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, KebabToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -export default class KebabDropdown extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js deleted file mode 100644 index ab4faeb1563..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core'; - -export default class PositionRightDropdown extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/ReactLinkDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/ReactLinkDropdown.js deleted file mode 100644 index 348bb39741c..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/ReactLinkDropdown.js +++ /dev/null @@ -1,29 +0,0 @@ -import React, { Component } from 'react'; - -export default class ReactLinkDropdown extends Component { - render() { - return ( -
-        {`
-  /** Wrapped Link for DropdownItem list **/
-  
-    Link
-  
-
-  /** Direct child of Dropdown **/
-  
-        Expanded Dropdown
-      
-    }
-    isOpen={isOpen}
-  >
-    Link
-  
-        `}
-      
- ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js deleted file mode 100644 index c53f9e58e44..00000000000 --- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core'; - -export default class SimpleDropdown extends Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - } - - onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - - onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - return ( - Dropdown} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); - } -} diff --git a/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.docs.js b/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.docs.js deleted file mode 100644 index 641482c0a37..00000000000 --- a/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.docs.js +++ /dev/null @@ -1,14 +0,0 @@ -import { EmptyState, EmptyStateBody, EmptyStateSecondaryActions } from '@patternfly/react-core'; -import Simple from './examples/SimpleEmptyState'; - -export default { - title: 'EmptyState', - components: { EmptyState, EmptyStateBody, EmptyStateSecondaryActions }, - variablesRoot: 'pf-c-empty-state', - examples: [ - { - component: Simple, - title: 'Simple' - } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.md b/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.md new file mode 100644 index 00000000000..1e2e82462e3 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.md @@ -0,0 +1,37 @@ +--- +title: "Empty State" +cssPrefix: "pf-c-empty-state" +--- +## Simple Empty State +```js +import React from 'react'; +import { + Title, + Button, + EmptyState, + EmptyStateIcon, + EmptyStateBody, + EmptyStateSecondaryActions +} from '@patternfly/react-core'; +import { CubesIcon } from '@patternfly/react-icons'; + +SimpleEmptyState = () => ( + + + Empty State + + This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible + enough to meet a variety of needs. + + + + + + + + + + + +); +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/EmptyState/examples/SimpleEmptyState.js b/packages/patternfly-4/react-core/src/components/EmptyState/examples/SimpleEmptyState.js deleted file mode 100644 index 7a87595ba3c..00000000000 --- a/packages/patternfly-4/react-core/src/components/EmptyState/examples/SimpleEmptyState.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { - Title, - Button, - EmptyState, - EmptyStateIcon, - EmptyStateBody, - EmptyStateSecondaryActions -} from '@patternfly/react-core'; -import { CubesIcon } from '@patternfly/react-icons'; - -class SimpleEmptyState extends React.Component { - render() { - return ( - - - Empty State - - This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible - enough to meet a variety of needs. - - - - - - - - - - - - ); - } -} - -export default SimpleEmptyState; diff --git a/packages/patternfly-4/react-core/src/components/Form/Form.docs.js b/packages/patternfly-4/react-core/src/components/Form/Form.docs.js deleted file mode 100644 index 3572ffd5090..00000000000 --- a/packages/patternfly-4/react-core/src/components/Form/Form.docs.js +++ /dev/null @@ -1,19 +0,0 @@ -import Simple from './examples/SimpleForm'; -import Horizontal from './examples/HorizontalForm'; -import Invalid from './examples/InvalidForm'; -import { Form, FormGroup, ActionGroup } from '@patternfly/react-core'; - -export default { - title: 'Form', - components: { - Form, - FormGroup, - ActionGroup - }, - variablesRoot: 'pf-c-form', - examples: [ - { component: Simple, title: 'Simple Form' }, - { component: Horizontal, title: 'Horizontal form' }, - { component: Invalid, title: 'Invalid form' } - ] -}; diff --git a/packages/patternfly-4/react-core/src/components/Form/Form.md b/packages/patternfly-4/react-core/src/components/Form/Form.md new file mode 100644 index 00000000000..07c78b48ae5 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Form/Form.md @@ -0,0 +1,254 @@ +--- +title: "Form" +cssPrefix: "pf-c-form" +--- +## Simple Form +```js +import React from 'react'; +import { Form, FormGroup, TextInput, Checkbox, ActionGroup, Button, Radio } from '@patternfly/react-core'; + +class SimpleForm extends React.Component { + constructor(props) { + super(props); + this.state = { + value1: '', + value2: '', + value3: '' + }; + this.handleTextInputChange1 = value1 => { + this.setState({ value1 }); + }; + this.handleTextInputChange2 = value2 => { + this.setState({ value2 }); + }; + this.handleTextInputChange3 = value3 => { + this.setState({ value3 }); + }; + } + + render() { + const { value1, value2, value3 } = this.state; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ ); + } +} +``` + +## Form (Horizontal) +```js +import React from 'react'; +import { + FormGroup, + TextInput, + TextArea, + Form, + FormSelectOption, + FormSelect, + Radio, + Button, + ActionGroup, + Checkbox +} from '@patternfly/react-core'; + +class HorizontalForm extends React.Component { + constructor(props) { + super(props); + this.state = { + value: 'please choose', + value1: '', + value2: '', + value3: '' + }; + this.onChange = (value, event) => { + this.setState({ value }); + }; + this.handleTextInputChange1 = value1 => { + this.setState({ value1 }); + }; + this.handleTextInputChange2 = value2 => { + this.setState({ value2 }); + }; + this.handleTextInputChange3 = value3 => { + this.setState({ value3 }); + }; + this.options = [ + { value: 'please choose', label: 'Please Choose', disabled: false }, + { value: 'mr', label: 'Mr', disabled: false }, + { value: 'miss', label: 'Miss', disabled: false }, + { value: 'mrs', label: 'Mrs', disabled: false }, + { value: 'ms', label: 'Ms', disabled: false }, + { value: 'dr', label: 'Dr', disabled: false }, + { value: 'other', label: 'Other', disabled: false } + ]; + } + + render() { + const { value1, value2, value3 } = this.state; + + return ( +
+ + + + + + + + + {this.options.map((option, index) => ( + + ))} + + + +