From 572c5bc0ad9a8fec053553c3bc836ffa224aed11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 1 Jun 2020 00:26:08 +0200 Subject: [PATCH 1/2] refactor(components): remove recompose dependency feature/polish-v2 --- package.json | 2 - src/components/CardList/CardList.story.js | 6 +-- .../__snapshots__/CardList.spec.js.snap | 3 ++ .../CardList/components/Item/Item.js | 38 +++++++++----- .../CardList/components/Item/Item.spec.js | 2 +- .../Item/__snapshots__/Item.spec.js.snap | 5 ++ .../ComponentsContext/withComponents.js | 19 ++----- ...ithAriaSelected.js => get-display-name.ts} | 18 ++++--- src/util/withKeyboardEvents.js | 38 -------------- src/util/withKeyboardEvents.spec.js | 50 ------------------- yarn.lock | 35 ++----------- 11 files changed, 55 insertions(+), 161 deletions(-) rename src/util/{withAriaSelected.js => get-display-name.ts} (66%) delete mode 100644 src/util/withKeyboardEvents.js delete mode 100644 src/util/withKeyboardEvents.spec.js diff --git a/package.json b/package.json index dc144682a3..c0463d24ad 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "react-modal": "^3.8.1", "react-popper": "^1.3.3", "react-text-mask": "^5.4.3", - "recompose": "^0.30.0", "text-mask-addons": "^3.8.0", "tiny-warning": "^1.0.3", "yargs": "^14.0.0" @@ -116,7 +115,6 @@ "@types/lodash": "^4.14.149", "@types/react": "^16.9.32", "@types/react-dom": "^16.9.6", - "@types/recompose": "^0.30.7", "audit-ci": "^2.1.0", "babel-eslint": "^10.0.1", "babel-jest": "^25.0.0", diff --git a/src/components/CardList/CardList.story.js b/src/components/CardList/CardList.story.js index d45cd65efd..e98c6d5410 100644 --- a/src/components/CardList/CardList.story.js +++ b/src/components/CardList/CardList.story.js @@ -27,11 +27,7 @@ class CardListStory extends Component { render() { const { selected } = this.state; - const padding = knobs.select( - 'padding', - [CardList.Item.KILO, CardList.Item.MEGA, CardList.Item.GIGA], - CardList.Item.GIGA - ); + const padding = knobs.select('padding', ['kilo', 'mega', 'giga'], 'giga'); return ( diff --git a/src/components/CardList/__snapshots__/CardList.spec.js.snap b/src/components/CardList/__snapshots__/CardList.spec.js.snap index b1b6457420..5f72e5758e 100644 --- a/src/components/CardList/__snapshots__/CardList.spec.js.snap +++ b/src/components/CardList/__snapshots__/CardList.spec.js.snap @@ -144,6 +144,7 @@ exports[`CardList should render with default styles 1`] = ` spacing="giga" >
@@ -157,12 +158,14 @@ exports[`CardList should render with default styles 1`] = ` List item 2
List item 3
diff --git a/src/components/CardList/components/Item/Item.js b/src/components/CardList/components/Item/Item.js index 6589b998fb..fadc53c7f7 100644 --- a/src/components/CardList/components/Item/Item.js +++ b/src/components/CardList/components/Item/Item.js @@ -13,14 +13,12 @@ * limitations under the License. */ +import React from 'react'; import PropTypes from 'prop-types'; -import { flow } from 'lodash/fp'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { setStatic } from 'recompose'; -import withKeyboardEvents from '../../../../util/withKeyboardEvents'; -import withAriaSelected from '../../../../util/withAriaSelected'; +import { isEnter, isSpacebar } from '../../../../util/key-codes'; import { sizes } from '../../../../styles/constants'; const { KILO, MEGA, GIGA } = sizes; @@ -93,13 +91,35 @@ const hoverStyles = ({ theme }) => css` } `; -const Item = styled('div')( +const BaseItem = styled('div')( baseStyles, paddingStyles, selectedStyles, hoverStyles ); +const createOnKeyDown = onClick => { + if (!onClick) { + return null; + } + + return event => { + // Most clickable HTML elements can also be triggered by pressing the + // spacebar or enter key. + if (isEnter(event) || isSpacebar(event)) { + onClick(event); + } + }; +}; + +const Item = props => ( + +); + Item.propTypes = { /** * When true, shows the item with selected styles. @@ -124,10 +144,4 @@ Item.defaultProps = { /** * @component */ -export default flow( - withKeyboardEvents, - withAriaSelected, - setStatic('KILO', KILO), - setStatic('MEGA', MEGA), - setStatic('GIGA', GIGA) -)(Item); +export default Item; diff --git a/src/components/CardList/components/Item/Item.spec.js b/src/components/CardList/components/Item/Item.spec.js index d1a7067197..7aee5cf92e 100644 --- a/src/components/CardList/components/Item/Item.spec.js +++ b/src/components/CardList/components/Item/Item.spec.js @@ -27,7 +27,7 @@ describe('Item', () => { }); it('should render with all paddings', () => { - [Item.KILO, Item.MEGA, Item.GIGA].forEach(padding => { + ['kilo', 'mega', 'giga'].forEach(padding => { expect( create(List item) ).toMatchSnapshot(); diff --git a/src/components/CardList/components/Item/__snapshots__/Item.spec.js.snap b/src/components/CardList/components/Item/__snapshots__/Item.spec.js.snap index ab0f950971..d0c4e8dc49 100644 --- a/src/components/CardList/components/Item/__snapshots__/Item.spec.js.snap +++ b/src/components/CardList/components/Item/__snapshots__/Item.spec.js.snap @@ -55,6 +55,7 @@ exports[`Item should render with all paddings 1`] = ` }
@@ -117,6 +118,7 @@ exports[`Item should render with all paddings 2`] = ` }
@@ -179,6 +181,7 @@ exports[`Item should render with all paddings 3`] = ` }
@@ -241,6 +244,7 @@ exports[`Item should render with default styles 1`] = ` }
@@ -303,6 +307,7 @@ exports[`Item should render with selected styles 1`] = ` }
diff --git a/src/components/ComponentsContext/withComponents.js b/src/components/ComponentsContext/withComponents.js index 798296afcd..04ee48fe5e 100644 --- a/src/components/ComponentsContext/withComponents.js +++ b/src/components/ComponentsContext/withComponents.js @@ -14,29 +14,20 @@ */ import React from 'react'; -import { wrapDisplayName } from 'recompose'; -import ComponentsContext from './ComponentsContext'; -import * as defaultComponents from './components'; +import { getDisplayName } from '../../util/get-display-name'; +import useComponents from './useComponents'; /** * Subscribe to the components context with a HOC. */ const withComponents = Component => { function WrappedComponent(props) { - return ( - - {(components = {}) => ( - - )} - - ); + const components = useComponents(); + return ; } - WrappedComponent.displayName = wrapDisplayName(Component, 'withComponents'); + WrappedComponent.displayName = `withComponents(${getDisplayName(Component)})`; return WrappedComponent; }; diff --git a/src/util/withAriaSelected.js b/src/util/get-display-name.ts similarity index 66% rename from src/util/withAriaSelected.js rename to src/util/get-display-name.ts index e26a446179..2323d7e8c2 100644 --- a/src/util/withAriaSelected.js +++ b/src/util/get-display-name.ts @@ -1,5 +1,5 @@ /** - * Copyright 2019, SumUp Ltd. + * Copyright 2020, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,10 +13,14 @@ * limitations under the License. */ -import { withProps } from 'recompose'; +export function getDisplayName(Component: any): string | undefined { + if (typeof Component === 'string') { + return Component; + } -export default withProps(({ selected, ...props }) => ({ - 'aria-selected': selected, - selected, - ...props -})); + if (!Component) { + return undefined; + } + + return Component.displayName || Component.name || 'Component'; +} diff --git a/src/util/withKeyboardEvents.js b/src/util/withKeyboardEvents.js deleted file mode 100644 index cf1cfdcbaa..0000000000 --- a/src/util/withKeyboardEvents.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright 2019, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { withProps } from 'recompose'; - -import { isEnter, isSpacebar } from './key-codes'; - -export const createOnKeyDown = onClick => { - if (!onClick) { - return null; - } - - return event => { - // Most clickable HTML elements can also be triggered by pressing the - // spacebar or enter key. - if (isEnter(event) || isSpacebar(event)) { - onClick(event); - } - }; -}; - -export default withProps(({ onClick, ...props }) => ({ - onKeyDown: createOnKeyDown(onClick), - onClick, - ...props -})); diff --git a/src/util/withKeyboardEvents.spec.js b/src/util/withKeyboardEvents.spec.js deleted file mode 100644 index 4f34e7ce95..0000000000 --- a/src/util/withKeyboardEvents.spec.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Copyright 2019, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { createOnKeyDown } from './withKeyboardEvents'; - -describe('withKeyboardEvents', () => { - describe('createOnKeyDown', () => { - it('should return a keyDown handler', () => { - const onClick = jest.fn(); - const onKeyDown = createOnKeyDown(onClick); - - expect(typeof onKeyDown).toBe('function'); - expect(onKeyDown).toHaveLength(1); - }); - - it('should call the onClick function if the enter key is pressed', () => { - const onClick = jest.fn(); - const event = { keyCode: 13 }; - const onKeyDown = createOnKeyDown(onClick); - - onKeyDown(event); - - expect(onClick).toHaveBeenCalledTimes(1); - expect(onClick).toHaveBeenCalledWith(event); - }); - - it('should call the onClick function if the spacebar is pressed', () => { - const onClick = jest.fn(); - const event = { keyCode: 32 }; - const onKeyDown = createOnKeyDown(onClick); - - onKeyDown(event); - - expect(onClick).toHaveBeenCalledTimes(1); - expect(onClick).toHaveBeenCalledWith(event); - }); - }); -}); diff --git a/yarn.lock b/yarn.lock index a096b1137d..16f5f4608c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3085,13 +3085,6 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/recompose@^0.30.7": - version "0.30.7" - resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.30.7.tgz#0d47f3da3bdf889a4f36d4ca7531fac1eee1c6bd" - integrity sha512-kEvD7XMguXgG7jJJS//cE1QTbkFj2qDtIPAg1FvXxE8D6jD1C0WabJjT7cVitC7TK0N5I3yp2955hqNFFZV0wg== - dependencies: - "@types/react" "*" - "@types/retry@^0.12.0": version "0.12.0" resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d" @@ -5062,11 +5055,6 @@ change-case@^3.1.0: upper-case "^1.1.1" upper-case-first "^1.1.0" -change-emitter@^0.1.2: - version "0.1.6" - resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" - integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU= - character-entities-legacy@^1.0.0: version "1.1.4" resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1" @@ -7553,7 +7541,7 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" -fbjs@^0.8.0, fbjs@^0.8.1: +fbjs@^0.8.0: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -8601,11 +8589,6 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -14057,7 +14040,7 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== -react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -14535,18 +14518,6 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" -recompose@^0.30.0: - version "0.30.0" - resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0" - integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w== - dependencies: - "@babel/runtime" "^7.0.0" - change-emitter "^0.1.2" - fbjs "^0.8.1" - hoist-non-react-statics "^2.3.1" - react-lifecycles-compat "^3.0.2" - symbol-observable "^1.0.4" - recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -16262,7 +16233,7 @@ symbol-observable@1.0.1: resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4" integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ= -symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0: +symbol-observable@^1.1.0, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== From 5df57a7963e775b0d8cf8ffe941ce6cac2bb9428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 1 Jun 2020 10:57:01 +0200 Subject: [PATCH 2/2] feat(components): remove polished dependency feature/reduce-dependencies --- package.json | 3 +- src/__snapshots__/storyshots.spec.js.snap | 104 ++++++++++-------- src/components/Badge/Badge.js | 4 +- .../Card/__snapshots__/Card.spec.js.snap | 12 +- .../__snapshots__/CardList.spec.js.snap | 2 +- src/components/Checkbox/Checkbox.js | 13 ++- .../__snapshots__/Checkbox.spec.js.snap | 2 +- src/components/IconButton/IconButton.tsx | 2 +- src/components/Input/Input.js | 14 ++- .../Input/__snapshots__/Input.spec.js.snap | 2 +- src/components/Label/Label.js | 3 +- .../LoadingButton/LoadingButton.tsx | 2 +- src/components/Modal/Modal.js | 6 +- .../__snapshots__/ModalWrapper.spec.js.snap | 2 +- .../NotificationBanner.spec.js.snap | 2 +- .../NotificationList.spec.js.snap | 2 +- src/components/RadioButton/RadioButton.js | 13 ++- src/components/Select/Select.js | 13 ++- .../Select/__snapshots__/Select.spec.js.snap | 2 +- src/components/Selector/Selector.js | 5 +- .../__snapshots__/Selector.spec.js.snap | 18 ++- .../__snapshots__/SelectorGroup.spec.js.snap | 6 +- .../Table/__snapshots__/Table.spec.js.snap | 14 +-- .../Table/components/SortArrow/SortArrow.js | 2 +- .../Tabs/__snapshots__/Tabs.spec.js.snap | 4 +- .../__snapshots__/TextArea.spec.js.snap | 2 +- .../Toggle/components/Switch/Switch.js | 23 ++-- .../Switch/__snapshots__/Switch.spec.js.snap | 6 +- .../__snapshots__/Tooltip.spec.js.snap | 20 ++-- src/styles/style-helpers.spec.ts | 34 ++++-- src/styles/style-helpers.ts | 32 ++++-- yarn.lock | 10 +- 32 files changed, 221 insertions(+), 158 deletions(-) diff --git a/package.json b/package.json index c0463d24ad..1c5628c7fe 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "lodash": "^4.17.11", "moment": "^2.24.0", "no-scroll": "^2.1.1", - "polished": "^3.1.0", "prop-types": "^15.7.2", "react-dates": "^21.2.0", "react-modal": "^3.8.1", @@ -98,7 +97,7 @@ "@storybook/preset-typescript": "^3.0.0", "@storybook/react": "^5.2.0", "@storybook/source-loader": "^5.2.4", - "@sumup/design-tokens": "^1.0.0-alpha.2", + "@sumup/design-tokens": "^1.0.0-alpha.3", "@sumup/foundry": "^2.1.0", "@sumup/icons": "^1.0.0", "@sumup/intl": "^1.0.0", diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index bd059a8db5..3c7d83a2e6 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -3895,7 +3895,7 @@ exports[`Storyshots Components/Card Base 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -3926,7 +3926,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -3953,7 +3953,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -3980,7 +3980,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4012,7 +4012,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 16px; width: 500px; height: 150px; @@ -4049,7 +4049,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4184,7 +4184,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4342,7 +4342,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4471,7 +4471,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4559,7 +4559,7 @@ HTMLCollection [ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 500px; height: 150px; @@ -4750,7 +4750,7 @@ exports[`Storyshots Components/Card/CardList Base 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; padding: 0; } @@ -7056,7 +7056,7 @@ exports[`Storyshots Components/Modal/Embedded Base 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } @@ -7346,7 +7346,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } @@ -7463,7 +7463,7 @@ exports[`Storyshots Components/Modal/Embedded With Title 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } @@ -7631,7 +7631,7 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } @@ -7721,7 +7721,7 @@ exports[`Storyshots Components/Modal/Embedded Without Close Button 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } @@ -8366,7 +8366,7 @@ exports[`Storyshots Components/Notification/NotificationBanner Base 1`] = ` .circuit-6 { width: 100%; background-color: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-4 { @@ -8515,7 +8515,7 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); padding: 16px 16px; } @@ -10953,7 +10953,7 @@ exports[`Storyshots Components/Table Base 1`] = ` .circuit-66 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-64 { @@ -11595,7 +11595,7 @@ exports[`Storyshots Components/Table Custom Sort 1`] = ` .circuit-48 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-46 { @@ -12012,7 +12012,7 @@ exports[`Storyshots Components/Table Sortable 1`] = ` .circuit-50 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-48 { @@ -12558,7 +12558,7 @@ exports[`Storyshots Components/Table With Component Rows 1`] = ` .circuit-44 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-42 { @@ -12911,7 +12911,7 @@ exports[`Storyshots Components/Tabs Base 1`] = ` HTMLCollection [ .circuit-10 { background: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); height: 80px; display: -webkit-box; display: -webkit-flex; @@ -13138,7 +13138,7 @@ exports[`Storyshots Components/Tabs Controlled State 1`] = ` HTMLCollection [ .circuit-10 { background: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); height: 80px; display: -webkit-box; display: -webkit-flex; @@ -13317,7 +13317,7 @@ HTMLCollection [ exports[`Storyshots Components/Tabs Links 1`] = ` .circuit-8 { background: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); height: 80px; display: -webkit-box; display: -webkit-flex; @@ -13837,7 +13837,7 @@ exports[`Storyshots Components/Tooltip Base 1`] = ` transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); @@ -13933,7 +13933,7 @@ exports[`Storyshots Components/Tooltip Bottom Right 1`] = ` transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); left: 50%; left: calc(50% - (16px + 4px)); top: 100%; @@ -14024,7 +14024,7 @@ exports[`Storyshots Components/Tooltip Left Center 1`] = ` transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); @@ -14120,7 +14120,7 @@ exports[`Storyshots Components/Tooltip Top Left 1`] = ` transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -14568,7 +14568,7 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); left: 50%; left: calc(50% - (16px + 4px)); bottom: 100%; @@ -15048,7 +15048,7 @@ exports[`Storyshots Forms/InlineMessage Base 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; } @@ -15558,7 +15558,7 @@ label + .circuit-9 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -16199,7 +16199,7 @@ label + .circuit-9 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -16478,7 +16478,7 @@ label + .circuit-9 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -18688,7 +18688,7 @@ label + .circuit-10 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -19151,7 +19151,7 @@ exports[`Storyshots Forms/Selector Base 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -19159,7 +19159,7 @@ exports[`Storyshots Forms/Selector Base 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -19180,6 +19180,8 @@ exports[`Storyshots Forms/Selector Base 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -19238,7 +19240,7 @@ exports[`Storyshots Forms/Selector Disabled 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -19246,7 +19248,7 @@ exports[`Storyshots Forms/Selector Disabled 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -19270,6 +19272,8 @@ exports[`Storyshots Forms/Selector Disabled 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -19334,7 +19338,7 @@ exports[`Storyshots Forms/Selector Selected 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -19342,7 +19346,7 @@ exports[`Storyshots Forms/Selector Selected 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -19363,6 +19367,8 @@ exports[`Storyshots Forms/Selector Selected 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -19422,7 +19428,7 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -19430,7 +19436,7 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -19451,6 +19457,8 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -19549,7 +19557,7 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -19557,7 +19565,7 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -19578,6 +19586,8 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -19899,7 +19909,7 @@ label + .circuit-9 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; @@ -20221,7 +20231,7 @@ label + .circuit-9 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; diff --git a/src/components/Badge/Badge.js b/src/components/Badge/Badge.js index 6c5074337d..f9b1a01ef6 100644 --- a/src/components/Badge/Badge.js +++ b/src/components/Badge/Badge.js @@ -17,7 +17,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { size } from 'polished'; import { subHeadingKilo, focusOutline } from '../../styles/style-helpers'; import { colorNames } from '../../styles/constants'; @@ -80,7 +79,8 @@ const circleStyles = ({ circle }) => display: flex; align-items: center; justify-content: center; - ${size(24)}; + height: 24px; + width: 24px; `; const clickableStyles = ({ theme, onClick, color }) => { diff --git a/src/components/Card/__snapshots__/Card.spec.js.snap b/src/components/Card/__snapshots__/Card.spec.js.snap index b4f94a38ce..7c8a5a1476 100644 --- a/src/components/Card/__snapshots__/Card.spec.js.snap +++ b/src/components/Card/__snapshots__/Card.spec.js.snap @@ -15,7 +15,7 @@ exports[`Card should render with default styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; } @@ -40,7 +40,7 @@ exports[`Card should render with shadow styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; } @@ -65,7 +65,7 @@ exports[`Card should render with shadow styles 2`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); padding: 16px 24px; } @@ -90,7 +90,7 @@ exports[`Card should render with shadow styles 3`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; } @@ -115,7 +115,7 @@ exports[`Card should render with spacing styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 16px; } @@ -140,7 +140,7 @@ exports[`Card should render with spacing styles 2`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; } diff --git a/src/components/CardList/__snapshots__/CardList.spec.js.snap b/src/components/CardList/__snapshots__/CardList.spec.js.snap index 5f72e5758e..af76a096f1 100644 --- a/src/components/CardList/__snapshots__/CardList.spec.js.snap +++ b/src/components/CardList/__snapshots__/CardList.spec.js.snap @@ -15,7 +15,7 @@ exports[`CardList should render with default styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); padding: 16px 24px; padding: 0; } diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js index d36601e104..d72e91e02a 100644 --- a/src/components/Checkbox/Checkbox.js +++ b/src/components/Checkbox/Checkbox.js @@ -17,10 +17,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import styled from '@emotion/styled'; -import { hideVisually, size } from 'polished'; import { Check } from '@sumup/icons'; -import { disableVisually, focusOutline } from '../../styles/style-helpers'; +import { + disableVisually, + hideVisually, + focusOutline +} from '../../styles/style-helpers'; import { childrenPropType } from '../../util/shared-prop-types'; import { uniqueId } from '../../util/id'; import Tooltip from '../Tooltip'; @@ -34,7 +37,8 @@ const labelBaseStyles = ({ theme }) => css` cursor: pointer; &::before { - ${size(theme.spacings.mega)}; + height: ${theme.spacings.mega}; + width: ${theme.spacings.mega}; box-sizing: border-box; box-shadow: inset 0 1px 2px 0 rgba(102, 113, 123, 0.12); background-color: ${theme.colors.white}; @@ -50,7 +54,8 @@ const labelBaseStyles = ({ theme }) => css` } svg { - ${size(theme.spacings.mega)}; + height: ${theme.spacings.mega}; + width: ${theme.spacings.mega}; padding: 2px; box-sizing: border-box; color: ${theme.colors.p500}; diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap index 6a405c6ce3..b3e7a09844 100644 --- a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap +++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap @@ -105,7 +105,7 @@ exports[`Checkbox should render with a tooltip when passed a validation hint 1`] transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); left: 50%; left: calc(50% - (16px + 4px)); bottom: 100%; diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 481c9897d2..441704626a 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -15,9 +15,9 @@ import React, { Children, cloneElement, FC, ReactElement } from 'react'; import { css } from '@emotion/core'; -import { hideVisually } from 'polished'; import { Theme } from '@sumup/design-tokens'; +import { hideVisually } from '../../styles/style-helpers'; import styled from '../../styles/styled'; import { Button, ButtonProps } from '../Button/Button'; diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 5025aaae78..57ef51dc2a 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -18,10 +18,14 @@ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { find, identity } from 'lodash/fp'; -import { size, hideVisually } from 'polished'; + import { CircleCheckmark, CircleWarning, CircleCross } from '@sumup/icons'; -import { textMega, disableVisually } from '../../styles/style-helpers'; +import { + textMega, + disableVisually, + hideVisually +} from '../../styles/style-helpers'; import { directions } from '../../styles/constants'; import { childrenPropType } from '../../util/shared-prop-types'; @@ -164,7 +168,8 @@ const prefixStyles = theme => css` pointer-events: none; color: ${theme.colors.n700}; padding: ${theme.spacings.kilo}; - ${size(theme.spacings.peta)}; + height: ${theme.spacings.peta}; + width: ${theme.spacings.peta}; `; /** @@ -179,7 +184,8 @@ const suffixStyles = theme => css` pointer-events: none; color: ${theme.colors.n700}; padding: ${theme.spacings.kilo}; - ${size(theme.spacings.peta)}; + height: ${theme.spacings.peta}; + width: ${theme.spacings.peta}; `; const tooltipBaseStyles = css` diff --git a/src/components/Input/__snapshots__/Input.spec.js.snap b/src/components/Input/__snapshots__/Input.spec.js.snap index deb9e11c3f..6eb31bf806 100644 --- a/src/components/Input/__snapshots__/Input.spec.js.snap +++ b/src/components/Input/__snapshots__/Input.spec.js.snap @@ -521,7 +521,7 @@ label + .circuit-6 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; diff --git a/src/components/Label/Label.js b/src/components/Label/Label.js index 7ce0881af4..c75d35a8f9 100644 --- a/src/components/Label/Label.js +++ b/src/components/Label/Label.js @@ -17,9 +17,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { hideVisually } from 'polished'; -import { textKilo } from '../../styles/style-helpers'; +import { textKilo, hideVisually } from '../../styles/style-helpers'; const visuallyHiddenStyles = ({ visuallyHidden }) => visuallyHidden && diff --git a/src/components/LoadingButton/LoadingButton.tsx b/src/components/LoadingButton/LoadingButton.tsx index b460f58cfd..ba3f656ebb 100644 --- a/src/components/LoadingButton/LoadingButton.tsx +++ b/src/components/LoadingButton/LoadingButton.tsx @@ -15,9 +15,9 @@ import React, { FC } from 'react'; import { css } from '@emotion/core'; -import { hideVisually } from 'polished'; import styled, { StyleProps } from '../../styles/styled'; +import { hideVisually } from '../../styles/style-helpers'; import Button from '../Button'; import { ButtonProps } from '../Button/Button'; import Spinner from '../Spinner'; diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js index e9ce4acbf4..a2cad8d0d0 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.js @@ -19,7 +19,6 @@ import ReactModal from 'react-modal'; import { ClassNames } from '@emotion/core'; import { withTheme } from 'emotion-theming'; import noScroll from 'no-scroll'; -import { transparentize } from 'polished'; import { mapValues } from 'lodash/fp'; import { themePropType } from '../../util/shared-prop-types'; @@ -36,7 +35,6 @@ export const APP_ELEMENT_PROP_TYPE = PropTypes.oneOfType([ const TOP_MARGIN = '10vh'; const TRANSFORM_Y_FLOATING = '10vh'; const FLOATING_TRANSITION = `${TRANSITION_DURATION}ms ease-in-out`; -// eslint-disable-next-line max-len const FIXED_TRANSITION = `${TRANSITION_DURATION}ms cubic-bezier(0, 0.37, 0.64, 1)`; /** @@ -92,7 +90,6 @@ const modalClassName = css => ({ transform: translateY(0); } `, - /* eslint-disable max-len */ beforeClose: ({ theme }) => css` label: modal--before-close; ${theme.mq.untilKilo} { @@ -104,13 +101,12 @@ const modalClassName = css => ({ transform: translateY(${TRANSFORM_Y_FLOATING}); } ` - /* eslint-enable max-len */ }); const overlayClassName = css => ({ base: ({ theme }) => css` label: modal__overlay; - background: ${transparentize(0.84, theme.colors.shadow)}; + background: ${theme.colors.overlay}; bottom: 0; left: 0; opacity: 0; diff --git a/src/components/Modal/components/ModalWrapper/__snapshots__/ModalWrapper.spec.js.snap b/src/components/Modal/components/ModalWrapper/__snapshots__/ModalWrapper.spec.js.snap index 9caf0ba26d..6aa4c3e551 100644 --- a/src/components/Modal/components/ModalWrapper/__snapshots__/ModalWrapper.spec.js.snap +++ b/src/components/Modal/components/ModalWrapper/__snapshots__/ModalWrapper.spec.js.snap @@ -15,7 +15,7 @@ exports[`ModalWrapper should render with default styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07); padding: 16px 24px; width: 100%; } diff --git a/src/components/NotificationBanner/__snapshots__/NotificationBanner.spec.js.snap b/src/components/NotificationBanner/__snapshots__/NotificationBanner.spec.js.snap index 62d9158f72..6b2e21bf71 100644 --- a/src/components/NotificationBanner/__snapshots__/NotificationBanner.spec.js.snap +++ b/src/components/NotificationBanner/__snapshots__/NotificationBanner.spec.js.snap @@ -4,7 +4,7 @@ exports[`NotificationBanner should render with default styles 1`] = ` .circuit-2 { width: 100%; background-color: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-0 { diff --git a/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap b/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap index 9cc9b8b08c..3224cfb4ed 100644 --- a/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap +++ b/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap @@ -43,7 +43,7 @@ exports[`NotificationList should render with default styles 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); padding: 16px 16px; } diff --git a/src/components/RadioButton/RadioButton.js b/src/components/RadioButton/RadioButton.js index e91ecc0914..73f5ccafc4 100644 --- a/src/components/RadioButton/RadioButton.js +++ b/src/components/RadioButton/RadioButton.js @@ -17,9 +17,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { hideVisually, size } from 'polished'; -import { disableVisually, focusOutline } from '../../styles/style-helpers'; +import { + disableVisually, + hideVisually, + focusOutline +} from '../../styles/style-helpers'; import { childrenPropType } from '../../util/shared-prop-types'; import { uniqueId } from '../../util/id'; @@ -32,7 +35,8 @@ const labelBaseStyles = ({ theme }) => css` &::before { box-sizing: border-box; - ${size(theme.spacings.mega)}; + height: ${theme.spacings.mega}; + width: ${theme.spacings.mega}; box-shadow: inset 0 1px 2px 0 rgba(102, 113, 123, 0.12); background-color: ${theme.colors.white}; border: 1px solid ${theme.colors.n500}; @@ -48,7 +52,8 @@ const labelBaseStyles = ({ theme }) => css` &::after { box-sizing: border-box; - ${size(theme.spacings.byte)}; + height: ${theme.spacings.byte}; + width: ${theme.spacings.byte}; background-color: ${theme.colors.p500}; border-radius: 100%; content: ''; diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index 602f464553..d865c153f0 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -17,14 +17,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { size, hideVisually } from 'polished'; import { SelectExpand, CircleCross } from '@sumup/icons'; import { eitherOrPropType, childrenPropType } from '../../util/shared-prop-types'; -import { textMega, disableVisually } from '../../styles/style-helpers'; +import { + textMega, + disableVisually, + hideVisually +} from '../../styles/style-helpers'; import Tooltip from '../Tooltip'; import Label from '../Label'; @@ -89,7 +92,8 @@ const suffixBaseStyles = ({ theme }) => css` z-index: 40; pointer-events: none; position: absolute; - ${size(theme.spacings.peta)}; + height: ${theme.spacings.peta}; + width: ${theme.spacings.peta}; top: 1px; right: 1px; padding: ${theme.spacings.kilo}; @@ -148,7 +152,8 @@ const prefixStyles = theme => css` top: 1px; left: 1px; z-index: 40; - ${size(theme.spacings.peta)}; + height: ${theme.spacings.peta}; + width: ${theme.spacings.peta}; padding: ${theme.spacings.kilo}; pointer-events: none; `; diff --git a/src/components/Select/__snapshots__/Select.spec.js.snap b/src/components/Select/__snapshots__/Select.spec.js.snap index 49ce08e0eb..1d7fca17fa 100644 --- a/src/components/Select/__snapshots__/Select.spec.js.snap +++ b/src/components/Select/__snapshots__/Select.spec.js.snap @@ -352,7 +352,7 @@ label + .circuit-6 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; diff --git a/src/components/Selector/Selector.js b/src/components/Selector/Selector.js index 2681584571..3a3ab4c9fd 100644 --- a/src/components/Selector/Selector.js +++ b/src/components/Selector/Selector.js @@ -17,13 +17,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { hideVisually } from 'polished'; import { childrenPropType } from '../../util/shared-prop-types'; import { shadowSingle, shadowDouble, - focusOutline + focusOutline, + hideVisually } from '../../styles/style-helpers'; import { uniqueId } from '../../util/id'; @@ -58,6 +58,7 @@ const baseStyles = ({ theme }) => css` height: 100%; border-radius: ${theme.borderRadius.giga}; border: ${theme.borderWidth.kilo} solid ${theme.colors.n500}; + transition: border 0.1s ease-in-out; } &:hover { diff --git a/src/components/Selector/__snapshots__/Selector.spec.js.snap b/src/components/Selector/__snapshots__/Selector.spec.js.snap index ca73a6a30e..f22d4ea133 100644 --- a/src/components/Selector/__snapshots__/Selector.spec.js.snap +++ b/src/components/Selector/__snapshots__/Selector.spec.js.snap @@ -30,7 +30,7 @@ exports[`Selector should render a checked selector 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -38,7 +38,7 @@ exports[`Selector should render a checked selector 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -59,6 +59,8 @@ exports[`Selector should render a checked selector 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -119,7 +121,7 @@ exports[`Selector should render a default selector 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -127,7 +129,7 @@ exports[`Selector should render a default selector 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -148,6 +150,8 @@ exports[`Selector should render a default selector 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { @@ -207,7 +211,7 @@ exports[`Selector should render a disabled selector 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -215,7 +219,7 @@ exports[`Selector should render a disabled selector 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -239,6 +243,8 @@ exports[`Selector should render a disabled selector 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { diff --git a/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap b/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap index 04957f3a5c..b88adfdafe 100644 --- a/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap +++ b/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap @@ -30,7 +30,7 @@ exports[`SelectorGroup should render with default styles 1`] = ` .circuit-0:checked + label { background-color: #EDF4FC; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); } .circuit-0:checked + label::before { @@ -38,7 +38,7 @@ exports[`SelectorGroup should render with default styles 1`] = ` } .circuit-2 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); display: block; cursor: pointer; padding: 24px; @@ -59,6 +59,8 @@ exports[`SelectorGroup should render with default styles 1`] = ` height: 100%; border-radius: 5px; border: 1px solid #9DA7B1; + -webkit-transition: border 0.1s ease-in-out; + transition: border 0.1s ease-in-out; } .circuit-2:hover { diff --git a/src/components/Table/__snapshots__/Table.spec.js.snap b/src/components/Table/__snapshots__/Table.spec.js.snap index a2e4720bc7..a3bc7464e6 100644 --- a/src/components/Table/__snapshots__/Table.spec.js.snap +++ b/src/components/Table/__snapshots__/Table.spec.js.snap @@ -3,7 +3,7 @@ exports[`Table Style tests should not render a scrollable table if the rowHeaders prop is true 1`] = ` .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-56 { @@ -551,7 +551,7 @@ tbody .circuit-20:last-child td { exports[`Table Style tests should render a collapsed table 1`] = ` .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-56 { @@ -1100,7 +1100,7 @@ tbody .circuit-20:last-child td { exports[`Table Style tests should render a condensed table 1`] = ` .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-56 { @@ -1828,7 +1828,7 @@ tbody .circuit-18:last-child td { .circuit-50 { position: relative; height: 100%; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } @media (max-width:767px) { @@ -2068,7 +2068,7 @@ tbody .circuit-18:last-child td { exports[`Table Style tests should render with default styles 1`] = ` .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-56 { @@ -2616,7 +2616,7 @@ tbody .circuit-20:last-child td { exports[`Table Style tests should render with rowHeader styles 1`] = ` .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); } .circuit-56 { @@ -3469,7 +3469,7 @@ tbody .circuit-20:last-child td { .circuit-58 { position: relative; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); box-shadow: none; } diff --git a/src/components/Table/components/SortArrow/SortArrow.js b/src/components/Table/components/SortArrow/SortArrow.js index f3f2a60be9..54daf067e5 100644 --- a/src/components/Table/components/SortArrow/SortArrow.js +++ b/src/components/Table/components/SortArrow/SortArrow.js @@ -17,9 +17,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { hideVisually } from 'polished'; import { ChevronUp, ChevronDown } from '@sumup/icons'; +import { hideVisually } from '../../../../styles/style-helpers'; import { ASCENDING, DESCENDING } from '../../constants'; const baseStyles = ({ theme }) => css` diff --git a/src/components/Tabs/__snapshots__/Tabs.spec.js.snap b/src/components/Tabs/__snapshots__/Tabs.spec.js.snap index 3c0c1baf1a..460445ba6a 100644 --- a/src/components/Tabs/__snapshots__/Tabs.spec.js.snap +++ b/src/components/Tabs/__snapshots__/Tabs.spec.js.snap @@ -3,7 +3,7 @@ exports[`Tabs styles should render with default styles 1`] = ` .circuit-6 { background: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); height: 80px; display: -webkit-box; display: -webkit-flex; @@ -173,7 +173,7 @@ exports[`Tabs styles should render with default styles 1`] = ` exports[`Tabs styles should render with stretched styles 1`] = ` .circuit-6 { background: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); height: 80px; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap index 87a232ac9f..2c6626eb22 100644 --- a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap +++ b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap @@ -529,7 +529,7 @@ label + .circuit-6 { transition: opacity 0.3s; font-size: 13px; line-height: 20px; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07); right: 50%; right: calc(50% - (16px + 4px)); bottom: 100%; diff --git a/src/components/Toggle/components/Switch/Switch.js b/src/components/Toggle/components/Switch/Switch.js index 3f95f5bd16..5b7c126da3 100644 --- a/src/components/Toggle/components/Switch/Switch.js +++ b/src/components/Toggle/components/Switch/Switch.js @@ -17,13 +17,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { hideVisually, size } from 'polished'; -import { focusOutline } from '../../../../styles/style-helpers'; +import { focusOutline, hideVisually } from '../../../../styles/style-helpers'; -const TRACK_WIDTH = 40; -const TRACK_HEIGHT = 24; -const KNOB_SIZE = 16; +const TRACK_WIDTH = '40px'; +const TRACK_HEIGHT = '24px'; +const KNOB_SIZE = '16px'; const ANIMATION_TIMING = '200ms ease-in-out'; const knobShadow = color => `0 2px 0 0 ${color}`; @@ -35,12 +34,13 @@ const trackBaseStyles = ({ theme }) => css` border: 0; outline: 0; appearance: none; - flex: 0 0 ${TRACK_WIDTH}px; + flex: 0 0 ${TRACK_WIDTH}; background-color: ${theme.colors.n300}; - border-radius: ${TRACK_HEIGHT}px; + border-radius: ${TRACK_HEIGHT}; position: relative; transition: background-color ${ANIMATION_TIMING}; - ${size(TRACK_HEIGHT, TRACK_WIDTH)}; + height: ${TRACK_HEIGHT}; + width: ${TRACK_WIDTH}; overflow: visible; cursor: pointer; @@ -67,8 +67,9 @@ const knobBaseStyles = ({ theme }) => css` top: 50%; transform: translate3d(${theme.spacings.bit}, -50%, 0); transition: box-shadow ${ANIMATION_TIMING}, transform ${ANIMATION_TIMING}; - ${size(KNOB_SIZE)}; - border-radius: ${KNOB_SIZE}px; + height: ${KNOB_SIZE}; + width: ${KNOB_SIZE}; + border-radius: ${KNOB_SIZE}; `; const knobOnStyles = ({ theme, on }) => @@ -77,7 +78,7 @@ const knobOnStyles = ({ theme, on }) => label: toggle__switch-knob--on; box-shadow: ${knobShadow(theme.colors.p700)}; transform: translate3d( - calc(${TRACK_WIDTH - KNOB_SIZE}px - ${theme.spacings.bit}), + calc(${TRACK_WIDTH} - ${KNOB_SIZE} - ${theme.spacings.bit}), -50%, 0 ); diff --git a/src/components/Toggle/components/Switch/__snapshots__/Switch.spec.js.snap b/src/components/Toggle/components/Switch/__snapshots__/Switch.spec.js.snap index 20503da913..337273925d 100644 --- a/src/components/Toggle/components/Switch/__snapshots__/Switch.spec.js.snap +++ b/src/components/Toggle/components/Switch/__snapshots__/Switch.spec.js.snap @@ -141,9 +141,9 @@ exports[`Switch should have the correct on styles 1`] = ` width: 16px; border-radius: 16px; box-shadow: 0 2px 0 0 #1760CE; - -webkit-transform: translate3d( calc(24px - 4px),-50%,0 ); - -ms-transform: translate3d( calc(24px - 4px),-50%,0 ); - transform: translate3d( calc(24px - 4px),-50%,0 ); + -webkit-transform: translate3d( calc(40px - 16px - 4px),-50%,0 ); + -ms-transform: translate3d( calc(40px - 16px - 4px),-50%,0 ); + transform: translate3d( calc(40px - 16px - 4px),-50%,0 ); }