From a68ac11c99b42075057c597950e4e4040c80505a Mon Sep 17 00:00:00 2001 From: Patrick Riley Date: Mon, 13 Aug 2018 13:59:05 -0400 Subject: [PATCH] fix(prettier): change printWidth to 120 and expose rule in eslint-plugin (#524) * fix(prettier): change printWidth to 120 and expose rule in eslint-plugin affects: eslint-plugin-patternfly-react, patternfly-react ISSUES CLOSED: 439 * add all patternfly next rules * format login components --- .prettierignore | 3 + .prettierrc | 6 +- package.json | 4 +- .../lib/config/recommended.js | 10 +- .../lib/rules/import-default-name.js | 11 +- .../src/common/closestPolyfill.js | 4 +- .../patternfly-react/src/common/controlled.js | 30 +---- .../patternfly-react/src/common/helpers.js | 13 +- .../patternfly-react/src/common/patternfly.js | 5 +- .../src/components/AboutModal/AboutModal.js | 8 +- .../AboutModal/AboutModal.stories.js | 26 +--- .../components/AboutModal/AboutModal.test.js | 6 +- .../src/components/Alert/Alert.js | 6 +- .../src/components/Alert/Alert.stories.js | 26 +--- .../src/components/Alert/AlertConstants.js | 7 +- .../ApplicationLauncher.stories.js | 17 +-- .../ApplicationLauncher.test.js | 28 +--- .../ApplicationLauncherItem.js | 37 +---- .../ApplicationLauncherToggle.js | 21 +-- .../Stories/NavApplicationLauncherStory.js | 16 +-- .../WrapperNavApplicationLauncherStory.js | 10 +- .../ApplicationLauncher/Stories/index.js | 8 +- .../Wrappers/ApplicationLauncherWrapper.js | 10 +- .../Wrappers/Wrappers.test.js | 16 +-- .../components/ApplicationLauncher/index.js | 6 +- .../src/components/Badge/Badge.stories.js | 20 +-- .../Breadcrumb/Breadcrumb.stories.js | 33 ++--- .../components/Breadcrumb/Breadcrumb.test.js | 8 +- .../src/components/Button/Button.stories.js | 43 ++---- .../src/components/Button/Button.test.js | 4 +- .../src/components/Button/ButtonConstants.js | 10 +- .../AggregateStatusCard.test.js | 18 +-- .../AggregateStatusNotification.js | 5 +- .../AggregateStatusNotifications.js | 5 +- .../Cards/AggregateStatusCard/index.js | 6 +- .../src/components/Cards/Card.js | 11 +- .../components/Cards/CardDropdownButton.js | 20 +-- .../src/components/Cards/CardGrid.js | 4 +- .../components/Cards/CardHeightMatching.js | 20 +-- .../Cards/CardHeightMatching.test.js | 5 +- .../src/components/Cards/Cards.stories.js | 10 +- .../src/components/Cards/Cards.test.js | 22 +-- .../Cards/Stories/AggregateStatusCardStory.js | 4 +- .../Stories/BaseCardHeightMatchingStory.js | 53 ++------ .../components/Cards/Stories/BaseCardStory.js | 45 +------ .../Cards/Stories/TrendCardStory.js | 45 ++----- .../Cards/Stories/UtilizationBarCardStory.js | 36 +---- .../Cards/Stories/UtilizationCardStory.js | 27 ++-- .../src/components/Cards/Stories/index.js | 8 +- .../UtilizationCardDetailsCount.js | 5 +- .../UtilizationCardDetailsDesc.js | 5 +- .../UtilizationCardDetailsLine1.js | 5 +- .../UtilizationCardDetailsLine2.js | 5 +- .../src/components/Cards/index.js | 6 +- .../src/components/Chart/AreaChart.js | 8 +- .../src/components/Chart/AreaChart.test.js | 12 +- .../src/components/Chart/BarChart.js | 4 +- .../src/components/Chart/BarChart.test.js | 18 +-- .../Chart/BulletChart/BulletChart.js | 47 ++----- .../Chart/BulletChart/BulletChart.test.js | 88 ++---------- .../Chart/BulletChart/BulletChartAxisTic.js | 5 +- .../Chart/BulletChart/BulletChartLegend.js | 5 +- .../BulletChart/BulletChartLegendItem.js | 9 +- .../Chart/BulletChart/BulletChartRange.js | 6 +- .../Chart/BulletChart/BulletChartThreshold.js | 5 +- .../Chart/BulletChart/BulletChartTitle.js | 5 +- .../Chart/BulletChart/BulletChartValue.js | 15 +-- .../src/components/Chart/Chart.stories.js | 21 +-- .../src/components/Chart/ChartConstants.js | 8 +- .../src/components/Chart/DonutChart.js | 7 +- .../src/components/Chart/DonutChart.test.js | 6 +- .../src/components/Chart/GroupedBarChart.js | 8 +- .../src/components/Chart/LineChart.js | 8 +- .../src/components/Chart/LineChart.test.js | 18 +-- .../src/components/Chart/PieChart.js | 8 +- .../src/components/Chart/SingleAreaChart.js | 8 +- .../src/components/Chart/SingleLineChart.js | 8 +- .../src/components/Chart/SparklineChart.js | 8 +- .../src/components/Chart/StackedBarChart.js | 8 +- .../Chart/Stories/AreaChartStory.js | 24 +--- .../components/Chart/Stories/BarChartStory.js | 19 +-- .../Chart/Stories/BulletChartStory.js | 59 ++------ .../Chart/Stories/DonutChartStory.js | 18 +-- .../Chart/Stories/LineChartStory.js | 42 ++---- .../components/Chart/Stories/PieChartStory.js | 9 +- .../components/DropdownKebab/DropdownKebab.js | 16 +-- .../DropdownKebab/DropdownKebab.stories.js | 14 +- .../EmptyState/EmptyState.stories.js | 45 ++----- .../src/components/EmptyState/index.js | 9 +- .../FieldLevelHelp/FieldLevelHelp.js | 17 +-- .../FieldLevelHelp/FieldLevelHelp.stories.js | 26 +--- .../FieldLevelHelp/FieldLevelHelp.test.js | 4 +- .../src/components/Filter/Filter.stories.js | 18 +-- .../src/components/Filter/Filter.test.js | 28 +--- .../Filter/FilterCategorySelector.js | 12 +- .../Filter/FilterCategoryValueSelector.js | 12 +- .../src/components/Filter/FilterItem.js | 8 +- .../components/Filter/FilterTypeSelector.js | 12 +- .../components/Filter/FilterValueSelector.js | 12 +- .../Filter/__mocks__/mockFilterExample.js | 25 +--- .../src/components/Form/Form.stories.js | 91 +++---------- .../src/components/Form/Form.test.js | 16 +-- .../src/components/Form/Stories/BasicForm.js | 31 +---- .../Form/Stories/InlineFormField.js | 13 +- .../Form/Stories/InputGroupsForm.js | 55 ++------ .../Form/Stories/SupportedControlsForm.js | 39 ++---- .../src/components/Form/index.js | 11 +- .../src/components/Grid/Grid.stories.js | 85 ++++++++---- .../src/components/Icon/Icon.js | 3 +- .../src/components/Icon/Icon.stories.js | 28 +--- .../Icon/InnerComponents/PatternflyIcon.js | 6 +- .../src/components/InfoTip/InfoTip.stories.js | 29 +--- .../src/components/InfoTip/InfoTipMenu.js | 7 +- .../components/InfoTip/InfoTipMenu.test.js | 9 +- .../InfoTip/InfoTipMenuFooter.test.js | 8 +- .../InfoTip/InfoTipMenuItemIcon.test.js | 4 +- .../src/components/InfoTip/index.js | 8 +- .../src/components/InlineEdit/InlineEdit.js | 8 +- .../components/InlineEdit/InlineEdit.test.js | 8 +- .../src/components/Label/Label.js | 4 +- .../src/components/Label/Label.stories.js | 29 +--- .../src/components/Label/Label.test.js | 4 +- .../src/components/Label/RemoveButton.test.js | 4 +- .../components/ListGroup/ListGroup.stories.js | 30 +---- .../src/components/ListView/ListView.js | 5 +- .../components/ListView/ListView.stories.js | 93 ++++--------- .../src/components/ListView/ListView.test.js | 6 +- .../components/ListView/ListViewActions.js | 4 +- .../ListView/ListViewAdditionalInfo.js | 4 +- .../src/components/ListView/ListViewBody.js | 4 +- .../components/ListView/ListViewCheckbox.js | 4 +- .../ListView/ListViewDescription.js | 4 +- .../ListView/ListViewDescriptionHeading.js | 4 +- .../ListView/ListViewDescriptionText.js | 4 +- .../components/ListView/ListViewGroupItem.js | 8 +- .../src/components/ListView/ListViewIcon.js | 7 +- .../src/components/ListView/ListViewItem.js | 16 +-- .../src/components/ListView/ListViewLeft.js | 4 +- .../components/ListView/ListViewMainInfo.js | 4 +- .../src/components/ListView/ListViewRow.js | 25 +--- .../ListView/__mocks__/mockListItems.js | 15 +-- .../components/LoginPage/LoginPage.stories.js | 18 +-- .../components/LoginPage/LoginPage.test.js | 16 +-- .../BasicLoginCardLayout.js | 10 +- .../LoginCardComponents/LoginCard.js | 4 +- .../LoginCardComponents/LoginCardForm.js | 13 +- .../LoginCardComponents/LoginCardInput.js | 6 +- .../LoginCardComponents/LoginCardSettings.js | 7 +- .../LoginCardSocialColumns.js | 11 +- .../LoginCardWithValidation.js | 14 +- .../LoginLanguagePicker.js | 4 +- .../BasicLoginPageLayout.js | 10 +- .../LoginPageComponents/LoginFooterLinks.js | 10 +- .../LoginPageComponents/LoginPageHeader.js | 7 +- .../LoginPageWithTranslation.js | 4 +- .../SocialLoginPageContainer.js | 5 +- .../components/LoginPage/mocks/messages.en.js | 8 +- .../components/LoginPage/mocks/messages.fr.js | 8 +- .../InnerComponents/CustomMastheadDropdown.js | 4 +- .../src/components/Masthead/Masthead.js | 15 +-- .../components/Masthead/Masthead.stories.js | 28 +--- .../src/components/Masthead/Masthead.test.js | 26 +--- .../components/Masthead/MastheadCollapse.js | 4 +- .../components/Masthead/MastheadDropdown.js | 22 +-- .../__mocks__/mockHorizontalMasthead.js | 8 +- .../components/MenuItem/MenuItem.stories.js | 30 +---- .../components/MessageDialog/MessageDialog.js | 11 +- .../MessageDialog/MessageDialog.stories.js | 45 ++----- .../MessageDialog/MessageDialog.test.js | 28 +--- .../Stories/MessageDialogQuestion.js | 4 +- .../Stories/MessageDialogToggleableOptions.js | 18 +-- .../InnerComponents/CustomModalDialog.js | 19 +-- .../src/components/Modal/Modal.stories.js | 32 +---- .../Modal/__mocks__/mockModalManager.js | 6 +- .../components/Notification/Notification.js | 5 +- .../NotificationDrawer/NotificationDrawer.js | 8 +- .../NotificationDrawerDropDown.js | 15 +-- .../NotificationDrawerPanel.js | 7 +- .../NotificationDrawerPanelActionLink.js | 6 +- .../NotificationDrawerPanelBody.js | 7 +- .../NotificationDrawerPanelCollapse.js | 13 +- .../NotificationDrawerTitle.js | 14 +- .../NotificationDrawerToggle.js | 6 +- .../NotificationDrawerStory.stories.js | 9 +- .../Notification/NotificationInfoRight.js | 4 +- .../StatefulNotificationDrawerStory.js | 52 +++---- .../Stories/WrapperNotificationDrawerStory.js | 18 +-- .../Stories/basicNotificationDrawerStory.js | 72 +++------- .../components/Notification/Stories/index.js | 12 +- .../NotificationDrawerPanelWrapper.js | 41 ++---- .../Wrappers/NotificationDrawerWrapper.js | 8 +- .../StatefulNotificationDrawerWrapper.js | 3 +- ...StatefulToggleNotificationDrawerWrapper.js | 5 +- .../Notification/Wrappers/Wrappers.test.js | 26 +--- .../components/Notification/Wrappers/index.js | 16 +-- .../src/components/Pagination/Pager.js | 10 +- .../components/Pagination/Paginate.test.js | 24 +--- .../Pagination/Pagination.stories.js | 70 +++------- .../Pagination/PaginationConstants.js | 6 +- .../components/Pagination/PaginationRow.js | 12 +- .../Pagination/PaginationRowAmountOfPages.js | 10 +- .../Pagination/PaginationRowArrowIcon.js | 3 +- .../Pagination/PaginationRowButtonGroup.js | 5 +- .../Pagination/PaginationRowItems.js | 12 +- .../src/components/Pagination/Paginator.js | 17 +-- .../src/components/Popover/Popover.stories.js | 45 ++----- .../ProgressBar/ProgressBar.stories.js | 15 +-- .../src/components/Slider/BootstrapSlider.js | 6 +- .../src/components/Slider/DropdownMenu.js | 7 +- .../src/components/Slider/Slider.js | 17 +-- .../src/components/Slider/Slider.stories.js | 64 ++------- .../src/components/Slider/Slider.test.js | 10 +- .../src/components/Sort/Sort.stories.js | 16 +-- .../src/components/Sort/Sort.test.js | 20 +-- .../components/Sort/SortDirectionSelector.js | 7 +- .../src/components/Sort/SortTypeSelector.js | 16 +-- .../Sort/__mocks__/mockSortExample.js | 4 +- .../src/components/Spinner/Spinner.js | 10 +- .../src/components/Spinner/Spinner.stories.js | 11 +- .../src/components/Switch/Switch.stories.js | 18 +-- .../src/components/Switch/SwitchConstants.js | 9 +- .../customHeaderFormattersDefinition.js | 9 +- .../Formatters/inlineEditFormatterFactory.js | 6 +- .../Formatters/selectionCellFormatter.js | 7 +- .../selectionHeaderCellFormatter.js | 14 +- .../Formatters/sortableHeaderCellFormatter.js | 11 +- .../Table/Stories/BootstrapTableStory.js | 4 +- .../Stories/ClientPaginationTableStory.js | 13 +- .../Table/Stories/ClientSortableTableStory.js | 9 +- .../Table/Stories/InlineEditCellTableStory.js | 5 +- .../Stories/InlineEditColumnTableStory.js | 11 +- .../Table/Stories/InlineEditRowTableStory.js | 5 +- .../Table/Stories/PatternflyTableStory.js | 16 +-- .../Stories/ServerPaginationTableStory.js | 15 +-- .../Table/Stories/tableStoryDescriptions.js | 5 +- .../src/components/Table/Table.stories.js | 12 +- .../src/components/Table/Table.test.js | 19 +-- .../src/components/Table/TableCheckbox.js | 8 +- .../Table/TableConfirmButtonsRow.js | 13 +- .../src/components/Table/TableConstants.js | 6 +- .../components/Table/TableDropdownKebab.js | 10 +- .../src/components/Table/TableHeading.js | 16 +-- .../Table/TableInlineEditHeaderRow.js | 5 +- .../components/Table/TableInlineEditRow.js | 13 +- .../src/components/Table/TablePfProvider.js | 17 +-- .../Table/__mocks__/mockBootstrapColumns.js | 12 +- .../__mocks__/mockClientPaginationTable.js | 37 +---- .../__mocks__/mockClientSortableTable.js | 6 +- .../__mocks__/mockInlineEditCellTable.js | 33 ++--- .../__mocks__/mockInlineEditColumnTable.js | 12 +- .../Table/__mocks__/mockInlineEditRowTable.js | 18 +-- .../__mocks__/mockServerPaginationTable.js | 26 +--- .../src/components/Tabs/Tabs.stories.js | 42 ++---- .../TimedToastNotification.js | 4 +- .../ToastNotification.stories.js | 62 ++------- .../ToastNotification.test.js | 12 +- .../ToastNotificationList.js | 5 +- .../src/components/Toolbar/Toolbar.js | 21 +-- .../src/components/Toolbar/Toolbar.stories.js | 34 +---- .../src/components/Toolbar/Toolbar.test.js | 38 +----- .../components/Toolbar/ToolbarConstants.js | 9 +- .../src/components/Toolbar/ToolbarFind.js | 18 +-- .../Toolbar/__mocks__/mockToolbarExample.js | 50 ++----- .../src/components/Toolbar/index.js | 8 +- .../src/components/Tooltip/Tooltip.stories.js | 39 +----- .../src/components/TreeView/TreeView.js | 32 +---- .../components/TreeView/TreeView.stories.js | 21 +-- .../src/components/TreeView/TreeViewNode.js | 22 +-- .../TreeView/__mocks__/MockTreeView.js | 17 +-- .../__mocks__/TreeViewNodeSpecification.js | 8 +- .../TypeAheadSelect/AsyncTypeAheadSelect.js | 4 +- .../TypeAheadSelect/GithubMenuItem.js | 11 +- .../TypeAheadSelect.stories.js | 64 ++------- .../TypeAheadSelect/TypeAheadSelect.test.js | 7 +- .../UtilizationBar/UtilizationBar.js | 25 +--- .../UtilizationBar/UtilizationBar.stories.js | 17 +-- .../UtilizationBar/UtilizationBar.test.js | 10 +- .../src/components/UtilizationBar/helpers.js | 6 +- .../src/components/VerticalNav/VerticalNav.js | 127 +++++------------- .../VerticalNav/VerticalNav.stories.js | 53 ++------ .../VerticalNav/VerticalNav.test.js | 9 +- .../VerticalNav/VerticalNavBadge.js | 6 +- .../VerticalNav/VerticalNavBrand.js | 8 +- .../VerticalNav/VerticalNavConstants.js | 26 +--- .../VerticalNav/VerticalNavIconBar.js | 6 +- .../components/VerticalNav/VerticalNavItem.js | 6 +- .../VerticalNav/VerticalNavItemHelper.js | 77 +++-------- .../VerticalNav/VerticalNavMasthead.js | 26 +--- .../VerticalNav/VerticalNavSecondaryItem.js | 10 +- .../VerticalNav/VerticalNavTertiaryItem.js | 10 +- .../VerticalNav/__mocks__/basicExample.js | 10 +- .../Wizard/Patterns/StatefulWizardPattern.js | 10 +- .../Wizard/Patterns/WizardPattern.js | 30 +---- .../Wizard/Patterns/WizardPatternBody.js | 13 +- .../Wizard/Stories/LoadingWizardExample.js | 12 +- .../Stories/LoadingWizardExampleStory.js | 12 +- .../Wizard/Stories/WizardExample.js | 39 ++---- .../Wizard/Stories/WizardExampleStory.js | 7 +- .../Stories/WizardPatternExampleStory.js | 20 +-- .../src/components/Wizard/Stories/index.js | 8 +- .../Wizard/Stories/mockWizardBase.js | 3 +- .../Stories/mockWizardDeployContents.js | 10 +- .../Wizard/Stories/mockWizardItems.js | 3 +- .../Wizard/Stories/mockWizardRenderers.js | 33 +---- .../Stories/mockWizardReviewStepsManager.js | 23 +--- .../src/components/Wizard/Wizard.js | 10 +- .../src/components/Wizard/Wizard.stories.js | 19 +-- .../src/components/Wizard/Wizard.test.js | 100 +++----------- .../src/components/Wizard/WizardContents.js | 4 +- .../src/components/Wizard/WizardHeader.js | 7 +- .../components/Wizard/WizardReviewContent.js | 6 +- .../src/components/Wizard/WizardReviewStep.js | 8 +- .../components/Wizard/WizardReviewSubStep.js | 9 +- .../components/Wizard/WizardReviewSubSteps.js | 6 +- .../components/Wizard/WizardSidebarGroup.js | 13 +- .../Wizard/WizardSidebarGroupItem.js | 5 +- .../src/components/Wizard/WizardStep.js | 18 +-- .../src/components/Wizard/WizardSubStep.js | 8 +- .../transforms/pf3-pf4.button.test.js | 3 +- packages/react-codemods/transforms/pf3-pf4.js | 32 +---- .../react-codemods/transforms/pf3-pf4.test.js | 3 +- .../src/SerialConsole/SerialConsole.js | 10 +- .../SerialConsole/SerialConsole.stories.js | 51 ++----- .../src/SerialConsole/SerialConsole.test.js | 23 +--- .../src/SerialConsole/SerialConsoleActions.js | 17 +-- .../SerialConsoleActions.test.js | 11 +- .../react-console/src/SerialConsole/XTerm.js | 5 +- .../src/SerialConsole/XTerm.test.js | 10 +- .../src/VncConsole/VncActions.js | 7 +- .../src/VncConsole/VncActions.test.js | 12 +- .../src/VncConsole/VncConsole.js | 20 +-- .../src/VncConsole/VncConsole.stories.js | 4 +- packages/react-core/build/copyStyles.js | 8 +- .../react-core/src/components/Alert/Alert.js | 10 +- .../src/components/Alert/Alert.test.js | 7 +- .../Alert/__snapshots__/Alert.test.js.snap | 120 ++++++----------- .../react-core/src/components/Badge/Badge.js | 9 +- .../src/components/Badge/Badge.test.js | 4 +- .../src/components/Button/Button.test.js | 4 +- .../src/components/Card/CardFooter.js | 7 +- .../src/components/Card/CardHeader.js | 7 +- .../src/components/Checkbox/Checkbox.js | 15 +-- .../react-core/src/components/Radio/Radio.js | 15 +-- .../react-core/src/components/Title/Title.js | 7 +- .../react-core/src/internal/componentShape.js | 6 +- .../src/layouts/Alignment/Alignment.js | 13 +- .../react-core/src/layouts/Gallery/Gallery.js | 6 +- .../src/layouts/Gallery/GalleryItem.js | 4 +- packages/react-core/src/layouts/Grid/Grid.js | 6 +- .../react-core/src/layouts/Grid/gridUtils.js | 12 +- .../react-core/src/layouts/Level/Level.js | 6 +- .../react-core/src/layouts/Split/Split.js | 14 +- .../src/layouts/Split/Split.test.js | 8 +- .../react-core/src/layouts/Split/SplitItem.js | 9 +- .../react-core/src/layouts/Stack/Stack.js | 14 +- .../src/layouts/Stack/Stack.test.js | 20 +-- .../react-core/src/layouts/Stack/StackItem.js | 9 +- packages/react-docs/gatsby-node.js | 20 +-- packages/react-docs/gatsby-ssr.js | 16 +-- .../components/componentDocs/componentDocs.js | 5 +- .../src/components/content/content.js | 4 +- .../react-docs/src/components/docs/docs.js | 4 +- .../src/components/example/example.js | 4 +- .../gridPlayground/gridPlayground.js | 13 +- .../components/gridPlayground/itemControl.js | 12 +- .../src/components/navigation/navigation.js | 26 +--- .../components/navigation/navigationItem.js | 6 +- .../src/components/propsTable/propsTable.js | 3 +- .../react-docs/src/components/table/table.js | 16 +-- packages/react-docs/src/html.js | 18 +-- packages/react-docs/src/layouts/index.js | 7 +- .../react-docs/src/pages/components/alert.js | 10 +- .../react-docs/src/pages/components/button.js | 7 +- .../src/pages/components/checkbox.js | 12 +- .../react-docs/src/pages/components/radio.js | 12 +- .../react-docs/src/pages/layouts/gallery.js | 9 +- packages/react-docs/src/pages/layouts/grid.js | 4 +- .../react-docs/src/pages/layouts/level.js | 5 +- .../react-docs/src/pages/layouts/split.js | 32 ++--- .../react-docs/src/pages/layouts/stack.js | 44 ++---- packages/react-docs/src/pages/styles/icons.js | 17 +-- .../react-docs/src/pages/styles/tokens.js | 9 +- packages/react-icons/src/createIcon.test.js | 8 +- packages/react-styles/snapshot-serializer.js | 5 +- packages/react-styles/src/StyleSheet.js | 7 +- .../react-styles/src/build/babel/plugin.js | 53 ++------ .../src/build/babel/plugin.test.js | 14 +- .../jest/snapshot-serializer/cssUtils.js | 12 +- .../jest/snapshot-serializer/reactUtils.js | 3 +- .../jest/snapshot-serializer/serializer.js | 4 +- packages/react-styles/src/build/util.js | 21 +-- packages/react-styles/src/css.test.js | 4 +- packages/react-styles/src/index.js | 7 +- packages/react-styles/src/server.js | 4 +- packages/react-styles/src/utils.js | 10 +- packages/react-tokens/build/generateTokens.js | 23 +--- .../react-tokens/build/generateTokens.test.js | 8 +- packages/react-tokens/build/templates/cjs.js | 6 +- packages/react-tokens/build/templates/d.ts.js | 5 +- packages/react-tokens/build/templates/esm.js | 6 +- scripts/generators/actionTypes.js | 4 +- scripts/generators/package/index.js | 9 +- .../patternfly-3-component/index.js | 10 +- .../patternfly-4-component/index.js | 16 +-- scripts/getGlobPackages.js | 3 +- storybook/constants/siteConstants.js | 15 +-- storybook/decorators/storyTemplates.js | 17 +-- storybook/webpack.config.js | 13 +- yarn.lock | 4 + 409 files changed, 1385 insertions(+), 5139 deletions(-) diff --git a/.prettierignore b/.prettierignore index ec6d3cdd7f5..7bd591e7bce 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,4 @@ package.json +packages/**/dist/**/*.js +packages/**/.cache/**/*.js +scripts/generators/**/templates/**/*.js \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 32ebab4e50c..02654395168 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,8 @@ { + "semi": true, "singleQuote": true, - "trailingComma": "none" + "tabWidth": 2, + "trailingComma": "none", + "useTabs": false, + "printWidth": 120 } diff --git a/package.json b/package.json index 91bb657fbe7..bb5c62e970e 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "node-sass": "^4.8.3", "npmlog": "^4.1.2", "plop": "^2.0.0", - "prettier": "^1.11.1", + "prettier": "^1.14.2", "prettier-eslint": "^8.8.1", "prop-types": "^15.6.1", "raf": "^3.4.0", @@ -124,7 +124,7 @@ "lint:js": "eslint --max-warnings 0 packages storybook scripts", "lint:styles": "yarn stylelint", "precommit": "lint-staged", - "prettier": "prettier --write --single-quote --trailing-comma=none 'storybook/**/*.js' 'packages/**/src/**/*.js'", + "prettier": "prettier --write 'storybook/**/*.js' 'packages/**/*.js' 'scripts/**/*.js'", "semantic-release": "lerna-semantic-release pre && lerna-semantic-release post && lerna-semantic-release perform", "start": "concurrently \"yarn storybook:run\" \"yarn storybook:openurl\"", "start:docs": "yarn build && lerna run develop --scope=@patternfly/react-docs --stream", diff --git a/packages/eslint-plugin-patternfly-react/lib/config/recommended.js b/packages/eslint-plugin-patternfly-react/lib/config/recommended.js index 14413187b5b..4e54417d7dd 100644 --- a/packages/eslint-plugin-patternfly-react/lib/config/recommended.js +++ b/packages/eslint-plugin-patternfly-react/lib/config/recommended.js @@ -27,10 +27,7 @@ module.exports = { 'no-prototype-builtins': 'off', 'no-restricted-syntax': 'off', 'no-underscore-dangle': 'off', - 'no-unused-expressions': [ - 'error', - { allowShortCircuit: true, allowTernary: true } - ], + 'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }], 'no-unused-vars': [ 'error', { @@ -40,7 +37,10 @@ module.exports = { } ], 'no-use-before-define': 'off', - 'prettier/prettier': 'error', + 'prettier/prettier': [ + 'error', + { semi: true, singleQuote: true, tabWidth: 2, trailingComma: 'none', useTabs: false, printWidth: 120 } + ], 'react/no-array-index-key': 'off', 'react/forbid-prop-types': 'off', 'react/jsx-filename-extension': 'off', diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js index 3c5aa5cf5d1..cf07f26733d 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js @@ -18,9 +18,7 @@ module.exports = { const [importMap = {}] = context.options; return { ImportDeclaration(node) { - const defaultImport = node.specifiers.find( - spec => spec.type === 'ImportDefaultSpecifier' - ); + const defaultImport = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier'); if (!defaultImport) { return; } @@ -29,8 +27,7 @@ module.exports = { if (expectedName && expectedName !== receivedName) { context.report({ node, - message: - 'Expected default import to be named "{{ expected }}" but received "{{ received }}"', + message: 'Expected default import to be named "{{ expected }}" but received "{{ received }}"', data: { expected: expectedName, received: receivedName @@ -38,9 +35,7 @@ module.exports = { fix(fixer) { const [varDecl] = context.getDeclaredVariables(node); return [ - ...varDecl.references.map(ref => - fixer.replaceText(ref.identifier, expectedName) - ), + ...varDecl.references.map(ref => fixer.replaceText(ref.identifier, expectedName)), fixer.replaceText(defaultImport, expectedName) ]; } diff --git a/packages/patternfly-react/src/common/closestPolyfill.js b/packages/patternfly-react/src/common/closestPolyfill.js index 93c0a07b821..dfe4d1ea96a 100644 --- a/packages/patternfly-react/src/common/closestPolyfill.js +++ b/packages/patternfly-react/src/common/closestPolyfill.js @@ -1,7 +1,5 @@ export const matches = - Element.prototype.matches || - Element.prototype.msMatchesSelector || - Element.prototype.webkitMatchesSelector; + Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; if (!Element.prototype.matches) { Element.prototype.matches = matches; diff --git a/packages/patternfly-react/src/common/controlled.js b/packages/patternfly-react/src/common/controlled.js index 3459b85ff88..4e8cd7dea1b 100644 --- a/packages/patternfly-react/src/common/controlled.js +++ b/packages/patternfly-react/src/common/controlled.js @@ -39,16 +39,12 @@ const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => { componentDidMount() { this.loadPersistent(); - window && - window.addEventListener && - window.addEventListener('beforeunload', this.savePersistent); + window && window.addEventListener && window.addEventListener('beforeunload', this.savePersistent); } componentWillUnmount() { this.savePersistent(); - window && - window.removeEventListener && - window.removeEventListener('beforeunload', this.savePersistent); + window && window.removeEventListener && window.removeEventListener('beforeunload', this.savePersistent); } setControlledState = updater => { @@ -57,10 +53,7 @@ const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => { loadPersistent = () => { if (persist && persist.length > 0) { - const fromPersisted = - window && - window.sessionStorage && - window.sessionStorage.getItem(this.sessionKey()); + const fromPersisted = window && window.sessionStorage && window.sessionStorage.getItem(this.sessionKey()); fromPersisted && this.setState(JSON.parse(fromPersisted)); } }; @@ -68,26 +61,15 @@ const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => { savePersistent = () => { if (persist && persist.length > 0) { const toPersist = selectKeys(this.state, persist); - window && - window.sessionStorage && - window.sessionStorage.setItem( - this.sessionKey(), - JSON.stringify(toPersist) - ); + window && window.sessionStorage && window.sessionStorage.setItem(this.sessionKey(), JSON.stringify(toPersist)); } }; sessionKey = () => this.props.sessionKey || JSON.stringify(persist); render() { - const controlledStateProps = filterKeys( - this.props, - key => types.hasOwnProperty(key) && this.props[key] !== null - ); - const otherProps = filterKeys( - this.props, - key => !types.hasOwnProperty(key) - ); + const controlledStateProps = filterKeys(this.props, key => types.hasOwnProperty(key) && this.props[key] !== null); + const otherProps = filterKeys(this.props, key => !types.hasOwnProperty(key)); return ( { }; /** Returns true if propName is a non-null, defined property of the props object (can be any object, not just React props). */ -export const propExists = (props, propName) => - props && props.hasOwnProperty(propName) && props[propName] != null; +export const propExists = (props, propName) => props && props.hasOwnProperty(propName) && props[propName] != null; /** Given two objects (props and state), returns the value of propName from props if present, or from state otherwise. */ export const propOrState = (props, state, propName) => @@ -36,18 +35,14 @@ export const selectKeys = (obj, keys, fn = val => val) => keys.reduce((values, key) => ({ ...values, [key]: fn(obj[key]) }), {}); /** Returns a subset of the given object with a validator function applied to its keys. */ -export const filterKeys = (obj, validator) => - selectKeys(obj, Object.keys(obj).filter(validator)); +export const filterKeys = (obj, validator) => selectKeys(obj, Object.keys(obj).filter(validator)); /** Returns a subset of the given object with the given keys left out. */ -export const excludeKeys = (obj, keys) => - filterKeys(obj, key => !keys.includes(key)); +export const excludeKeys = (obj, keys) => filterKeys(obj, key => !keys.includes(key)); /** Returns the given React children prop as a regular array of React nodes. */ export const childrenToArray = children => - children && - React.Children.count(children) > 0 && - React.Children.toArray(children); + children && React.Children.count(children) > 0 && React.Children.toArray(children); /** Filters the given React children prop with the given validator function. Returns an array of nodes. */ export const filterChildren = (children, validator) => { diff --git a/packages/patternfly-react/src/common/patternfly.js b/packages/patternfly-react/src/common/patternfly.js index 8bac9c27354..24517a7a793 100644 --- a/packages/patternfly-react/src/common/patternfly.js +++ b/packages/patternfly-react/src/common/patternfly.js @@ -11,9 +11,6 @@ const mockLayout = { removeChangeListener: () => {} }; -const layout = - process.env.NODE_ENV === 'test' - ? mockLayout - : Break({ mobile: 0, ...patternfly.pfBreakpoints }); +const layout = process.env.NODE_ENV === 'test' ? mockLayout : Break({ mobile: 0, ...patternfly.pfBreakpoints }); export { patternfly, c3ChartDefaults, layout }; diff --git a/packages/patternfly-react/src/components/AboutModal/AboutModal.js b/packages/patternfly-react/src/components/AboutModal/AboutModal.js index 8de0ccdec9b..c46e875af6a 100644 --- a/packages/patternfly-react/src/components/AboutModal/AboutModal.js +++ b/packages/patternfly-react/src/components/AboutModal/AboutModal.js @@ -18,13 +18,7 @@ const AboutModal = ({ closeText, ...props }) => ( - + diff --git a/packages/patternfly-react/src/components/AboutModal/AboutModal.stories.js b/packages/patternfly-react/src/components/AboutModal/AboutModal.stories.js index 00510986b0e..e89b617acde 100644 --- a/packages/patternfly-react/src/components/AboutModal/AboutModal.stories.js +++ b/packages/patternfly-react/src/components/AboutModal/AboutModal.stories.js @@ -4,33 +4,17 @@ import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; import { name } from '../../../package.json'; -import { - storybookPackageName, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; -import { - AboutModal, - AboutModalVersions, - AboutModalVersionItem -} from '../../index'; +import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; +import { AboutModal, AboutModalVersions, AboutModalVersionItem } from '../../index'; -import { - MockAboutModal, - MockAboutModalSource -} from './__mocks__/mockAboutModal'; +import { MockAboutModal, MockAboutModalSource } from './__mocks__/mockAboutModal'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.COMMUNICATION - }/About Modal`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/About Modal`, module); stories.addDecorator( defaultTemplate({ title: 'About Modal', - documentationLink: - 'http://www.patternfly.org/pattern-library/communication/about-modal/' + documentationLink: 'http://www.patternfly.org/pattern-library/communication/about-modal/' }) ); diff --git a/packages/patternfly-react/src/components/AboutModal/AboutModal.test.js b/packages/patternfly-react/src/components/AboutModal/AboutModal.test.js index b192a0628d0..5d6cea53a28 100644 --- a/packages/patternfly-react/src/components/AboutModal/AboutModal.test.js +++ b/packages/patternfly-react/src/components/AboutModal/AboutModal.test.js @@ -1,10 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import { - AboutModal, - AboutModalVersions, - AboutModalVersionItem -} from '../../index'; +import { AboutModal, AboutModalVersions, AboutModalVersionItem } from '../../index'; const testAboutModal = props => ( ALERT_TYPES.map((type, index) => ( - I am an Alert with type="{type}" + I am an Alert with type=" + {type} + " )) ) @@ -42,12 +35,7 @@ stories.add( 'Alert without dismiss', withInfo(`This is the Alert without a dismiss icon.`)(() => ( - - {text( - 'Label', - 'Well done! You successfully read this important alert message.' - )} - + {text('Label', 'Well done! You successfully read this important alert message.')} )) ); diff --git a/packages/patternfly-react/src/components/Alert/AlertConstants.js b/packages/patternfly-react/src/components/Alert/AlertConstants.js index 6809df787f5..c64e5975aed 100644 --- a/packages/patternfly-react/src/components/Alert/AlertConstants.js +++ b/packages/patternfly-react/src/components/Alert/AlertConstants.js @@ -4,11 +4,6 @@ export const ALERT_TYPE_SUCCESS = 'success'; export const ALERT_TYPE_INFO = 'info'; export const ALERT_TYPE_DANGER = 'danger'; // deprecated!!! -export const ALERT_TYPES = [ - ALERT_TYPE_ERROR, - ALERT_TYPE_WARNING, - ALERT_TYPE_SUCCESS, - ALERT_TYPE_INFO -]; +export const ALERT_TYPES = [ALERT_TYPE_ERROR, ALERT_TYPE_WARNING, ALERT_TYPE_SUCCESS, ALERT_TYPE_INFO]; export const DEPRECATED_ALERT_TYPES = [ALERT_TYPE_DANGER]; diff --git a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.stories.js b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.stories.js index 53654883ba0..052c6751dd2 100644 --- a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.stories.js +++ b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.stories.js @@ -1,21 +1,10 @@ import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; -import { - storybookPackageName, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; -import { - NavApplicationLauncherStory, - WrapperNavApplicationLauncherStory -} from './Stories/index'; +import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; +import { NavApplicationLauncherStory, WrapperNavApplicationLauncherStory } from './Stories/index'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.APPLICATION_FRAMEWORK - }/Launcher`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.APPLICATION_FRAMEWORK}/Launcher`, module); stories.addDecorator(withKnobs); NavApplicationLauncherStory(stories); diff --git a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.test.js index 6e0fd107e16..86bb2bfeb39 100644 --- a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.test.js +++ b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncher.test.js @@ -1,10 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherToggle -} from './index'; +import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherToggle } from './index'; const handleClick = e => { e.preventDefault(); @@ -40,36 +36,20 @@ test('ApplicationLauncherItem with tooltip is working properly', () => { test('ApplicationLauncherItem without tooltip is working properly', () => { const component = mount( - + ); expect(component.render()).toMatchSnapshot(); }); test('ApplicationLauncherToggle is working properly', () => { - const component = mount( - - ); + const component = mount(); expect(component.render()).toMatchSnapshot(); }); test('ApplicationLauncherToggle is working properly when open', () => { - const component = mount( - - ); + const component = mount(); expect(component.render()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherItem.js b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherItem.js index d3e970ae3bf..1cf367302a8 100644 --- a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherItem.js +++ b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherItem.js @@ -5,16 +5,7 @@ import { Tooltip } from '../Tooltip'; import { OverlayTrigger } from '../OverlayTrigger'; import { Icon } from '../Icon'; -const ApplicationLauncherItem = ({ - onClick, - tooltip, - tooltipPlacement, - title, - icon, - noIcons, - className, - ...props -}) => { +const ApplicationLauncherItem = ({ onClick, tooltip, tooltipPlacement, title, icon, noIcons, className, ...props }) => { const classes = classNames('applauncher-pf-item', className); if (tooltip !== null) { @@ -26,19 +17,8 @@ const ApplicationLauncherItem = ({ rootClose={false} >
  • - onClick(e)} - role="menuitem" - > - {!noIcons && ( - - )} + onClick(e)} role="menuitem"> + {!noIcons && } {title}
    • @@ -47,15 +27,8 @@ const ApplicationLauncherItem = ({ } return (
  • - onClick(e)} - role="menuitem" - > - {!noIcons && ( - - )} + onClick(e)} role="menuitem"> + {!noIcons && } {title}
    • diff --git a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherToggle.js b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherToggle.js index 62cd6ab7839..c1a82d103bb 100644 --- a/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherToggle.js +++ b/packages/patternfly-react/src/components/ApplicationLauncher/ApplicationLauncherToggle.js @@ -5,12 +5,7 @@ import { Tooltip } from '../Tooltip'; import { Icon } from '../Icon'; import { Button } from '../Button'; -const ApplicationLauncherToggle = ({ - open, - tooltip, - onClick, - tooltipPlacement -}) => { +const ApplicationLauncherToggle = ({ open, tooltip, onClick, tooltipPlacement }) => { if (tooltip) return ( {tooltip}} > - ); return ( - {' '} - {' '} + {' '} - {' '} - {' '} + {' '}

    - {' '} - {' '} - {' '} - + {' '} +

    ); return inlineTemplate({ title: 'Button', documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#buttons`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }buttons/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}buttons/`, story }); }) @@ -217,12 +204,8 @@ stories.add( ); return inlineTemplate({ title: 'ButtonGroup', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS - }#button-groups`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }button-group/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#button-groups`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}button-group/`, story }); }) @@ -249,9 +232,7 @@ stories.add( ); return inlineTemplate({ title: 'DropdownButton', - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }dropdowns/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}dropdowns/`, story }); }) @@ -280,9 +261,7 @@ stories.add( return inlineTemplate({ title: 'SplitButton', - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }dropdowns/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}dropdowns/`, story }); }) diff --git a/packages/patternfly-react/src/components/Button/Button.test.js b/packages/patternfly-react/src/components/Button/Button.test.js index ec6c10685d9..fce985cae4e 100644 --- a/packages/patternfly-react/src/components/Button/Button.test.js +++ b/packages/patternfly-react/src/components/Button/Button.test.js @@ -3,9 +3,7 @@ import { shallow } from 'enzyme'; import Button from './Button'; test('Button renders properly', () => { - const component = shallow( - - ).getElement(); + const component = shallow().getElement(); expect(component).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Button/ButtonConstants.js b/packages/patternfly-react/src/components/Button/ButtonConstants.js index d97758531c1..cf4aa6808b3 100644 --- a/packages/patternfly-react/src/components/Button/ButtonConstants.js +++ b/packages/patternfly-react/src/components/Button/ButtonConstants.js @@ -1,9 +1 @@ -export const BUTTON_BS_STYLES = [ - 'default', - 'primary', - 'success', - 'warning', - 'danger', - 'info', - 'link' -]; +export const BUTTON_BS_STYLES = ['default', 'primary', 'success', 'warning', 'danger', 'info', 'link']; diff --git a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js index 706168a43f4..89da140001d 100644 --- a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js +++ b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js @@ -1,11 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { Icon } from '../../Icon'; -import { - AggregateStatusCount, - AggregateStatusNotification, - AggregateStatusNotifications -} from './index'; +import { AggregateStatusCount, AggregateStatusNotification, AggregateStatusNotifications } from './index'; test('Aggregate Status Card Count is working properly', () => { const component = mount( 9 ); @@ -17,13 +13,7 @@ test('Aggregate Status Notification is working properly', () => { const component = mount( {' '} - + {' '} @@ -33,9 +23,7 @@ test('Aggregate Status Notification is working properly', () => { }); test('Aggregate Status Notifications is working properly', () => { - const component = mount( - Card Content - ); + const component = mount(Card Content); expect(component.render()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js index defbc80e099..24aa041a86f 100644 --- a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js +++ b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const AggregateStatusNotification = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-aggregate-status-notification', - className - ); + const classes = classNames('card-pf-aggregate-status-notification', className); return ( diff --git a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js index 4abdc760739..2eb423ddc4c 100644 --- a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js +++ b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const AggregateStatusNotifications = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-aggregate-status-notifications', - className - ); + const classes = classNames('card-pf-aggregate-status-notifications', className); return (

    diff --git a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/index.js b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/index.js index 6ae8d8a42cf..f35b97cdc55 100644 --- a/packages/patternfly-react/src/components/Cards/AggregateStatusCard/index.js +++ b/packages/patternfly-react/src/components/Cards/AggregateStatusCard/index.js @@ -2,8 +2,4 @@ import AggregateStatusCount from './AggregateStatusCount'; import AggregateStatusNotification from './AggregateStatusNotification'; import AggregateStatusNotifications from './AggregateStatusNotifications'; -export { - AggregateStatusCount, - AggregateStatusNotification, - AggregateStatusNotifications -}; +export { AggregateStatusCount, AggregateStatusNotification, AggregateStatusNotifications }; diff --git a/packages/patternfly-react/src/components/Cards/Card.js b/packages/patternfly-react/src/components/Cards/Card.js index 30f68ba5222..1aa2c55d1c4 100644 --- a/packages/patternfly-react/src/components/Cards/Card.js +++ b/packages/patternfly-react/src/components/Cards/Card.js @@ -5,16 +5,7 @@ import PropTypes from 'prop-types'; /** * Card Component for PatternFly React */ -const Card = ({ - children, - className, - accented, - aggregated, - aggregatedMini, - matchHeight, - cardRef, - ...props -}) => { +const Card = ({ children, className, accented, aggregated, aggregatedMini, matchHeight, cardRef, ...props }) => { const classes = classNames( 'card-pf', { 'card-pf-accented': accented }, diff --git a/packages/patternfly-react/src/components/Cards/CardDropdownButton.js b/packages/patternfly-react/src/components/Cards/CardDropdownButton.js index 1ace7f1bb53..c37c5ee3867 100644 --- a/packages/patternfly-react/src/components/Cards/CardDropdownButton.js +++ b/packages/patternfly-react/src/components/Cards/CardDropdownButton.js @@ -4,25 +4,11 @@ import PropTypes from 'prop-types'; import { Dropdown } from '../Dropdown'; import { ButtonGroup } from '../Button'; -const CardDropdownButton = ({ - id, - children, - title, - className, - pullRight, - ...props -}) => { +const CardDropdownButton = ({ id, children, title, className, pullRight, ...props }) => { const classes = classNames('card-pf-time-frame-filter', className); - const CustomButtonGroup = customGroup => ( - - ); + const CustomButtonGroup = customGroup => ; return ( - + {title} {children} diff --git a/packages/patternfly-react/src/components/Cards/CardGrid.js b/packages/patternfly-react/src/components/Cards/CardGrid.js index 1225d428d6c..2c26d2d7ecd 100644 --- a/packages/patternfly-react/src/components/Cards/CardGrid.js +++ b/packages/patternfly-react/src/components/Cards/CardGrid.js @@ -11,9 +11,7 @@ const CardGrid = ({ matchHeight, children, className, ...props }) => { if (matchHeight) { return ( - - {children} - + {children} ); } diff --git a/packages/patternfly-react/src/components/Cards/CardHeightMatching.js b/packages/patternfly-react/src/components/Cards/CardHeightMatching.js index de772ebc921..34c4739beed 100644 --- a/packages/patternfly-react/src/components/Cards/CardHeightMatching.js +++ b/packages/patternfly-react/src/components/Cards/CardHeightMatching.js @@ -7,9 +7,7 @@ class CardHeightMatching extends React.Component { constructor(props) { super(props); - this._selectors = Array.isArray(props.selector) - ? props.selector - : [props.selector]; + this._selectors = Array.isArray(props.selector) ? props.selector : [props.selector]; this._resizeSensors = []; } @@ -17,12 +15,7 @@ class CardHeightMatching extends React.Component { // setup the event listening on '_container' for our height matching selectors this._selectors.forEach(selector => { const elements = this._container.querySelectorAll(selector); - this._resizeSensors.push( - new ResizeSensor( - elements, - debounce(() => this._matchHeights([selector]), 200) - ) - ); + this._resizeSensors.push(new ResizeSensor(elements, debounce(() => this._matchHeights([selector]), 200))); }); // schedule the initial height matching @@ -50,9 +43,7 @@ class CardHeightMatching extends React.Component { } const arrayMap = elements => - Array.prototype.map - .call(elements, el => el.scrollHeight) - .reduce((pre, cur) => Math.max(pre, cur), -Infinity); + Array.prototype.map.call(elements, el => el.scrollHeight).reduce((pre, cur) => Math.max(pre, cur), -Infinity); selectors.forEach(selector => { const elements = this._container.querySelectorAll(selector); elements.forEach(el => { @@ -82,10 +73,7 @@ class CardHeightMatching extends React.Component { CardHeightMatching.propTypes = { children: PropTypes.node.isRequired, className: PropTypes.string, - selector: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.arrayOf(PropTypes.string) - ]).isRequired + selector: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired }; CardHeightMatching.defaultProps = { className: '' diff --git a/packages/patternfly-react/src/components/Cards/CardHeightMatching.test.js b/packages/patternfly-react/src/components/Cards/CardHeightMatching.test.js index 830ccfdfffe..705f7930a0d 100644 --- a/packages/patternfly-react/src/components/Cards/CardHeightMatching.test.js +++ b/packages/patternfly-react/src/components/Cards/CardHeightMatching.test.js @@ -32,10 +32,7 @@ beforeEach(() => { test('creates a ResizeSensor for each selector', () => { mount(); expect(ResizeSensor).toHaveBeenCalledTimes(props.selector.length); - expect(ResizeSensor).toBeCalledWith( - expect.arrayContaining([mockElement]), - expect.any(Function) - ); + expect(ResizeSensor).toBeCalledWith(expect.arrayContaining([mockElement]), expect.any(Function)); }); test('allows selector to be a string', () => { diff --git a/packages/patternfly-react/src/components/Cards/Cards.stories.js b/packages/patternfly-react/src/components/Cards/Cards.stories.js index 7de8d67081d..3626ede4dbe 100644 --- a/packages/patternfly-react/src/components/Cards/Cards.stories.js +++ b/packages/patternfly-react/src/components/Cards/Cards.stories.js @@ -1,9 +1,6 @@ import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; -import { - storybookPackageName, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { baseCardAddWithInfo, @@ -15,10 +12,7 @@ import { } from './Stories/index'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.CARDS}`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.CARDS}`, module); stories.addDecorator(withKnobs); baseCardAddWithInfo(stories); diff --git a/packages/patternfly-react/src/components/Cards/Cards.test.js b/packages/patternfly-react/src/components/Cards/Cards.test.js index f75f3ebc7f9..bc638f703ea 100644 --- a/packages/patternfly-react/src/components/Cards/Cards.test.js +++ b/packages/patternfly-react/src/components/Cards/Cards.test.js @@ -1,16 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { MenuItem } from '../MenuItem'; -import { - Card, - CardTitle, - CardBody, - CardGrid, - CardHeading, - CardFooter, - CardLink, - CardDropdownButton -} from './index'; +import { Card, CardTitle, CardBody, CardGrid, CardHeading, CardFooter, CardLink, CardDropdownButton } from './index'; test('Card is working properly', () => { const component = mount( @@ -54,10 +45,7 @@ test('Card Body is working properly', () => { test('Card Link is working properly', () => { const component = mount( - + Card Content ); @@ -67,11 +55,7 @@ test('Card Link is working properly', () => { test('Card Drop Down Button is working properly', () => { const component = mount( - + Last 30 Days diff --git a/packages/patternfly-react/src/components/Cards/Stories/AggregateStatusCardStory.js b/packages/patternfly-react/src/components/Cards/Stories/AggregateStatusCardStory.js index eaefdf99234..40af4a0d981 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/AggregateStatusCardStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/AggregateStatusCardStory.js @@ -159,9 +159,7 @@ const aggregateCardAddWithInfo = stories => { ); return inlineTemplate({ title: 'Aggregate Status Card', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS - }aggregate-status-card/#code`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}aggregate-status-card/#code`, story }); }); diff --git a/packages/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js b/packages/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js index 0059f94f372..5f11092cab0 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js @@ -2,27 +2,12 @@ import React from 'react'; import { boolean } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { Button } from '../../Button'; -import { - Card, - CardGrid, - CardHeading, - CardDropdownButton, - CardTitle, - CardBody, - CardFooter, - CardLink -} from '../index'; +import { Card, CardGrid, CardHeading, CardDropdownButton, CardTitle, CardBody, CardFooter, CardLink } from '../index'; import { Icon } from '../../Icon'; import { MenuItem } from '../../MenuItem'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; import { DOCUMENTATION_URL } from 'storybook/constants/siteConstants'; -import { - EmptyState, - EmptyStateTitle, - EmptyStateIcon, - EmptyStateInfo, - EmptyStateAction -} from '../../../index'; +import { EmptyState, EmptyStateTitle, EmptyStateIcon, EmptyStateInfo, EmptyStateAction } from '../../../index'; const handleClick = e => { e.preventDefault(); @@ -39,11 +24,7 @@ const baseCardHeightMatchingStory = stories => { - + Last 30 Days @@ -56,11 +37,7 @@ const baseCardHeightMatchingStory = stories => { [card contents] - } - > + }> Add New Cluster @@ -71,22 +48,14 @@ const baseCardHeightMatchingStory = stories => { Card Title [card contents] - + Last 30 Days Last 60 Days Last 90 Days - } - > + }> View CPU Events @@ -103,11 +72,7 @@ const baseCardHeightMatchingStory = stories => { Empty Card No Data - @@ -121,9 +86,7 @@ const baseCardHeightMatchingStory = stories => { ); return inlineTemplate({ title: 'Base Card', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS - }base-card/#code`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}base-card/#code`, story }); }); diff --git a/packages/patternfly-react/src/components/Cards/Stories/BaseCardStory.js b/packages/patternfly-react/src/components/Cards/Stories/BaseCardStory.js index a11343ce618..60bb5734a87 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/BaseCardStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/BaseCardStory.js @@ -1,16 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean } from '@storybook/addon-knobs'; -import { - Card, - CardGrid, - CardHeading, - CardDropdownButton, - CardTitle, - CardBody, - CardFooter, - CardLink -} from '../index'; +import { Card, CardGrid, CardHeading, CardDropdownButton, CardTitle, CardBody, CardFooter, CardLink } from '../index'; import { Icon } from '../../Icon'; import { MenuItem } from '../../MenuItem'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; @@ -34,22 +25,14 @@ const baseCardAddWithInfo = stories => { Card Title [card contents] - + Last 30 Days Last 60 Days Last 90 Days - } - > + }> View CPU Events @@ -60,22 +43,14 @@ const baseCardAddWithInfo = stories => { Card Title [card contents] - + Last 30 Days Last 60 Days Last 90 Days - } - > + }> Add New Cluster @@ -84,11 +59,7 @@ const baseCardAddWithInfo = stories => { - + Last 30 Days @@ -114,9 +85,7 @@ const baseCardAddWithInfo = stories => { ); return inlineTemplate({ title: 'Base Card', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS - }base-card/#code`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}base-card/#code`, story }); }); diff --git a/packages/patternfly-react/src/components/Cards/Stories/TrendCardStory.js b/packages/patternfly-react/src/components/Cards/Stories/TrendCardStory.js index edfe7d88c23..51283b4fab5 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/TrendCardStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/TrendCardStory.js @@ -1,15 +1,6 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { - Card, - CardGrid, - CardHeading, - CardDropdownButton, - CardTitle, - CardBody, - CardFooter, - CardLink -} from '../index'; +import { Card, CardGrid, CardHeading, CardDropdownButton, CardTitle, CardBody, CardFooter, CardLink } from '../index'; import { SparklineChart } from '../../Chart/index'; import { UtilizationCardDetails, @@ -44,22 +35,13 @@ const trendCardAddWithInfo = stories => { Network - - 35% - + 35% - - Available - - - of 1000Mhz - + Available + of 1000Mhz - + @@ -74,28 +56,17 @@ const trendCardAddWithInfo = stories => {

    Data

    - + - + Last 30 Days Last 60 Days Last 90 Days - } - > + }> {' '} Add New Cluster diff --git a/packages/patternfly-react/src/components/Cards/Stories/UtilizationBarCardStory.js b/packages/patternfly-react/src/components/Cards/Stories/UtilizationBarCardStory.js index 3ee4e8652f1..a26682c5ff0 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/UtilizationBarCardStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/UtilizationBarCardStory.js @@ -65,34 +65,10 @@ const utilizationBarCardStory = stories => { Quotas - - - - + + + + @@ -102,9 +78,7 @@ const utilizationBarCardStory = stories => { ); return inlineTemplate({ title: 'Utilization Bar Card', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS - }utilization-bar-card/#code`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}utilization-bar-card/#code`, story }); }); diff --git a/packages/patternfly-react/src/components/Cards/Stories/UtilizationCardStory.js b/packages/patternfly-react/src/components/Cards/Stories/UtilizationCardStory.js index 0b57098e936..04f0d85e1f9 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/UtilizationCardStory.js +++ b/packages/patternfly-react/src/components/Cards/Stories/UtilizationCardStory.js @@ -25,9 +25,9 @@ const utilizationCardAddWithInfo = stories => { order: null }; const pfGetUtilizationDonutTooltipContents = d => - `${Math.round( - d[0].ratio * 1000 - ) / 10} ${d[0].name}`; + `${Math.round(d[0].ratio * 1000) / 10} ${ + d[0].name + }`; const donutConfigTooltip = { contents: pfGetUtilizationDonutTooltipContents @@ -46,16 +46,10 @@ const utilizationCardAddWithInfo = stories => { Network - - 200 - + 200 - - Available - - - of 1300 Gbps - + Available + of 1300 Gbps { title={{ type: 'max' }} tooltip={donutConfigTooltip} /> - + @@ -78,9 +69,7 @@ const utilizationCardAddWithInfo = stories => { return inlineTemplate({ title: 'Utilization Trend Card', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS - }utilization-trend-card/#code`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_CARDS}utilization-trend-card/#code`, story }); }); diff --git a/packages/patternfly-react/src/components/Cards/Stories/index.js b/packages/patternfly-react/src/components/Cards/Stories/index.js index 68c9739717a..cee8e69c519 100644 --- a/packages/patternfly-react/src/components/Cards/Stories/index.js +++ b/packages/patternfly-react/src/components/Cards/Stories/index.js @@ -1,10 +1,6 @@ export { default as baseCardAddWithInfo } from './BaseCardStory'; -export { - default as aggregateCardAddWithInfo -} from './AggregateStatusCardStory'; +export { default as aggregateCardAddWithInfo } from './AggregateStatusCardStory'; export { default as trendCardAddWithInfo } from './TrendCardStory'; export { default as utilizationCardAddWithInfo } from './UtilizationCardStory'; -export { - default as baseCardHeightMatchingStory -} from './BaseCardHeightMatchingStory'; +export { default as baseCardHeightMatchingStory } from './BaseCardHeightMatchingStory'; export { default as utilizationBarCardStory } from './UtilizationBarCardStory'; diff --git a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js index 183eb189acc..ff6303aff89 100644 --- a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js +++ b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsCount = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-utilization-card-details-count', - className - ); + const classes = classNames('card-pf-utilization-card-details-count', className); return ( diff --git a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js index 6a675a5bd45..c0431e27405 100644 --- a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js +++ b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsDesc = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-utilization-card-details-description', - className - ); + const classes = classNames('card-pf-utilization-card-details-description', className); return ( diff --git a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js index 4be920990b4..3e3fb64d027 100644 --- a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js +++ b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsLine1 = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-utilization-card-details-line-1', - className - ); + const classes = classNames('card-pf-utilization-card-details-line-1', className); return ( diff --git a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js index d9d6ca9c1ad..55634883145 100644 --- a/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js +++ b/packages/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js @@ -3,10 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsLine2 = ({ children, className, ...props }) => { - const classes = classNames( - 'card-pf-utilization-card-details-line-2', - className - ); + const classes = classNames('card-pf-utilization-card-details-line-2', className); return ( diff --git a/packages/patternfly-react/src/components/Cards/index.js b/packages/patternfly-react/src/components/Cards/index.js index dfbbde51361..7007c6c4f56 100644 --- a/packages/patternfly-react/src/components/Cards/index.js +++ b/packages/patternfly-react/src/components/Cards/index.js @@ -7,11 +7,7 @@ import CardFooter from './CardFooter'; import CardLink from './CardLink'; import CardDropdownButton from './CardDropdownButton'; import CardHeightMatching from './CardHeightMatching'; -import { - AggregateStatusCount, - AggregateStatusNotifications, - AggregateStatusNotification -} from './AggregateStatusCard'; +import { AggregateStatusCount, AggregateStatusNotifications, AggregateStatusNotification } from './AggregateStatusCard'; import { UtilizationCard, UtilizationCardDetails, diff --git a/packages/patternfly-react/src/components/Chart/AreaChart.js b/packages/patternfly-react/src/components/Chart/AreaChart.js index d9ed007ed52..e1e1dc43e29 100644 --- a/packages/patternfly-react/src/components/Chart/AreaChart.js +++ b/packages/patternfly-react/src/components/Chart/AreaChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const AreaChart = getComposer('AREA_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const AreaChart = getComposer('AREA_CHART')(({ className, type, data, ...props }) => ( + +)); export default AreaChart; diff --git a/packages/patternfly-react/src/components/Chart/AreaChart.test.js b/packages/patternfly-react/src/components/Chart/AreaChart.test.js index 3950ca024aa..8a5fcf54101 100644 --- a/packages/patternfly-react/src/components/Chart/AreaChart.test.js +++ b/packages/patternfly-react/src/components/Chart/AreaChart.test.js @@ -4,17 +4,9 @@ import { shallow } from 'enzyme'; import { AreaChart, SingleAreaChart } from './index'; test('AreaChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('SingleAreaChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Chart/BarChart.js b/packages/patternfly-react/src/components/Chart/BarChart.js index f29a04dc73d..c6f4efc9f43 100644 --- a/packages/patternfly-react/src/components/Chart/BarChart.js +++ b/packages/patternfly-react/src/components/Chart/BarChart.js @@ -18,8 +18,6 @@ const mapBarChartProps = props => { const BarChart = compose( getComposer('BAR_CHART'), mapProps(mapBarChartProps) -)(({ className, type, data, ...props }) => ( - -)); +)(({ className, type, data, ...props }) => ); export default BarChart; diff --git a/packages/patternfly-react/src/components/Chart/BarChart.test.js b/packages/patternfly-react/src/components/Chart/BarChart.test.js index b547278b313..4437bc42daa 100644 --- a/packages/patternfly-react/src/components/Chart/BarChart.test.js +++ b/packages/patternfly-react/src/components/Chart/BarChart.test.js @@ -4,25 +4,13 @@ import { shallow } from 'enzyme'; import { BarChart, GroupedBarChart, StackedBarChart } from './index'; test('BarChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('GroupedBarChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('StackedBarChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.js index 5982c5284dc..c79e76f2f64 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.js @@ -51,11 +51,7 @@ const BulletChart = ({ customLegend, className }) => { - const classes = classNames( - 'bullet-chart-pf', - { 'bullet-chart-pf-vertical': vertical }, - className - ); + const classes = classNames('bullet-chart-pf', { 'bullet-chart-pf-vertical': vertical }, className); // Order the ranges into an array of 3 ranges lowest to highest, insert 0's if necessary // this is to keep darkest as highest and use darkest colors first (ie. 1 range still uses darkest) @@ -73,9 +69,7 @@ const BulletChart = ({ const displayValues = [...values]; - const defaultColors = useExtendedColors - ? defaultExtendedColors - : defaultPrimaryColors; + const defaultColors = useExtendedColors ? defaultExtendedColors : defaultPrimaryColors; displayValues.forEach((value, index) => { if (!value.color && defaultColors[index]) { value.color = defaultColors[index]; @@ -128,11 +122,7 @@ const BulletChart = ({ return value.tooltipFunction(value.value, value.title); } - return ( - - {`${value.title}: ${value.value}%`} - - ); + return {`${value.title}: ${value.value}%`}; }; return ( @@ -152,11 +142,7 @@ const BulletChart = ({ return range.tooltipFunction(range.value, range.title); } - return ( - - {`${range.title}: ${range.value}%`} - - ); + return {`${range.title}: ${range.value}%`}; }; return ( @@ -182,23 +168,10 @@ const BulletChart = ({ const renderChartData = () => (
    {renderValues()} - - + + {rangeValues.map((range, index) => ( - + ))}
    ); @@ -231,11 +204,7 @@ const BulletChart = ({ ); if (vertical) { - return ( -
    - {chartContainer} -
    - ); + return
    {chartContainer}
    ; } return chartContainer; diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js index 4bf802f87e0..7f3b7cce51b 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js @@ -4,13 +4,9 @@ import { shallow } from 'enzyme'; import { BulletChart } from '../index'; import { Tooltip } from '../../Tooltip/index'; -const customTooltipFunction = (value, title) => ( - {`${title}: ${value}%`} -); +const customTooltipFunction = (value, title) => {`${title}: ${value}%`}; -const customTooltipFunction2 = (value, title) => ( - {`${title} - ${value}%`} -); +const customTooltipFunction2 = (value, title) => {`${title} - ${value}%`}; const goodRanges = [ { value: 50, title: 'Range 1', tooltipFunction: customTooltipFunction }, @@ -78,9 +74,7 @@ const singleValue = [ ]; test('BulletChart renders properly with defaults', () => { - expect( - shallow().getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('BulletChart renders properly with all fields', () => { @@ -527,12 +521,7 @@ test('BulletChart renders custom legend properly', () => { test('BulletChartTitle renders properly', () => { expect( shallow( - + ).getElement() ).toMatchSnapshot(); }); @@ -540,11 +529,7 @@ test('BulletChartTitle renders properly', () => { test('BulletChartThreshold renders properly', () => { expect( shallow( - + ).getElement() ).toMatchSnapshot(); expect( @@ -579,13 +564,7 @@ test('BulletChartThreshold renders properly', () => { test('BulletChartValue renders properly', () => { expect( - shallow( - - ).getElement() + shallow().getElement() ).toMatchSnapshot(); expect( shallow( @@ -610,12 +589,7 @@ test('BulletChartValue renders properly', () => { ).toMatchSnapshot(); expect( shallow( - + ).getElement() ).toMatchSnapshot(); expect( @@ -645,14 +619,7 @@ test('BulletChartValue renders properly', () => { test('BulletChartRange renders properly', () => { expect( - shallow( - - ).getElement() + shallow().getElement() ).toMatchSnapshot(); expect( shallow( @@ -667,22 +634,12 @@ test('BulletChartRange renders properly', () => { ).toMatchSnapshot(); expect( shallow( - + ).getElement() ).toMatchSnapshot(); expect( shallow( - + ).getElement() ).toMatchSnapshot(); }); @@ -704,10 +661,7 @@ test('BulletChartAxis renders properly', () => { test('BulletChartAxis renders vertical properly', () => { expect( shallow( - + @@ -734,13 +688,7 @@ test('BulletChartAxis renders properly with custom text', () => { test('BulletChartAxisTic renders properly', () => { expect( - shallow( - - ).getElement() + shallow().getElement() ).toMatchSnapshot(); }); @@ -778,16 +726,8 @@ test('BulletChartLegend renders properly', () => { expect( shallow( - - + + ).getElement() ).toMatchSnapshot(); diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartAxisTic.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartAxisTic.js index 708c3fd0dd9..47cd03e55b0 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartAxisTic.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartAxisTic.js @@ -3,10 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; const BulletChartAxisTic = ({ className, vertical, value, ...props }) => { - const bulletChartAxisTicClass = classNames( - 'bullet-chart-pf-axis-tic', - className - ); + const bulletChartAxisTicClass = classNames('bullet-chart-pf-axis-tic', className); let ticStyle; if (vertical) { diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegend.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegend.js index 9a472eec827..3f14054af31 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegend.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegend.js @@ -3,10 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; const BulletChartLegend = ({ children, className, ...props }) => { - const bulletChartLegendClass = classNames( - 'bullet-chart-pf-legend', - className - ); + const bulletChartLegendClass = classNames('bullet-chart-pf-legend', className); return (
    diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegendItem.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegendItem.js index dcd61479a8a..af7f41a1cc3 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegendItem.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartLegendItem.js @@ -19,19 +19,14 @@ const BulletChartLegendItem = ({ }) => { const classes = classNames('bullet-chart-pf-legend-item', className); - const boxClasses = classNames( - 'bullet-chart-pf-legend-item-box', - boxClassName - ); + const boxClasses = classNames('bullet-chart-pf-legend-item-box', boxClassName); const TooltipFunction = () => { if (tooltipFunction) { return tooltipFunction(title, value, color); } - return ( - {`${title}: ${value}%`} - ); + return {`${title}: ${value}%`}; }; return ( diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartRange.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartRange.js index 085962fe40d..0842b5a5328 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartRange.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartRange.js @@ -3,11 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; const BulletChartRange = ({ className, value, index, vertical, ...props }) => { - const rangeClasses = classNames( - 'bullet-chart-pf-range-bar', - `range-${index}`, - className - ); + const rangeClasses = classNames('bullet-chart-pf-range-bar', `range-${index}`, className); if (value > 0 && value <= 100) { return ( diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartThreshold.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartThreshold.js index 20dfe5b2f26..d9e325ff59d 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartThreshold.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartThreshold.js @@ -4,10 +4,7 @@ import classNames from 'classnames'; const BulletChartThreshold = ({ className, threshold, vertical, ...props }) => { if (threshold > 0 && threshold <= 100) { - const thresholdClasses = classNames( - 'bullet-chart-pf-threshold-indicator', - className - ); + const thresholdClasses = classNames('bullet-chart-pf-threshold-indicator', className); return (
    { - const titleContainerClasses = classNames( - 'bullet-chart-pf-title-container', - className - ); + const titleContainerClasses = classNames('bullet-chart-pf-title-container', className); return (
    diff --git a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartValue.js b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartValue.js index 90e788bbea6..cbdbcc81393 100644 --- a/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartValue.js +++ b/packages/patternfly-react/src/components/Chart/BulletChart/BulletChartValue.js @@ -11,21 +11,10 @@ const TooltipFunction = value => { return value.tooltipFunction(value.value, value.title); } - return ( - {`${value.title}: ${ - value.value - }%`} - ); + return {`${value.title}: ${value.value}%`}; }; -const BulletChartValue = ({ - className, - value, - prevValue, - dot, - vertical, - ...props -}) => { +const BulletChartValue = ({ className, value, prevValue, dot, vertical, ...props }) => { const showValue = Math.min(Math.max(value.value + prevValue, 0), 120); const valueClasses = classNames( diff --git a/packages/patternfly-react/src/components/Chart/Chart.stories.js b/packages/patternfly-react/src/components/Chart/Chart.stories.js index ba6d94c4d97..6e1a2b730ca 100644 --- a/packages/patternfly-react/src/components/Chart/Chart.stories.js +++ b/packages/patternfly-react/src/components/Chart/Chart.stories.js @@ -1,24 +1,9 @@ import { storiesOf } from '@storybook/react'; -import { - storybookPackageName, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { name } from '../../../package.json'; -import { - areaChart, - barChart, - bulletChart, - donutChart, - lineChart, - pieChart -} from './Stories'; +import { areaChart, barChart, bulletChart, donutChart, lineChart, pieChart } from './Stories'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.DATA_VISUALIZATION - }/Charts`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.DATA_VISUALIZATION}/Charts`, module); /** * Chart stories diff --git a/packages/patternfly-react/src/components/Chart/ChartConstants.js b/packages/patternfly-react/src/components/Chart/ChartConstants.js index a0106fb4d85..5daacd7a19c 100644 --- a/packages/patternfly-react/src/components/Chart/ChartConstants.js +++ b/packages/patternfly-react/src/components/Chart/ChartConstants.js @@ -1,11 +1,5 @@ import PropTypes from 'prop-types'; -import { - compose, - setDisplayName, - mapProps, - defaultProps, - setPropTypes -} from 'recompose'; +import { compose, setDisplayName, mapProps, defaultProps, setPropTypes } from 'recompose'; import C3Chart from 'react-c3js'; import { c3ChartDefaults } from '../../common/patternfly'; diff --git a/packages/patternfly-react/src/components/Chart/DonutChart.js b/packages/patternfly-react/src/components/Chart/DonutChart.js index da388c63bc3..ac30b86e129 100644 --- a/packages/patternfly-react/src/components/Chart/DonutChart.js +++ b/packages/patternfly-react/src/components/Chart/DonutChart.js @@ -7,8 +7,7 @@ import { patternfly } from '../../common/patternfly'; import { getComposer } from './ChartConstants'; const { pfSetDonutChartTitle } = patternfly; -const colIndexOfMaxValue = columns => - columns.reduce((iMax, x, i, arr) => (x[1] > arr[iMax][1] ? i : iMax), 0); +const colIndexOfMaxValue = columns => columns.reduce((iMax, x, i, arr) => (x[1] > arr[iMax][1] ? i : iMax), 0); const setDonutTitle = obj => { let primary; @@ -55,8 +54,6 @@ const addDonutTitle = lifecycle({ const DonutChart = compose( getComposer('DONUT_CHART'), addDonutTitle -)(({ className, type, data, ...props }) => ( - -)); +)(({ className, type, data, ...props }) => ); export default DonutChart; diff --git a/packages/patternfly-react/src/components/Chart/DonutChart.test.js b/packages/patternfly-react/src/components/Chart/DonutChart.test.js index bf2fcbe517e..94866306250 100644 --- a/packages/patternfly-react/src/components/Chart/DonutChart.test.js +++ b/packages/patternfly-react/src/components/Chart/DonutChart.test.js @@ -4,9 +4,5 @@ import { shallow } from 'enzyme'; import { DonutChart } from './index'; test('DonutChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Chart/GroupedBarChart.js b/packages/patternfly-react/src/components/Chart/GroupedBarChart.js index 9addcc571a8..b17668143f3 100644 --- a/packages/patternfly-react/src/components/Chart/GroupedBarChart.js +++ b/packages/patternfly-react/src/components/Chart/GroupedBarChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const GroupedBarChart = getComposer('GROUPED_BAR_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const GroupedBarChart = getComposer('GROUPED_BAR_CHART')(({ className, type, data, ...props }) => ( + +)); export default GroupedBarChart; diff --git a/packages/patternfly-react/src/components/Chart/LineChart.js b/packages/patternfly-react/src/components/Chart/LineChart.js index 065e2c050a8..96fc91bb63a 100644 --- a/packages/patternfly-react/src/components/Chart/LineChart.js +++ b/packages/patternfly-react/src/components/Chart/LineChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const LineChart = getComposer('LINE_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const LineChart = getComposer('LINE_CHART')(({ className, type, data, ...props }) => ( + +)); export default LineChart; diff --git a/packages/patternfly-react/src/components/Chart/LineChart.test.js b/packages/patternfly-react/src/components/Chart/LineChart.test.js index 9feffd0823c..aa97fe1dd64 100644 --- a/packages/patternfly-react/src/components/Chart/LineChart.test.js +++ b/packages/patternfly-react/src/components/Chart/LineChart.test.js @@ -4,25 +4,13 @@ import { shallow } from 'enzyme'; import { LineChart, SingleLineChart, SparklineChart } from './index'; test('LineChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('SingleLineChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); test('SparklineChart renders properly', () => { - expect( - shallow( - - ).getElement() - ).toMatchSnapshot(); + expect(shallow().getElement()).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Chart/PieChart.js b/packages/patternfly-react/src/components/Chart/PieChart.js index dd51290a151..571ef36dc93 100644 --- a/packages/patternfly-react/src/components/Chart/PieChart.js +++ b/packages/patternfly-react/src/components/Chart/PieChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const PieChart = getComposer('PIE_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const PieChart = getComposer('PIE_CHART')(({ className, type, data, ...props }) => ( + +)); export default PieChart; diff --git a/packages/patternfly-react/src/components/Chart/SingleAreaChart.js b/packages/patternfly-react/src/components/Chart/SingleAreaChart.js index 294795bea28..907867f13ac 100644 --- a/packages/patternfly-react/src/components/Chart/SingleAreaChart.js +++ b/packages/patternfly-react/src/components/Chart/SingleAreaChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const SingleAreaChart = getComposer('SINGLE_AREA_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const SingleAreaChart = getComposer('SINGLE_AREA_CHART')(({ className, type, data, ...props }) => ( + +)); export default SingleAreaChart; diff --git a/packages/patternfly-react/src/components/Chart/SingleLineChart.js b/packages/patternfly-react/src/components/Chart/SingleLineChart.js index d6c2d61b6cc..1acc8c1cb1a 100644 --- a/packages/patternfly-react/src/components/Chart/SingleLineChart.js +++ b/packages/patternfly-react/src/components/Chart/SingleLineChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const SingleLineChart = getComposer('SINGLE_LINE_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const SingleLineChart = getComposer('SINGLE_LINE_CHART')(({ className, type, data, ...props }) => ( + +)); export default SingleLineChart; diff --git a/packages/patternfly-react/src/components/Chart/SparklineChart.js b/packages/patternfly-react/src/components/Chart/SparklineChart.js index ec7d6882d37..38bd33d566a 100644 --- a/packages/patternfly-react/src/components/Chart/SparklineChart.js +++ b/packages/patternfly-react/src/components/Chart/SparklineChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const SparklineChart = getComposer('SPARKLINE_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const SparklineChart = getComposer('SPARKLINE_CHART')(({ className, type, data, ...props }) => ( + +)); export default SparklineChart; diff --git a/packages/patternfly-react/src/components/Chart/StackedBarChart.js b/packages/patternfly-react/src/components/Chart/StackedBarChart.js index 9a5932b46e1..204d4199557 100644 --- a/packages/patternfly-react/src/components/Chart/StackedBarChart.js +++ b/packages/patternfly-react/src/components/Chart/StackedBarChart.js @@ -2,10 +2,8 @@ import React from 'react'; import C3Chart from 'react-c3js'; import { getComposer } from './ChartConstants'; -const StackedBarChart = getComposer('STACKED_BAR_CHART')( - ({ className, type, data, ...props }) => ( - - ) -); +const StackedBarChart = getComposer('STACKED_BAR_CHART')(({ className, type, data, ...props }) => ( + +)); export default StackedBarChart; diff --git a/packages/patternfly-react/src/components/Chart/Stories/AreaChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/AreaChartStory.js index f3114f28250..d9021f77ee5 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/AreaChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/AreaChartStory.js @@ -2,10 +2,7 @@ import React from 'react'; import { withInfo } from '@storybook/addon-info'; import { AreaChart, SingleAreaChart } from '../index'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - DOCUMENTATION_URL, - DESCRIPTION -} from 'storybook/constants/siteConstants'; +import { DOCUMENTATION_URL, DESCRIPTION } from 'storybook/constants/siteConstants'; /** * Story constants @@ -40,32 +37,21 @@ const areaChart = stories => {

    Area Chart

    - +

    Single Area Chart

    - +
    ); return inlineTemplate({ title: 'Area Charts', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }area-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}area-chart/`, description: ( - {DESCRIPTION.C3JS_TEXT}{' '} - {DESCRIPTION.C3JS_URL} + {DESCRIPTION.C3JS_TEXT} {DESCRIPTION.C3JS_URL} ), story diff --git a/packages/patternfly-react/src/components/Chart/Stories/BarChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/BarChartStory.js index 032ec39e8d3..584fc6efd98 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/BarChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/BarChartStory.js @@ -3,10 +3,7 @@ import { withInfo } from '@storybook/addon-info'; import { patternfly } from '../../../common/patternfly'; import { BarChart, GroupedBarChart, StackedBarChart } from '../index'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - DOCUMENTATION_URL, - DESCRIPTION -} from 'storybook/constants/siteConstants'; +import { DOCUMENTATION_URL, DESCRIPTION } from 'storybook/constants/siteConstants'; /** * BarChart constants @@ -25,12 +22,7 @@ const barChartConfigData = { }; const groupedcCategories = ['2013', '2014', '2015']; -const groupedColumnsData = [ - ['Q1', 400, 250, 375], - ['Q2', 355, 305, 300], - ['Q3', 315, 340, 276], - ['Q4', 180, 390, 190] -]; +const groupedColumnsData = [['Q1', 400, 250, 375], ['Q2', 355, 305, 300], ['Q3', 315, 340, 276], ['Q4', 180, 390, 190]]; const groupedColors = { pattern: [ patternfly.pfPaletteColors.red, @@ -128,13 +120,10 @@ const barChart = stories => { ); return inlineTemplate({ title: 'Bar Charts', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }bar-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}bar-chart/`, description: ( - {DESCRIPTION.C3JS_TEXT}{' '} - {DESCRIPTION.C3JS_URL} + {DESCRIPTION.C3JS_TEXT} {DESCRIPTION.C3JS_URL} ), story diff --git a/packages/patternfly-react/src/components/Chart/Stories/BulletChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/BulletChartStory.js index 60876e431ed..94960bda7c3 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/BulletChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/BulletChartStory.js @@ -1,12 +1,6 @@ import React from 'react'; import { withInfo } from '@storybook/addon-info'; -import { - withKnobs, - boolean, - number, - select, - text -} from '@storybook/addon-knobs'; +import { withKnobs, boolean, number, select, text } from '@storybook/addon-knobs'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; import { DOCUMENTATION_URL } from 'storybook/constants/siteConstants'; import { patternfly } from '../../../common/patternfly'; @@ -72,12 +66,7 @@ const bulletChart = stories => { 'Value' ); const valueTitle = text('Value Title', 'Data1', 'Legend'); - const valueColor = select( - 'Value Color', - colorOptions, - patternfly.pfPaletteColors.blue, - 'Value' - ); + const valueColor = select('Value Color', colorOptions, patternfly.pfPaletteColors.blue, 'Value'); const showValue2 = boolean('Show Value 2', true, 'Value'); const value2 = number( @@ -92,12 +81,7 @@ const bulletChart = stories => { 'Value' ); const valueTitle2 = text('Value 2 Title', 'Data2', 'Legend'); - const valueColor2 = select( - 'Value Color 2', - colorOptions, - patternfly.pfPaletteColors.green, - 'Value' - ); + const valueColor2 = select('Value Color 2', colorOptions, patternfly.pfPaletteColors.green, 'Value'); const showValue3 = boolean('Show Value 3', false, 'Value'); const value3 = number( @@ -112,12 +96,7 @@ const bulletChart = stories => { 'Value' ); const valueTitle3 = text('Value 3 Title', 'Data3', 'Legend'); - const valueColor3 = select( - 'Value Color 3', - colorOptions, - patternfly.pfPaletteColors.gold, - 'Value' - ); + const valueColor3 = select('Value Color 3', colorOptions, patternfly.pfPaletteColors.gold, 'Value'); const showValue4 = boolean('Show Value 4', false, 'Value'); const value4 = number( @@ -132,12 +111,7 @@ const bulletChart = stories => { 'Value' ); const valueTitle4 = text('Value 4 Title', 'Data4', 'Legend'); - const valueColor4 = select( - 'Value Color 4', - colorOptions, - patternfly.pfPaletteColors.red, - 'Value' - ); + const valueColor4 = select('Value Color 4', colorOptions, patternfly.pfPaletteColors.red, 'Value'); const showValue5 = boolean('Show Value 5', false, 'Value'); const value5 = number( @@ -152,20 +126,11 @@ const bulletChart = stories => { 'Value' ); const valueTitle5 = text('Value 5 Title', 'Data5', 'Legend'); - const valueColor5 = select( - 'Value Color 5', - colorOptions, - patternfly.pfPaletteColors.orange, - 'Value' - ); + const valueColor5 = select('Value Color 5', colorOptions, patternfly.pfPaletteColors.orange, 'Value'); const useDots = boolean('Use Dots', false, 'Value'); - const showWarnThreshold = boolean( - 'Show Warning Threshold', - true, - 'Thresholds' - ); + const showWarnThreshold = boolean('Show Warning Threshold', true, 'Thresholds'); const thresholdWarning = number( 'Warning Threshold', 70, @@ -178,11 +143,7 @@ const bulletChart = stories => { 'Thresholds' ); - const showErrorThreshold = boolean( - 'Show Error Threshold', - true, - 'Thresholds' - ); + const showErrorThreshold = boolean('Show Error Threshold', true, 'Thresholds'); const thresholdError = number( 'Error Threshold', 90, @@ -325,9 +286,7 @@ const bulletChart = stories => { ); return inlineTemplate({ title: 'Bullet Chart', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }bullet-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}bullet-chart/`, story }); }) diff --git a/packages/patternfly-react/src/components/Chart/Stories/DonutChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/DonutChartStory.js index f8fe423cf28..7985cdfa28f 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/DonutChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/DonutChartStory.js @@ -3,19 +3,16 @@ import { withInfo } from '@storybook/addon-info'; import { patternfly } from '../../../common/patternfly'; import { DonutChart } from '../index'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - DOCUMENTATION_URL, - DESCRIPTION -} from 'storybook/constants/siteConstants'; +import { DOCUMENTATION_URL, DESCRIPTION } from 'storybook/constants/siteConstants'; /** * DonutChart constants */ const pfGetUtilizationDonutTooltipContents = d => - `${Math.round( - d[0].ratio * 1000 - ) / 10} ${d[0].name}`; + `${Math.round(d[0].ratio * 1000) / 10} ${ + d[0].name + }`; const donutConfigData = { columns: [['MHz Used', 60], ['MHz Available', 40]], @@ -89,13 +86,10 @@ const donutChart = stories => { return inlineTemplate({ title: 'Donut Charts', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }donut-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}donut-chart/`, description: ( - {DESCRIPTION.C3JS_TEXT}{' '} - {DESCRIPTION.C3JS_URL} + {DESCRIPTION.C3JS_TEXT} {DESCRIPTION.C3JS_URL} ), story diff --git a/packages/patternfly-react/src/components/Chart/Stories/LineChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/LineChartStory.js index e0b6f9b1d6c..9421fd4cae7 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/LineChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/LineChartStory.js @@ -2,10 +2,7 @@ import React from 'react'; import { withInfo } from '@storybook/addon-info'; import { LineChart, SingleLineChart, SparklineChart } from '../index'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - DOCUMENTATION_URL, - DESCRIPTION -} from 'storybook/constants/siteConstants'; +import { DOCUMENTATION_URL, DESCRIPTION } from 'storybook/constants/siteConstants'; /** * LineChart constants @@ -49,61 +46,38 @@ const lineChart = stories => {

    Sparkline

    - +
    Less than one year remaining

    Line Chart

    - +

    Single Line Chart

    - +

    Spline Chart

    - +

    Single Spline Chart

    - +
    ); return inlineTemplate({ title: 'Line Charts', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }line-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}line-chart/`, description: ( - {DESCRIPTION.C3JS_TEXT}{' '} - {DESCRIPTION.C3JS_URL} + {DESCRIPTION.C3JS_TEXT} {DESCRIPTION.C3JS_URL} ), story diff --git a/packages/patternfly-react/src/components/Chart/Stories/PieChartStory.js b/packages/patternfly-react/src/components/Chart/Stories/PieChartStory.js index 502ea2eb57e..98c6ad8303f 100644 --- a/packages/patternfly-react/src/components/Chart/Stories/PieChartStory.js +++ b/packages/patternfly-react/src/components/Chart/Stories/PieChartStory.js @@ -3,10 +3,7 @@ import { withInfo } from '@storybook/addon-info'; import { patternfly } from '../../../common/patternfly'; import { PieChart } from '../index'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - DOCUMENTATION_URL, - DESCRIPTION -} from 'storybook/constants/siteConstants'; +import { DOCUMENTATION_URL, DESCRIPTION } from 'storybook/constants/siteConstants'; /** * PieChart constants @@ -53,9 +50,7 @@ const pieChart = stories => { return inlineTemplate({ title: 'Pie Charts', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION - }pie-chart/`, + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}pie-chart/`, description: ( {DESCRIPTION.C3JS_TEXT} diff --git a/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.js b/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.js index de114ff98b8..d58cbef3c5c 100644 --- a/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.js +++ b/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.js @@ -8,22 +8,10 @@ import { ButtonGroup } from '../Button'; /** * DropdownKebab Component for Patternfly React */ -const DropdownKebab = ({ - className, - children, - id, - pullRight, - componentClass, - toggleStyle -}) => { +const DropdownKebab = ({ className, children, id, pullRight, componentClass, toggleStyle }) => { const kebabClass = classNames('dropdown-kebab-pf', className); return ( - + diff --git a/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.stories.js b/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.stories.js index 3158a8bcdaf..04345f7003d 100644 --- a/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.stories.js +++ b/packages/patternfly-react/src/components/DropdownKebab/DropdownKebab.stories.js @@ -3,20 +3,13 @@ import { storiesOf } from '@storybook/react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Button } from '../Button'; import { MenuItem } from '../MenuItem'; import { DropdownKebab } from './index'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Dropdown Kebab`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Dropdown Kebab`, module); stories.addDecorator(withKnobs); stories.addDecorator( defaultTemplate({ @@ -29,8 +22,7 @@ stories.add( 'DropdownKebab', withInfo(`pullRight prop is used to align the dropdown to the right.`)(() => (
    - {' '} - + Action Another Action diff --git a/packages/patternfly-react/src/components/EmptyState/EmptyState.stories.js b/packages/patternfly-react/src/components/EmptyState/EmptyState.stories.js index 9df0774fcce..ba8efc3971c 100644 --- a/packages/patternfly-react/src/components/EmptyState/EmptyState.stories.js +++ b/packages/patternfly-react/src/components/EmptyState/EmptyState.stories.js @@ -3,28 +3,17 @@ import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Button } from '../Button'; import { EmptyState } from './index'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.COMMUNICATION - }/Empty State`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Empty State`, module); stories.addDecorator( defaultTemplate({ title: 'Empty State', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION - }empty-state/` + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}empty-state/` }) ); @@ -35,10 +24,9 @@ stories.add( Empty State Title - This is the Empty State component. The goal of a empty state pattern is - to provide a good first impression that helps users to achieve their - goals. It should be used when a view is empty because no objects exists - and you want to guide the user to perform specific actions. + This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that + helps users to achieve their goals. It should be used when a view is empty because no objects exists and you + want to guide the user to perform specific actions. For more information please see{' '} @@ -52,31 +40,18 @@ stories.add( - - - - diff --git a/packages/patternfly-react/src/components/EmptyState/index.js b/packages/patternfly-react/src/components/EmptyState/index.js index fd21af3bac3..a620c5330f6 100644 --- a/packages/patternfly-react/src/components/EmptyState/index.js +++ b/packages/patternfly-react/src/components/EmptyState/index.js @@ -11,11 +11,4 @@ EmptyState.Info = EmptyStateInfo; EmptyState.Help = EmptyStateHelp; EmptyState.Action = EmptyStateAction; -export { - EmptyState, - EmptyStateIcon, - EmptyStateTitle, - EmptyStateInfo, - EmptyStateHelp, - EmptyStateAction -}; +export { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateInfo, EmptyStateHelp, EmptyStateAction }; diff --git a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.js b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.js index e7e7f482d4e..99a2030a815 100644 --- a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.js +++ b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.js @@ -9,27 +9,14 @@ import { OverlayTrigger } from '../OverlayTrigger'; /** * FieldLevelHelp Component for Patternfly React */ -const FieldLevelHelp = ({ - children, - content, - close, - rootClose, - placement, - buttonClass, - ...props -}) => { +const FieldLevelHelp = ({ children, content, close, rootClose, placement, buttonClass, ...props }) => { // backwards compatibility of the existing `close` prop - use that prop if it exists const closeProp = typeof close !== 'undefined' ? close : rootClose; const overlay = {content}; const buttonClasses = classNames('popover-pf-info', buttonClass); return ( - + diff --git a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.stories.js b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.stories.js index 229ffc11321..311de8365cc 100644 --- a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.stories.js +++ b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.stories.js @@ -3,27 +3,19 @@ import { storiesOf } from '@storybook/react'; import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { FieldLevelHelp } from './index'; import { name } from '../../../package.json'; const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.FORMS_AND_CONTROLS - }/Help On Forms`, + `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Help On Forms`, module ); stories.addDecorator(withKnobs); stories.addDecorator( defaultTemplate({ title: 'FieldLevelHelp', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION - }inline-notifications/` + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}inline-notifications/` }) ); @@ -35,11 +27,7 @@ stories.add( 'content', 'Enter the hostname in a valid format
    Click here for examples of valid hostnames' ); - const placement = select( - 'Placement', - ['top', 'bottom', 'left', 'right'], - 'top' - ); + const placement = select('Placement', ['top', 'bottom', 'left', 'right'], 'top'); const fieldLabel = text('Field Label', 'Hostname'); const htmlContent = ( @@ -53,11 +41,7 @@ stories.add( return (
    {fieldLabel} - +
    ); }) diff --git a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.test.js b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.test.js index 09cb72383d6..3fa40db7580 100644 --- a/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.test.js +++ b/packages/patternfly-react/src/components/FieldLevelHelp/FieldLevelHelp.test.js @@ -4,9 +4,7 @@ import { mount } from 'enzyme'; import FieldLevelHelp from './FieldLevelHelp'; test('FieldLevelHelp renders properly', () => { - const component = mount( - Port Number - ); + const component = mount(Port Number); expect(component).toMatchSnapshot(); }); diff --git a/packages/patternfly-react/src/components/Filter/Filter.stories.js b/packages/patternfly-react/src/components/Filter/Filter.stories.js index d562b6e804d..84e7cb4af8b 100644 --- a/packages/patternfly-react/src/components/Filter/Filter.stories.js +++ b/packages/patternfly-react/src/components/Filter/Filter.stories.js @@ -2,11 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info/dist/index'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Filter, FilterTypeSelector, @@ -18,18 +14,10 @@ import { FilterItem } from '../../index'; -import { - MockFilterExample, - mockFilterExampleSource -} from './__mocks__/mockFilterExample'; +import { MockFilterExample, mockFilterExampleSource } from './__mocks__/mockFilterExample'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.FORMS_AND_CONTROLS - }/Filter`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Filter`, module); stories.addDecorator( defaultTemplate({ diff --git a/packages/patternfly-react/src/components/Filter/Filter.test.js b/packages/patternfly-react/src/components/Filter/Filter.test.js index d463034c78d..4339899d732 100644 --- a/packages/patternfly-react/src/components/Filter/Filter.test.js +++ b/packages/patternfly-react/src/components/Filter/Filter.test.js @@ -6,10 +6,7 @@ import { mockFilterExampleFields } from './__mocks__/mockFilterExample'; test('Filter input renders properly', () => { const component = mount( - + { test('Filter select renders propeurly', () => { const component = mount( - + { test('Filter categories renders properly', () => { const component = mount( - + @@ -71,10 +58,7 @@ test('Filter renders properly in a Toolbar', () => { const component = mount( - +
    - + {placeholder && ( - + {placeholder} )} diff --git a/packages/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js b/packages/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js index 0f2f804eef7..4bbcec11cb0 100644 --- a/packages/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js +++ b/packages/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js @@ -29,17 +29,9 @@ const FilterCategoryValueSelector = ({ return (
    - + {placeholder && ( - onCategoryValueSelected()} - > + onCategoryValueSelected()}> {placeholder} )} diff --git a/packages/patternfly-react/src/components/Filter/FilterItem.js b/packages/patternfly-react/src/components/Filter/FilterItem.js index a91d9ac4db2..9a87a0fdf1c 100644 --- a/packages/patternfly-react/src/components/Filter/FilterItem.js +++ b/packages/patternfly-react/src/components/Filter/FilterItem.js @@ -4,13 +4,7 @@ import PropTypes from 'prop-types'; import { noop } from '../../common/helpers'; import { DisposableLabel } from '../Label'; -const FilterItem = ({ - children, - className, - onRemove, - filterData, - ...props -}) => { +const FilterItem = ({ children, className, onRemove, filterData, ...props }) => { const classes = classNames(className); return ( diff --git a/packages/patternfly-react/src/components/Filter/FilterTypeSelector.js b/packages/patternfly-react/src/components/Filter/FilterTypeSelector.js index 6437a2fc9ee..6fff42e1be0 100644 --- a/packages/patternfly-react/src/components/Filter/FilterTypeSelector.js +++ b/packages/patternfly-react/src/components/Filter/FilterTypeSelector.js @@ -30,11 +30,7 @@ const FilterTypeSelector = ({
    {placeholder && ( - + {placeholder} )} @@ -43,11 +39,7 @@ const FilterTypeSelector = ({ selected: item === currentFilterType }; return ( - onFilterTypeSelected(item)} - > + onFilterTypeSelected(item)}> {item.title || item} ); diff --git a/packages/patternfly-react/src/components/Filter/FilterValueSelector.js b/packages/patternfly-react/src/components/Filter/FilterValueSelector.js index d25dc5beaee..0c079b72c85 100644 --- a/packages/patternfly-react/src/components/Filter/FilterValueSelector.js +++ b/packages/patternfly-react/src/components/Filter/FilterValueSelector.js @@ -29,17 +29,9 @@ const FilterValueSelector = ({ return (
    - + {placeholder && ( - + {placeholder} )} diff --git a/packages/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js b/packages/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js index 9bc20b56f68..b892218492a 100644 --- a/packages/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js +++ b/packages/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js @@ -117,8 +117,8 @@ export class MockFilterExample extends React.Component { filterText += ': '; if (value.filterCategory) { - filterText += `${value.filterCategory.title || - value.filterCategory}-${value.filterValue.title || value.filterValue}`; + filterText += `${value.filterCategory.title || value.filterCategory}-${value.filterValue.title || + value.filterValue}`; } else if (value.title) { filterText += value.title; } else { @@ -152,10 +152,7 @@ export class MockFilterExample extends React.Component { const index = activeFilters.indexOf(filter); if (index > -1) { - const updated = [ - ...activeFilters.slice(0, index), - ...activeFilters.slice(index + 1) - ]; + const updated = [...activeFilters.slice(0, index), ...activeFilters.slice(index + 1)]; this.setState({ activeFilters: updated }); } }; @@ -166,14 +163,8 @@ export class MockFilterExample extends React.Component { this.setState(prevState => ({ currentValue: '', currentFilterType: filterType, - filterCategory: - filterType.filterType === 'complex-select' - ? undefined - : prevState.filterCategory, - categoryValue: - filterType.filterType === 'complex-select' - ? '' - : prevState.categoryValue + filterCategory: filterType.filterType === 'complex-select' ? undefined : prevState.filterCategory, + categoryValue: filterType.filterType === 'complex-select' ? '' : prevState.categoryValue })); } }; @@ -246,11 +237,7 @@ export class MockFilterExample extends React.Component { Active Filters: {activeFilters.map((item, index) => ( - + {item.label} ))} diff --git a/packages/patternfly-react/src/components/Form/Form.stories.js b/packages/patternfly-react/src/components/Form/Form.stories.js index 3827e953545..b5ad125a344 100644 --- a/packages/patternfly-react/src/components/Form/Form.stories.js +++ b/packages/patternfly-react/src/components/Form/Form.stories.js @@ -6,47 +6,23 @@ import { action } from '@storybook/addon-actions'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import { withInfo } from '@storybook/addon-info'; import { inlineTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Icon } from '../Icon'; import { Col, Row, Grid } from '../Grid'; import { Button } from '../Button'; import { Modal } from '../Modal'; import { Form } from './index'; -import { - InlineFormFields, - InlineFormButtons, - getInlineFormKnobs -} from './Stories/InlineForm'; -import { - BasicFormFields, - BasicFormButtons, - BasicFormSpinner, - getBasicFormKnobs -} from './Stories/BasicForm'; -import { - SupportedControlsFormFields, - getSupportedControlsFormKnobs -} from './Stories/SupportedControlsForm'; -import { - InputGroupsFormFields, - getInputGroupsFormKnobs -} from './Stories/InputGroupsForm'; +import { InlineFormFields, InlineFormButtons, getInlineFormKnobs } from './Stories/InlineForm'; +import { BasicFormFields, BasicFormButtons, BasicFormSpinner, getBasicFormKnobs } from './Stories/BasicForm'; +import { SupportedControlsFormFields, getSupportedControlsFormKnobs } from './Stories/SupportedControlsForm'; +import { InputGroupsFormFields, getInputGroupsFormKnobs } from './Stories/InputGroupsForm'; import { InlineFormField } from './Stories/InlineFormField'; import { HorizontalFormField } from './Stories/HorizontalFormField'; import { VerticalFormField } from './Stories/VerticalFormField'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${ - STORYBOOK_CATEGORY.FORMS_AND_CONTROLS - }/Forms`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Forms`, module); stories.addDecorator(withKnobs); @@ -79,9 +55,7 @@ stories.add( if (bsSize) buttonsProps.bsSize = bsSize; if (disabled) buttonsProps.disabled = disabled; - const formFields = InlineFormFields.map(formField => - InlineFormField({ ...formField, ...formFieldsKnobs }) - ).reduce( + const formFields = InlineFormFields.map(formField => InlineFormField({ ...formField, ...formFieldsKnobs })).reduce( (result = [], element) => [...result, element, ' '], // create spacing betwwen elements [] ); @@ -101,9 +75,7 @@ stories.add( return inlineTemplate({ title: 'Inline Form', documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#forms`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }forms/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}forms/`, story }); }) @@ -120,9 +92,7 @@ stories.add( if (disabled) buttonsProps.disabled = disabled; const showLoading = boolean('Show Loading', false); - const formFields = BasicFormFields.map(formField => - HorizontalFormField({ ...formField, ...formFieldsKnobs }) - ); + const formFields = BasicFormFields.map(formField => HorizontalFormField({ ...formField, ...formFieldsKnobs })); const formButtons = BasicFormButtons.map(({ text, ...props }) => ( )).reverse(); const formSpinner = ( -
    - {[...BasicFormSpinner].reverse()} -
    +
    {[...BasicFormSpinner].reverse()}
    ); const story = ( - Basic Settings @@ -262,9 +217,7 @@ stories.add( return inlineTemplate({ title: 'Modal Form', documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#forms`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }forms/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}forms/`, story }); }) @@ -286,9 +239,7 @@ stories.add( return inlineTemplate({ title: 'Supported Controls', documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#forms`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }forms/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}forms/`, story }); }) @@ -298,9 +249,7 @@ stories.add( 'Input Groups', withInfo()(() => { const formFieldsKnobs = getInputGroupsFormKnobs(); - const formFields = InputGroupsFormFields.map(formField => - VerticalFormField({ ...formField, ...formFieldsKnobs }) - ); + const formFields = InputGroupsFormFields.map(formField => VerticalFormField({ ...formField, ...formFieldsKnobs })); const story = (
    @@ -314,9 +263,7 @@ stories.add( return inlineTemplate({ title: 'Input Groups', documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#forms`, - reactBootstrapDocumentationLink: `${ - DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT - }forms/`, + reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}forms/`, story }); }) diff --git a/packages/patternfly-react/src/components/Form/Form.test.js b/packages/patternfly-react/src/components/Form/Form.test.js index e34064cb217..4d1de6966e4 100644 --- a/packages/patternfly-react/src/components/Form/Form.test.js +++ b/packages/patternfly-react/src/components/Form/Form.test.js @@ -1,15 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; -import { - Button, - DropdownButton, - Icon, - Form, - Grid, - MenuItem, - Modal -} from '../../index'; +import { Button, DropdownButton, Icon, Form, Grid, MenuItem, Modal } from '../../index'; test('Inline Form renders properly', () => { const component = mount( @@ -338,11 +330,7 @@ test('Input Groups render properly', () => { - + Item diff --git a/packages/patternfly-react/src/components/Form/Stories/BasicForm.js b/packages/patternfly-react/src/components/Form/Stories/BasicForm.js index 988b38259a1..56e9081e40f 100644 --- a/packages/patternfly-react/src/components/Form/Stories/BasicForm.js +++ b/packages/patternfly-react/src/components/Form/Stories/BasicForm.js @@ -12,33 +12,25 @@ export const BasicFormFields = [ controlId: 'name', label: 'Name', help: 'Enter your name', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'address', label: 'Address', help: 'Enter your address', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'city', label: 'City', help: 'Enter your city', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'email', label: 'Email', help: 'Enter a valid email address', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'phone', @@ -48,9 +40,7 @@ export const BasicFormFields = [ "Please specify Country code
    Click here for a list of Country codes", close: 'true', help: 'Enter a valid phone number', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'url', @@ -88,18 +78,11 @@ export const BasicFormButtons = [ export const BasicFormSpinner = [ , ' ', - - Do not refresh this page. This request may take a minute... - + Do not refresh this page. This request may take a minute... ]; export const getBasicFormKnobs = () => ({ - validationState: select('Validation State', [ - null, - 'success', - 'warning', - 'error' - ]), + validationState: select('Validation State', [null, 'success', 'warning', 'error']), bsSize: select('Size', [null, 'small', 'large']), showHelp: boolean('Show Help', true), disabled: boolean('Disabled', false), diff --git a/packages/patternfly-react/src/components/Form/Stories/InlineFormField.js b/packages/patternfly-react/src/components/Form/Stories/InlineFormField.js index 04c89bc11fb..45ccf5a7b46 100644 --- a/packages/patternfly-react/src/components/Form/Stories/InlineFormField.js +++ b/packages/patternfly-react/src/components/Form/Stories/InlineFormField.js @@ -3,15 +3,7 @@ import React from 'react'; import { Form } from '../index'; -export const InlineFormField = ({ - controlId, - label, - formControl, - validationState, - bsSize, - showLabel, - ...props -}) => { +export const InlineFormField = ({ controlId, label, formControl, validationState, bsSize, showLabel, ...props }) => { const controlProps = { ...props }; if (bsSize) controlProps.bsSize = bsSize; @@ -21,8 +13,7 @@ export const InlineFormField = ({ return ( - {showLabel && label && {label}}{' '} - {formControl(controlProps)} + {showLabel && label && {label}} {formControl(controlProps)} ); }; diff --git a/packages/patternfly-react/src/components/Form/Stories/InputGroupsForm.js b/packages/patternfly-react/src/components/Form/Stories/InputGroupsForm.js index 64d388070d4..3ebc3e02c75 100644 --- a/packages/patternfly-react/src/components/Form/Stories/InputGroupsForm.js +++ b/packages/patternfly-react/src/components/Form/Stories/InputGroupsForm.js @@ -10,11 +10,7 @@ import { Form } from '../index'; export const InputGroupsFormFields = [ { controlId: 'control-1', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( @ @@ -23,11 +19,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-2', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( .00 @@ -36,11 +28,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-3', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( $ @@ -50,11 +38,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-4', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( @@ -65,11 +49,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-5', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( @@ -80,11 +60,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-6', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( @@ -115,11 +87,7 @@ export const InputGroupsFormFields = [ }, { controlId: 'control-8', - formControl: ({ - validationState = 'default', - disabled = false, - ...props - }) => ( + formControl: ({ validationState = 'default', disabled = false, ...props }) => ( @@ -131,12 +99,7 @@ export const InputGroupsFormFields = [ ]; export const getInputGroupsFormKnobs = () => ({ - validationState: select('Validation State', [ - null, - 'success', - 'warning', - 'error' - ]), + validationState: select('Validation State', [null, 'success', 'warning', 'error']), bsSize: select('Size', [null, 'small', 'large']), disabled: boolean('Disabled', false) }); diff --git a/packages/patternfly-react/src/components/Form/Stories/SupportedControlsForm.js b/packages/patternfly-react/src/components/Form/Stories/SupportedControlsForm.js index b88048b0465..55d1be8d5c1 100644 --- a/packages/patternfly-react/src/components/Form/Stories/SupportedControlsForm.js +++ b/packages/patternfly-react/src/components/Form/Stories/SupportedControlsForm.js @@ -10,49 +10,37 @@ export const SupportedControlsFormFields = [ controlId: 'text', label: 'Text', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'email', label: 'Email', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'password', label: 'Password', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'file', label: 'File', help: 'Help text', - formControl: ({ validationState, bsSize, ...props }) => ( - - ) + formControl: ({ validationState, bsSize, ...props }) => }, { controlId: 'checkbox', label: 'Checkbox', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - Checkbox - ) + formControl: ({ validationState, ...props }) => Checkbox }, { controlId: 'radio', label: 'Radio', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - Radio - ) + formControl: ({ validationState, ...props }) => Radio }, { controlId: 'checkboxGroup', @@ -105,29 +93,20 @@ export const SupportedControlsFormFields = [ controlId: 'textarea', label: 'Textarea', help: 'Help text', - formControl: ({ validationState, ...props }) => ( - - ) + formControl: ({ validationState, ...props }) => }, { controlId: 'static', label: 'Static', help: 'Help text', formControl: ({ validationState, ...props }) => ( - - email@example.com - + email@example.com ) } ]; export const getSupportedControlsFormKnobs = () => ({ - validationState: select('Validation State', [ - null, - 'success', - 'warning', - 'error' - ]), + validationState: select('Validation State', [null, 'success', 'warning', 'error']), bsSize: select('Size', [null, 'small', 'large']), showHelp: boolean('Show Help', true), disabled: boolean('Disabled', false) diff --git a/packages/patternfly-react/src/components/Form/index.js b/packages/patternfly-react/src/components/Form/index.js index 74d33f77a2f..1764a6ea09d 100644 --- a/packages/patternfly-react/src/components/Form/index.js +++ b/packages/patternfly-react/src/components/Form/index.js @@ -15,13 +15,4 @@ Form.HelpBlock = HelpBlock; Form.InputGroup = InputGroup; Form.Radio = Radio; -export { - Checkbox, - ControlLabel, - Form, - FormControl, - FormGroup, - HelpBlock, - InputGroup, - Radio -}; +export { Checkbox, ControlLabel, Form, FormControl, FormGroup, HelpBlock, InputGroup, Radio }; diff --git a/packages/patternfly-react/src/components/Grid/Grid.stories.js b/packages/patternfly-react/src/components/Grid/Grid.stories.js index bca6e06c59d..1c926af09d6 100644 --- a/packages/patternfly-react/src/components/Grid/Grid.stories.js +++ b/packages/patternfly-react/src/components/Grid/Grid.stories.js @@ -3,28 +3,18 @@ import { storiesOf } from '@storybook/react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Grid } from './index'; import { name } from '../../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.LAYOUTS}/Grid`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.LAYOUTS}/Grid`, module); stories.addDecorator(withKnobs); const description = (

    - This component is based on React Bootstrap Grid component. Grids are used to - structure and present data. See{' '} - - React Bootstrap Docs - {' '} - for complete Grid component documentation. + This component is based on React Bootstrap Grid component. Grids are used to structure and present data. See{' '} + React Bootstrap Docs for complete Grid component + documentation.

    ); @@ -55,34 +45,58 @@ stories.add( - <{'Col xs={12} md={8}'} /> + + < + {'Col xs={12} md={8}'} /> + - <{'Col xs={6} md={4}'} /> + + < + {'Col xs={6} md={4}'} /> + - <{'Col xs={6} md={4}'} /> + + < + {'Col xs={6} md={4}'} /> + - <{'Col xs={6} md={4}'} /> + + < + {'Col xs={6} md={4}'} /> + - <{'Col xsHidden md={4}'} /> + + < + {'Col xsHidden md={4}'} /> + - <{'Col xs={6} xsOffset={6}'} /> + + < + {'Col xs={6} xsOffset={6}'} /> + - <{'Col md={6} mdPush={6}'} /> + + < + {'Col md={6} mdPush={6}'} /> + - <{'Col md={6} mdPull={6}'} /> + + < + {'Col md={6} mdPull={6}'} /> + @@ -95,27 +109,42 @@ stories.add( - <{'Col sm={6} md={3}'} /> + + < + {'Col sm={6} md={3}'} /> +
    {dummySentences.slice(0, 10).join(' ')}     - <{'Col sm={6} md={3}'} /> + + < + {'Col sm={6} md={3}'} /> +
    {dummySentences.slice(0, 4).join(' ')}     {boolean('ShowClearfix', true) && ( - <{'Clearfix visibleSmBlock'} /> + + < + {'Clearfix visibleSmBlock'} /> + )} - <{'Col sm={6} md={3}'} /> + + < + {'Col sm={6} md={3}'} /> +
    {dummySentences.slice(0, 2).join(' ')}     - <{'Col sm={6} md={3}'} /> + + < + {'Col sm={6} md={3}'} /> +
    {dummySentences.slice(0, 6).join(' ')}     diff --git a/packages/patternfly-react/src/components/Icon/Icon.js b/packages/patternfly-react/src/components/Icon/Icon.js index 07da7717184..177ef29d834 100644 --- a/packages/patternfly-react/src/components/Icon/Icon.js +++ b/packages/patternfly-react/src/components/Icon/Icon.js @@ -4,8 +4,7 @@ import FontAwesome from 'react-fontawesome'; import PatternflyIcon from './InnerComponents/PatternflyIcon'; const Icon = ({ type, ...props }) => { - const IconComponent = - (type === 'fa' && FontAwesome) || (type === 'pf' && PatternflyIcon); + const IconComponent = (type === 'fa' && FontAwesome) || (type === 'pf' && PatternflyIcon); if (IconComponent) { return ; } diff --git a/packages/patternfly-react/src/components/Icon/Icon.stories.js b/packages/patternfly-react/src/components/Icon/Icon.stories.js index ac05b13a175..e7355ad6211 100644 --- a/packages/patternfly-react/src/components/Icon/Icon.stories.js +++ b/packages/patternfly-react/src/components/Icon/Icon.stories.js @@ -3,18 +3,11 @@ import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { - storybookPackageName, - DOCUMENTATION_URL, - STORYBOOK_CATEGORY -} from 'storybook/constants/siteConstants'; +import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; import { Icon } from './index'; import { name } from '../../../package.json'; -const IconStories = storiesOf( - `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Icon`, - module -); +const IconStories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Icon`, module); IconStories.addDecorator(withKnobs); IconStories.addDecorator( @@ -27,17 +20,7 @@ IconStories.addDecorator( IconStories.add( 'Icons', withInfo()(() => { - const pfIconNames = [ - 'ok', - 'error-circle-o', - 'warning-triangle-o', - 'close', - 'edit', - 'key', - 'info', - 'on', - 'print' - ]; + const pfIconNames = ['ok', 'error-circle-o', 'warning-triangle-o', 'close', 'edit', 'key', 'info', 'on', 'print']; const pfIconsList = pfIconNames.map((iconName, index) => ( @@ -143,10 +126,7 @@ IconStories.add(

    For more classes and effects you can also check:  - + https://fontawesome.com/how-to-use/svg-with-js

    diff --git a/packages/patternfly-react/src/components/Icon/InnerComponents/PatternflyIcon.js b/packages/patternfly-react/src/components/Icon/InnerComponents/PatternflyIcon.js index 72f9be3133d..f155a67bf52 100644 --- a/packages/patternfly-react/src/components/Icon/InnerComponents/PatternflyIcon.js +++ b/packages/patternfly-react/src/components/Icon/InnerComponents/PatternflyIcon.js @@ -3,11 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const PatternflyIcon = ({ name, className, ...props }) => ( -
    - + {childItemComponents}
    @@ -378,9 +333,7 @@ BaseVerticalNavItemHelper.defaultProps = { isDivider: false }; -const VerticalNavItemHelper = getContext(navContextTypes)( - BaseVerticalNavItemHelper -); +const VerticalNavItemHelper = getContext(navContextTypes)(BaseVerticalNavItemHelper); VerticalNavItemHelper.displayName = 'VerticalNavItemHelper'; VerticalNavItemHelper.propTypes = { diff --git a/packages/patternfly-react/src/components/VerticalNav/VerticalNavMasthead.js b/packages/patternfly-react/src/components/VerticalNav/VerticalNavMasthead.js index d971873d1cb..043a0c7018d 100644 --- a/packages/patternfly-react/src/components/VerticalNav/VerticalNavMasthead.js +++ b/packages/patternfly-react/src/components/VerticalNav/VerticalNavMasthead.js @@ -12,20 +12,11 @@ import { noop } from '../../common/helpers'; const BaseVerticalNavMasthead = props => { const { children, href, iconImg, titleImg, title } = props; - const childrenArray = - children && - React.Children.count(children) > 0 && - React.Children.toArray(children); + const childrenArray = children && React.Children.count(children) > 0 && React.Children.toArray(children); const brandChildren = - childrenArray && - childrenArray.filter( - child => child.type.displayName === VerticalNavBrand.displayName - ); + childrenArray && childrenArray.filter(child => child.type.displayName === VerticalNavBrand.displayName); const otherChildren = - childrenArray && - childrenArray.filter( - child => child.type.displayName !== VerticalNavBrand.displayName - ); + childrenArray && childrenArray.filter(child => child.type.displayName !== VerticalNavBrand.displayName); return ( @@ -39,12 +30,7 @@ const BaseVerticalNavMasthead = props => { {brandChildren && brandChildren.length > 0 ? ( brandChildren ) : ( - + )} {otherChildren} @@ -76,9 +62,7 @@ BaseVerticalNavMasthead.defaultProps = { children: null }; -const VerticalNavMasthead = getContext(navContextTypes)( - BaseVerticalNavMasthead -); +const VerticalNavMasthead = getContext(navContextTypes)(BaseVerticalNavMasthead); VerticalNavMasthead.propTypes = { ...BaseVerticalNavMasthead.propTypes diff --git a/packages/patternfly-react/src/components/VerticalNav/VerticalNavSecondaryItem.js b/packages/patternfly-react/src/components/VerticalNav/VerticalNavSecondaryItem.js index af238188e04..18f3a0a3488 100644 --- a/packages/patternfly-react/src/components/VerticalNav/VerticalNavSecondaryItem.js +++ b/packages/patternfly-react/src/components/VerticalNav/VerticalNavSecondaryItem.js @@ -1,10 +1,6 @@ import React from 'react'; import { getContext } from 'recompose'; -import { - wrongDepth, - correctDepth, - navContextTypes -} from './VerticalNavConstants'; +import { wrongDepth, correctDepth, navContextTypes } from './VerticalNavConstants'; import VerticalNavItemHelper from './VerticalNavItemHelper'; /** @@ -22,9 +18,7 @@ BaseVerticalNavSecondaryItem.propTypes = { ...VerticalNavItemHelper.propTypes }; -const VerticalNavSecondaryItem = getContext(navContextTypes)( - BaseVerticalNavSecondaryItem -); +const VerticalNavSecondaryItem = getContext(navContextTypes)(BaseVerticalNavSecondaryItem); VerticalNavSecondaryItem.propTypes = { ...BaseVerticalNavSecondaryItem.propTypes diff --git a/packages/patternfly-react/src/components/VerticalNav/VerticalNavTertiaryItem.js b/packages/patternfly-react/src/components/VerticalNav/VerticalNavTertiaryItem.js index b269e1f1981..273d052612e 100644 --- a/packages/patternfly-react/src/components/VerticalNav/VerticalNavTertiaryItem.js +++ b/packages/patternfly-react/src/components/VerticalNav/VerticalNavTertiaryItem.js @@ -1,10 +1,6 @@ import React from 'react'; import { getContext } from 'recompose'; -import { - wrongDepth, - correctDepth, - navContextTypes -} from './VerticalNavConstants'; +import { wrongDepth, correctDepth, navContextTypes } from './VerticalNavConstants'; import VerticalNavItemHelper from './VerticalNavItemHelper'; /** @@ -21,9 +17,7 @@ BaseVerticalNavTertiaryItem.propTypes = { ...VerticalNavItemHelper.propTypes }; -const VerticalNavTertiaryItem = getContext(navContextTypes)( - BaseVerticalNavTertiaryItem -); +const VerticalNavTertiaryItem = getContext(navContextTypes)(BaseVerticalNavTertiaryItem); VerticalNavTertiaryItem.propTypes = { ...BaseVerticalNavTertiaryItem.propTypes diff --git a/packages/patternfly-react/src/components/VerticalNav/__mocks__/basicExample.js b/packages/patternfly-react/src/components/VerticalNav/__mocks__/basicExample.js index e319b8695da..5a7c682cc52 100644 --- a/packages/patternfly-react/src/components/VerticalNav/__mocks__/basicExample.js +++ b/packages/patternfly-react/src/components/VerticalNav/__mocks__/basicExample.js @@ -14,16 +14,10 @@ export const basicExample = (props, firstItemClass) => ( - alert('Item 2-A!')} - > + alert('Item 2-A!')}> - + diff --git a/packages/patternfly-react/src/components/Wizard/Patterns/StatefulWizardPattern.js b/packages/patternfly-react/src/components/Wizard/Patterns/StatefulWizardPattern.js index c0614b76432..8814a8106cb 100644 --- a/packages/patternfly-react/src/components/Wizard/Patterns/StatefulWizardPattern.js +++ b/packages/patternfly-react/src/components/Wizard/Patterns/StatefulWizardPattern.js @@ -52,10 +52,7 @@ class StatefulWizardPattern extends React.Component { } StatefulWizardPattern.propTypes = { - ...excludeKeys(WizardPattern.propTypes, [ - 'activeStepIndex', - 'nextStepDisabled' - ]), + ...excludeKeys(WizardPattern.propTypes, ['activeStepIndex', 'nextStepDisabled']), steps: PropTypes.arrayOf( PropTypes.shape({ ...wizardStepShape, @@ -68,10 +65,7 @@ StatefulWizardPattern.propTypes = { }; StatefulWizardPattern.defaultProps = { - ...excludeKeys(WizardPattern.defaultProps, [ - 'activeStepIndex', - 'nextStepDisabled' - ]), + ...excludeKeys(WizardPattern.defaultProps, ['activeStepIndex', 'nextStepDisabled']), shouldDisableNextStep: noop, shouldPreventStepChange: noop }; diff --git a/packages/patternfly-react/src/components/Wizard/Patterns/WizardPattern.js b/packages/patternfly-react/src/components/Wizard/Patterns/WizardPattern.js index b1300eb2d59..255888ec064 100644 --- a/packages/patternfly-react/src/components/Wizard/Patterns/WizardPattern.js +++ b/packages/patternfly-react/src/components/Wizard/Patterns/WizardPattern.js @@ -48,8 +48,7 @@ const WizardPattern = ({ const getStep = (index = activeStepIndex) => steps[index]; - const getPrevStep = (relativeToIndex = activeStepIndex) => - relativeToIndex > 0 && steps[relativeToIndex - 1]; + const getPrevStep = (relativeToIndex = activeStepIndex) => relativeToIndex > 0 && steps[relativeToIndex - 1]; const getNextStep = (relativeToIndex = activeStepIndex) => relativeToIndex < steps.length - 1 && steps[relativeToIndex + 1]; @@ -61,8 +60,7 @@ const WizardPattern = ({ if (newStepIndex === activeStepIndex + 1) { const stepOnNextResult = activeStep.onNext && activeStep.onNext(); const propOnNextResult = onNext(newStepIndex); - const stepFailed = - stepOnNextResult === false || propOnNextResult === false; + const stepFailed = stepOnNextResult === false || propOnNextResult === false; if (stepFailed) return; } if (newStepIndex === activeStepIndex - 1) { @@ -77,28 +75,18 @@ const WizardPattern = ({ const stepBeforeTarget = getPrevStep(newStepIndex); const preventExitActive = activeStep.preventExit; - const preventEnterTarget = - targetStep.preventEnter || - (stepBeforeTarget && stepBeforeTarget.isInvalid); + const preventEnterTarget = targetStep.preventEnter || (stepBeforeTarget && stepBeforeTarget.isInvalid); const nextStepClicked = newStepIndex === activeStepIndex + 1; - return ( - preventExitActive || - preventEnterTarget || - (nextStepClicked && nextStepDisabled) - ); + return preventExitActive || preventEnterTarget || (nextStepClicked && nextStepDisabled); }; const activeStepStr = (activeStepIndex + 1).toString(); - const prevStepUnreachable = - onFirstStep || activeStep.preventExit || getPrevStep().preventEnter; + const prevStepUnreachable = onFirstStep || activeStep.preventExit || getPrevStep().preventEnter; // nextStepUnreachable is still true onFinalStep, because the Next button turns into a Close button const nextStepUnreachable = - nextStepDisabled || - activeStep.isInvalid || - activeStep.preventExit || - getNextStep().preventEnter; + nextStepDisabled || activeStep.isInvalid || activeStep.preventExit || getNextStep().preventEnter; return ( @@ -121,11 +109,7 @@ const WizardPattern = ({ - diff --git a/packages/patternfly-react/src/components/Wizard/Patterns/WizardPatternBody.js b/packages/patternfly-react/src/components/Wizard/Patterns/WizardPatternBody.js index 8cad6234b61..f3bd48bdd29 100644 --- a/packages/patternfly-react/src/components/Wizard/Patterns/WizardPatternBody.js +++ b/packages/patternfly-react/src/components/Wizard/Patterns/WizardPatternBody.js @@ -48,25 +48,18 @@ const WizardPatternBody = ({ if (steps && steps.length) { const step = steps[activeStepIndex]; - const renderedStep = - step && step.render && step.render(activeStepIndex, step.title); + const renderedStep = step && step.render && step.render(activeStepIndex, step.title); return ( ( - goToStep(index)} - /> + goToStep(index)} /> ))} /> - + {renderedStep} diff --git a/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExample.js b/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExample.js index b978881012c..59dcf2e6b2a 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExample.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExample.js @@ -33,18 +33,16 @@ export class LoadingWizardExample extends React.Component { - diff --git a/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExampleStory.js b/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExampleStory.js index 906af83a053..bb2740c7190 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExampleStory.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/LoadingWizardExampleStory.js @@ -4,10 +4,7 @@ import { inlineTemplate } from 'storybook/decorators/storyTemplates'; import { DOCUMENTATION_URL } from 'storybook/constants/siteConstants'; import { Row, Col } from '../../../index'; -import { - LoadingWizardExample, - loadingWizardExampleSource -} from './LoadingWizardExample'; +import { LoadingWizardExample, loadingWizardExampleSource } from './LoadingWizardExample'; import { mockWizardItems } from './mockWizardItems'; @@ -37,11 +34,8 @@ const loadingWizardExampleWithInfo = stories => { ); return inlineTemplate({ title: 'Loading Wizard', - description: - 'The loading wizard shows loading wizard contents within a wizard.', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION - }wizard/#design`, + description: 'The loading wizard shows loading wizard contents within a wizard.', + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}wizard/#design`, story }); }) diff --git a/packages/patternfly-react/src/components/Wizard/Stories/WizardExample.js b/packages/patternfly-react/src/components/Wizard/Stories/WizardExample.js index 7856c122928..b2005704448 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/WizardExample.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/WizardExample.js @@ -6,11 +6,7 @@ import { Wizard } from '../index'; import { mockWizardItems } from './mockWizardItems'; -import { - renderWizardSteps, - renderSidebarItems, - renderWizardContents -} from './mockWizardRenderers'; +import { renderWizardSteps, renderSidebarItems, renderWizardContents } from './mockWizardRenderers'; export class WizardExample extends MockWizardBase { open = () => { @@ -32,12 +28,7 @@ export class WizardExample extends MockWizardBase { - - {renderWizardContents( - mockWizardItems, - activeStepIndex, - activeSubStepIndex - )} - + {renderWizardContents(mockWizardItems, activeStepIndex, activeSubStepIndex)} - {(activeStepIndex === 0 || activeStepIndex === 1) && ( )} {activeStepIndex === 2 && activeSubStepIndex === 0 && ( )} {activeStepIndex === 2 && activeSubStepIndex === 1 && ( )} diff --git a/packages/patternfly-react/src/components/Wizard/Stories/WizardExampleStory.js b/packages/patternfly-react/src/components/Wizard/Stories/WizardExampleStory.js index 764a4a50430..b83a30de43f 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/WizardExampleStory.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/WizardExampleStory.js @@ -34,11 +34,8 @@ const wizardExampleWithInfo = stories => { ); return inlineTemplate({ title: 'Wizard', - description: - 'The wizard example contains all base wizard components within a modal wizard.', - documentationLink: `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION - }wizard/#overview`, + description: 'The wizard example contains all base wizard components within a modal wizard.', + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}wizard/#overview`, story }); }) diff --git a/packages/patternfly-react/src/components/Wizard/Stories/WizardPatternExampleStory.js b/packages/patternfly-react/src/components/Wizard/Stories/WizardPatternExampleStory.js index 8bd95f8cec1..30967cc68c3 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/WizardPatternExampleStory.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/WizardPatternExampleStory.js @@ -5,10 +5,7 @@ import { inlineTemplate } from 'storybook/decorators/storyTemplates'; import { DOCUMENTATION_URL } from 'storybook/constants/siteConstants'; import { Row, Col } from '../../../index'; -import { - WizardPatternExample, - wizardPatternExampleSource -} from './WizardPatternExample'; +import { WizardPatternExample, wizardPatternExampleSource } from './WizardPatternExample'; /** * Wizard Pattern stories @@ -20,19 +17,16 @@ const description = ( StatefulWizardPattern pattern components.

    - The WizardPattern is a stateless wizard pattern which provides - loading contents and some common step handling logic for the provided steps. + The WizardPattern is a stateless wizard pattern which provides loading contents and some common step + handling logic for the provided steps.

    - The StatefulWizardPattern is a stateful wizard pattern which - provides loading contents, step handling logic, and will automatically - manage the activeStepIndex for the provided steps. This can be - overriden by passing activeStepIndex as a prop. + The StatefulWizardPattern is a stateful wizard pattern which provides loading contents, step handling + logic, and will automatically manage the activeStepIndex for the provided steps. This can be overriden by + passing activeStepIndex as a prop.
    ); -const documentationLink = `${ - DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION -}wizard/#overview`; +const documentationLink = `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}wizard/#overview`; const wizardPatternExampleAddWithInfo = stories => { stories.addDecorator(withKnobs); diff --git a/packages/patternfly-react/src/components/Wizard/Stories/index.js b/packages/patternfly-react/src/components/Wizard/Stories/index.js index 46d7dec5c05..7d322ee2f67 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/index.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/index.js @@ -1,9 +1,5 @@ -export { - default as loadingWizardExampleWithInfo -} from './LoadingWizardExampleStory'; +export { default as loadingWizardExampleWithInfo } from './LoadingWizardExampleStory'; export { default as wizardExampleWithInfo } from './WizardExampleStory'; -export { - default as wizardPatternExampleAddWithInfo -} from './WizardPatternExampleStory'; +export { default as wizardPatternExampleAddWithInfo } from './WizardPatternExampleStory'; diff --git a/packages/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js b/packages/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js index 4be9015e954..ba024559f88 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js @@ -20,8 +20,7 @@ class MockWizardBase extends React.Component { } else if (activeStepIndex > 0) { this.setState(prevState => ({ activeStepIndex: prevState.activeStepIndex - 1, - activeSubStepIndex: - steps[prevState.activeStepIndex - 1].subSteps.length - 1 + activeSubStepIndex: steps[prevState.activeStepIndex - 1].subSteps.length - 1 })); } }; diff --git a/packages/patternfly-react/src/components/Wizard/Stories/mockWizardDeployContents.js b/packages/patternfly-react/src/components/Wizard/Stories/mockWizardDeployContents.js index 3f5655cfce4..2bc80d46a57 100644 --- a/packages/patternfly-react/src/components/Wizard/Stories/mockWizardDeployContents.js +++ b/packages/patternfly-react/src/components/Wizard/Stories/mockWizardDeployContents.js @@ -23,8 +23,7 @@ class MockWizardDeployContents extends React.Component {

    Deployment in progress

    - Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi - vivamus, lorem sociosqu eget nunc amet.{' '} + Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet.{' '}

    ); @@ -34,12 +33,9 @@ class MockWizardDeployContents extends React.Component {
    -

    - Deployment was successful -

    +

    Deployment was successful

    - Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, - lorem sociosqu eget nunc amet.{' '} + Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet.{' '}

    {title} diff --git a/packages/patternfly-react/src/components/Wizard/WizardReviewContent.js b/packages/patternfly-react/src/components/Wizard/WizardReviewContent.js index b9a87848d2f..56d20fcaa23 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardReviewContent.js +++ b/packages/patternfly-react/src/components/Wizard/WizardReviewContent.js @@ -6,11 +6,7 @@ import classNames from 'classnames'; * WizardReviewContent component for Patternfly React */ const WizardReviewContent = ({ children, className, collapsed, ...props }) => { - const classes = classNames( - 'wizard-pf-review-content', - { collapse: collapsed }, - className - ); + const classes = classNames('wizard-pf-review-content', { collapse: collapsed }, className); return (
    {children} diff --git a/packages/patternfly-react/src/components/Wizard/WizardReviewStep.js b/packages/patternfly-react/src/components/Wizard/WizardReviewStep.js index 25e461be0b1..1ef16977f61 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardReviewStep.js +++ b/packages/patternfly-react/src/components/Wizard/WizardReviewStep.js @@ -6,13 +6,7 @@ import { noop } from '../../common/helpers'; /** * WizardReviewStep component for Patternfly React */ -const WizardReviewStep = ({ - children, - onClick, - title, - collapsed, - ...props -}) => ( +const WizardReviewStep = ({ children, onClick, title, collapsed, ...props }) => ( {title} diff --git a/packages/patternfly-react/src/components/Wizard/WizardReviewSubStep.js b/packages/patternfly-react/src/components/Wizard/WizardReviewSubStep.js index 1a86e6a8c59..616f9b0df35 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardReviewSubStep.js +++ b/packages/patternfly-react/src/components/Wizard/WizardReviewSubStep.js @@ -6,14 +6,7 @@ import { noop } from '../../common/helpers'; /** * WizardReviewSubStep component for Patternfly React */ -const WizardReviewSubStep = ({ - children, - onClick, - label, - title, - collapsed, - ...props -}) => ( +const WizardReviewSubStep = ({ children, onClick, label, title, collapsed, ...props }) => ( {label} diff --git a/packages/patternfly-react/src/components/Wizard/WizardReviewSubSteps.js b/packages/patternfly-react/src/components/Wizard/WizardReviewSubSteps.js index ad6ce6abace..543c0ad95ff 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardReviewSubSteps.js +++ b/packages/patternfly-react/src/components/Wizard/WizardReviewSubSteps.js @@ -7,11 +7,7 @@ import { ListGroup } from '../ListGroup'; * WizardReviewSubSteps component for Patternfly React */ const WizardReviewSubSteps = ({ children, className, collapsed, ...props }) => { - const classes = classNames( - 'wizard-pf-review-substeps', - { collapse: collapsed }, - className - ); + const classes = classNames('wizard-pf-review-substeps', { collapse: collapsed }, className); return (
    {children} diff --git a/packages/patternfly-react/src/components/Wizard/WizardSidebarGroup.js b/packages/patternfly-react/src/components/Wizard/WizardSidebarGroup.js index 2ebf0a1250d..a07483d17c1 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardSidebarGroup.js +++ b/packages/patternfly-react/src/components/Wizard/WizardSidebarGroup.js @@ -6,17 +6,8 @@ import { ListGroup } from '../ListGroup'; /** * WizardSidebarGroup component for Patternfly React */ -const WizardSidebarGroup = ({ - children, - className, - step, - activeStep, - ...props -}) => { - const classes = classNames( - { hidden: `${step}` !== `${activeStep}` }, - className - ); +const WizardSidebarGroup = ({ children, className, step, activeStep, ...props }) => { + const classes = classNames({ hidden: `${step}` !== `${activeStep}` }, className); return ( {children} diff --git a/packages/patternfly-react/src/components/Wizard/WizardSidebarGroupItem.js b/packages/patternfly-react/src/components/Wizard/WizardSidebarGroupItem.js index 8c2ac867cb6..ca073752e7a 100644 --- a/packages/patternfly-react/src/components/Wizard/WizardSidebarGroupItem.js +++ b/packages/patternfly-react/src/components/Wizard/WizardSidebarGroupItem.js @@ -18,10 +18,7 @@ const WizardSidebarGroupItem = ({ onClick, ...props }) => { - const classes = classNames( - { active: `${subStep}` === `${activeSubStep}` }, - className - ); + const classes = classNames({ active: `${subStep}` === `${activeSubStep}` }, className); return ( { - const classes = classNames( - 'wizard-pf-step', - { active: `${step}` === `${activeStep}` }, - className - ); +const WizardStep = ({ children, className, stepIndex, step, label, title, activeStep, onClick, ...props }) => { + const classes = classNames('wizard-pf-step', { active: `${step}` === `${activeStep}` }, className); return (
  • { +const WizardSubStep = ({ className, subStep, title, activeSubStep, ...props }) => { const classes = classNames( 'wizard-pf-step-title-substep', { active: `${subStep}` === `${activeSubStep}` }, diff --git a/packages/react-codemods/transforms/pf3-pf4.button.test.js b/packages/react-codemods/transforms/pf3-pf4.button.test.js index eb8a093c658..fb48dc3ef48 100644 --- a/packages/react-codemods/transforms/pf3-pf4.button.test.js +++ b/packages/react-codemods/transforms/pf3-pf4.button.test.js @@ -3,8 +3,7 @@ import { defineInlineTest } from 'jscodeshift/dist/testUtils'; import transform from './pf3-pf4'; const prettierConfig = prettier.resolveConfig.sync(process.cwd()); -const pretty = src => - prettier.format(src, { parser: 'babylon', ...prettierConfig }); +const pretty = src => prettier.format(src, { parser: 'babylon', ...prettierConfig }); global.console.log = jest.fn(); diff --git a/packages/react-codemods/transforms/pf3-pf4.js b/packages/react-codemods/transforms/pf3-pf4.js index 3b976428ef5..ce02db52dce 100644 --- a/packages/react-codemods/transforms/pf3-pf4.js +++ b/packages/react-codemods/transforms/pf3-pf4.js @@ -40,11 +40,7 @@ module.exports = (file, api, options) => { function addComponentToReactCoreImport(importName, localName) { const reactCoreImport = getReactCoreImport(); if (reactCoreImport.length > 0) { - reactCoreImport - .get() - .node.specifiers.push( - j.importSpecifier(j.identifier(importName), j.identifier(localName)) - ); + reactCoreImport.get().node.specifiers.push(j.importSpecifier(j.identifier(importName), j.identifier(localName))); return; } @@ -103,13 +99,7 @@ module.exports = (file, api, options) => { const propName = attrPath.node.name.name; if (unsupportedProps.includes(propName)) { const { start } = attrPath.node.name.loc; - console.log( - colors.yellow( - `UnsupportedProp: ${propName} (./${file.path}:${start.line}:${ - start.column - })` - ) - ); + console.log(colors.yellow(`UnsupportedProp: ${propName} (./${file.path}:${start.line}:${start.column})`)); hasSupportedPropReferences = true; } }); @@ -128,10 +118,7 @@ module.exports = (file, api, options) => { if (propConfig.defaultValue && propInstances.length === 0) { jsxElementPath.node.openingElement.attributes.push( - j.jsxAttribute( - j.jsxIdentifier(propConfig.name), - j.literal(propConfig.defaultValue) - ) + j.jsxAttribute(j.jsxIdentifier(propConfig.name), j.literal(propConfig.defaultValue)) ); return; } @@ -183,12 +170,7 @@ module.exports = (file, api, options) => { const allElements = root.findJSXElements(localName); - if ( - verifyNoUnsupportedPropReferences( - allElements, - transformConfig.unsupportedProps - ) - ) { + if (verifyNoUnsupportedPropReferences(allElements, transformConfig.unsupportedProps)) { return; } @@ -196,11 +178,7 @@ module.exports = (file, api, options) => { allElements.forEach(elementPath => { Object.keys(transformConfig.props).forEach(prop => { - transformProp( - prop, - elementPath, - getConfigForProp(transformConfig, prop) - ); + transformProp(prop, elementPath, getConfigForProp(transformConfig, prop)); }); }); addComponentToReactCoreImport(importedName, localName); diff --git a/packages/react-codemods/transforms/pf3-pf4.test.js b/packages/react-codemods/transforms/pf3-pf4.test.js index 56b944331c0..bf792d9247f 100644 --- a/packages/react-codemods/transforms/pf3-pf4.test.js +++ b/packages/react-codemods/transforms/pf3-pf4.test.js @@ -3,8 +3,7 @@ import { defineInlineTest, runInlineTest } from 'jscodeshift/dist/testUtils'; import transform from './pf3-pf4'; const prettierConfig = prettier.resolveConfig.sync(process.cwd()); -const pretty = src => - prettier.format(src, { parser: 'babylon', ...prettierConfig }); +const pretty = src => prettier.format(src, { parser: 'babylon', ...prettierConfig }); global.console.log = jest.fn(); diff --git a/packages/react-console/src/SerialConsole/SerialConsole.js b/packages/react-console/src/SerialConsole/SerialConsole.js index 9fbb7bdaa53..29f7a373452 100644 --- a/packages/react-console/src/SerialConsole/SerialConsole.js +++ b/packages/react-console/src/SerialConsole/SerialConsole.js @@ -90,16 +90,10 @@ class SerialConsole extends React.Component { case DISCONNECTED: terminal = ( - - {this.props.textDisconnectedTitle} - + {this.props.textDisconnectedTitle} {this.props.textDisconnected} - diff --git a/packages/react-console/src/SerialConsole/SerialConsole.stories.js b/packages/react-console/src/SerialConsole/SerialConsole.stories.js index baeb2abd662..3bda6d9e1d2 100644 --- a/packages/react-console/src/SerialConsole/SerialConsole.stories.js +++ b/packages/react-console/src/SerialConsole/SerialConsole.stories.js @@ -11,10 +11,7 @@ import { CONNECTED, DISCONNECTED, LOADING } from './constants'; import { name } from '../../package.json'; -const stories = storiesOf( - `${storybookPackageName(name)}/Serial Console`, - module -); +const stories = storiesOf(`${storybookPackageName(name)}/Serial Console`, module); stories.addDecorator( defaultTemplate({ title: 'SerialConsole', @@ -38,9 +35,7 @@ class SerialConsoleConnector extends React.Component { onBackendDisconnected = () => { log('Backend has disconnected, pass the info to the UI component'); if (this.childSerialconsole) { - this.childSerialconsole.onConnectionClosed( - 'Reason for disconnect provided by backend.' - ); + this.childSerialconsole.onConnectionClosed('Reason for disconnect provided by backend.'); } this.setState({ @@ -56,11 +51,7 @@ class SerialConsoleConnector extends React.Component { }; onData = data => { - log( - 'UI terminal component produced data, i.e. a key was pressed, pass it to backend. [', - data, - ']' - ); + log('UI terminal component produced data, i.e. a key was pressed, pass it to backend. [', data, ']'); // Normally, the "data" shall be passed to the backend which might send them back via onData() call // Since there is no backend, let;s pass them to UI component immediately. @@ -84,13 +75,7 @@ class SerialConsoleConnector extends React.Component { }; onResize = (rows, cols) => { - log( - 'UI has been resized, pass this info to backend. [', - rows, - ', ', - cols, - ']' - ); + log('UI has been resized, pass this info to backend. [', rows, ', ', cols, ']'); }; setConnected = () => { @@ -102,36 +87,16 @@ class SerialConsoleConnector extends React.Component { tellFairyTale = () => { let time = 1000; - timeoutIds.push( - setTimeout( - () => this.onDataFromBackend(' This is a mock terminal. '), - time - ) - ); + timeoutIds.push(setTimeout(() => this.onDataFromBackend(' This is a mock terminal. '), time)); time += 1000; - timeoutIds.push( - setTimeout( - () => this.onDataFromBackend(' Something is happening! '), - time - ) - ); + timeoutIds.push(setTimeout(() => this.onDataFromBackend(' Something is happening! '), time)); time += 1000; - timeoutIds.push( - setTimeout( - () => this.onDataFromBackend(' Something is happening! '), - time - ) - ); + timeoutIds.push(setTimeout(() => this.onDataFromBackend(' Something is happening! '), time)); time += 1000; - timeoutIds.push( - setTimeout( - () => this.onDataFromBackend(' Backend will be disconnected shortly. '), - time - ) - ); + timeoutIds.push(setTimeout(() => this.onDataFromBackend(' Backend will be disconnected shortly. '), time)); time += 5000; timeoutIds.push(setTimeout(this.onBackendDisconnected, time)); diff --git a/packages/react-console/src/SerialConsole/SerialConsole.test.js b/packages/react-console/src/SerialConsole/SerialConsole.test.js index fe858c556c4..9c276d5feb5 100644 --- a/packages/react-console/src/SerialConsole/SerialConsole.test.js +++ b/packages/react-console/src/SerialConsole/SerialConsole.test.js @@ -6,12 +6,7 @@ import { CONNECTED, DISCONNECTED, LOADING } from './constants'; test('SerialConsole in the LOADING state', () => { const view = shallow( - + ); expect(view).toMatchSnapshot(); }); @@ -56,24 +51,12 @@ test('Render SerialConsole in the CONNECTED state', () => { test('Pass class to SerialConsole', () => { const view = shallow( - + ); expect(view).toMatchSnapshot(); }); test('Enable autoFit for SerialConsole', () => { - const view = shallow( - - ); + const view = shallow(); expect(view).toMatchSnapshot(); }); diff --git a/packages/react-console/src/SerialConsole/SerialConsoleActions.js b/packages/react-console/src/SerialConsole/SerialConsoleActions.js index 5d478760265..51573c9fa80 100644 --- a/packages/react-console/src/SerialConsole/SerialConsoleActions.js +++ b/packages/react-console/src/SerialConsole/SerialConsoleActions.js @@ -15,24 +15,15 @@ const SerialConsoleActions = ({
    -
    diff --git a/packages/react-console/src/SerialConsole/SerialConsoleActions.test.js b/packages/react-console/src/SerialConsole/SerialConsoleActions.test.js index 341bdbbc2f2..638526461c6 100644 --- a/packages/react-console/src/SerialConsole/SerialConsoleActions.test.js +++ b/packages/react-console/src/SerialConsole/SerialConsoleActions.test.js @@ -4,20 +4,13 @@ import { shallow } from 'enzyme'; import SerialConsoleActions from './SerialConsoleActions'; test('placeholder render test', () => { - const view = shallow( - - ); + const view = shallow(); expect(view).toMatchSnapshot(); }); test('Render SerialConsoleActions with the Disconnect button enabled', () => { const view = shallow( - + ); expect(view).toMatchSnapshot(); }); diff --git a/packages/react-console/src/SerialConsole/XTerm.js b/packages/react-console/src/SerialConsole/XTerm.js index 35eb105f85a..8d4744690af 100644 --- a/packages/react-console/src/SerialConsole/XTerm.js +++ b/packages/react-console/src/SerialConsole/XTerm.js @@ -41,10 +41,7 @@ class XTerm extends React.Component { componentDidMount() { this.state.terminal.open(this.childTerminal); - window.addEventListener( - 'resize', - debounce(this.onWindowResize.bind(this), 100) - ); + window.addEventListener('resize', debounce(this.onWindowResize.bind(this), 100)); this.onWindowResize(); } diff --git a/packages/react-console/src/SerialConsole/XTerm.test.js b/packages/react-console/src/SerialConsole/XTerm.test.js index 3a7d2c554b2..908115022a1 100644 --- a/packages/react-console/src/SerialConsole/XTerm.test.js +++ b/packages/react-console/src/SerialConsole/XTerm.test.js @@ -4,14 +4,6 @@ import { render } from 'enzyme'; import XTerm from './XTerm'; test('Render empty XTerm component', () => { - const view = render( - - ); + const view = render(); expect(view).toMatchSnapshot(); }); diff --git a/packages/react-console/src/VncConsole/VncActions.js b/packages/react-console/src/VncConsole/VncActions.js index 9e6d2367277..cda18e15fa8 100644 --- a/packages/react-console/src/VncConsole/VncActions.js +++ b/packages/react-console/src/VncConsole/VncActions.js @@ -3,12 +3,7 @@ import PropTypes from 'prop-types'; import { DropdownButton, MenuItem, noop } from 'patternfly-react'; const VncActions = ({ textSendShortcut, textCtrlAltDel, onCtrlAltDel }) => ( - + {textCtrlAltDel} diff --git a/packages/react-console/src/VncConsole/VncActions.test.js b/packages/react-console/src/VncConsole/VncActions.test.js index 008fe7b1712..651514fb592 100644 --- a/packages/react-console/src/VncConsole/VncActions.test.js +++ b/packages/react-console/src/VncConsole/VncActions.test.js @@ -10,22 +10,14 @@ test('placeholder render test', () => { test('VncActions renders correctly component hierarchy', () => { const view = shallow( - + ); expect(view).toMatchSnapshot(); }); test('VncActions renders correctly html', () => { const view = shallow( - + ); expect(view.html()).toMatchSnapshot(); }); diff --git a/packages/react-console/src/VncConsole/VncConsole.js b/packages/react-console/src/VncConsole/VncConsole.js index 99c5ed55d9f..1c3625149e1 100644 --- a/packages/react-console/src/VncConsole/VncConsole.js +++ b/packages/react-console/src/VncConsole/VncConsole.js @@ -90,12 +90,7 @@ class VncConsole extends React.Component { }; render() { - const { - textDisconnected, - textConnecting, - textSendShortcut, - textCtrlAltDel - } = this.props; + const { textDisconnected, textConnecting, textSendShortcut, textCtrlAltDel } = this.props; let status = null; let rightContent = null; @@ -112,9 +107,7 @@ class VncConsole extends React.Component { ); break; case DISCONNECTED: - status = ( -
    {textDisconnected}
    - ); + status =
    {textDisconnected}
    ; break; case CONNECTING: default: @@ -145,14 +138,11 @@ VncConsole.propTypes = { host: PropTypes.string.isRequired /** FQDN or IP to connect to */, port: PropTypes.string /** TCP Port */, path: PropTypes.string /** host:port/path */, - encrypt: - PropTypes.bool /** For all following, see: https://github.com/novnc/noVNC/blob/master/docs/API.md */, - resizeSession: - PropTypes.bool /** Change remote session size according to local HTML container */, + encrypt: PropTypes.bool /** For all following, see: https://github.com/novnc/noVNC/blob/master/docs/API.md */, + resizeSession: PropTypes.bool /** Change remote session size according to local HTML container */, viewOnly: PropTypes.bool, shared: PropTypes.bool, - credentials: - PropTypes.object /** { username: '', password: '', target: ''} */, + credentials: PropTypes.object /** { username: '', password: '', target: ''} */, repeaterID: PropTypes.string, vncLogging: PropTypes.string /** log-level for noVNC */, diff --git a/packages/react-console/src/VncConsole/VncConsole.stories.js b/packages/react-console/src/VncConsole/VncConsole.stories.js index 0bfe161a80f..38dab1ade27 100644 --- a/packages/react-console/src/VncConsole/VncConsole.stories.js +++ b/packages/react-console/src/VncConsole/VncConsole.stories.js @@ -12,8 +12,8 @@ const stories = storiesOf(`${storybookPackageName(name)}/Vnc Console`, module); const VncConsoleConnector = () => (
    - There is recently no mock VNC backend implemented, so preview of the{' '} - VncConsole component is not available. + There is recently no mock VNC backend implemented, so preview of the VncConsole component is not + available.
    ); diff --git a/packages/react-core/build/copyStyles.js b/packages/react-core/build/copyStyles.js index ba55069242e..c3c3db26a2b 100644 --- a/packages/react-core/build/copyStyles.js +++ b/packages/react-core/build/copyStyles.js @@ -5,9 +5,7 @@ const { parse: parseCSS, stringify: stringifyCSS } = require('css'); const baseCSSFilename = 'patternfly-base.css'; const stylesDir = resolve(__dirname, '../dist/styles'); -const pfDir = dirname( - require.resolve(`@patternfly/patternfly-next/${baseCSSFilename}`) -); +const pfDir = dirname(require.resolve(`@patternfly/patternfly-next/${baseCSSFilename}`)); const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8'); const ast = parseCSS(css); @@ -28,9 +26,7 @@ ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => { case 'comment': return false; case 'font-face': - const fontFamilyDecl = rule.declarations.find( - decl => decl.property === 'font-family' - ); + const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family'); return !unusedFontFamilyRegEx.test(fontFamilyDecl.value); default: return true; diff --git a/packages/react-core/src/components/Alert/Alert.js b/packages/react-core/src/components/Alert/Alert.js index a2d57b42550..9a1d5f67449 100644 --- a/packages/react-core/src/components/Alert/Alert.js +++ b/packages/react-core/src/components/Alert/Alert.js @@ -44,18 +44,12 @@ const Alert = ({ }) => { const readerTitle = ( - - {capitalize(AlertVariant[variant])}:{' '} - + {capitalize(AlertVariant[variant])}: {title} ); - const customClassName = css( - styles.alert, - getModifier(styles, variant, styles.modifiers.info), - className - ); + const customClassName = css(styles.alert, getModifier(styles, variant, styles.modifiers.info), className); return (
    diff --git a/packages/react-core/src/components/Alert/Alert.test.js b/packages/react-core/src/components/Alert/Alert.test.js index fadd9a0f594..e68ca8514c1 100644 --- a/packages/react-core/src/components/Alert/Alert.test.js +++ b/packages/react-core/src/components/Alert/Alert.test.js @@ -47,12 +47,7 @@ Object.keys(AlertVariant).forEach(variant => { test('Custom aria label', () => { const view = mount( - + Some alert ); diff --git a/packages/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap index 2b9b5e0807f..190a50810dc 100644 --- a/packages/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap +++ b/packages/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap @@ -83,8 +83,7 @@ exports[`Alert - danger Action 1`] = ` className="pf-u-sr-only" > Danger - : - + : @@ -100,8 +99,7 @@ exports[`Alert - danger Action 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some alert @@ -203,8 +201,7 @@ exports[`Alert - danger Action and Title 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -220,8 +217,7 @@ exports[`Alert - danger Action and Title 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -320,8 +316,7 @@ exports[`Alert - danger Body 1`] = ` className="pf-u-sr-only" > Danger - : - + : @@ -337,8 +332,7 @@ exports[`Alert - danger Body 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some alert @@ -432,8 +426,7 @@ exports[`Alert - danger Custom aria label 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -449,8 +442,7 @@ exports[`Alert - danger Custom aria label 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -549,8 +541,7 @@ exports[`Alert - danger Title 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -566,8 +557,7 @@ exports[`Alert - danger Title 1`] = ` className="pf-u-sr-only" > Danger - : - + : Some title @@ -661,8 +651,7 @@ exports[`Alert - info Action 1`] = ` className="pf-u-sr-only" > Info - : - + : @@ -678,8 +667,7 @@ exports[`Alert - info Action 1`] = ` className="pf-u-sr-only" > Info - : - + : Some alert @@ -781,8 +769,7 @@ exports[`Alert - info Action and Title 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -798,8 +785,7 @@ exports[`Alert - info Action and Title 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -898,8 +884,7 @@ exports[`Alert - info Body 1`] = ` className="pf-u-sr-only" > Info - : - + : @@ -915,8 +900,7 @@ exports[`Alert - info Body 1`] = ` className="pf-u-sr-only" > Info - : - + : Some alert @@ -1010,8 +994,7 @@ exports[`Alert - info Custom aria label 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -1027,8 +1010,7 @@ exports[`Alert - info Custom aria label 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -1127,8 +1109,7 @@ exports[`Alert - info Title 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -1144,8 +1125,7 @@ exports[`Alert - info Title 1`] = ` className="pf-u-sr-only" > Info - : - + : Some title @@ -1239,8 +1219,7 @@ exports[`Alert - success Action 1`] = ` className="pf-u-sr-only" > Success - : - + : @@ -1256,8 +1235,7 @@ exports[`Alert - success Action 1`] = ` className="pf-u-sr-only" > Success - : - + : Some alert @@ -1359,8 +1337,7 @@ exports[`Alert - success Action and Title 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1376,8 +1353,7 @@ exports[`Alert - success Action and Title 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1476,8 +1452,7 @@ exports[`Alert - success Body 1`] = ` className="pf-u-sr-only" > Success - : - + : @@ -1493,8 +1468,7 @@ exports[`Alert - success Body 1`] = ` className="pf-u-sr-only" > Success - : - + : Some alert @@ -1588,8 +1562,7 @@ exports[`Alert - success Custom aria label 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1605,8 +1578,7 @@ exports[`Alert - success Custom aria label 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1705,8 +1677,7 @@ exports[`Alert - success Title 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1722,8 +1693,7 @@ exports[`Alert - success Title 1`] = ` className="pf-u-sr-only" > Success - : - + : Some title @@ -1817,8 +1787,7 @@ exports[`Alert - warning Action 1`] = ` className="pf-u-sr-only" > Warning - : - + : @@ -1834,8 +1803,7 @@ exports[`Alert - warning Action 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some alert @@ -1937,8 +1905,7 @@ exports[`Alert - warning Action and Title 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title @@ -1954,8 +1921,7 @@ exports[`Alert - warning Action and Title 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title @@ -2054,8 +2020,7 @@ exports[`Alert - warning Body 1`] = ` className="pf-u-sr-only" > Warning - : - + : @@ -2071,8 +2036,7 @@ exports[`Alert - warning Body 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some alert @@ -2166,8 +2130,7 @@ exports[`Alert - warning Custom aria label 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title @@ -2183,8 +2146,7 @@ exports[`Alert - warning Custom aria label 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title @@ -2283,8 +2245,7 @@ exports[`Alert - warning Title 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title @@ -2300,8 +2261,7 @@ exports[`Alert - warning Title 1`] = ` className="pf-u-sr-only" > Warning - : - + : Some title diff --git a/packages/react-core/src/components/Badge/Badge.js b/packages/react-core/src/components/Badge/Badge.js index bfc295edcbe..9779697de8e 100644 --- a/packages/react-core/src/components/Badge/Badge.js +++ b/packages/react-core/src/components/Badge/Badge.js @@ -17,14 +17,7 @@ export const defaultProps = { }; const Badge = ({ isRead, className, children, ...props }) => ( - + {children} ); diff --git a/packages/react-core/src/components/Badge/Badge.test.js b/packages/react-core/src/components/Badge/Badge.test.js index 0fd4142ce31..54164703d58 100644 --- a/packages/react-core/src/components/Badge/Badge.test.js +++ b/packages/react-core/src/components/Badge/Badge.test.js @@ -4,9 +4,7 @@ import { shallow } from 'enzyme'; Object.values([true, false]).forEach(isRead => { test(`${isRead} Badge`, () => { - const view = shallow( - {isRead ? 'read' : 'unread'} Badge - ); + const view = shallow({isRead ? 'read' : 'unread'} Badge); expect(view).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Button/Button.test.js b/packages/react-core/src/components/Button/Button.test.js index 4e77116d5d0..37da1208eb6 100644 --- a/packages/react-core/src/components/Button/Button.test.js +++ b/packages/react-core/src/components/Button/Button.test.js @@ -11,9 +11,7 @@ Object.values(ButtonVariant).forEach(variant => { test('it adds an aria-label to action buttons', () => { const label = 'aria-label test'; - const view = shallow( -