diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx index 8bf673d693..c227291c77 100644 --- a/__tests__/components/DataListToolbar.test.jsx +++ b/__tests__/components/DataListToolbar.test.jsx @@ -57,10 +57,9 @@ describe('', () => { }); test('dropdown items sortable columns work', () => { - const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button'; - const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item'; - const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle'; - const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item'; + const sortDropdownToggleSelector = 'button[id="awx-sort"]'; + const searchDropdownToggleSelector = 'button[id="awx-search"]'; + const dropdownMenuItems = 'DropdownMenu > ul'; const multipleColumns = [ { name: 'Foo', key: 'foo', isSortable: true }, @@ -80,12 +79,10 @@ describe('', () => { /> ); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); - expect(sortDropdownToggle.length).toBe(2); - sortDropdownToggle.at(1).simulate('click'); - sortDropdownToggle.at(0).simulate('click'); + expect(sortDropdownToggle.length).toBe(1); + sortDropdownToggle.simulate('click'); toolbar.update(); - - const sortDropdownItems = toolbar.find(sortDropdownItemsSelector); + const sortDropdownItems = toolbar.find(dropdownMenuItems).children(); expect(sortDropdownItems.length).toBe(2); const mockedSortEvent = { target: { innerText: 'Bar' } }; @@ -101,13 +98,13 @@ describe('', () => { toolbar.update(); const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector); - expect(sortDropdownToggleDescending.length).toBe(2); - sortDropdownToggleDescending.at(1).simulate('click'); - sortDropdownToggleDescending.at(0).simulate('click'); + expect(sortDropdownToggleDescending.length).toBe(1); + sortDropdownToggleDescending.simulate('click'); toolbar.update(); - const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector); + const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children(); expect(sortDropdownItemsDescending.length).toBe(2); + sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown const mockedSortEventDescending = { target: { innerText: 'Bar' } }; sortDropdownItems.at(0).simulate('click', mockedSortEventDescending); @@ -115,10 +112,10 @@ describe('', () => { const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector); expect(searchDropdownToggle.length).toBe(1); - searchDropdownToggle.at(0).simulate('click'); + searchDropdownToggle.simulate('click'); toolbar.update(); - const searchDropdownItems = toolbar.find(searchDropdownItemsSelector); + const searchDropdownItems = toolbar.find(dropdownMenuItems).children(); expect(searchDropdownItems.length).toBe(3); const mockedSearchEvent = { target: { innerText: 'Bar' } }; diff --git a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap index 3a181290d8..3315e9feb0 100644 --- a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap +++ b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap @@ -69,57 +69,92 @@ exports[` should render button 1`] = ` trigger="mouseenter focus" zIndex={9999} > - - + + + + + + + + + diff --git a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap index 47bf1aee3d..ad97bed524 100644 --- a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap +++ b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap @@ -41,20 +41,8 @@ exports[` initially renders succe className="" dataListCells={ Array [ - - + initially renders succe > Foo - - + slack - - , - + , + - - - , + , ] } key=".0" @@ -119,170 +89,366 @@ exports[` initially renders succe
- -
- - - - Foo - - - - - - slack - - -
- - -
- -
+ + + + + + +
+ - - - - - - - + - - - - - -
- + + + + + + +
+ + + diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap index 5e0b1ae6b7..f804e903a0 100644 --- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap +++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap @@ -222,117 +222,732 @@ exports[` initially renders succesfully 1`] = ` update={true} withHash={true} > -
- +
- -
- -
+ - -
+ - -
- + +
+ + Modified + , + + Created + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + Name + + } + > + + Modified + , + + Created + , + ] + } + forwardedComponent={ + Object { + "$$typeof": Symbol(react.forward_ref), + "attrs": Array [], + "componentStyle": ComponentStyle { + "componentId": "Search__Dropdown-sc-1dwuww3-2", + "isStatic": true, + "lastClassName": "kcnywV", + "rules": Array [ + "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", + ], + }, + "displayName": "Search__Dropdown", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "Search__Dropdown-sc-1dwuww3-2", + "target": [Function], + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], + } + } + forwardedRef={null} + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + Name + + } + > + + Modified + , + + Created + , + ] + } + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + toggle={ + + Name + + } + > +
+ + +
+ } + > + + +
+ } + > + + + +
+ + + + + + + + + + + + + + + + +
+ + +
+ + + + +
+ +
+ +
+ + + + +
+ +
+ + + initially renders succesfully 1`] = ` ] } isOpen={false} - isPlain={false} onSelect={[Function]} onToggle={[Function]} - position="left" + style={ + Object { + "marginRight": "20px", + } + } toggle={ initially renders succesfully 1`] = ` } > -
- - -
+ Modified + , + + Created + , + ] + } + forwardedComponent={ + Object { + "$$typeof": Symbol(react.forward_ref), + "attrs": Array [], + "componentStyle": ComponentStyle { + "componentId": "Sort__Dropdown-sc-21g5aw-0", + "isStatic": true, + "lastClassName": "kdSQuN", + "rules": Array [ + "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", + ], + }, + "displayName": "Sort__Dropdown", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "Sort__Dropdown-sc-21g5aw-0", + "target": [Function], + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], } - > + } + forwardedRef={null} + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + style={ + Object { + "marginRight": "20px", + } + } + toggle={ + Name + + } + > + + Modified + , + + Created + , + ] + } + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + style={ + Object { + "marginRight": "20px", + } + } + toggle={ + + Name + + } + > +
+ + +
+ } + > + + +
+ } > -
- } - > - - - -
- - - - - - -
- - -
- - -
- -
- - - - -
- -
- - - - Modified - , - - Created - , - ] - } - isOpen={false} - isPlain={false} - onSelect={[Function]} - onToggle={[Function]} - position="left" - style={ - Object { - "marginRight": "20px", - } - } - toggle={ - - Name - - } - > -
- - + +
- } - > - - -
+ + + + + + - - -
- - - - - - - - - + + + + + + + + + +
+ + +
+ + - - - -
- + +
- - + + initially renders succesfully 1`] = ` className="" dataListCells={ Array [ - - + initially renders succesfully 1`] = ` > Notification one - - + email - - , - + , + - - - , + , ] } key=".0" @@ -1073,170 +1535,366 @@ exports[` initially renders succesfully 1`] = `
- -
- - - - Notification one - - - - - - email - - -
- - -
- -
+ + + + + + +
+ - - - - - - - + - - - - - -
- + + + + + + +
+ + + @@ -1287,20 +1945,8 @@ exports[` initially renders succesfully 1`] = ` className="" dataListCells={ Array [ - - + initially renders succesfully 1`] = ` > Notification two - - + email - - , - + , + - - - , + , ] } key=".0" @@ -1365,170 +1993,366 @@ exports[` initially renders succesfully 1`] = `
- -
- - - - Notification two - - - - - - email - - -
- - -
- -
+ + + + + + +
+ - - - - - - - + - - - - - -
- + + + + + + +
+ + + @@ -1646,7 +2470,7 @@ exports[` initially renders succesfully 1`] = ` ariaHasPopup={true} className="togglePageSize" iconComponent={[Function]} - id="pf-toggle-id-5" + id="pf-toggle-id-1" isActive={false} isFocused={false} isHovered={false} @@ -1663,7 +2487,7 @@ exports[` initially renders succesfully 1`] = ` aria-expanded="false" aria-haspopup="true" class="pf-c-dropdown__toggle togglePageSize" - id="pf-toggle-id-5" + id="pf-toggle-id-1" type="button" > initially renders succesfully 1`] = ` initially renders succesfully 1`] = ` aria-expanded="false" aria-haspopup="true" class="pf-c-dropdown__toggle togglePageSize" - id="pf-toggle-id-5" + id="pf-toggle-id-1" type="button" > initially renders succesfully 1`] = ` aria-haspopup={true} className="pf-c-dropdown__toggle togglePageSize" disabled={false} - id="pf-toggle-id-5" + id="pf-toggle-id-1" onClick={[Function]} onKeyDown={[Function]} type="button" diff --git a/babel.config.js b/babel.config.js index 87b4f38f68..aca16f7246 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,6 +2,7 @@ module.exports = api => { api.cache(false); return { plugins: [ + 'babel-plugin-styled-components', '@babel/plugin-proposal-class-properties', 'macros' ], diff --git a/package-lock.json b/package-lock.json index 35c6800410..5c40be73c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -163,7 +163,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -1134,6 +1133,21 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "requires": { + "@emotion/memoize": "0.7.1" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + } + } + }, "@emotion/memoize": { "version": "0.6.6", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", @@ -2219,7 +2233,7 @@ }, "ansi-colors": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", "requires": { "ansi-wrap": "^0.1.0" @@ -3237,14 +3251,25 @@ "resolve": "^1.8.1" } }, + "babel-plugin-styled-components": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", + "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-flow": { "version": "6.18.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=" }, "babel-plugin-syntax-jsx": { @@ -4154,6 +4179,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-lite": { "version": "1.0.30000902", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz", @@ -4885,6 +4915,11 @@ "urix": "^0.1.0" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-loader": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz", @@ -4962,6 +4997,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz", + "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -5421,7 +5466,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -6640,7 +6685,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -7027,8 +7072,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -7049,14 +7093,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7071,20 +7113,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7201,8 +7240,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7214,7 +7252,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7229,7 +7266,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7237,14 +7273,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7263,7 +7297,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7344,8 +7377,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7357,7 +7389,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7443,8 +7474,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7480,7 +7510,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7500,7 +7529,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7544,14 +7572,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -7803,8 +7829,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -10625,7 +10650,7 @@ }, "kind-of": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=" }, "kleur": { @@ -10951,6 +10976,11 @@ } } }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -12639,8 +12669,7 @@ "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, "prelude-ls": { "version": "1.1.2", @@ -14922,6 +14951,39 @@ "schema-utils": "^1.0.0" } }, + "styled-components": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/is-prop-valid": "^0.7.3", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylis": { "version": "3.5.4", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", diff --git a/package.json b/package.json index a4edfe39e6..7678e5dfa3 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "babel-jest": "^24.7.1", "babel-loader": "^8.0.4", "babel-plugin-macros": "^2.4.2", + "babel-plugin-styled-components": "^1.10.0", "css-loader": "^1.0.0", "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.12.1", @@ -59,6 +60,7 @@ "prop-types": "^15.6.2", "react": "^16.4.1", "react-dom": "^16.4.1", - "react-router-dom": "^4.3.1" + "react-router-dom": "^4.3.1", + "styled-components": "^4.2.0" } } diff --git a/src/app.scss b/src/app.scss index c2f8b84d53..af1f7b47ca 100644 --- a/src/app.scss +++ b/src/app.scss @@ -128,17 +128,6 @@ --pf-c-data-list__cell--PaddingTop: 16px; --pf-c-data-list__cell-cell--PaddingTop: 16px; - .awx-c-list-group { - display: inline-flex; - margin-right: 20px; - - &--badge { - align-items: center; - display: flex; - justify-content: center; - margin-left: 10px; - } - } &.pf-c-data-list__cell--divider { --pf-c-data-list__cell-cell--MarginRight: 0; diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 790490eea2..e73745ff44 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -4,18 +4,71 @@ import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Checkbox, - Level, - LevelItem, - Toolbar, - ToolbarGroup, + Toolbar as PFToolbar, + ToolbarGroup as PFToolbarGroup, ToolbarItem, } from '@patternfly/react-core'; +import styled from 'styled-components'; import ExpandCollapse from '../ExpandCollapse'; import Search from '../Search'; import Sort from '../Sort'; import VerticalSeparator from '../VerticalSeparator'; +const AWXToolbar = styled.div` + --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); + --awx-toolbar--BorderColor: #ebebeb; + --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); + + --pf-global--target-size--MinHeight: 0; + --pf-global--target-size--MinWidth: 0; + --pf-global--FontSize--md: 14px; + + border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); + background-color: var(--awx-toolbar--BackgroundColor); + display: flex; + min-height: 70px; + flex-grow: 1; +`; + +const Toolbar = styled(PFToolbar)` + flex-grow: 1; + margin-left: ${props => (props.marginleft ? '0' : '20px')}; +`; + +const ToolbarGroup = styled(PFToolbarGroup)` + &&& { + margin: 0; + } +`; + +const ColumnLeft = styled.div` + display: flex; + flex-basis: 100%; + justify-content: flex-start; + align-items: center; + padding: 10px 0 8px 0; + + @media screen and (min-width: 980px) { + flex-basis: 50%; + } +`; + +const ColumnRight = styled(ColumnLeft)` + padding: 8px 0 10px 0; + + @media screen and (min-width: 980px) { + margin-left: 0; + padding: 10px 0 8px 0; + } +`; + +const AdditionalControlsWrapper = styled.div` + display: flex; + flex-grow: 1; + justify-content: flex-end; +`; + class DataListToolbar extends React.Component { render () { const { @@ -38,67 +91,62 @@ class DataListToolbar extends React.Component { return ( {({ i18n }) => ( -
- - - - { showSelectAll && ( - - - - - - - )} - - - + + + { showSelectAll && ( + + + - - - - + )} + + + + + + + + + + {showExpandCollapse && ( + + + + - - - {showExpandCollapse && ( - + + { additionalControls && ( - - - - { additionalControls && ( - - )} - - )} - - - - {additionalControls} - - -
+ )} + + )} + + {additionalControls} + + + + + )} ); diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss deleted file mode 100644 index 0508ee99a0..0000000000 --- a/src/components/DataListToolbar/styles.scss +++ /dev/null @@ -1,108 +0,0 @@ -.awx-toolbar { - --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); - --awx-toolbar--BorderColor: #ebebeb; - --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); - - border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); - background-color: var(--awx-toolbar--BackgroundColor); - display: flex; - height: 70px; - padding-top: 5px; - - --pf-global--target-size--MinHeight: 0px; - --pf-global--target-size--MinWidth: 0px; - --pf-global--FontSize--md: 14px; -} - -.awx-toolbar .pf-l-level { - flex: 1; -} - -.awx-toolbar .pf-c-button.pf-m-plain { - --pf-c-button--m-plain--PaddingLeft: 0px; - --pf-c-button--m-plain--PaddingRight: 0px; -} - -.awx-toolbar .pf-l-toolbar__group { - --pf-l-toolbar__group--MarginRight: 0px; - --pf-l-toolbar__group--MarginLeft: 0px; -} - -.awx-toolbar button.pf-c-button { - height: 30px; - width: 30px; - padding: 0px; -} - -.awx-toolbar .pf-c-input-group { - min-height: 0px; - height: 30px; - - .pf-m-tertiary { - width: 34px; - padding: 0px; - } -} - -.awx-toolbar .pf-c-dropdown__toggle { - min-height: 30px; - min-width: 70px; - height: 30px; - padding: 0 10px; - margin: 0px; - - .pf-c-dropdown__toggle-text { - width: auto; - } - - .pf-c-dropdown__toggle-icon { - margin: 0px; - padding-top: 3px; - padding-left: 3px; - } -} - -.awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button { - margin-left: 20px; -} - -.awx-toolbar .pf-c-button.pf-m-primary { - background-color: #5cb85c; - min-width: 0px; - width: 30px; - height: 30px; - text-align: center; - padding: 0px; - margin: 0px; - margin-right: 20px; -} - -.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain { - font-size: 18px; -} - -.awx-ToolBarBtn { - width: 30px; - display: flex; - justify-content: center; - margin-right: 20px; - border-radius: 3px; - - &[disabled] { - cursor: not-allowed; - } -} - -.awx-ToolBarBtn:hover { - .awx-ToolBarTrashCanIcon { - color: white; - } - background-color:#d9534f; -} - -.awx-ToolBarBtn[disabled]:hover { - .awx-ToolBarTrashCanIcon { - color: #d2d2d2; - } - background-color: white; -} \ No newline at end of file diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx index 483a1345e9..5493982145 100644 --- a/src/components/NotificationsList/NotificationListItem.jsx +++ b/src/components/NotificationsList/NotificationListItem.jsx @@ -5,13 +5,31 @@ import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { Badge, - Switch, + Switch as PFSwitch, DataListItem, DataListItemRow, DataListItemCells, - DataListCell, + DataListCell as PFDataListCell, } from '@patternfly/react-core'; +import styled from 'styled-components'; + +const DataListCell = styled(PFDataListCell)` + display: flex; + justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')}; + padding-bottom: ${props => (props.righthalf ? '16px' : '8px')}; + + @media screen and (min-width: 768px) { + justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')}; + padding-bottom: 0; + } +`; + +const Switch = styled(PFSwitch)` + display: flex; + flex-wrap: no-wrap; +`; + function NotificationListItem (props) { const { canToggleNotifications, @@ -21,13 +39,6 @@ function NotificationListItem (props) { errorTurnedOn, toggleNotification } = props; - const capText = { - textTransform: 'capitalize' - }; - const toggleCellStyles = { - display: 'flex', - justifyContent: 'flex-end', - }; return ( @@ -43,18 +54,18 @@ function NotificationListItem (props) { to={{ pathname: detailUrl }} - style={{ marginRight: '1.5em' }} + css="margin-right: 1.5em;" > {notification.name} {notification.notification_type} , - + {({ i18n }) => ( - + { isModalOpen && ( diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index e9da0b0cec..c43c156785 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -3,17 +3,50 @@ import PropTypes from 'prop-types'; import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { - Button, - Dropdown, + Button as PFButton, + Dropdown as PFDropdown, DropdownPosition, DropdownToggle, DropdownItem, - TextInput + TextInput as PFTextInput } from '@patternfly/react-core'; import { SearchIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; + +const TextInput = styled(PFTextInput)` + min-height: 0px; + height: 30px; +`; + +const Button = styled(PFButton)` + width: 34px; + padding: 0px; +`; + +const Dropdown = styled(PFDropdown)` + &&& { /* Higher specificity required because we are selecting unclassed elements */ + > button { + min-height: 30px; + min-width: 70px; + height: 30px; + padding: 0 10px; + margin: 0px; + + > span { /* text element */ + width: auto; + } + + > svg { /* caret icon */ + margin: 0px; + padding-top: 3px; + padding-left: 3px; + } + } + } +`; class Search extends React.Component { constructor (props) { super(props); @@ -80,13 +113,13 @@ class Search extends React.Component { {({ i18n }) => (
{searchColumnName} diff --git a/src/components/Sort/Sort.jsx b/src/components/Sort/Sort.jsx index 3f1e6f592e..966f1b8d2a 100644 --- a/src/components/Sort/Sort.jsx +++ b/src/components/Sort/Sort.jsx @@ -4,7 +4,7 @@ import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Button, - Dropdown, + Dropdown as PFDropdown, DropdownPosition, DropdownToggle, DropdownItem @@ -16,6 +16,36 @@ import { SortNumericUpIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; + +const Dropdown = styled(PFDropdown)` + &&& { + > button { + min-height: 30px; + min-width: 70px; + height: 30px; + padding: 0 10px; + margin: 0px; + + > span { /* text element within dropdown */ + width: auto; + } + + > svg { /* caret icon */ + margin: 0px; + padding-top: 3px; + padding-left: 3px; + } + } + } +`; + +const IconWrapper = styled.span` + > svg { + font-size: 18px; + } +`; + class Sort extends React.Component { constructor (props) { super(props); @@ -60,7 +90,6 @@ class Sort extends React.Component { const { isSortDropdownOpen } = this.state; - const [{ name: sortedColumnName, isNumeric }] = columns .filter(({ key }) => key === sortedColumnKey); @@ -92,6 +121,7 @@ class Sort extends React.Component { isOpen={isSortDropdownOpen} toggle={( {sortedColumnName} @@ -104,8 +134,11 @@ class Sort extends React.Component { onClick={this.handleSort} variant="plain" aria-label={i18n._(t`Sort`)} + css="padding: 0;" > - + + + )} diff --git a/src/index.jsx b/src/index.jsx index ef03c44108..4b961c6405 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -13,7 +13,6 @@ import { t } from '@lingui/macro'; import '@patternfly/react-core/dist/styles/base.css'; import './app.scss'; import './components/Pagination/styles.scss'; -import './components/DataListToolbar/styles.scss'; import './components/SelectedList/styles.scss'; import './components/AddRole/styles.scss'; diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx index f250f5ce75..865fa4e3c0 100644 --- a/src/pages/Organizations/components/OrganizationListItem.jsx +++ b/src/pages/Organizations/components/OrganizationListItem.jsx @@ -2,20 +2,52 @@ import React from 'react'; import { string, bool, func } from 'prop-types'; import { Trans } from '@lingui/macro'; import { - Badge, + Badge as PFBadge, DataListItem, DataListItemRow, DataListItemCells, DataListCheck, - DataListCell, + DataListCell as PFDataListCell, } from '@patternfly/react-core'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; + import VerticalSeparator from '../../../components/VerticalSeparator'; import { Organization } from '../../../types'; +const Badge = styled(PFBadge)` + align-items: center; + display: flex; + justify-content: center; + margin-left: 10px; +`; + +const ListGroup = styled.span` + display: flex; + margin-left: 40px; + + @media screen and (min-width: 768px) { + margin-left: 20px; + + &:first-of-type { + margin-left: 0; + } + } +`; + +const DataListCell = styled(PFDataListCell)` + display: flex; + align-items: center; + padding-bottom: ${props => (props.righthalf ? '16px' : '8px')}; + + @media screen and (min-width: 768px) { + padding-bottom: 0; + } +`; + class OrganizationListItem extends React.Component { static propTypes = { organization: Organization.isRequired, @@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component { aria-labelledby={labelId} /> + - , - , - - + + Members - + {organization.summary_fields.related_field_counts.users} - - + + Teams - + {organization.summary_fields.related_field_counts.teams} - + ]} />