From 169b20766342dc3c37aa4cfd1c50dfa315c35c6f Mon Sep 17 00:00:00 2001 From: Alan Souza Date: Mon, 29 Oct 2018 13:18:33 -0700 Subject: [PATCH] Added prettier iitegration. (#2394) * Added prettier iitegration. * Adding the Styled prettier override * Updated prettier config --- .eslintrc | 13 +- .prettierrc | 5 + package.json | 11 +- src/js/components/Accordion/Accordion.js | 38 +- .../Accordion/__tests__/Accordion-test.js | 80 +-- .../__snapshots__/Accordion-test.js.snap | 350 +++++------ .../components/Accordion/accordion.stories.js | 243 ++++---- src/js/components/Accordion/doc.js | 45 +- src/js/components/Accordion/index.js | 1 - .../AccordionPanel/AccordionPanel.js | 71 +-- src/js/components/AccordionPanel/doc.js | 16 +- src/js/components/AccordionPanel/index.js | 1 - src/js/components/Anchor/Anchor.js | 29 +- src/js/components/Anchor/StyledAnchor.js | 29 +- .../Anchor/__tests__/Anchor-test.js | 53 +- src/js/components/Anchor/anchor.stories.js | 22 +- src/js/components/Anchor/doc.js | 28 +- src/js/components/Anchor/index.js | 1 - src/js/components/Box/Box.js | 14 +- src/js/components/Box/StyledBox.js | 328 +++++++--- src/js/components/Box/__tests__/Box-test.js | 255 ++++---- .../__tests__/__snapshots__/Box-test.js.snap | 52 +- src/js/components/Box/box.stories.js | 173 +++--- src/js/components/Box/doc.js | 179 ++++-- src/js/components/Box/index.js | 1 - src/js/components/Button/Button.js | 55 +- src/js/components/Button/StyledButton.js | 64 +- .../Button/__tests__/Button-test.js | 81 +-- src/js/components/Button/button.stories.js | 87 +-- src/js/components/Button/doc.js | 79 +-- src/js/components/Button/index.js | 1 - src/js/components/Calendar/Calendar.js | 177 +++--- src/js/components/Calendar/StyledCalendar.js | 37 +- .../Calendar/__tests__/Calendar-test.js | 54 +- .../components/Calendar/calendar.stories.js | 108 ++-- src/js/components/Calendar/doc.js | 69 ++- src/js/components/Calendar/index.js | 1 - src/js/components/Calendar/utils.js | 59 +- src/js/components/Carousel/Carousel.js | 72 ++- .../Carousel/__tests__/Carousel-test.js | 34 +- .../__snapshots__/Carousel-test.js.snap | 108 ++-- .../components/Carousel/carousel.stories.js | 17 +- src/js/components/Carousel/doc.js | 16 +- src/js/components/Carousel/index.js | 1 - src/js/components/Chart/Chart.js | 121 ++-- src/js/components/Chart/StyledChart.js | 3 +- .../components/Chart/__tests__/Chart-test.js | 40 +- src/js/components/Chart/calcs.js | 14 +- src/js/components/Chart/chart.stories.js | 67 +- src/js/components/Chart/doc.js | 126 ++-- src/js/components/Chart/index.js | 1 - src/js/components/Chart/utils.js | 22 +- src/js/components/CheckBox/CheckBox.js | 54 +- src/js/components/CheckBox/StyledCheckBox.js | 48 +- .../CheckBox/__tests__/CheckBox-test.js | 20 +- .../__snapshots__/CheckBox-test.js.snap | 12 +- .../components/CheckBox/checkbox.stories.js | 28 +- src/js/components/CheckBox/doc.js | 39 +- src/js/components/CheckBox/index.js | 1 - src/js/components/Clock/Analog.js | 47 +- src/js/components/Clock/Clock.js | 35 +- src/js/components/Clock/Digital.js | 53 +- src/js/components/Clock/StyledClock.js | 27 +- .../components/Clock/__tests__/Clock-test.js | 44 +- .../__snapshots__/Clock-test.js.snap | 40 +- src/js/components/Clock/clock.stories.js | 4 +- src/js/components/Clock/doc.js | 42 +- src/js/components/Clock/index.js | 1 - src/js/components/Collapsible/Collapsible.js | 52 +- .../Collapsible/collapsible.stories.js | 150 +++-- src/js/components/Collapsible/doc.js | 20 +- src/js/components/Collapsible/index.js | 1 - src/js/components/DataTable/Body.js | 16 +- src/js/components/DataTable/Cell.js | 14 +- src/js/components/DataTable/DataTable.js | 102 ++-- src/js/components/DataTable/ExpanderCell.js | 25 +- src/js/components/DataTable/Footer.js | 14 +- src/js/components/DataTable/GroupedBody.js | 17 +- src/js/components/DataTable/Header.js | 67 +- src/js/components/DataTable/Resizer.js | 12 +- src/js/components/DataTable/Searcher.js | 22 +- src/js/components/DataTable/Sorter.js | 26 +- .../components/DataTable/StyledDataTable.js | 26 +- .../DataTable/__tests__/DataTable-test.js | 47 +- .../__snapshots__/DataTable-test.js.snap | 70 +-- src/js/components/DataTable/buildState.js | 57 +- .../components/DataTable/datatable.stories.js | 96 ++- src/js/components/DataTable/doc.js | 79 +-- src/js/components/DataTable/index.js | 1 - src/js/components/Diagram/Diagram.js | 238 ++++---- src/js/components/Diagram/StyledDiagram.js | 2 +- .../Diagram/__tests__/Diagram-test.js | 30 +- src/js/components/Diagram/diagram.stories.js | 25 +- src/js/components/Diagram/doc.js | 59 +- src/js/components/Diagram/index.js | 1 - .../components/Distribution/Distribution.js | 45 +- .../__tests__/Distribution-test.js | 16 +- .../Distribution/distribution.stories.js | 11 +- src/js/components/Distribution/doc.js | 38 +- src/js/components/Distribution/index.js | 1 - src/js/components/Drop/Drop.js | 14 +- src/js/components/Drop/DropContainer.js | 85 +-- src/js/components/Drop/StyledDrop.js | 5 +- src/js/components/Drop/__tests__/Drop-test.js | 43 +- .../__tests__/__snapshots__/Drop-test.js.snap | 80 +-- src/js/components/Drop/doc.js | 47 +- src/js/components/Drop/drop.stories.js | 97 ++- src/js/components/Drop/index.js | 1 - src/js/components/DropButton/DropButton.js | 31 +- .../DropButton/__tests__/DropButton-test.js | 43 +- .../__snapshots__/DropButton-test.js.snap | 24 +- src/js/components/DropButton/doc.js | 35 +- .../DropButton/dropbutton.stories.js | 40 +- src/js/components/DropButton/index.js | 1 - src/js/components/FocusedContainer.js | 14 +- src/js/components/FormField/FormField.js | 65 +- .../FormField/__tests__/FormField-test.js | 22 +- src/js/components/FormField/doc.js | 30 +- .../components/FormField/formfield.stories.js | 68 ++- src/js/components/FormField/index.js | 1 - src/js/components/Grid/Grid.js | 22 +- src/js/components/Grid/StyledGrid.js | 81 ++- src/js/components/Grid/__tests__/Grid-test.js | 78 +-- .../__tests__/__snapshots__/Grid-test.js.snap | 4 +- src/js/components/Grid/doc.js | 112 ++-- src/js/components/Grid/grid.stories.js | 48 +- src/js/components/Grid/index.js | 1 - src/js/components/Grommet/Grommet.js | 42 +- .../Grommet/__tests__/Grommet-test.js | 16 +- src/js/components/Grommet/doc.js | 8 +- src/js/components/Grommet/grommet.stories.js | 8 +- src/js/components/Grommet/index.js | 1 - src/js/components/Heading/Heading.js | 10 +- src/js/components/Heading/StyledHeading.js | 39 +- .../Heading/__tests__/Heading-test.js | 72 +-- src/js/components/Heading/doc.js | 54 +- src/js/components/Heading/heading.stories.js | 50 +- src/js/components/Heading/index.js | 1 - src/js/components/Image/Image.js | 8 +- .../components/Image/__tests__/Image-test.js | 11 +- src/js/components/Image/doc.js | 6 +- src/js/components/Image/image.stories.js | 12 +- src/js/components/Image/index.js | 1 - .../InfiniteScroll/InfiniteScroll.js | 60 +- .../__tests__/InfiniteScroll-test.js | 14 +- src/js/components/InfiniteScroll/doc.js | 22 +- src/js/components/InfiniteScroll/index.js | 1 - .../InfiniteScroll/infinitescroll.stories.js | 19 +- src/js/components/Keyboard/Keyboard.js | 14 +- .../Keyboard/__tests__/Keyboard-test.js | 4 +- src/js/components/Keyboard/doc.js | 17 +- src/js/components/Keyboard/index.js | 1 - src/js/components/Layer/Layer.js | 17 +- src/js/components/Layer/LayerContainer.js | 18 +- src/js/components/Layer/StyledLayer.js | 114 ++-- .../components/Layer/__tests__/Layer-test.js | 74 +-- .../__snapshots__/Layer-test.js.snap | 10 +- src/js/components/Layer/doc.js | 63 +- src/js/components/Layer/index.js | 1 - src/js/components/Layer/layer.stories.js | 203 +++---- src/js/components/Markdown/Markdown.js | 39 +- .../Markdown/__tests__/Markdown-test.js | 2 +- src/js/components/Markdown/doc.js | 9 +- src/js/components/Markdown/index.js | 1 - .../components/Markdown/markdown.stories.js | 3 +- src/js/components/Menu/Menu.js | 101 ++-- src/js/components/Menu/__tests__/Menu-test.js | 160 ++--- .../__tests__/__snapshots__/Menu-test.js.snap | 82 +-- src/js/components/Menu/doc.js | 44 +- src/js/components/Menu/index.js | 1 - src/js/components/Menu/menu.stories.js | 7 +- src/js/components/Meter/Bar.js | 86 +-- src/js/components/Meter/Circle.js | 72 ++- src/js/components/Meter/Meter.js | 12 +- src/js/components/Meter/StyledMeter.js | 5 +- .../components/Meter/__tests__/Meter-test.js | 77 +-- src/js/components/Meter/doc.js | 63 +- src/js/components/Meter/index.js | 1 - src/js/components/Meter/meter.stories.js | 36 +- src/js/components/Meter/utils.js | 12 +- src/js/components/Paragraph/Paragraph.js | 4 +- .../components/Paragraph/StyledParagraph.js | 2 +- .../Paragraph/__tests__/Paragraph-test.js | 32 +- src/js/components/Paragraph/doc.js | 18 +- src/js/components/Paragraph/index.js | 1 - .../components/Paragraph/paragraph.stories.js | 7 +- src/js/components/RadioButton/RadioButton.js | 39 +- .../RadioButton/StyledRadioButton.js | 28 +- .../RadioButton/__tests__/RadioButton-test.js | 12 +- src/js/components/RadioButton/doc.js | 16 +- src/js/components/RadioButton/index.js | 1 - .../RadioButton/radiobutton.stories.js | 52 +- src/js/components/RangeInput/RangeInput.js | 8 +- .../components/RangeInput/StyledRangeInput.js | 70 ++- .../RangeInput/__tests__/RangeInput-test.js | 4 +- src/js/components/RangeInput/doc.js | 24 +- src/js/components/RangeInput/index.js | 1 - .../RangeInput/rangeinput.stories.js | 9 +- .../components/RangeSelector/EdgeControl.js | 46 +- .../components/RangeSelector/RangeSelector.js | 145 +++-- .../__tests__/RangeSelector-test.js | 45 +- src/js/components/RangeSelector/doc.js | 43 +- src/js/components/RangeSelector/index.js | 1 - .../RangeSelector/rangeselector.stories.js | 23 +- .../components/RoutedAnchor/RoutedAnchor.js | 2 +- .../__tests__/RoutedAnchor-test.js | 24 +- src/js/components/RoutedAnchor/doc.js | 8 +- src/js/components/RoutedAnchor/index.js | 1 - .../components/RoutedButton/RoutedButton.js | 10 +- .../__tests__/RoutedButton-test.js | 24 +- src/js/components/RoutedButton/doc.js | 4 +- src/js/components/RoutedButton/index.js | 1 - src/js/components/Select/Select.js | 45 +- src/js/components/Select/SelectContainer.js | 103 ++-- .../Select/__tests__/Select-test.js | 107 ++-- .../__snapshots__/Select-test.js.snap | 200 +++--- src/js/components/Select/doc.js | 87 +-- src/js/components/Select/index.js | 1 - .../stories/components/SearchBorderBox.js | 11 +- .../Select/stories/components/SearchInput.js | 8 +- .../stories/components/icons/ArrowDown.js | 4 +- .../Select/stories/select.stories.js | 302 ++++----- src/js/components/Select/stories/theme.js | 3 +- src/js/components/SkipLink/SkipLink.js | 8 +- src/js/components/SkipLink/index.d.ts | 2 +- src/js/components/SkipLink/index.js | 1 - .../SkipLinkTarget/SkipLinkTarget.js | 2 +- src/js/components/SkipLinkTarget/index.d.ts | 2 +- src/js/components/SkipLinkTarget/index.js | 1 - src/js/components/SkipLinks/SkipLinks.js | 35 +- .../SkipLinks/__tests__/SkipLink-test.js | 30 +- src/js/components/SkipLinks/doc.js | 10 +- src/js/components/SkipLinks/index.js | 1 - src/js/components/Stack/Stack.js | 17 +- src/js/components/Stack/StyledStack.js | 16 +- .../components/Stack/__tests__/Stack-test.js | 35 +- src/js/components/Stack/doc.js | 34 +- src/js/components/Stack/index.js | 1 - src/js/components/Stack/stack.stories.js | 8 +- src/js/components/Tab/StyledTab.js | 13 +- src/js/components/Tab/Tab.js | 34 +- src/js/components/Tab/doc.js | 17 +- src/js/components/Tab/index.js | 1 - src/js/components/Table/StyledTable.js | 18 +- src/js/components/Table/Table.js | 8 +- .../components/Table/__tests__/Table-test.js | 62 +- src/js/components/Table/doc.js | 4 +- src/js/components/Table/index.js | 1 - src/js/components/Table/table.stories.js | 37 +- src/js/components/TableBody/TableBody.js | 2 +- src/js/components/TableBody/doc.js | 4 +- src/js/components/TableBody/index.js | 1 - src/js/components/TableCell/TableCell.js | 29 +- src/js/components/TableCell/doc.js | 27 +- src/js/components/TableCell/index.js | 1 - src/js/components/TableFooter/TableFooter.js | 2 +- src/js/components/TableFooter/doc.js | 4 +- src/js/components/TableFooter/index.js | 1 - src/js/components/TableHeader/TableHeader.js | 2 +- src/js/components/TableHeader/doc.js | 4 +- src/js/components/TableHeader/index.js | 1 - src/js/components/TableRow/doc.js | 4 +- src/js/components/TableRow/index.js | 1 - src/js/components/Tabs/StyledTabs.js | 5 +- src/js/components/Tabs/Tabs.js | 54 +- src/js/components/Tabs/__tests__/Tabs-test.js | 40 +- .../__tests__/__snapshots__/Tabs-test.js.snap | 60 +- src/js/components/Tabs/doc.js | 30 +- src/js/components/Tabs/index.js | 1 - src/js/components/Tabs/tabs.stories.js | 335 +++++++--- src/js/components/Text/StyledText.js | 8 +- src/js/components/Text/Text.js | 8 +- src/js/components/Text/__tests__/Text-test.js | 50 +- src/js/components/Text/doc.js | 39 +- src/js/components/Text/index.js | 1 - src/js/components/Text/text.stories.js | 10 +- src/js/components/TextArea/StyledTextArea.js | 17 +- src/js/components/TextArea/TextArea.js | 4 +- .../TextArea/__tests__/TextArea-test.js | 16 +- src/js/components/TextArea/doc.js | 15 +- src/js/components/TextArea/index.js | 1 - .../components/TextArea/textarea.stories.js | 7 +- .../components/TextInput/StyledTextInput.js | 24 +- src/js/components/TextInput/TextInput.js | 162 +++-- .../TextInput/__tests__/TextInput-test.js | 99 +-- .../__snapshots__/TextInput-test.js.snap | 46 +- src/js/components/TextInput/doc.js | 65 +- src/js/components/TextInput/index.js | 1 - .../components/TextInput/textinput.stories.js | 145 +++-- src/js/components/Video/StyledVideo.js | 14 +- src/js/components/Video/Video.js | 169 ++++-- .../components/Video/__tests__/Video-test.js | 22 +- src/js/components/Video/doc.js | 20 +- src/js/components/Video/index.js | 1 - src/js/components/Video/video.stories.js | 23 +- src/js/components/WorldMap/StyledWorldMap.js | 4 +- src/js/components/WorldMap/WorldMap.js | 572 +++++++++++++----- .../WorldMap/__tests__/WorldMap-test.js | 36 +- src/js/components/WorldMap/doc.js | 46 +- src/js/components/WorldMap/index.js | 1 - .../components/WorldMap/worldmap.stories.js | 9 +- .../__tests__/FocusedContainer-test.js | 20 +- src/js/components/__tests__/README-test.js | 23 +- src/js/components/__tests__/hocs-test.js | 17 +- .../components/__tests__/typescript-test.js | 23 +- src/js/components/components.stories.js | 194 +++--- src/js/components/hocs.js | 57 +- src/js/components/typography.stories.js | 78 ++- .../AnnounceContext/AnnounceContext.js | 25 +- src/js/contexts/AnnounceContext/doc.js | 8 +- src/js/contexts/AnnounceContext/index.d.ts | 7 +- src/js/contexts/AnnounceContext/index.js | 1 - src/js/contexts/ResponsiveContext/doc.js | 10 +- src/js/contexts/ResponsiveContext/index.d.ts | 2 +- src/js/contexts/ResponsiveContext/index.js | 1 - .../responsive-context.stories.js | 29 +- src/js/contexts/ThemeContext/ThemeContext.js | 4 +- src/js/contexts/ThemeContext/doc.js | 8 +- src/js/contexts/ThemeContext/index.d.ts | 5 +- src/js/contexts/ThemeContext/index.js | 1 - src/js/index.d.ts | 2 +- src/js/themes/__tests__/theme-test.js | 48 +- src/js/themes/base.js | 77 ++- src/js/themes/dark.js | 10 +- src/js/themes/grommet.js | 2 +- src/js/utils/DOM.js | 53 +- src/js/utils/__tests__/object-test.js | 2 +- src/js/utils/background.js | 54 +- src/js/utils/colors.js | 26 +- src/js/utils/debounce.js | 1 - src/js/utils/graphics.js | 23 +- src/js/utils/mixins.js | 36 +- src/js/utils/object.js | 17 +- src/js/utils/portal.js | 54 +- src/js/utils/prop-types.js | 16 +- src/js/utils/responsive.js | 36 +- src/js/utils/router.js | 10 +- src/js/utils/styles.js | 150 +++-- yarn.lock | 98 ++- 339 files changed, 7682 insertions(+), 6086 deletions(-) create mode 100644 .prettierrc diff --git a/.eslintrc b/.eslintrc index 7d1c69e224a..b066b15037c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,6 +1,7 @@ { "parser": "babel-eslint", - "extends": "airbnb", + "extends": ["airbnb", "prettier"], + "plugins": ["prettier"], "env": { "node": true, "es6": true @@ -30,13 +31,15 @@ }, "rules": { "indent": "off", - "indent-legacy": ["error", 2], "comma-dangle": ["error", "always-multiline"], - "jsx-quotes": ["error", "prefer-single"], "no-console": 0, - "quote-props": ["error", "consistent"], "react/jsx-filename-extension": 0, - "import/prefer-default-export": 0 + "import/prefer-default-export": 0, + "react/prop-types": 0, + "react/jsx-one-expression-per-line": 0, + "react/jsx-wrap-multilines": 0, + "no-useless-concat": 0, + "react/jsx-indent": 0 }, "overrides": [ { diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000000..2853920a729 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "trailingComma": "all", + "singleQuote": true, + "printWidth": 80 +} diff --git a/package.json b/package.json index 3c02edf6cbc..125ab4e2b6b 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,14 @@ "build": "webpack --mode production && babel ./src/js/ --ignore '__tests__' --out-dir ./dist --copy-files && cross-env BABEL_ENV=es6 babel ./src/js/ --ignore '__tests__' --out-dir ./dist/es6 --copy-files", "release-stable": "babel-node ./tools/release-stable", "lint": "eslint src", + "lint-fix": "eslint src --fix", "test": "npm run generate-readme-ts && jest --runInBand", "test-update": "npm run generate-readme-ts && jest --updateSnapshot", "test-watch": "jest --watchAll", "pack": "babel-node ./tools/pack", "storybook": "cross-env NODE_ENV=development start-storybook -p 9001 -c storybook", - "build-storybook": "build-storybook -c storybook -o storybook-static" + "build-storybook": "build-storybook -c storybook -o storybook-static", + "prettier": "pretty-quick --staged" }, "peerDependencies": { "grommet-icons": ">= 3.1.0", @@ -81,9 +83,11 @@ "dom-testing-library": "^3.9.0", "eslint": "^5.6.1", "eslint-config-airbnb": "^17.1.0", + "eslint-config-prettier": "^3.1.0", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^6.0.3", + "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.9.1", "fs-extra": "^7.0.0", "grommet-icons": "^3.1.0", @@ -96,6 +100,8 @@ "jest-cli": "^23.1.0", "jest-styled-components": "^6.2.0", "pre-commit": "^1.2.2", + "prettier": "^1.14.3", + "pretty-quick": "^1.8.0", "react": "^16.4.0", "react-dev-utils": "^6.0.4", "react-dom": "^16.4.0", @@ -130,7 +136,8 @@ ] }, "pre-commit": [ - "lint", + "lint-fix", + "prettier", "test" ] } diff --git a/src/js/components/Accordion/Accordion.js b/src/js/components/Accordion/Accordion.js index 5a5effae81d..363d7ab18c6 100644 --- a/src/js/components/Accordion/Accordion.js +++ b/src/js/components/Accordion/Accordion.js @@ -1,7 +1,4 @@ -import React, { - Component, - Children, -} from 'react'; +import React, { Component, Children } from 'react'; import { compose } from 'recompose'; import { Box } from '../Box'; @@ -9,9 +6,8 @@ import { withTheme } from '../hocs'; import { AccordionContext } from './AccordionContext'; -const activeAsArray = active => ((typeof active === 'number') ? ( - [active] -) : active); +const activeAsArray = active => + typeof active === 'number' ? [active] : active; class Accordion extends Component { static defaultProps = { @@ -19,7 +15,7 @@ class Accordion extends Component { messages: { tabContents: 'Tab Contents', }, - } + }; static getDerivedStateFromProps(nextProps, prevState) { const { activeIndex } = nextProps; @@ -30,8 +26,11 @@ class Accordion extends Component { const activeIndexes = activeAsArray(activeIndex) || []; - if ((typeof activeIndex !== 'undefined' || activeIndex !== stateActiveIndex) - && activeIndexes.join() !== stateActiveIndexes.join()) { + if ( + (typeof activeIndex !== 'undefined' || + activeIndex !== stateActiveIndex) && + activeIndexes.join() !== stateActiveIndexes.join() + ) { return { activeIndexes, activeIndex }; } @@ -40,9 +39,9 @@ class Accordion extends Component { state = { activeIndexes: [], - } + }; - onPanelChange = (index) => { + onPanelChange = index => { const { activeIndexes } = this.state; let nextActiveIndexes = [...(activeIndexes || [])]; const { onActive, multiple } = this.props; @@ -61,21 +60,16 @@ class Accordion extends Component { onActive(nextActiveIndexes); } }); - } + }; render() { - const { - animate, - children, - messages, - ...rest - } = this.props; + const { animate, children, messages, ...rest } = this.props; const { activeIndexes } = this.state; delete rest.onActive; return ( - + {Children.toArray(children).map((panel, index) => ( { afterEach(cleanup); @@ -14,7 +12,7 @@ describe('Accordion', () => { const component = renderer.create( - + , ); expect(component.toJSON()).toMatchSnapshot(); }); @@ -23,19 +21,13 @@ describe('Accordion', () => { const component = renderer.create( - - Panel body 1 - - - Panel body 2 - + Panel body 1 + Panel body 2 {false && ( - - Panel body 2 - + Panel body 2 )} - + , ); expect(component.toJSON()).toMatchSnapshot(); }); @@ -43,7 +35,7 @@ describe('Accordion', () => { test('complex title', () => { const component = renderer.create( - + Panel 1 complex}> Panel body 1 @@ -54,7 +46,7 @@ describe('Accordion', () => { - + , ); expect(component.toJSON()).toMatchSnapshot(); }); @@ -71,24 +63,20 @@ describe('Accordion', () => { Panel body 2 - + , ); expect(component.toJSON()).toMatchSnapshot(); }); - test('change to second Panel', (done) => { + test('change to second Panel', done => { const onActive = jest.fn(); const { getByText, container } = render( - - Panel body 1 - - - Panel body 2 - + Panel body 1 + Panel body 2 - + , ); expect(container.firstChild).toMatchSnapshot(); @@ -108,14 +96,10 @@ describe('Accordion', () => { const { getByText, container } = render( - - Panel body 1 - - - Panel body 2 - + Panel body 1 + Panel body 2 - + , ); expect(container.firstChild).toMatchSnapshot(); @@ -128,19 +112,11 @@ describe('Accordion', () => { const onActive = jest.fn(); const { getByText, container } = render( - - - Panel body 1 - - - Panel body 2 - + + Panel body 1 + Panel body 2 - + , ); expect(container.firstChild).toMatchSnapshot(); @@ -170,14 +146,10 @@ describe('Accordion', () => { const { getByText, container } = render( - - Panel body 1 - - - Panel body 2 - + Panel body 1 + Panel body 2 - + , ); expect(container.firstChild).toMatchSnapshot(); @@ -191,7 +163,7 @@ describe('Accordion', () => { {}} onMouseOut={() => {}} onFocus={() => {}} @@ -200,7 +172,7 @@ describe('Accordion', () => { Panel body 1 {}} onMouseOut={() => {}} onFocus={() => {}} @@ -209,7 +181,7 @@ describe('Accordion', () => { Panel body 2 - + , ); expect(container.firstChild).toMatchSnapshot(); diff --git a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap index 3957e22b80a..a514cd68f2d 100644 --- a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap +++ b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap @@ -828,33 +828,33 @@ exports[`Accordion change active index 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 2
@@ -1367,33 +1367,33 @@ exports[`Accordion change to second Panel 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 2 @@ -1903,33 +1903,33 @@ exports[`Accordion change to second Panel without onActive 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 2
@@ -3029,33 +3029,33 @@ exports[`Accordion multiple panels 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 2
@@ -3172,33 +3172,33 @@ exports[`Accordion multiple panels 3`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 1
Panel body 2
@@ -3318,33 +3318,33 @@ exports[`Accordion multiple panels 4`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
Panel body 1
@@ -3461,33 +3461,33 @@ exports[`Accordion multiple panels 5`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
@@ -4080,33 +4080,33 @@ exports[`Accordion set on hover 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
@@ -4202,33 +4202,33 @@ exports[`Accordion set on hover 3`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
@@ -4324,33 +4324,33 @@ exports[`Accordion set on hover 4`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
@@ -4446,33 +4446,33 @@ exports[`Accordion set on hover 5`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
diff --git a/src/js/components/Accordion/accordion.stories.js b/src/js/components/Accordion/accordion.stories.js index 5272f926c57..a0d776a9d10 100644 --- a/src/js/components/Accordion/accordion.stories.js +++ b/src/js/components/Accordion/accordion.stories.js @@ -30,24 +30,24 @@ const richAccordionTheme = { }, }; -const SimpleAccordion = (props) => { +const SimpleAccordion = props => { const { animate, multiple, ...rest } = props; return ( - - + + Panel 1 contents - - + + Panel 2 contents - - + + Panel 3 contents @@ -60,7 +60,7 @@ const SimpleAccordion = (props) => { class RichPanel extends Component { state = { hovering: false, - } + }; renderPanelTitle = () => { /* eslint-disable-next-line react/prop-types */ @@ -68,9 +68,9 @@ class RichPanel extends Component { const { hovering } = this.state; return ( {icon} @@ -79,7 +79,7 @@ class RichPanel extends Component { ); - } + }; render() { /* eslint-disable-next-line react/prop-types */ @@ -99,20 +99,32 @@ class RichPanel extends Component { } const spinning = ( - - - - + + + + ); const loading = ( - + {spinning} ); @@ -120,19 +132,19 @@ const loading = ( class RichAccordion extends Component { state = { highlightLoaded: false, - } + }; render() { const { highlightLoaded } = this.state; return ( - - + + @@ -142,7 +154,7 @@ class RichAccordion extends Component { { + onActive={activeIndexes => { if (activeIndexes.includes(1)) { // give sometime to emulate an async call setTimeout(() => { @@ -151,112 +163,122 @@ class RichAccordion extends Component { } }} > - } label='Channel Details'> + } label="Channel Details"> - - + + Purpose - Used for general announcements like new releases, trainings... + Used for general announcements like new releases, + trainings... - - + + Created - - Created by Bryan Jacquot on January 19, 2016 - + Created by Bryan Jacquot on January 19, 2016 } - label='Highlights' + icon={} + label="Highlights" > {highlightLoaded ? ( - + Below is the top message in - #announcements - . + #announcements. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. - ) : loading} + ) : ( + loading + )} - } label='2,000 members'> + } + label="2,000 members" + > Yeah believe me, this channel has 2,000 members. @@ -271,21 +293,18 @@ class RichAccordion extends Component { } const renderPanelHeader = (title, active) => ( - - {title} - { active ? '-' : '+'} + + + {title} + + {active ? '-' : '+'} ); class CustomHeaderAccordion extends Component { state = { activeIndex: [0], - } + }; render() { const { activeIndex } = this.state; @@ -293,12 +312,14 @@ class CustomHeaderAccordion extends Component { this.setState({ activeIndex: newActiveIndex })} + onActive={newActiveIndex => + this.setState({ activeIndex: newActiveIndex }) + } > - + Panel 1 contents @@ -306,14 +327,14 @@ class CustomHeaderAccordion extends Component { - + Panel 2 contents - + Panel 3 contents @@ -325,7 +346,9 @@ class CustomHeaderAccordion extends Component { storiesOf('Accordion', module) .add('Simple', () => ) - .add('Dark no animation', () => ) + .add('Dark no animation', () => ( + + )) .add('Multiple', () => ) .add('Rich', () => ) .add('Custom Header', () => ); diff --git a/src/js/components/Accordion/doc.js b/src/js/components/Accordion/doc.js index 1c55a3a9583..f50295435fb 100644 --- a/src/js/components/Accordion/doc.js +++ b/src/js/components/Accordion/doc.js @@ -2,7 +2,7 @@ import { describe, PropTypes } from 'react-desc'; import { genericProps, getAvailableAtBadge } from '../../utils'; -export const doc = (Accordion) => { +export const doc = Accordion => { const DocumentedAccordion = describe(Accordion) .availableAt(getAvailableAtBadge('Accordion')) .description('An accordion containing collapsible panels.') @@ -11,7 +11,7 @@ export const doc = (Accordion) => { ... ... -` +`, ); DocumentedAccordion.propTypes = { @@ -19,31 +19,34 @@ export const doc = (Accordion) => { activeIndex: PropTypes.oneOfType([ PropTypes.number, PropTypes.arrayOf(PropTypes.number), - ]).description( - `Active panel index. If specified, Accordion will be a controlled component. This means that future + ]) + .description( + `Active panel index. If specified, Accordion will be a controlled component. This means that future panel changes will not work unless you subscribe to onActive function and update activeIndex -accordingly.` - ).defaultValue(0), - animate: PropTypes.bool.description( - 'Transition content in & out with a slide down animation.' - ).defaultValue(true), - children: PropTypes.node.description( - 'Array of AccordionPanels.' - ).isRequired, +accordingly.`, + ) + .defaultValue(0), + animate: PropTypes.bool + .description('Transition content in & out with a slide down animation.') + .defaultValue(true), + children: PropTypes.node.description('Array of AccordionPanels.') + .isRequired, onActive: PropTypes.func.description( `Function that will be called when the active index changes. -It will always send an array with currently active panel indexes.` +It will always send an array with currently active panel indexes.`, ), - multiple: PropTypes.bool.description( - 'Allow multiple panels to be opened at once.' - ).defaultValue(false), + multiple: PropTypes.bool + .description('Allow multiple panels to be opened at once.') + .defaultValue(false), messages: PropTypes.shape({ tabContents: PropTypes.string, - }).description( - 'Custom messages for Tabs. Used for accessibility by screen readers.' - ).defaultValue({ - tabContents: 'Tab Contents', - }), + }) + .description( + 'Custom messages for Tabs. Used for accessibility by screen readers.', + ) + .defaultValue({ + tabContents: 'Tab Contents', + }), }; return DocumentedAccordion; diff --git a/src/js/components/Accordion/index.js b/src/js/components/Accordion/index.js index 465544cb0a1..feee0c4f098 100644 --- a/src/js/components/Accordion/index.js +++ b/src/js/components/Accordion/index.js @@ -1,2 +1 @@ - export { Accordion } from './Accordion'; diff --git a/src/js/components/AccordionPanel/AccordionPanel.js b/src/js/components/AccordionPanel/AccordionPanel.js index d455dcbb555..6c4db8eb168 100644 --- a/src/js/components/AccordionPanel/AccordionPanel.js +++ b/src/js/components/AccordionPanel/AccordionPanel.js @@ -13,15 +13,18 @@ import { AccordionContext } from '../Accordion/AccordionContext'; class AccordionPanel extends Component { state = { hover: undefined, - } + }; onMouseOver = (...args) => { - const { onMouseOver, theme: { dark } } = this.props; + const { + onMouseOver, + theme: { dark }, + } = this.props; this.setState({ hover: dark ? 'light-4' : 'dark-6' }); if (onMouseOver) { onMouseOver(args); } - } + }; onMouseOut = (...args) => { const { onMouseOut } = this.props; @@ -29,15 +32,18 @@ class AccordionPanel extends Component { if (onMouseOut) { onMouseOut(args); } - } + }; onFocus = (...args) => { - const { onFocus, theme: { dark } } = this.props; + const { + onFocus, + theme: { dark }, + } = this.props; this.setState({ hover: dark ? 'light-4' : 'dark-6' }); if (onFocus) { onFocus(args); } - } + }; onBlur = (...args) => { const { onBlur } = this.props; @@ -45,7 +51,7 @@ class AccordionPanel extends Component { if (onBlur) { onBlur(args); } - } + }; render() { const { @@ -61,23 +67,23 @@ class AccordionPanel extends Component { } = this.props; const { hover } = this.state; - const iconColor = normalizeColor(theme.accordion.icons.color - || 'control', theme); + const iconColor = normalizeColor( + theme.accordion.icons.color || 'control', + theme, + ); return ( - {(panelContext) => { + {panelContext => { const { active, animate, onPanelChange } = panelContext; - const AccordionIcon = active ? ( - theme.accordion.icons.collapse - ) : ( - theme.accordion.icons.expand - ); + const AccordionIcon = active + ? theme.accordion.icons.collapse + : theme.accordion.icons.expand; return ( {animate ? ( - - {children} - - ) : active && children} + {children} + ) : ( + active && children + )} ); diff --git a/src/js/components/AccordionPanel/doc.js b/src/js/components/AccordionPanel/doc.js index 1e5bab78090..f9b18903d9f 100644 --- a/src/js/components/AccordionPanel/doc.js +++ b/src/js/components/AccordionPanel/doc.js @@ -1,19 +1,15 @@ import { describe, PropTypes } from 'react-desc'; export function doc(Panel) { - const DocumentedAccordionPanel = describe(Panel) - .description( - 'An Accordion panel.' - ); + const DocumentedAccordionPanel = describe(Panel).description( + 'An Accordion panel.', + ); DocumentedAccordionPanel.propTypes = { - label: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.node, - ]).description( - 'The panel label.' + label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description( + 'The panel label.', ), header: PropTypes.node.description( - 'If specified, the entire panel header will be managed by the caller.' + 'If specified, the entire panel header will be managed by the caller.', ), }; return DocumentedAccordionPanel; diff --git a/src/js/components/AccordionPanel/index.js b/src/js/components/AccordionPanel/index.js index aa5918382b0..5b25b2b4676 100644 --- a/src/js/components/AccordionPanel/index.js +++ b/src/js/components/AccordionPanel/index.js @@ -1,2 +1 @@ - export { AccordionPanel } from './AccordionPanel'; diff --git a/src/js/components/Anchor/Anchor.js b/src/js/components/Anchor/Anchor.js index d2d230987e6..7f44a3edcc4 100644 --- a/src/js/components/Anchor/Anchor.js +++ b/src/js/components/Anchor/Anchor.js @@ -14,7 +14,9 @@ class Anchor extends Component { const { children, icon, label } = props; if ((icon || label) && children) { - console.warn('Anchor should not have children if icon or label is provided'); + console.warn( + 'Anchor should not have children if icon or label is provided', + ); } } @@ -35,15 +37,14 @@ class Anchor extends Component { ...rest } = this.props; - const anchorLabel = typeof label === 'string' - ? {label} - : label; + const anchorLabel = + typeof label === 'string' ? {label} : label; let coloredIcon = icon; if (icon && !icon.props.color) { - coloredIcon = cloneElement( - icon, { color: normalizeColor(color || theme.anchor.color, theme) } - ); + coloredIcon = cloneElement(icon, { + color: normalizeColor(color || theme.anchor.color, theme), + }); } const first = reverse ? anchorLabel : coloredIcon; @@ -64,12 +65,20 @@ class Anchor extends Component { href={!disabled ? href : undefined} onClick={!disabled ? onClick : undefined} > - {(first || second) ? ( - + {first || second ? ( + {first} {second} - ) : children} + ) : ( + children + )} ); } diff --git a/src/js/components/Anchor/StyledAnchor.js b/src/js/components/Anchor/StyledAnchor.js index ef64d6402d0..32ca4a8958f 100644 --- a/src/js/components/Anchor/StyledAnchor.js +++ b/src/js/components/Anchor/StyledAnchor.js @@ -12,24 +12,33 @@ export const StyledAnchor = styled.a` box-sizing: border-box; font-size: inherit; line-height: inherit; - color: ${props => normalizeColor(props.colorProp || props.theme.anchor.color, props.theme)}; - ${props => props.theme.anchor.fontWeight - && `font-weight: ${props.theme.anchor.fontWeight};`} - text-decoration: ${props => (props.hasIcon ? 'none' : props.theme.anchor.textDecoration)}; + color: ${props => + normalizeColor(props.colorProp || props.theme.anchor.color, props.theme)}; + ${props => + props.theme.anchor.fontWeight && + `font-weight: ${props.theme.anchor.fontWeight};`} + text-decoration: ${props => + props.hasIcon ? 'none' : props.theme.anchor.textDecoration}; cursor: pointer; outline: none; ${genericStyles} - ${props => !props.disabled && props.theme.anchor.hover && css` + ${props => + !props.disabled && + props.theme.anchor.hover && + css` &:hover { - ${props.theme.anchor.hover.textDecoration - && `text-decoration: ${props.theme.anchor.hover.textDecoration};`} - ${props.theme.anchor.hover.fontWeight - && `font-weight: ${props.theme.anchor.hover.fontWeight};`} + ${props.theme.anchor.hover.textDecoration && + `text-decoration: ${props.theme.anchor.hover.textDecoration};`} + ${props.theme.anchor.hover.fontWeight && + `font-weight: ${props.theme.anchor.hover.fontWeight};`} ${props.theme.anchor.hover.extend} } `} - ${props => props.hasIcon && !props.hasLabel && ` + ${props => + props.hasIcon && + !props.hasLabel && + ` padding: ${props.theme.global.edgeSize.small}; `} ${props => props.disabled && disabledStyle} diff --git a/src/js/components/Anchor/__tests__/Anchor-test.js b/src/js/components/Anchor/__tests__/Anchor-test.js index 8165d96b790..ba27a0c9f73 100644 --- a/src/js/components/Anchor/__tests__/Anchor-test.js +++ b/src/js/components/Anchor/__tests__/Anchor-test.js @@ -11,7 +11,7 @@ test('Anchor renders', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -20,8 +20,8 @@ test('Anchor renders', () => { test('Anchor renders with children', () => { const component = renderer.create( - children - + children + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -31,12 +31,16 @@ test('Anchor warns about invalid label render', () => { const warnSpy = jest.spyOn(console, 'warn'); const component = renderer.create( - invalid - + + invalid + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); - expect(warnSpy).toHaveBeenCalledWith('Anchor should not have children if icon or label is provided'); + expect(warnSpy).toHaveBeenCalledWith( + 'Anchor should not have children if icon or label is provided', + ); warnSpy.mockReset(); warnSpy.mockRestore(); @@ -46,12 +50,16 @@ test('Anchor warns about invalid icon render', () => { const warnSpy = jest.spyOn(console, 'warn'); const component = renderer.create( - }>invalid - + }> + invalid + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); - expect(warnSpy).toHaveBeenCalledWith('Anchor should not have children if icon or label is provided'); + expect(warnSpy).toHaveBeenCalledWith( + 'Anchor should not have children if icon or label is provided', + ); warnSpy.mockReset(); warnSpy.mockRestore(); @@ -60,8 +68,8 @@ test('Anchor warns about invalid icon render', () => { test('Anchor primary renders', () => { const component = renderer.create( - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -70,8 +78,8 @@ test('Anchor primary renders', () => { test('Anchor focus renders', () => { const component = renderer.create( - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -81,7 +89,7 @@ test('Anchor disabled renders', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -90,8 +98,8 @@ test('Anchor disabled renders', () => { test('Anchor icon label renders', () => { const component = renderer.create( - } label='Test' onClick={() => {}} /> - + } label="Test" onClick={() => {}} /> + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -100,13 +108,8 @@ test('Anchor icon label renders', () => { test('Anchor reverse icon label renders', () => { const component = renderer.create( - } - label='Test' - onClick={() => {}} - /> - + } label="Test" onClick={() => {}} /> + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -116,8 +119,8 @@ test('Anchor is clickable', () => { const onClick = jest.fn(); const component = renderer.create( - - + + , ); const tree = component.toJSON(); diff --git a/src/js/components/Anchor/anchor.stories.js b/src/js/components/Anchor/anchor.stories.js index b0d2d62e3d8..236a5734f61 100644 --- a/src/js/components/Anchor/anchor.stories.js +++ b/src/js/components/Anchor/anchor.stories.js @@ -9,26 +9,26 @@ import { grommet } from 'grommet/themes'; storiesOf('Anchor', module) .add('Default', () => ( - Link + Link )) .add('Colors', () => ( - - } href='#' /> - } label='Add' href='#' /> - + + } href="#" /> + } label="Add" href="#" /> + - - } href='#' /> - } label='Add' href='#' /> - } label='Add' href='#' /> - + + } href="#" /> + } label="Add" href="#" /> + } label="Add" href="#" /> + )) .add('Inline', () => ( - This is with surrounding text. + This is with surrounding text. )); diff --git a/src/js/components/Anchor/doc.js b/src/js/components/Anchor/doc.js index 9c16f73643a..f3ac04a65a0 100644 --- a/src/js/components/Anchor/doc.js +++ b/src/js/components/Anchor/doc.js @@ -2,34 +2,42 @@ import { describe, PropTypes } from 'react-desc'; import { genericProps, getAvailableAtBadge } from '../../utils'; -export const doc = (Anchor) => { +export const doc = Anchor => { const DocumentedAnchor = describe(Anchor) .availableAt(getAvailableAtBadge('Anchor')) .description( `A text link. We have a separate component from the browser base so we can style it. You can either set the icon and/or label properties -or just use children.` +or just use children.`, ) .usage( - "import { Anchor } from 'grommet';\n" + "import { Anchor } from 'grommet';\n", ); DocumentedAnchor.propTypes = { ...genericProps, - a11yTitle: PropTypes.string.description('Custom title to be used by screen readers.'), + a11yTitle: PropTypes.string.description( + 'Custom title to be used by screen readers.', + ), color: PropTypes.string.description(` Label color and icon color, if not specified on the icon. `), - href: PropTypes.string.description('Hyperlink reference to place in the anchor.'), + href: PropTypes.string.description( + 'Hyperlink reference to place in the anchor.', + ), icon: PropTypes.element.description('Icon element to place in the anchor.'), label: PropTypes.node.description('Label text to place in the anchor.'), - onClick: PropTypes.func.description(`Click handler. It can be used, for example, + onClick: PropTypes.func + .description(`Click handler. It can be used, for example, to add analytics and track who clicked in the anchor.`), - primary: PropTypes.bool.description('Whether this is a primary anchor.') + primary: PropTypes.bool + .description('Whether this is a primary anchor.') + .defaultValue(false), + reverse: PropTypes.bool + .description( + 'Whether an icon and label should be reversed so that the icon is at the end of the anchor.', + ) .defaultValue(false), - reverse: PropTypes.bool.description( - 'Whether an icon and label should be reversed so that the icon is at the end of the anchor.' - ).defaultValue(false), }; return DocumentedAnchor; diff --git a/src/js/components/Anchor/index.js b/src/js/components/Anchor/index.js index 5f4f6f5aca4..a1948995031 100644 --- a/src/js/components/Anchor/index.js +++ b/src/js/components/Anchor/index.js @@ -1,2 +1 @@ - export { Anchor } from './Anchor'; diff --git a/src/js/components/Box/Box.js b/src/js/components/Box/Box.js index a112bb287ec..538ec317a1f 100644 --- a/src/js/components/Box/Box.js +++ b/src/js/components/Box/Box.js @@ -36,8 +36,10 @@ class Box extends Component { if (dark === propsTheme.dark && stateTheme) { return { theme: undefined, priorTheme: undefined }; } - if (dark !== propsTheme.dark - && (!stateTheme || dark !== stateTheme.dark || propsTheme !== priorTheme)) { + if ( + dark !== propsTheme.dark && + (!stateTheme || dark !== stateTheme.dark || propsTheme !== priorTheme) + ) { return { theme: { ...propsTheme, @@ -50,7 +52,7 @@ class Box extends Component { return null; } - state = {} + state = {}; render() { const { @@ -88,15 +90,15 @@ class Box extends Component { if (firstIndex === undefined) { firstIndex = index; } else { - contents.push(( + contents.push( - )); + />, + ); } } contents.push(child); diff --git a/src/js/components/Box/StyledBox.js b/src/js/components/Box/StyledBox.js index 176f2c13947..a45d7b28f01 100644 --- a/src/js/components/Box/StyledBox.js +++ b/src/js/components/Box/StyledBox.js @@ -1,8 +1,13 @@ import styled, { css, keyframes } from 'styled-components'; import { - backgroundStyle, breakpointStyle, edgeStyle, focusStyle, - genericStyles, normalizeColor, overflowStyle, + backgroundStyle, + breakpointStyle, + edgeStyle, + focusStyle, + genericStyles, + normalizeColor, + overflowStyle, } from '../../utils'; const ALIGN_MAP = { @@ -31,8 +36,8 @@ const alignContentStyle = css` `; const BASIS_MAP = { - 'auto': 'auto', - 'full': '100%', + auto: 'auto', + full: '100%', '1/2': '50%', '1/4': '25%', '2/4': '50%', @@ -42,8 +47,10 @@ const BASIS_MAP = { }; const basisStyle = css` - flex-basis: ${props => ( - BASIS_MAP[props.basis] || props.theme.global.size[props.basis] || props.basis)}; + flex-basis: ${props => + BASIS_MAP[props.basis] || + props.theme.global.size[props.basis] || + props.basis}; `; // min-width and min-height needed because of this @@ -51,28 +58,37 @@ const basisStyle = css` // we assume we are in the context of a Box going the other direction // TODO: revisit this const directionStyle = (direction, theme) => { - const styles = [css` - min-width: 0; - min-height: 0; - flex-direction: ${direction === 'row-responsive' ? 'row' : direction}; - `]; + const styles = [ + css` + min-width: 0; + min-height: 0; + flex-direction: ${direction === 'row-responsive' ? 'row' : direction}; + `, + ]; if (direction === 'row-responsive' && theme.box.responsiveBreakpoint) { const breakpoint = theme.global.breakpoints[theme.box.responsiveBreakpoint]; if (breakpoint) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` flex-direction: column; flex-basis: auto; justify-content: flex-start; align-items: stretch; - `)); + `, + ), + ); } } return styles; }; const elevationStyle = css` - box-shadow: ${props => ( - props.theme.global.elevation[(props.priorTheme || props.theme).dark ? 'dark' : 'light'][props.elevationProp])}; + box-shadow: ${props => + props.theme.global.elevation[ + (props.priorTheme || props.theme).dark ? 'dark' : 'light' + ][props.elevationProp]}; `; const FLEX_MAP = { @@ -83,12 +99,13 @@ const FLEX_MAP = { }; const flexStyle = css` - flex: ${props => ( - `${FLEX_MAP[props.flex]}${(props.flex !== true && !props.basis) ? ' auto' : ''}` - )}; + flex: ${props => + `${FLEX_MAP[props.flex]}${ + props.flex !== true && !props.basis ? ' auto' : '' + }`}; `; -const fillStyle = (fillProp) => { +const fillStyle = fillProp => { if (fillProp === 'horizontal') { return 'width: 100%;'; } @@ -121,18 +138,32 @@ const borderStyle = (data, responsive, theme) => { const styles = []; const color = normalizeColor(data.color || 'border', theme); const borderSize = data.size || 'xsmall'; - const side = (typeof data === 'string') ? data : data.side || 'all'; - const value = `solid ${theme.global.borderSize[borderSize] || borderSize} ${color}`; - const breakpoint = theme.box.responsiveBreakpoint - && theme.global.breakpoints[theme.box.responsiveBreakpoint]; - const responsiveValue = breakpoint && (breakpoint.borderSize[borderSize] || borderSize) - && `solid ${breakpoint.borderSize[borderSize] || borderSize} ${color}`; - if (side === 'top' || side === 'bottom' || side === 'left' || side === 'right') { + const side = typeof data === 'string' ? data : data.side || 'all'; + const value = `solid ${theme.global.borderSize[borderSize] || + borderSize} ${color}`; + const breakpoint = + theme.box.responsiveBreakpoint && + theme.global.breakpoints[theme.box.responsiveBreakpoint]; + const responsiveValue = + breakpoint && + (breakpoint.borderSize[borderSize] || borderSize) && + `solid ${breakpoint.borderSize[borderSize] || borderSize} ${color}`; + if ( + side === 'top' || + side === 'bottom' || + side === 'left' || + side === 'right' + ) { styles.push(css`border-${side}: ${value};`); if (responsiveValue) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-${side}: ${responsiveValue}; - `)); + `, + ), + ); } } else if (side === 'vertical') { styles.push(css` @@ -140,10 +171,15 @@ const borderStyle = (data, responsive, theme) => { border-right: ${value}; `); if (responsiveValue) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-left: ${responsiveValue}; border-right: ${responsiveValue}; - `)); + `, + ), + ); } } else if (side === 'horizontal') { styles.push(css` @@ -151,13 +187,22 @@ const borderStyle = (data, responsive, theme) => { border-bottom: ${value}; `); if (responsiveValue) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-top: ${responsiveValue}; border-bottom: ${responsiveValue}; - `)); + `, + ), + ); } } else { - styles.push(css`border: ${value};`); + styles.push( + css` + border: ${value}; + `, + ); if (responsiveValue) { styles.push(breakpointStyle(breakpoint, `border: ${responsiveValue};`)); } @@ -166,28 +211,36 @@ const borderStyle = (data, responsive, theme) => { }; const ROUND_MAP = { - 'full': '100%', + full: '100%', }; const roundStyle = (data, responsive, theme) => { - const breakpoint = theme.box.responsiveBreakpoint - && theme.global.breakpoints[theme.box.responsiveBreakpoint]; + const breakpoint = + theme.box.responsiveBreakpoint && + theme.global.breakpoints[theme.box.responsiveBreakpoint]; const styles = []; if (typeof data === 'object') { - const size = ROUND_MAP[data.size] - || theme.global.edgeSize[data.size || 'medium']; - const responsiveSize = breakpoint && breakpoint.edgeSize[data.size] - && breakpoint.edgeSize[data.size]; + const size = + ROUND_MAP[data.size] || theme.global.edgeSize[data.size || 'medium']; + const responsiveSize = + breakpoint && + breakpoint.edgeSize[data.size] && + breakpoint.edgeSize[data.size]; if (data.corner === 'top') { styles.push(css` border-top-left-radius: ${size}; border-top-right-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-top-left-radius: ${responsiveSize}; border-top-right-radius: ${responsiveSize}; - `)); + `, + ), + ); } } else if (data.corner === 'bottom') { styles.push(css` @@ -195,10 +248,15 @@ const roundStyle = (data, responsive, theme) => { border-bottom-right-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-bottom-left-radius: ${responsiveSize}; border-bottom-right-radius: ${responsiveSize}; - `)); + `, + ), + ); } } else if (data.corner === 'left') { styles.push(css` @@ -206,10 +264,15 @@ const roundStyle = (data, responsive, theme) => { border-bottom-left-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-top-left-radius: ${responsiveSize}; border-bottom-left-radius: ${responsiveSize}; - `)); + `, + ), + ); } } else if (data.corner === 'right') { styles.push(css` @@ -217,28 +280,43 @@ const roundStyle = (data, responsive, theme) => { border-bottom-right-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-top-right-radius: ${responsiveSize}; border-bottom-right-radius: ${responsiveSize}; - `)); + `, + ), + ); } } else if (data.corner) { styles.push(css` border-${data.corner}-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-${data.corner}-radius: ${responsiveSize}; - `)); + `, + ), + ); } } else { styles.push(css` border-radius: ${size}; `); if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-radius: ${responsiveSize}; - `)); + `, + ), + ); } } } else { @@ -248,9 +326,14 @@ const roundStyle = (data, responsive, theme) => { `); const responsiveSize = breakpoint && breakpoint.edgeSize[size]; if (responsiveSize) { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` border-radius: ${responsiveSize}; - `)); + `, + ), + ); } } return styles; @@ -309,16 +392,28 @@ const animationBounds = (type, size = 'medium') => { return ['transform: rotateY(0);', 'transform: rotateY(90deg);']; } if (type === 'slideDown') { - return [`transform: translateY(-${SLIDE_SIZES[size]}%);`, 'transform: none;']; + return [ + `transform: translateY(-${SLIDE_SIZES[size]}%);`, + 'transform: none;', + ]; } if (type === 'slideLeft') { - return [`transform: translateX(${SLIDE_SIZES[size]}%);`, 'transform: none;']; + return [ + `transform: translateX(${SLIDE_SIZES[size]}%);`, + 'transform: none;', + ]; } if (type === 'slideRight') { - return [`transform: translateX(-${SLIDE_SIZES[size]}%);`, 'transform: none;']; + return [ + `transform: translateX(-${SLIDE_SIZES[size]}%);`, + 'transform: none;', + ]; } if (type === 'slideUp') { - return [`transform: translateY(${SLIDE_SIZES[size]}%);`, 'transform: none;']; + return [ + `transform: translateY(${SLIDE_SIZES[size]}%);`, + 'transform: none;', + ]; } if (type === 'zoomIn') { return [`transform: scale(${1 - ZOOM_SIZES[size]});`, 'transform: none;']; @@ -329,9 +424,10 @@ const animationBounds = (type, size = 'medium') => { return []; }; -const normalizeTiming = (time, defaultTiming) => (time ? `${time / 1000.0}s` : defaultTiming); +const normalizeTiming = (time, defaultTiming) => + time ? `${time / 1000.0}s` : defaultTiming; -const animationEnding = (type) => { +const animationEnding = type => { if (type === 'jiggle') { return 'alternate infinite'; } @@ -344,12 +440,21 @@ const animationEnding = (type) => { const animationObjectStyle = (animation, theme) => { const bounds = animationBounds(animation.type, animation.size); if (bounds) { - const animationTransition = css`from { ${bounds[0]} } to { ${bounds[1]} }`; + const animationTransition = css` + from { + ${bounds[0]}; + } + to { + ${bounds[1]}; + } + `; return css`${keyframes`${animationTransition}`} - ${normalizeTiming(animation.duration, + ${normalizeTiming( + animation.duration, (theme.global.animation[animation.type] - ? theme.global.animation[animation.type].duration : undefined) - || theme.global.animation.duration)} + ? theme.global.animation[animation.type].duration + : undefined) || theme.global.animation.duration, + )} ${normalizeTiming(animation.delay, '0s')} ${animationEnding(animation.type)}`; } @@ -358,27 +463,29 @@ const animationObjectStyle = (animation, theme) => { const animationItemStyle = (item, theme) => { if (typeof item === 'string') { - return css`${animationObjectStyle({ type: item }, theme)}`; + return animationObjectStyle({ type: item }, theme); } if (Array.isArray(item)) { - return item.reduce((style, a, index) => ( - css`${style}${index > 0 ? ',' : ''} ${animationItemStyle(a, theme)}` - ), ''); + return item.reduce( + (style, a, index) => + css`${style}${index > 0 ? ',' : ''} ${animationItemStyle(a, theme)}`, + '', + ); } if (typeof item === 'object') { - return css`${animationObjectStyle(item, theme)}`; + return animationObjectStyle(item, theme); } return ''; }; -const animationAncilaries = (animation) => { +const animationAncilaries = animation => { if (animation.type === 'flipIn' || animation.type === 'flipOut') { return 'perspective: 1000px; transform-style: preserve-3d;'; } return ''; }; -const animationObjectInitialStyle = (animation) => { +const animationObjectInitialStyle = animation => { const bounds = animationBounds(animation.type, animation.size); if (bounds) { return `${bounds[0]} ${animationAncilaries(animation)}`; @@ -386,16 +493,19 @@ const animationObjectInitialStyle = (animation) => { return ''; }; -const animationInitialStyle = (item) => { +const animationInitialStyle = item => { if (typeof item === 'string') { return animationObjectInitialStyle({ type: item }); } if (Array.isArray(item)) { - return item.map(a => ( - typeof a === 'string' - ? animationObjectInitialStyle({ type: a }) - : animationObjectInitialStyle(a) - )).join(''); + return item + .map( + a => + typeof a === 'string' + ? animationObjectInitialStyle({ type: a }) + : animationObjectInitialStyle(a), + ) + .join(''); } if (typeof item === 'object') { return animationObjectInitialStyle(item); @@ -407,7 +517,7 @@ const animationStyle = css` ${props => css` ${animationInitialStyle(props.animation)} animation: ${animationItemStyle(props.animation, props.theme)}; - `} + `}; `; // NOTE: basis must be after flex! Otherwise, flex overrides basis @@ -418,25 +528,34 @@ export const StyledBox = styled.div` ${props => !props.basis && 'max-width: 100%;'}; ${genericStyles} - ${props => props.heightProp - && `height: ${props.theme.global.size[props.heightProp] || props.heightProp};`} - ${props => props.widthProp - && `width: ${props.theme.global.size[props.widthProp] || props.widthProp};`} + ${props => + props.heightProp && + `height: ${props.theme.global.size[props.heightProp] || props.heightProp};`} + ${props => + props.widthProp && + `width: ${props.theme.global.size[props.widthProp] || props.widthProp};`} ${props => props.align && alignStyle} ${props => props.alignContent && alignContentStyle} ${props => props.background && backgroundStyle(props.background, props.theme)} - ${props => props.border - && borderStyle(props.border, props.responsive, props.theme)} - ${props => props.directionProp - && directionStyle(props.directionProp, props.theme)} + ${props => + props.border && borderStyle(props.border, props.responsive, props.theme)} + ${props => + props.directionProp && directionStyle(props.directionProp, props.theme)} ${props => props.flex !== undefined && flexStyle} ${props => props.basis && basisStyle} ${props => props.fillProp && fillStyle(props.fillProp)} ${props => props.justify && justifyStyle} - ${props => (props.pad - && edgeStyle('padding', props.pad, props.responsive, - props.theme.box.responsiveBreakpoint, props.theme))} - ${props => props.round && roundStyle(props.round, props.responsive, props.theme)} + ${props => + props.pad && + edgeStyle( + 'padding', + props.pad, + props.responsive, + props.theme.box.responsiveBreakpoint, + props.theme, + )} + ${props => + props.round && roundStyle(props.round, props.responsive, props.theme)} ${props => props.wrapProp && wrapStyle} ${props => props.overflowProp && overflowStyle(props.overflowProp)} ${props => props.elevationProp && elevationStyle} @@ -446,23 +565,33 @@ export const StyledBox = styled.div` `; const gapStyle = (directionProp, gap, responsive, theme) => { - const breakpoint = theme.box.responsiveBreakpoint - && theme.global.breakpoints[theme.box.responsiveBreakpoint]; - const responsiveSize = breakpoint && breakpoint.edgeSize[gap] - && breakpoint.edgeSize[gap]; + const breakpoint = + theme.box.responsiveBreakpoint && + theme.global.breakpoints[theme.box.responsiveBreakpoint]; + const responsiveSize = + breakpoint && breakpoint.edgeSize[gap] && breakpoint.edgeSize[gap]; const styles = []; if (directionProp === 'column') { - styles.push(css`height: ${theme.global.edgeSize[gap]};`); + styles.push( + css` + height: ${theme.global.edgeSize[gap]}; + `, + ); if (responsiveSize) { styles.push(breakpointStyle(breakpoint, `height: ${responsiveSize};`)); } } else { styles.push(`width: ${theme.global.edgeSize[gap]};`); if (responsive && directionProp === 'row-responsive') { - styles.push(breakpointStyle(breakpoint, ` + styles.push( + breakpointStyle( + breakpoint, + ` width: auto; height: ${responsiveSize}; - `)); + `, + ), + ); } } return styles; @@ -470,6 +599,7 @@ const gapStyle = (directionProp, gap, responsive, theme) => { export const StyledBoxGap = styled.div` flex: 0 0 auto; - ${props => props.gap - && gapStyle(props.directionProp, props.gap, props.responsive, props.theme)}; + ${props => + props.gap && + gapStyle(props.directionProp, props.gap, props.responsive, props.theme)}; `; diff --git a/src/js/components/Box/__tests__/Box-test.js b/src/js/components/Box/__tests__/Box-test.js index a79ccdb5bcc..95e0de9e5f7 100644 --- a/src/js/components/Box/__tests__/Box-test.js +++ b/src/js/components/Box/__tests__/Box-test.js @@ -10,7 +10,7 @@ describe('Box', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -19,10 +19,10 @@ describe('Box', () => { test('direction', () => { const component = renderer.create( - - - - + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -33,7 +33,7 @@ describe('Box', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -44,7 +44,7 @@ describe('Box', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -53,11 +53,11 @@ describe('Box', () => { test('justify', () => { const component = renderer.create( - - - - - + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -66,12 +66,12 @@ describe('Box', () => { test('align', () => { const component = renderer.create( - - - - - - + + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -80,13 +80,13 @@ describe('Box', () => { test('alignContent', () => { const component = renderer.create( - - - - - - - + + + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -95,11 +95,11 @@ describe('Box', () => { test('alignSelf', () => { const component = renderer.create( - - - - - + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -108,38 +108,42 @@ describe('Box', () => { test('background', () => { const component = renderer.create( - - - - - - - + + + + + + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -149,28 +153,28 @@ describe('Box', () => { const component = renderer.create( - - - - - + + + + + - - + + - - - + + + - - - + + + - - - + + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -182,10 +186,10 @@ describe('Box', () => { - - + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -197,10 +201,10 @@ describe('Box', () => { - - + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -210,11 +214,11 @@ describe('Box', () => { const component = renderer.create( {['xsmall', 'small', 'medium', 'large'].map(gap => ( - + ))} - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -223,16 +227,16 @@ describe('Box', () => { test('margin', () => { const component = renderer.create( - - - + + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -241,16 +245,16 @@ describe('Box', () => { test('pad', () => { const component = renderer.create( - - - + + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -259,8 +263,8 @@ describe('Box', () => { test('gridArea', () => { const component = renderer.create( - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -270,11 +274,11 @@ describe('Box', () => { const component = renderer.create( - - - - - + + + + + @@ -288,7 +292,7 @@ describe('Box', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -297,13 +301,13 @@ describe('Box', () => { test('border', () => { const component = renderer.create( - - - - - - - + + + + + + + @@ -311,7 +315,7 @@ describe('Box', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -320,16 +324,16 @@ describe('Box', () => { test('elevation', () => { const component = renderer.create( - - - - - - - - + + + + + + + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -338,8 +342,8 @@ describe('Box', () => { test('tag', () => { const component = renderer.create( - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -348,9 +352,20 @@ describe('Box', () => { test('animation', () => { const component = renderer.create( - {['fadeIn', 'fadeOut', 'jiggle', 'pulse', - 'slideUp', 'slideDown', 'slideLeft', 'slideRight', - 'zoomIn', 'zoomOut'].map(type => )} + {[ + 'fadeIn', + 'fadeOut', + 'jiggle', + 'pulse', + 'slideUp', + 'slideDown', + 'slideLeft', + 'slideRight', + 'zoomIn', + 'zoomOut', + ].map(type => ( + + ))} { { type: 'slideUp', duration: 1000, delay: 500 }, ]} /> - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -368,13 +383,13 @@ describe('Box', () => { test('width', () => { const component = renderer.create( - - - - - - - + + + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -383,13 +398,13 @@ describe('Box', () => { test('height', () => { const component = renderer.create( - - - - - - - + + + + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/js/components/Box/__tests__/__snapshots__/Box-test.js.snap b/src/js/components/Box/__tests__/__snapshots__/Box-test.js.snap index 13f828c2633..bbfbbc327e5 100644 --- a/src/js/components/Box/__tests__/__snapshots__/Box-test.js.snap +++ b/src/js/components/Box/__tests__/__snapshots__/Box-test.js.snap @@ -608,8 +608,8 @@ exports[`Box animation 1`] = ` flex-direction: column; padding: 0px; opacity: 0; - -webkit-animation: dHUfhi 1s 0s forwards; - animation: dHUfhi 1s 0s forwards; + -webkit-animation: dYVibJ 1s 0s forwards; + animation: dYVibJ 1s 0s forwards; } .c2 { @@ -628,8 +628,8 @@ exports[`Box animation 1`] = ` flex-direction: column; padding: 0px; opacity: 1; - -webkit-animation: gmgyXe 1s 0s forwards; - animation: gmgyXe 1s 0s forwards; + -webkit-animation: iyuEas 1s 0s forwards; + animation: iyuEas 1s 0s forwards; } .c3 { @@ -650,8 +650,8 @@ exports[`Box animation 1`] = ` -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); - -webkit-animation: cbiWfb 0.1s 0s alternate infinite; - animation: cbiWfb 0.1s 0s alternate infinite; + -webkit-animation: kQKxbX 0.1s 0s alternate infinite; + animation: kQKxbX 0.1s 0s alternate infinite; } .c4 { @@ -672,8 +672,8 @@ exports[`Box animation 1`] = ` -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); - -webkit-animation: ipKHns 1s 0s alternate infinite; - animation: ipKHns 1s 0s alternate infinite; + -webkit-animation: dVaADA 1s 0s alternate infinite; + animation: dVaADA 1s 0s alternate infinite; } .c5 { @@ -694,8 +694,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); - -webkit-animation: fBAycS 1s 0s forwards; - animation: fBAycS 1s 0s forwards; + -webkit-animation: fucJFq 1s 0s forwards; + animation: fucJFq 1s 0s forwards; } .c6 { @@ -716,8 +716,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateY(-10%); -ms-transform: translateY(-10%); transform: translateY(-10%); - -webkit-animation: iGTGXr 1s 0s forwards; - animation: iGTGXr 1s 0s forwards; + -webkit-animation: cQDPnb 1s 0s forwards; + animation: cQDPnb 1s 0s forwards; } .c7 { @@ -738,8 +738,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); - -webkit-animation: zHfFU 1s 0s forwards; - animation: zHfFU 1s 0s forwards; + -webkit-animation: djcjCU 1s 0s forwards; + animation: djcjCU 1s 0s forwards; } .c8 { @@ -760,8 +760,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateX(-10%); -ms-transform: translateX(-10%); transform: translateX(-10%); - -webkit-animation: jbclMb 1s 0s forwards; - animation: jbclMb 1s 0s forwards; + -webkit-animation: kDJvsp 1s 0s forwards; + animation: kDJvsp 1s 0s forwards; } .c9 { @@ -782,8 +782,8 @@ exports[`Box animation 1`] = ` -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); - -webkit-animation: gEDhLs 1s 0s forwards; - animation: gEDhLs 1s 0s forwards; + -webkit-animation: dOplna 1s 0s forwards; + animation: dOplna 1s 0s forwards; } .c10 { @@ -804,8 +804,8 @@ exports[`Box animation 1`] = ` -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); - -webkit-animation: cWVKP 1s 0s forwards; - animation: cWVKP 1s 0s forwards; + -webkit-animation: dkitsZ 1s 0s forwards; + animation: dkitsZ 1s 0s forwards; } .c11 { @@ -827,8 +827,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); - -webkit-animation: dHUfhi 1s 0s forwards,fBAycS 1s 0s forwards; - animation: dHUfhi 1s 0s forwards,fBAycS 1s 0s forwards; + -webkit-animation: dYVibJ 1s 0s forwards,fucJFq 1s 0s forwards; + animation: dYVibJ 1s 0s forwards,fucJFq 1s 0s forwards; } .c12 { @@ -847,8 +847,8 @@ exports[`Box animation 1`] = ` flex-direction: column; padding: 0px; opacity: 0; - -webkit-animation: dHUfhi 1s 0.5s forwards; - animation: dHUfhi 1s 0.5s forwards; + -webkit-animation: dYVibJ 1s 0.5s forwards; + animation: dYVibJ 1s 0.5s forwards; } .c13 { @@ -870,8 +870,8 @@ exports[`Box animation 1`] = ` -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); - -webkit-animation: dHUfhi 1s 0.5s forwards,fBAycS 1s 0.5s forwards; - animation: dHUfhi 1s 0.5s forwards,fBAycS 1s 0.5s forwards; + -webkit-animation: dYVibJ 1s 0.5s forwards,fucJFq 1s 0.5s forwards; + animation: dYVibJ 1s 0.5s forwards,fucJFq 1s 0.5s forwards; } @media only screen and (max-width:768px) { diff --git a/src/js/components/Box/box.stories.js b/src/js/components/Box/box.stories.js index b629a50bd2c..58bc7cb0c11 100644 --- a/src/js/components/Box/box.stories.js +++ b/src/js/components/Box/box.stories.js @@ -2,44 +2,36 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { Attraction, Car } from 'grommet-icons'; -import { - Grommet, Anchor, Box, Button, Grid, Text, -} from '..'; +import { Grommet, Anchor, Box, Button, Grid, Text } from '..'; import { grommet } from '../../themes'; const SimpleBox = () => ( - + Party - - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); - expect(warnSpy).toHaveBeenCalledWith('Button should not have children if icon or label is provided'); + expect(warnSpy).toHaveBeenCalledWith( + 'Button should not have children if icon or label is provided', + ); warnSpy.mockReset(); warnSpy.mockRestore(); @@ -34,12 +38,16 @@ test('Button warns about invalid icon render', () => { const warnSpy = jest.spyOn(console, 'warn'); const component = renderer.create( - - + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); - expect(warnSpy).toHaveBeenCalledWith('Button should not have children if icon or label is provided'); + expect(warnSpy).toHaveBeenCalledWith( + 'Button should not have children if icon or label is provided', + ); warnSpy.mockReset(); warnSpy.mockRestore(); @@ -48,8 +56,8 @@ test('Button warns about invalid icon render', () => { test('Button primary renders', () => { const component = renderer.create( - - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -141,7 +144,7 @@ test('Button hoverIndicator as object renders', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -153,7 +156,7 @@ test('Button hoverIndicator as object with color renders', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -165,7 +168,7 @@ test('Button hoverIndicator as object with colorIndex renders', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -177,7 +180,7 @@ test('Button hoverIndicator as object with invalid color renders', () => { - + , ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -186,7 +189,7 @@ test('Button hoverIndicator as object with invalid color renders', () => { - + , ); tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -198,7 +201,7 @@ test('Button hoverIndicator as object with invalid colorIndex renders', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -208,8 +211,8 @@ test('Button is clickable', () => { const onClick = jest.fn(); const component = renderer.create( - - + , ); } day = addDays(day, 1); } - weeks.push(( - {days} - )); + weeks.push( + + {days} + , + ); return ( { + onUp={event => { event.preventDefault(); this.setFocus(addDays(focused, -7)); }} - onDown={(event) => { + onDown={event => { event.preventDefault(); this.setFocus(addDays(focused, 7)); }} @@ -347,18 +368,16 @@ class Calendar extends Component { onRight={() => this.setFocus(addDays(focused, 1))} > - {header ? ( - header({ - date: reference, - locale, - onPreviousMonth: () => this.setReference(previousMonth), - onNextMonth: () => this.setReference(nextMonth), - previousInBound: betweenDates(previousMonth, bounds), - nextInBound: betweenDates(nextMonth, bounds), - }) - ) : ( - this.renderCalendarHeader(previousMonth, nextMonth) - )} + {header + ? header({ + date: reference, + locale, + onPreviousMonth: () => this.setReference(previousMonth), + onNextMonth: () => this.setReference(nextMonth), + previousInBound: betweenDates(previousMonth, bounds), + nextInBound: betweenDates(nextMonth, bounds), + }) + : this.renderCalendarHeader(previousMonth, nextMonth)} {weeks} @@ -375,8 +394,6 @@ let CalendarDoc; if (process.env.NODE_ENV !== 'production') { CalendarDoc = require('./doc').doc(Calendar); // eslint-disable-line global-require } -const CalendarWrapper = compose( - withTheme, -)(CalendarDoc || Calendar); +const CalendarWrapper = compose(withTheme)(CalendarDoc || Calendar); export { CalendarWrapper as Calendar }; diff --git a/src/js/components/Calendar/StyledCalendar.js b/src/js/components/Calendar/StyledCalendar.js index e56378b1c4b..bcd1e3c10b4 100644 --- a/src/js/components/Calendar/StyledCalendar.js +++ b/src/js/components/Calendar/StyledCalendar.js @@ -1,7 +1,7 @@ import styled, { css, keyframes } from 'styled-components'; import { backgroundStyle, genericStyles, parseMetricToNum } from '../../utils'; -const sizeStyle = (props) => { +const sizeStyle = props => { const data = props.theme.calendar[props.sizeProp]; return css` font-size: ${data.fontSize}; @@ -16,32 +16,40 @@ export const StyledCalendar = styled.div` ${props => props.theme.calendar && props.theme.calendar.extend} `; - export const StyledWeeksContainer = styled.div` overflow: hidden; - ${props => `height: ${parseMetricToNum(props.theme.calendar[props.sizeProp].daySize) * 6}px;`} + ${props => + `height: ${parseMetricToNum(props.theme.calendar[props.sizeProp].daySize) * + 6}px;`}; `; -const slideStyle = (props) => { - const { slide: { direction, weeks }, sizeProp, theme } = props; +const slideStyle = props => { + const { + slide: { direction, weeks }, + sizeProp, + theme, + } = props; const { daySize, slideDuration } = theme.calendar[sizeProp]; const amount = parseMetricToNum(daySize) * weeks; const translateYFrom = direction === 'down' ? `-${amount}px` : '0'; const translateYTo = direction === 'up' ? `-${amount}px` : '0'; const slideTransition = css` - 0% { transform: translateY(${translateYFrom}) } - 100% { transform: translateY(${translateYTo}) } + 0% { + transform: translateY(${translateYFrom}); + } + 100% { + transform: translateY(${translateYTo}); + } `; return css` - animation: ${keyframes`${slideTransition}`} - ${slideDuration} forwards; + animation: ${keyframes`${slideTransition}`} ${slideDuration} forwards; `; }; export const StyledWeeks = styled.div` position: relative; - ${props => props.slide && slideStyle(props)} + ${props => props.slide && slideStyle(props)}; `; export const StyledWeek = styled.div` @@ -54,7 +62,7 @@ export const StyledDayContainer = styled.div` flex: 0 0 auto; `; -const daySizeStyle = (props) => { +const daySizeStyle = props => { const data = props.theme.calendar[props.sizeProp]; return css` width: ${data.daySize}; @@ -67,9 +75,10 @@ export const StyledDay = styled.div` justify-content: center; align-items: center; ${props => daySizeStyle(props)} - ${props => (props.isSelected && backgroundStyle('control', props.theme)) - || (props.inRange - && backgroundStyle({ color: 'control', opacity: 'weak' }, props.theme))} + ${props => + (props.isSelected && backgroundStyle('control', props.theme)) || + (props.inRange && + backgroundStyle({ color: 'control', opacity: 'weak' }, props.theme))} ${props => props.otherMonth && 'opacity: 0.5;'} ${props => props.isSelected && 'font-weight: bold;'} `; diff --git a/src/js/components/Calendar/__tests__/Calendar-test.js b/src/js/components/Calendar/__tests__/Calendar-test.js index 96a6557a105..3355834cb99 100644 --- a/src/js/components/Calendar/__tests__/Calendar-test.js +++ b/src/js/components/Calendar/__tests__/Calendar-test.js @@ -3,9 +3,7 @@ import renderer from 'react-test-renderer'; import 'jest-styled-components'; import { FormNextLink, FormPreviousLink } from 'grommet-icons'; -import { - Box, Button, Calendar, Grommet, Text, -} from '../..'; +import { Box, Button, Calendar, Grommet, Text } from '../..'; const DATE = '2018-01-15T00:00:00-08:00'; const DATES = [ @@ -19,7 +17,7 @@ describe('Calendar', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -29,7 +27,7 @@ describe('Calendar', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -38,10 +36,10 @@ describe('Calendar', () => { test('size', () => { const component = renderer.create( - - - - + + + + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -52,7 +50,7 @@ describe('Calendar', () => { - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -62,7 +60,7 @@ describe('Calendar', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -73,41 +71,39 @@ describe('Calendar', () => { {}} - size='small' + size="small" bounds={['2018-09-08', '2018-12-13']} header={({ - date, locale, onPreviousMonth, onNextMonth, previousInBound, nextInBound, + date, + locale, + onPreviousMonth, + onNextMonth, + previousInBound, + nextInBound, }) => ( - - - + - { - date.toLocaleDateString( - locale, - { month: 'long', year: 'numeric' } - ) - } + {date.toLocaleDateString(locale, { + month: 'long', + year: 'numeric', + })} - - )} /> - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/js/components/Calendar/calendar.stories.js b/src/js/components/Calendar/calendar.stories.js index ad28a577500..9c55302ff7e 100644 --- a/src/js/components/Calendar/calendar.stories.js +++ b/src/js/components/Calendar/calendar.stories.js @@ -1,28 +1,35 @@ import React, { Component } from 'react'; import { storiesOf } from '@storybook/react'; -import { - Box, Button, Calendar, Grommet, Heading, Text, -} from 'grommet'; +import { Box, Button, Calendar, Grommet, Heading, Text } from 'grommet'; import { grommet } from 'grommet/themes'; import { - Blank, FormPreviousLink, FormNextLink, Previous, Next, + Blank, + FormPreviousLink, + FormNextLink, + Previous, + Next, } from 'grommet-icons'; class SimpleCalendar extends Component { - state = {} + state = {}; - onSelect = (nextDate) => { + onSelect = nextDate => { const { date } = this.state; - this.setState({ date: (nextDate !== date ? nextDate : undefined) }); - } + this.setState({ date: nextDate !== date ? nextDate : undefined }); + }; render() { const { date } = this.state; return ( - + ); } @@ -42,23 +49,21 @@ class DualCalendar extends Component { state = { reference1: now, reference2: next, - } + }; - onSelect = (arg) => { + onSelect = arg => { if (Array.isArray(arg)) { this.setState({ date: undefined, dates: arg }); } else { this.setState({ date: arg, dates: undefined }); } - } + }; render() { - const { - date, dates, reference1, reference2, - } = this.state; + const { date, dates, reference1, reference2 } = this.state; return ( - + { + onReference={reference => { const refDate = new Date(reference); const nextDate = new Date(refDate); nextDate.setMonth(refDate.getMonth() + 1, 1); @@ -77,16 +82,22 @@ class DualCalendar extends Component { }); }} header={({ - date: currentDate, locale, onPreviousMonth, previousInBound, + date: currentDate, + locale, + onPreviousMonth, + previousInBound, }) => ( - + - - {currentDate.toLocaleDateString(locale, { month: 'long', year: 'numeric' })} + + + {currentDate.toLocaleDateString(locale, { + month: 'long', + year: 'numeric', + })} + - - )} /> diff --git a/src/js/components/Calendar/doc.js b/src/js/components/Calendar/doc.js index 1b87305cf04..e7fea42ff2e 100644 --- a/src/js/components/Calendar/doc.js +++ b/src/js/components/Calendar/doc.js @@ -2,37 +2,45 @@ import { describe, PropTypes } from 'react-desc'; import { genericProps, getAvailableAtBadge } from '../../utils'; -export const doc = (Calendar) => { +export const doc = Calendar => { const DocumentedCalendar = describe(Calendar) .availableAt(getAvailableAtBadge('Calendar')) - .description(`Calendar of days in months. + .description( + `Calendar of days in months. It can be used to select a single date, a range of dates, or multiple - individual dates.`) + individual dates.`, + ) .usage( `import { Calendar } from 'grommet'; -` +`, ); DocumentedCalendar.propTypes = { ...genericProps, - animate: PropTypes.bool.description(` + animate: PropTypes.bool + .description( + ` Whether to animate the calender as the user interacts with it. - `).defaultValue(true), + `, + ) + .defaultValue(true), bounds: PropTypes.arrayOf(PropTypes.string) .description(`An array of two numbers indicating the limits on navigation in ISO8601 format`), date: PropTypes.string.description('The selected date in ISO8601 format'), - dates: PropTypes.arrayOf(PropTypes.oneOfType([ - PropTypes.string, - PropTypes.arrayOf(PropTypes.string), - ])) - .description(`Multiple selected dates in ISO8601 format. + dates: PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.string, + PropTypes.arrayOf(PropTypes.string), + ]), + ).description(`Multiple selected dates in ISO8601 format. Items that are an array indicate a range of dates.`), - disabled: PropTypes.arrayOf(PropTypes.oneOfType([ - PropTypes.string, - PropTypes.arrayOf(PropTypes.string), - ])) - .description(`Multiple dates in ISO8601 format that should not be + disabled: PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.string, + PropTypes.arrayOf(PropTypes.string), + ]), + ).description(`Multiple dates in ISO8601 format that should not be selectable. Items that are an array indicate a range of dates.`), firstDayOfWeek: PropTypes.oneOf([0, 1]) .description('The first day of the week. 0 for Sunday. 1 for Monday.') @@ -55,9 +63,10 @@ The function passes the following options: \`onPreviousMonth\` and \`onNextMonth\` are callbacks that will tell the calendar to move between months. \`previousInBound\` and \`nextInBound\` are booleans that tell, when using \`bounds\`, if the current date is within that range. You can then use that to disable the previous and next buttons. -` +`, ), - locale: PropTypes.string.description('The locale to use.') + locale: PropTypes.string + .description('The locale to use.') .defaultValue('en-US'), onReference: PropTypes.func.description(` Called with an ISO8601 date when the user navigates to a different month. @@ -67,21 +76,31 @@ You can then use that to disable the previous and next buttons. For single select, make this the subsequent \`date\` property value. For multiple select or ranges, toggle values in \`dates\`. Not specifying this property makes the component read only.`), - range: PropTypes.bool.description(` + range: PropTypes.bool + .description( + ` Whether to automatically manage multiple date selection as a range. When the user clicks the first date, onSelect will be called with that date. When the user selects another date, onSelect will be called with an array of two dates. - `).defaultValue(false), - reference: PropTypes.string - .description('The date to show if `date` isn\'t set, in ISO8601 format'), - showAdjacentDays: PropTypes.bool.description(` + `, + ) + .defaultValue(false), + reference: PropTypes.string.description( + "The date to show if `date` isn't set, in ISO8601 format", + ), + showAdjacentDays: PropTypes.bool + .description( + ` Whether to show the days from the previous and next months. - `).defaultValue(true), + `, + ) + .defaultValue(true), size: PropTypes.oneOfType([ PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string, - ]).description('What size to make it.') + ]) + .description('What size to make it.') .defaultValue('medium'), }; diff --git a/src/js/components/Calendar/index.js b/src/js/components/Calendar/index.js index 710420fd11e..52fb530808f 100644 --- a/src/js/components/Calendar/index.js +++ b/src/js/components/Calendar/index.js @@ -1,2 +1 @@ - export { Calendar } from './Calendar'; diff --git a/src/js/components/Calendar/utils.js b/src/js/components/Calendar/utils.js index 9df535d882d..7d68eef22fa 100644 --- a/src/js/components/Calendar/utils.js +++ b/src/js/components/Calendar/utils.js @@ -1,11 +1,10 @@ - // Utility functions for the Calendar. // Just what's needed to avoid having to include a dependency like momentjs. const DAY_MILLISECONDS = 24 * 60 * 60 * 1000; -export const addDays = (date, days) => ( - (new Date(date.getTime() + (DAY_MILLISECONDS * days)))); +export const addDays = (date, days) => + new Date(date.getTime() + DAY_MILLISECONDS * days); export const subtractDays = (date, days) => addDays(date, -days); @@ -14,50 +13,45 @@ export const addMonths = (date, months) => { const years = Math.floor((date.getMonth() + months) / 12); result.setFullYear(date.getFullYear() + years); const targetMonth = (date.getMonth() + months) % 12; - result.setMonth(targetMonth < 0 ? (12 + targetMonth) : targetMonth); + result.setMonth(targetMonth < 0 ? 12 + targetMonth : targetMonth); return result; }; export const subtractMonths = (date, months) => addMonths(date, -months); -export const startOfMonth = (date) => { +export const startOfMonth = date => { const result = new Date(date); result.setDate(1); return result; }; -export const endOfMonth = (date) => { +export const endOfMonth = date => { const result = addMonths(date, 1); result.setDate(0); return result; }; -export const sameDay = (date1, date2) => ( - date1.getFullYear() === date2.getFullYear() - && date1.getMonth() === date2.getMonth() - && date1.getDate() === date2.getDate() -); +export const sameDay = (date1, date2) => + date1.getFullYear() === date2.getFullYear() && + date1.getMonth() === date2.getMonth() && + date1.getDate() === date2.getDate(); -export const sameDayOrAfter = (date1, date2) => ( - (date1.getFullYear() > date2.getFullYear() - || (date1.getFullYear() === date2.getFullYear() && ( - date1.getMonth() > date2.getMonth() || ( - date1.getMonth() === date2.getMonth() && (date1.getDate() >= date2.getDate()) - ) - )) - )); +export const sameDayOrAfter = (date1, date2) => + date1.getFullYear() > date2.getFullYear() || + (date1.getFullYear() === date2.getFullYear() && + (date1.getMonth() > date2.getMonth() || + (date1.getMonth() === date2.getMonth() && + date1.getDate() >= date2.getDate()))); -export const sameDayOrBefore = (date1, date2) => ( - (date1.getFullYear() < date2.getFullYear() - || (date1.getFullYear() === date2.getFullYear() && ( - date1.getMonth() < date2.getMonth() || ( - date1.getMonth() === date2.getMonth() && (date1.getDate() <= date2.getDate()) - ) - )) - )); +export const sameDayOrBefore = (date1, date2) => + date1.getFullYear() < date2.getFullYear() || + (date1.getFullYear() === date2.getFullYear() && + (date1.getMonth() < date2.getMonth() || + (date1.getMonth() === date2.getMonth() && + date1.getDate() <= date2.getDate()))); -export const daysApart = (date1, date2) => ( - Math.floor((date1.getTime() - date2.getTime()) / DAY_MILLISECONDS)); +export const daysApart = (date1, date2) => + Math.floor((date1.getTime() - date2.getTime()) / DAY_MILLISECONDS); // betweenDates takes and array of two elements and checks if the // supplied date lies between them, inclusive. @@ -85,7 +79,7 @@ export const withinDates = (date, dates) => { let result; if (dates) { if (Array.isArray(dates)) { - dates.some((d) => { + dates.some(d => { if (typeof d === 'string') { if (sameDay(date, new Date(d))) { result = 2; @@ -102,7 +96,10 @@ export const withinDates = (date, dates) => { return result; }; -export const updateDateRange = (selectedDate, { date, dates, previousSelectedDate }) => { +export const updateDateRange = ( + selectedDate, + { date, dates, previousSelectedDate }, +) => { const result = { previousSelectedDate: selectedDate }; if (!dates) { if (!date) { diff --git a/src/js/components/Carousel/Carousel.js b/src/js/components/Carousel/Carousel.js index 87d21203b12..a7c9a9428c2 100644 --- a/src/js/components/Carousel/Carousel.js +++ b/src/js/components/Carousel/Carousel.js @@ -39,24 +39,33 @@ class Carousel extends Component { const { activeIndex } = this.state; const lastIndex = Children.count(children) - 1; if (activeIndex < lastIndex) { - this.setState({ activeIndex: activeIndex + 1, priorActiveIndex: activeIndex }); + this.setState({ + activeIndex: activeIndex + 1, + priorActiveIndex: activeIndex, + }); } else { this.setState({ activeIndex: 0, priorActiveIndex: activeIndex }); } }, play); - } + }; onRight = () => { const { activeIndex } = this.state; clearInterval(this.timer); - this.setState({ activeIndex: activeIndex + 1, priorActiveIndex: activeIndex }); - } + this.setState({ + activeIndex: activeIndex + 1, + priorActiveIndex: activeIndex, + }); + }; onLeft = () => { const { activeIndex } = this.state; clearInterval(this.timer); - this.setState({ activeIndex: activeIndex - 1, priorActiveIndex: activeIndex }); - } + this.setState({ + activeIndex: activeIndex - 1, + priorActiveIndex: activeIndex, + }); + }; onSelect = index => () => { const { activeIndex } = this.state; @@ -65,37 +74,38 @@ class Carousel extends Component { }; render() { - const { - children, fill, focus, theme, ...rest - } = this.props; + const { children, fill, focus, theme, ...rest } = this.props; const { activeIndex, priorActiveIndex } = this.state; const lastIndex = Children.count(children) - 1; - const onLeft = (activeIndex > 0 ? this.onLeft : undefined); - const onRight = (activeIndex < lastIndex ? this.onRight : undefined); + const onLeft = activeIndex > 0 ? this.onLeft : undefined; + const onRight = activeIndex < lastIndex ? this.onRight : undefined; const CurrentIcon = theme.carousel.icons.current; - const iconColor = normalizeColor(theme.carousel.icons.color || 'control', theme); + const iconColor = normalizeColor( + theme.carousel.icons.color || 'control', + theme, + ); const selectors = []; const wrappedChildren = Children.map(children, (child, index) => { - selectors.push(( + selectors.push( - - + + {selectors} - + diff --git a/src/js/components/Carousel/__tests__/Carousel-test.js b/src/js/components/Carousel/__tests__/Carousel-test.js index c0245ba9ad4..736a231380d 100644 --- a/src/js/components/Carousel/__tests__/Carousel-test.js +++ b/src/js/components/Carousel/__tests__/Carousel-test.js @@ -14,10 +14,10 @@ describe('Carousel', () => { const component = renderer.create( - - + + - + , ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -26,29 +26,37 @@ describe('Carousel', () => { test('navigate', () => { const { getByTestId, container } = render( - - - + + + - + , ); expect(container.firstChild).toMatchSnapshot(); - fireEvent.keyDown(getByTestId('test-carousel'), { key: 'Right', keyCode: 39, which: 39 }); + fireEvent.keyDown(getByTestId('test-carousel'), { + key: 'Right', + keyCode: 39, + which: 39, + }); expect(container.firstChild).toMatchSnapshot(); - fireEvent.keyDown(getByTestId('test-carousel'), { key: 'Left', keyCode: 37, which: 37 }); + fireEvent.keyDown(getByTestId('test-carousel'), { + key: 'Left', + keyCode: 37, + which: 37, + }); expect(container.firstChild).toMatchSnapshot(); }); - test('play', (done) => { + test('play', done => { const { container } = render( - - + + - + , ); expect(container.firstChild).toMatchSnapshot(); diff --git a/src/js/components/Carousel/__tests__/__snapshots__/Carousel-test.js.snap b/src/js/components/Carousel/__tests__/__snapshots__/Carousel-test.js.snap index 0ae9542a7ac..475a102f907 100644 --- a/src/js/components/Carousel/__tests__/__snapshots__/Carousel-test.js.snap +++ b/src/js/components/Carousel/__tests__/__snapshots__/Carousel-test.js.snap @@ -126,8 +126,8 @@ exports[`Carousel basic 1`] = ` flex-direction: column; padding: 0px; opacity: 1; - -webkit-animation: gmgyXe 1s 0s forwards; - animation: gmgyXe 1s 0s forwards; + -webkit-animation: iyuEas 1s 0s forwards; + animation: iyuEas 1s 0s forwards; } .c7 { @@ -769,8 +769,8 @@ exports[`Carousel navigate 1`] = ` flex-direction: column; padding: 0px; opacity: 1; - -webkit-animation: gmgyXe 1s 0s forwards; - animation: gmgyXe 1s 0s forwards; + -webkit-animation: iyuEas 1s 0s forwards; + animation: iyuEas 1s 0s forwards; } .c7 { @@ -1284,10 +1284,10 @@ exports[`Carousel navigate 2`] = ` class="StyledStack__StyledStackLayer-ajspsk-1 hFvDUx" >
diff --git a/src/js/components/CheckBox/doc.js b/src/js/components/CheckBox/doc.js index 9ff006407d8..9adb78fa81b 100644 --- a/src/js/components/CheckBox/doc.js +++ b/src/js/components/CheckBox/doc.js @@ -2,42 +2,45 @@ import { describe, PropTypes } from 'react-desc'; import { getAvailableAtBadge } from '../../utils'; -export const doc = (CheckBox) => { +export const doc = CheckBox => { const DocumentedCheckBox = describe(CheckBox) .availableAt(getAvailableAtBadge('CheckBox')) .description('A checkbox toggle control.') - .usage( - `import { CheckBox } from 'grommet'; -` - ); + .usage( + `import { CheckBox } from 'grommet'; +`, + ); DocumentedCheckBox.propTypes = { - checked: PropTypes.bool.description('Same as React ') + checked: PropTypes.bool + .description('Same as React ') .defaultValue(false), - disabled: PropTypes.bool.description( - `Same as React . Also adds a hidden input element + disabled: PropTypes.bool + .description( + `Same as React . Also adds a hidden input element with the same name so form submissions work.`, - ).defaultValue(false), + ) + .defaultValue(false), id: PropTypes.string.description( 'The DOM id attribute value to use for the underlying element.', ), label: PropTypes.node.description( - 'Label text to place next to the control.' + 'Label text to place next to the control.', ), name: PropTypes.string.description( - 'The DOM name attribute value to use for the underlying element.' + 'The DOM name attribute value to use for the underlying element.', ), onChange: PropTypes.func.description( `Function that will be called when the user clicks the check box. It will be passed a React event object. The current state can be accessed - via event.target.checked. Same as React .` + via event.target.checked. Same as React .`, ), - reverse: PropTypes.bool.description( - 'Whether to show the label in front of the checkbox.' - ).defaultValue(false), - toggle: PropTypes.bool.description( - 'Whether to visualize it as a toggle switch.' - ).defaultValue(false), + reverse: PropTypes.bool + .description('Whether to show the label in front of the checkbox.') + .defaultValue(false), + toggle: PropTypes.bool + .description('Whether to visualize it as a toggle switch.') + .defaultValue(false), }; return DocumentedCheckBox; diff --git a/src/js/components/CheckBox/index.js b/src/js/components/CheckBox/index.js index 6c493b9619f..0a1de621ed0 100644 --- a/src/js/components/CheckBox/index.js +++ b/src/js/components/CheckBox/index.js @@ -1,2 +1 @@ - export { CheckBox } from './CheckBox'; diff --git a/src/js/components/Clock/Analog.js b/src/js/components/Clock/Analog.js index ed0e02cd901..ee61e258138 100644 --- a/src/js/components/Clock/Analog.js +++ b/src/js/components/Clock/Analog.js @@ -3,7 +3,10 @@ import React, { Component } from 'react'; import { parseMetricToNum } from '../../utils'; import { - StyledAnalog, StyledHour, StyledMinute, StyledSecond, + StyledAnalog, + StyledHour, + StyledMinute, + StyledSecond, } from './StyledClock'; // this will serve both minutes and hours (360 / 6) @@ -11,14 +14,12 @@ const ANGLE_UNIT = 6; // 360 / 12 const HOUR_ANGLE_UNIT = 30; -const getClockDimensions = theme => ( - { - size: parseMetricToNum(theme.clock.analog.size.medium), - secondSize: parseMetricToNum(theme.clock.analog.second.size), - minuteSize: parseMetricToNum(theme.clock.analog.minute.size), - hourSize: parseMetricToNum(theme.clock.analog.hour.size), - } -); +const getClockDimensions = theme => ({ + size: parseMetricToNum(theme.clock.analog.size.medium), + secondSize: parseMetricToNum(theme.clock.analog.second.size), + minuteSize: parseMetricToNum(theme.clock.analog.minute.size), + hourSize: parseMetricToNum(theme.clock.analog.hour.size), +}); const getClockState = ({ hours, minutes, seconds }) => { const hour12 = hours > 12 ? hours - 12 : hours; @@ -26,7 +27,7 @@ const getClockState = ({ hours, minutes, seconds }) => { return { // offset hour angle by half of the minute angle so that it gets closer to the next hour - hourAngle: (hour12 * HOUR_ANGLE_UNIT) + (minutes / 2), + hourAngle: hour12 * HOUR_ANGLE_UNIT + minutes / 2, minuteAngle, secondAngle: seconds * ANGLE_UNIT, }; @@ -35,26 +36,28 @@ const getClockState = ({ hours, minutes, seconds }) => { export class Analog extends Component { static defaultProps = { size: 'medium', - } + }; static getDerivedStateFromProps(nextProps, prevState) { const { elements } = nextProps; const nextState = getClockState(elements); - if (prevState.hourAngle === undefined - || Object.keys(nextState).some(k => prevState[k] !== nextState[k])) { + if ( + prevState.hourAngle === undefined || + Object.keys(nextState).some(k => prevState[k] !== nextState[k]) + ) { return nextState; } return null; } - state = {} + state = {}; render() { const { precision, theme, ...rest } = this.props; const { hourAngle, minuteAngle, secondAngle } = this.state; - const { - size, secondSize, minuteSize, hourSize, - } = getClockDimensions(theme); + const { size, secondSize, minuteSize, hourSize } = getClockDimensions( + theme, + ); const halfSize = size / 2; let secondHand; @@ -66,7 +69,7 @@ export class Analog extends Component { y1={halfSize} x2={halfSize} y2={secondSize} - stroke='#000000' + stroke="#000000" strokeLinecap={theme.clock.analog.second.shape} style={{ transform: `rotate(${secondAngle}deg)`, @@ -85,7 +88,7 @@ export class Analog extends Component { y1={halfSize} x2={halfSize} y2={minuteSize} - stroke='#000000' + stroke="#000000" strokeLinecap={theme.clock.analog.minute.shape} style={{ transform: `rotate(${minuteAngle}deg)`, @@ -97,10 +100,10 @@ export class Analog extends Component { return ( { const result = {}; @@ -17,7 +16,7 @@ const parseTime = (time, hourLimit) => { if (match) { result.hours = parseFloat(match[2]); if (hourLimit === 12) { - result.hours12 = (result.hours > 12 ? (result.hours - 12) : result.hours); + result.hours12 = result.hours > 12 ? result.hours - 12 : result.hours; } result.minutes = parseFloat(match[3]) || 0; result.seconds = parseFloat(match[4]) || 0; @@ -27,7 +26,7 @@ const parseTime = (time, hourLimit) => { if (match) { result.hours = parseFloat(match[1]); if (hourLimit === 12) { - result.hours12 = (result.hours > 12 ? (result.hours - 12) : result.hours); + result.hours12 = result.hours > 12 ? result.hours - 12 : result.hours; } result.minutes = parseFloat(match[2]) || 0; result.seconds = parseFloat(match[3]) || 0; @@ -51,7 +50,7 @@ class Clock extends Component { run: 'forward', size: 'medium', type: 'analog', - } + }; static getDerivedStateFromProps(nextProps, prevState) { const { hourLimit, time } = nextProps; @@ -61,7 +60,9 @@ class Clock extends Component { if (!elements) { return { elements: nextElements }; } - if (Object.keys(nextElements).some(k => elements[k] !== nextElements[k])) { + if ( + Object.keys(nextElements).some(k => elements[k] !== nextElements[k]) + ) { return { elements: nextElements }; } } @@ -91,9 +92,7 @@ class Clock extends Component { } run() { - const { - hourLimit, onChange, precision, run, - } = this.props; + const { hourLimit, onChange, precision, run } = this.props; const { elements } = this.state; // set the interval time based on the precision @@ -153,16 +152,22 @@ class Clock extends Component { nextElements.hours = 0; } if (hourLimit === 12) { - nextElements.hours12 = ( - (nextElements.hours > 12 ? (nextElements.hours - 12) : nextElements.hours)); + nextElements.hours12 = + nextElements.hours > 12 + ? nextElements.hours - 12 + : nextElements.hours; } this.setState({ elements: nextElements }, () => { if (onChange) { if (elements.duration) { - onChange(`P${elements.hours}H${elements.minutes}M${elements.seconds}S`); + onChange( + `P${elements.hours}H${elements.minutes}M${elements.seconds}S`, + ); } else { - onChange(`T${elements.hours}:${elements.minutes}:${elements.seconds}`); + onChange( + `T${elements.hours}:${elements.minutes}:${elements.seconds}`, + ); } } }); @@ -187,8 +192,6 @@ let ClockDoc; if (process.env.NODE_ENV !== 'production') { ClockDoc = require('./doc').doc(Clock); // eslint-disable-line global-require } -const ClockWrapper = compose( - withTheme, -)(ClockDoc || Clock); +const ClockWrapper = compose(withTheme)(ClockDoc || Clock); export { ClockWrapper as Clock }; diff --git a/src/js/components/Clock/Digital.js b/src/js/components/Clock/Digital.js index 3fff4fd7caf..c53990d9e2e 100644 --- a/src/js/components/Clock/Digital.js +++ b/src/js/components/Clock/Digital.js @@ -2,7 +2,11 @@ import React, { Component } from 'react'; import { Box } from '../Box'; -import { StyledDigitalDigit, StyledDigitalNext, StyledDigitalPrevious } from './StyledClock'; +import { + StyledDigitalDigit, + StyledDigitalNext, + StyledDigitalPrevious, +} from './StyledClock'; class Digit extends Component { static getDerivedStateFromProps(nextProps, prevState) { @@ -13,7 +17,7 @@ class Digit extends Component { return null; } - state = {} + state = {}; componentDidUpdate(prevProps, prevState) { const { previous } = this.state; @@ -34,7 +38,7 @@ class Digit extends Component { const { run, size, theme } = this.props; const { number, previous } = this.state; if (previous !== undefined) { - const direction = (run === 'backward' ? 'down' : 'up'); + const direction = run === 'backward' ? 'down' : 'up'; return ( @@ -54,42 +58,57 @@ class Digit extends Component { } } -const Element = ({ - number, run, sep, size, theme, -}) => { +const Element = ({ number, run, sep, size, theme }) => { const tens = Math.floor(number / 10); const ones = number % 10; const result = [ - , - , + , + , ]; if (sep) { result.unshift( - : + + : + , ); } return result; }; -export const Digital = (props) => { - const { - elements, precision, run, size, theme, ...rest - } = props; +export const Digital = props => { + const { elements, precision, run, size, theme, ...rest } = props; let seconds; if (precision === 'seconds') { seconds = ( - + ); } let minutes; if (precision === 'minutes' || precision === 'seconds') { minutes = ( - + ); } return ( - - + + {minutes} {seconds} diff --git a/src/js/components/Clock/StyledClock.js b/src/js/components/Clock/StyledClock.js index f02f5ed62c3..972250e672b 100644 --- a/src/js/components/Clock/StyledClock.js +++ b/src/js/components/Clock/StyledClock.js @@ -4,22 +4,22 @@ import { normalizeColor, genericStyles } from '../../utils'; export const StyledHour = styled.line` stroke-width: ${props => props.theme.clock.analog.hour.width}; - stroke: ${props => ( - normalizeColor(props.theme.clock.analog.hour.color, props.theme))}; + stroke: ${props => + normalizeColor(props.theme.clock.analog.hour.color, props.theme)}; transition: stroke 1s ease-out; `; export const StyledMinute = styled.line` stroke-width: ${props => props.theme.clock.analog.minute.width}; - stroke: ${props => ( - normalizeColor(props.theme.clock.analog.minute.color, props.theme))}; + stroke: ${props => + normalizeColor(props.theme.clock.analog.minute.color, props.theme)}; transition: stroke 1s ease-out; `; export const StyledSecond = styled.line` stroke-width: ${props => props.theme.clock.analog.second.width}; - stroke: ${props => ( - normalizeColor(props.theme.clock.analog.second.color, props.theme))}; + stroke: ${props => + normalizeColor(props.theme.clock.analog.second.color, props.theme)}; transition: stroke 1s ease-out; `; @@ -27,11 +27,11 @@ export const StyledAnalog = styled.svg` width: ${props => props.theme.clock.analog.size[props.size]}; height: ${props => props.theme.clock.analog.size[props.size]}; - ${genericStyles} - ${props => props.theme.clock.analog && props.theme.clock.analog.extend} + ${genericStyles} ${props => + props.theme.clock.analog && props.theme.clock.analog.extend}; `; -const sizeStyle = (props) => { +const sizeStyle = props => { // size is a combination of the level and size properties const size = props.size || 'medium'; const data = props.theme.clock.digital.text[size]; @@ -46,7 +46,7 @@ export const StyledDigitalDigit = styled.div` width: 0.8em; text-align: center; overflow: hidden; - ${props => sizeStyle(props)} + ${props => sizeStyle(props)}; `; const previousUp = keyframes` @@ -65,7 +65,9 @@ export const StyledDigitalPrevious = styled.div` left: 0; width: 0.8em; text-align: center; - animation: ${props => (props.direction === 'down' ? previousDown : previousUp)} 0.5s forwards; + animation: ${props => + props.direction === 'down' ? previousDown : previousUp} + 0.5s forwards; `; const nextUp = keyframes` @@ -84,5 +86,6 @@ export const StyledDigitalNext = styled.div` left: 0; width: 0.8em; text-align: center; - animation: ${props => (props.direction === 'down' ? nextDown : nextUp)} 0.5s forwards; + animation: ${props => (props.direction === 'down' ? nextDown : nextUp)} 0.5s + forwards; `; diff --git a/src/js/components/Clock/__tests__/Clock-test.js b/src/js/components/Clock/__tests__/Clock-test.js index d7b4aaa34df..c7e4fe782e9 100644 --- a/src/js/components/Clock/__tests__/Clock-test.js +++ b/src/js/components/Clock/__tests__/Clock-test.js @@ -17,11 +17,11 @@ describe('Clock', () => { test('time', () => { const component = renderer.create( - - - - - + + + + + , ); expect(component.toJSON()).toMatchSnapshot(); }); @@ -29,21 +29,21 @@ describe('Clock', () => { test('hourLimit', () => { const component = renderer.create( - - - + + + , ); expect(component.toJSON()).toMatchSnapshot(); }); - test('run', (done) => { + test('run', done => { const { container } = render( - - - - - + + + + + , ); expect(container.firstChild).toMatchSnapshot(); @@ -54,9 +54,9 @@ describe('Clock', () => { }, 1300); }); - ['analog', 'digital'].forEach(type => ( - ['hours', 'minutes', 'seconds'].forEach(precision => ( - ['xsmall', 'small', 'medium', 'large', 'xlarge'].forEach(size => ( + ['analog', 'digital'].forEach(type => + ['hours', 'minutes', 'seconds'].forEach(precision => + ['xsmall', 'small', 'medium', 'large', 'xlarge'].forEach(size => test(`type ${type} precision ${precision} size ${size}`, () => { const component = renderer.create( @@ -67,11 +67,11 @@ describe('Clock', () => { size={size} time={DURATION} /> - + , ); expect(component.toJSON()).toMatchSnapshot(); - }) - )) - )) - )); + }), + ), + ), + ); }); diff --git a/src/js/components/Clock/__tests__/__snapshots__/Clock-test.js.snap b/src/js/components/Clock/__tests__/__snapshots__/Clock-test.js.snap index d0ca56a1a46..70dee87b0cb 100644 --- a/src/js/components/Clock/__tests__/__snapshots__/Clock-test.js.snap +++ b/src/js/components/Clock/__tests__/__snapshots__/Clock-test.js.snap @@ -411,7 +411,7 @@ exports[`Clock run 2`] = ` class="StyledGrommet-sc-19lkkz7-0 gmnngJ" >
1
8
:
2
3
:
3
4
1
8
:
2
3
:
3
4
diff --git a/src/js/components/Clock/clock.stories.js b/src/js/components/Clock/clock.stories.js index 0e8a22acadd..9797f367193 100644 --- a/src/js/components/Clock/clock.stories.js +++ b/src/js/components/Clock/clock.stories.js @@ -6,13 +6,13 @@ import { grommet } from 'grommet/themes'; const DigitalClock = () => ( - + ); const AnalogClock = () => ( - + ); diff --git a/src/js/components/Clock/doc.js b/src/js/components/Clock/doc.js index dff62feaa70..60422a29c84 100644 --- a/src/js/components/Clock/doc.js +++ b/src/js/components/Clock/doc.js @@ -2,49 +2,51 @@ import { describe, PropTypes } from 'react-desc'; import { genericProps, getAvailableAtBadge } from '../../utils'; -export const doc = (Clock) => { +export const doc = Clock => { const DocumentedClock = describe(Clock) .availableAt(getAvailableAtBadge('Clock')) .description('A clock with timezone awareness.') .usage( `import { Clock } from 'grommet'; -` +`, ); DocumentedClock.propTypes = { ...genericProps, - hourLimit: PropTypes.oneOf([12, 24, '12', '24']).description( - 'Whether to roll over the hours after 12 or after 24.' - ).defaultValue(24), + hourLimit: PropTypes.oneOf([12, 24, '12', '24']) + .description('Whether to roll over the hours after 12 or after 24.') + .defaultValue(24), onChange: PropTypes.func.description( `If the clock is running, this function will be called with the - current time value each time it changes.` + current time value each time it changes.`, ), - precision: PropTypes.oneOf(['hours', 'minutes', 'seconds']).description( - 'How precise a time to represent.' - ).defaultValue('seconds'), + precision: PropTypes.oneOf(['hours', 'minutes', 'seconds']) + .description('How precise a time to represent.') + .defaultValue('seconds'), run: PropTypes.oneOfType([ PropTypes.bool, PropTypes.oneOf(['backward', 'forward']), - ]).description( - `Whether the clock should actively adjust time or be fixed to the - time specified. 'backward' could be used as a countdown timer.` - ).defaultValue('forward'), + ]) + .description( + `Whether the clock should actively adjust time or be fixed to the + time specified. 'backward' could be used as a countdown timer.`, + ) + .defaultValue('forward'), size: PropTypes.oneOfType([ PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']), PropTypes.string, - ]).description( - 'Clock size' - ).defaultValue('medium'), + ]) + .description('Clock size') + .defaultValue('medium'), time: PropTypes.string.description( `ISO8601 time or duration. For example: 'PT8H12M23S', 'T08:12:23', or '2015-02-22T08:12:23'. Any included date portion will be ignored for an analog clock. If not provided, the - current browser time will be used.` + current browser time will be used.`, ), - type: PropTypes.oneOf(['analog', 'digital']).description( - 'What type of visualization to show.' - ).defaultValue('analog'), + type: PropTypes.oneOf(['analog', 'digital']) + .description('What type of visualization to show.') + .defaultValue('analog'), }; return DocumentedClock; diff --git a/src/js/components/Clock/index.js b/src/js/components/Clock/index.js index 01f630173ce..e289d20c5db 100644 --- a/src/js/components/Clock/index.js +++ b/src/js/components/Clock/index.js @@ -1,2 +1 @@ - export { Clock } from './Clock'; diff --git a/src/js/components/Collapsible/Collapsible.js b/src/js/components/Collapsible/Collapsible.js index bf2b2e24e3e..66fdfb80b36 100644 --- a/src/js/components/Collapsible/Collapsible.js +++ b/src/js/components/Collapsible/Collapsible.js @@ -6,28 +6,29 @@ import styled from 'styled-components'; import { withTheme } from '../hocs'; import { Box } from '../Box'; -const animatedBoxProperty = direction => ( - direction === 'horizontal' ? 'width' : 'height' -); +const animatedBoxProperty = direction => + direction === 'horizontal' ? 'width' : 'height'; const AnimatedBox = styled(Box)` - ${props => !props.animate && (props.open ? ` + ${props => + !props.animate && + (props.open + ? ` max-${animatedBoxProperty(props.collapsibleDirection)}: unset; visibility: visible; - ` : ` + ` + : ` max-${animatedBoxProperty(props.collapsibleDirection)}: 0; visibility: hidden; - `)} + `)}; `; class Collapsible extends Component { - ref = createRef() + ref = createRef(); static getDerivedStateFromProps(nextProps, prevState) { const { open } = nextProps; - if ( - open !== prevState.open - ) { + if (open !== prevState.open) { return { animate: true, open, @@ -46,7 +47,10 @@ class Collapsible extends Component { componentDidUpdate(prevProps, prevState, snapshot) { const { /* eslint-disable-next-line react/prop-types */ - direction, theme: { collapsible: { minSpeed, baseline } }, + direction, + theme: { + collapsible: { minSpeed, baseline }, + }, } = this.props; const { animate, open } = this.state; @@ -75,15 +79,15 @@ class Collapsible extends Component { requestAnimationFrame(() => { requestAnimationFrame(() => { container.style.transition = `max-${dimension} ${speed}ms, visibility 50ms`; - container.style[`max-${dimension}`] = open ? `${dimensionSize}px` : '0px'; + container.style[`max-${dimension}`] = open + ? `${dimensionSize}px` + : '0px'; this.animationTimeout = setTimeout(() => { container.removeAttribute('style'); - this.setState( - { - animate: false, - } - ); + this.setState({ + animate: false, + }); }, speed); }); }); @@ -96,18 +100,14 @@ class Collapsible extends Component { } } - getSnapshotBeforeUpdate = () => ( + getSnapshotBeforeUpdate = () => /* eslint-disable-next-line react/no-find-dom-node */ - this.ref.current && findDOMNode(this.ref.current).getBoundingClientRect() - ) + this.ref.current && findDOMNode(this.ref.current).getBoundingClientRect(); render() { /* eslint-disable-next-line react/prop-types */ const { children, direction } = this.props; - const { - animate, - open, - } = this.state; + const { animate, open } = this.state; return ( - - ); @@ -64,16 +61,16 @@ class NestedCollapsible extends Component { openMenu1: false, openSubmenu1: false, openMenu2: false, - } + }; render() { const { openMenu1, openSubmenu1, openMenu2 } = this.state; return ( - + { const newOpenMenu1 = !openMenu1; @@ -87,36 +84,61 @@ class NestedCollapsible extends Component { this.setState({ openSubmenu1: !openSubmenu1 })} /> - {/* eslint-disable-next-line no-alert */} - - {/* eslint-disable-next-line no-alert */} - + {/* eslint-enable no-alert */} this.setState({ openMenu2: !openMenu2 })} /> - {/* eslint-disable-next-line no-alert */} - + {/* eslint-enable no-alert */} @@ -127,7 +149,7 @@ class NestedCollapsible extends Component { class HorizontalCollapsible extends Component { state = { openNotification: false, - } + }; render() { const { openNotification } = this.state; @@ -135,34 +157,36 @@ class HorizontalCollapsible extends Component { - + My App ); } - return ( - - ); + return ; }; -const ExpanderCellWrapper = compose( - withTheme, -)(ExpanderCell); +const ExpanderCellWrapper = compose(withTheme)(ExpanderCell); export { ExpanderCellWrapper as ExpanderCell }; diff --git a/src/js/components/DataTable/Footer.js b/src/js/components/DataTable/Footer.js index 4e487f4c609..a43cb5cecfe 100644 --- a/src/js/components/DataTable/Footer.js +++ b/src/js/components/DataTable/Footer.js @@ -10,20 +10,18 @@ import { withTheme } from '../hocs'; import { Cell } from './Cell'; import { StyledDataTableFooter } from './StyledDataTable'; -const Footer = ({ - columns, footerValues, groups, theme, ...rest -}) => ( +const Footer = ({ columns, footerValues, groups, theme, ...rest }) => ( {groups && ( - - + + )} {columns.map(column => ( ); -const FooterWrapper = compose( - withTheme, -)(Footer); +const FooterWrapper = compose(withTheme)(Footer); export { FooterWrapper as Footer }; diff --git a/src/js/components/DataTable/GroupedBody.js b/src/js/components/DataTable/GroupedBody.js index 6aa845c16fa..02a51b9700b 100644 --- a/src/js/components/DataTable/GroupedBody.js +++ b/src/js/components/DataTable/GroupedBody.js @@ -7,11 +7,18 @@ import { ExpanderCell } from './ExpanderCell'; import { StyledDataTableBody, StyledDataTableRow } from './StyledDataTable'; export const GroupedBody = ({ - columns, groupBy, groups, groupState, primaryProperty, onToggle, size, theme, + columns, + groupBy, + groups, + groupState, + primaryProperty, + onToggle, + size, + theme, ...rest }) => ( - {groups.map((group) => { + {groups.map(group => { const { expanded } = groupState[group.key]; let content = ( @@ -41,15 +48,13 @@ export const GroupedBody = ({ {content} {group.data.map(datum => ( - + {groupState[group.key].expanded} {columns.map(column => ( { - const dataTableContextTheme = { ...theme.table.header, ...theme.dataTable.header }; + const dataTableContextTheme = { + ...theme.table.header, + ...theme.dataTable.header, + }; // The tricky part here is that we need to manage the theme styling // to make sure that the background, border, and padding are applied // at the right places depending on the mix of controls in each header cell. - const outerThemeProps = ( - ({ border, background }) => ({ border, background }) - )(dataTableContextTheme); + const outerThemeProps = (({ border, background }) => ({ + border, + background, + }))(dataTableContextTheme); const { border, background, ...innerThemeProps } = dataTableContextTheme; return ( - {groups && ( !groupState[k].expanded).length === 0} + context="header" + expanded={ + Object.keys(groupState).filter(k => !groupState[k].expanded) + .length === 0 + } theme={theme} onToggle={onToggle} /> )} - {columns.map(({ - property, header, align, search, - }) => { - let content = (typeof header === 'string' ? ( - {header} - ) : header); + {columns.map(({ property, header, align, search }) => { + let content = + typeof header === 'string' ? {header} : header; if (onSort) { content = ( @@ -65,7 +78,7 @@ export const Header = ({ if (search && filters) { if (!onSort) { content = ( - + {content} ); @@ -73,9 +86,9 @@ export const Header = ({ content = ( {content} @@ -94,7 +107,7 @@ export const Header = ({ {content} @@ -113,16 +126,18 @@ export const Header = ({ return ( {content} ); })} - ); diff --git a/src/js/components/DataTable/Resizer.js b/src/js/components/DataTable/Resizer.js index affede742d5..e9f7773d6d2 100644 --- a/src/js/components/DataTable/Resizer.js +++ b/src/js/components/DataTable/Resizer.js @@ -13,7 +13,7 @@ export class Resizer extends Component { ref = React.createRef(); - onMouseDown = (event) => { + onMouseDown = event => { if (this.ref.current) { /* eslint-disable-next-line react/no-find-dom-node */ const element = findDOMNode(this.ref.current); @@ -23,29 +23,29 @@ export class Resizer extends Component { document.addEventListener('mouseup', this.onMouseUp); }); } - } + }; - onMouseMove = (event) => { + onMouseMove = event => { const { onResize, property } = this.props; const { start, width } = this.state; // We determined 12 empirically as being wide enough to hit but // not too wide to cause false hits. const nextWidth = Math.max(12, width + (event.clientX - start)); onResize(property)(nextWidth); - } + }; onMouseUp = () => { document.removeEventListener('mouseup', this.onMouseUp); document.removeEventListener('mousemove', this.onMouseMove); this.setState({ start: undefined, width: undefined }); - } + }; render() { const { children, onResize, theme } = this.props; const { start } = this.state; if (onResize) { return ( - + {children} ) : null}