From 3344f46f8b21060a0e5f0bb3962f53551d0c0d37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 30 Apr 2020 09:08:44 +0200 Subject: [PATCH] feat(components): extract icons to separate package (#571) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(components): prevent background from scrolling when modal is open (#531) * fix(components): add class to html when Modal is open Co-authored-by: Lari Maza * fix(components): move global styles to ModalProvider Co-authored-by: Lari Maza Co-authored-by: Lari Maza * fix(components): add top margin to Select below Label (#532) * fix: adds Select margin top when label above * fix: Adjust export naming for the base Select case * Fix hamburger typos (#536) * fix(components): remove scrollbar from LoadingButton (#542) ISSUES CLOSED: #539 * chore(deploy): fix automatic deployment to GitHub Pages (#540) * chore(configs): fix deployment to GH Pages * chore(configs): resolve lint issues in Travis config * chore(configs): do not run tests before deploy * chore(configs): opt into v2 deployments * chore(configs): deploy from the master branch only * Revert "chore(configs): do not run tests before deploy" This reverts commit 4d11c26698617d56f4868b1891b643ae6044b17b. * docs: fix Storybook links (#547) * docs(docs): fix story hierarchy separators in links * docs(components): prevent awkward wrapping on the homepage * feat(components): add support for async filtering to AutoCompleteInput (#549) * feat(components): add input value change callback to AutocompleteInput This enables dynamic fetching and updating of the suggestion items. * feat(components): add support for async filtering to the AutoCompleteInput * docs(components): rename items to options * test(components): update snapshots * refactor(components): use new prop name in AutoCompleteTags * feat(components): improve styles of AutocompleteInput * style(components): rename style object * fix(components): remove invalid Button props from HTML (#548) * fix: don't pass invalid props to Link * fix: added unit test * fix: implemented shouldForwardProp * fix(components): fill invalid radio button with red to match checkbox (#552) * fix(components): replace reset icon on SearchInput component (#555) * Remove default clear icon from SearchInput component * Update snapshot tests * Render clear icon based on onClear handler; Add unit tests * Fix story * Fix snapshot test Co-authored-by: Mariela Kasovska * docs: show addons panel by default (#557) This should make it easier to find code samples. * fix(components): make AutocompleteInput compatible with new clear option (#558) * fix(components): make AutocompleteInput compatible with new clear option * test(components): update storyshots * fix(components): improve prop type * feat(components): improve clear button on inputs (#559) * feat(components): increase tap target size on input prefix and suffix By switching from margin to padding for the spacing, the prefix and suffix elements get a much larger tap target size: 16px to 40px. This is especially important on touchscreen devices, but also improves usability for mouse users. * feat(components): improve accessibility of the SearchInput clear button * fix(components): deprecate showClear in favor of onClear prop This brings the AutocompleteInput API in line with the SearchInput API. It also fixes the functionality of the clear button on the AutocompleteInput. * fix(components): remove default prop to silence deprecation warning * fix(components): add styles to the card elements in card stories * feat(components): pass initial value to AutocompleteInput (#562) * feat(components): pass initial value to AutocompleteInput * test(components): update storyshots * feat(components): refactor AutoCompleteTags (#561) * Refactor AutoCompleteTags * Update snapshot tests * Make AutoCompleteTags class * Update snapshots * Update src/components/AutoCompleteTags/AutoCompleteTags.spec.js Co-Authored-By: Connor Bär * Fix test Co-authored-by: Connor Bär * fix(components): update clearfix to improve accessibility (#565) * chore(configs): disable security script on Travis This script errors most of the time. It works on the alpha branch which uses GitHub Actions. * feat(components): update InfoIcon (#567) * Update InfoIcon component * feat(components): Toggle component - ability to be right aligned (#570) * Toggle component - ability to be right aligned * Fixed typo * ESLint fix - max-len * Storyshots snapshot updated * PR comments changes * Snapshot update * Space added between text and Switch * Snapshot update * Reversed Toggle only shown on mobile * feat(components): add optional suffix to the Tag component (#566) * Replace right and left icon with render props * Update docs and storyshots * fix(components): reduce icon margin on Tag (#573) * feat(components): remove deprecated props alpha * feat(configs): install @sumup/icons feature/icons * docs(docs): add page with icon search feature/icons * feat(components): remove CardSchemes and PaymentMethodIcon components feature/icons * feat(components): remove InfoIcon component This component wasn't publicly exposed or used internally. Just dead code. feature/icons * feat(components): replace SVGs in CloseButton feature/icons * feat(components): rewrite Spinner in pure CSS feature/icons * feat(components): update LoadingButton with new Spinner feature/icons * feat(components): replace SVGs in Input components feature/icons * feat(components): replace SVG in Checkbox component feature/icons * feat(components): replace SVGs in Select component feature/icons * feat(components): replace SVGs in Notification component feature/icons * feat(components): replace SVGs in Calendar components feature/icons * feat(components): replace SVG in Table component feature/icons * feat(components): replace SVGs in Sidebar components feature/icons * WIP: replace SVGs in Carousel components feature/icons * test(components): update storyshots feature/icons * test(components): temporarily disable a11y test feature/icons * docs(docs): update icon color options feature/icons * feat(components): update icons to latest versions feature/icons * test(configs): fix typo in coverage config feature/icons * feat: update @sumup/icons to latest feature/icons * feat: update @sumup/icons to latest feature/icons Co-authored-by: Lari Maza Co-authored-by: nico Co-authored-by: Lari Maza Co-authored-by: Dmitri Suvorov <53574544+dmitri-suvorov-sumup@users.noreply.github.com> Co-authored-by: Mariela Kasovska Co-authored-by: Turcan Vladimir <36477870+justman00@users.noreply.github.com> Co-authored-by: Hristian Garnev <62241171+hrstngrnvsmp@users.noreply.github.com> BREAKING CHANGE: The AutoCompleteInput's `defaultSelectedItem` prop has been renamed to `initialSelectedItem` to match Downshift's API. BREAKING CHANGE: The CardSchemes and PaymentMethodIcon components have been removed. Use [@sumup/icons](https://github.com/sumup-oss/icons) instead. BREAKING CHANGE: The [@sumup/icons](https://github.com/sumup-oss/icons) package was added as a required peer dependency. --- .storybook/.babelrc | 7 +- .storybook/components/IconSize.js | 2 - .storybook/components/Icons.js | 189 + .storybook/components/index.js | 1 + .storybook/preview.js | 9 +- .babelrc => babel.config.json | 1 - docs/advanced/icons.story.mdx | 15 + jest.config.js | 2 +- package.json | 3 +- scripts/static-styles/config.js | 5 +- src/__snapshots__/storyshots.spec.js.snap | 4161 +++++++++-------- .../AutoCompleteInput.spec.js.snap | 24 +- .../AutoCompleteTags.spec.js.snap | 24 +- src/components/Calendar/RangePicker.js | 22 +- .../Calendar/RangePickerController.js | 6 +- src/components/Calendar/SingleDayPicker.js | 14 +- .../__snapshots__/RangePicker.spec.js.snap | 19 +- src/components/Calendar/arrow-left.svg | 22 - src/components/Calendar/arrow-right.svg | 8 - src/components/Calendar/close.svg | 16 - .../CardSchemes/CardSchemes.docs.mdx | 26 - src/components/CardSchemes/CardSchemes.js | 84 - .../CardSchemes/CardSchemes.spec.js | 57 - .../CardSchemes/CardSchemes.story.js | 48 - .../__snapshots__/CardSchemes.spec.js.snap | 379 -- .../CardSchemes/card-scheme-icons.js | 84 - .../PaymentMethodIcon/PaymentMethodIcon.js | 89 - .../PaymentMethodIcon.spec.js | 58 - .../PaymentMethodIcon.story.js | 44 - .../PaymentMethodIcon.spec.js.snap | 29 - .../components/PaymentMethodIcon/index.js | 18 - src/components/CardSchemes/icons/amex.svg | 10 - .../CardSchemes/icons/apple-pay.svg | 23 - src/components/CardSchemes/icons/balance.svg | 6 - .../CardSchemes/icons/banco-estado.svg | 4 - src/components/CardSchemes/icons/card.svg | 9 - src/components/CardSchemes/icons/cash.svg | 6 - src/components/CardSchemes/icons/dankort.svg | 13 - src/components/CardSchemes/icons/diners.svg | 23 - src/components/CardSchemes/icons/discover.svg | 12 - src/components/CardSchemes/icons/ec.svg | 18 - src/components/CardSchemes/icons/elo.svg | 13 - src/components/CardSchemes/icons/elv.svg | 15 - .../CardSchemes/icons/google-pay.svg | 1 - src/components/CardSchemes/icons/hiper.svg | 15 - .../CardSchemes/icons/hipercard.svg | 8 - src/components/CardSchemes/icons/jcb.svg | 9 - src/components/CardSchemes/icons/maestro.svg | 11 - .../CardSchemes/icons/mastercard.svg | 11 - src/components/CardSchemes/icons/nfc.svg | 6 - .../CardSchemes/icons/red-compra.svg | 1 - .../CardSchemes/icons/union-pay.svg | 7 - src/components/CardSchemes/icons/unknown.svg | 9 - .../CardSchemes/icons/visa-electron.svg | 9 - src/components/CardSchemes/icons/visa.svg | 9 - src/components/CardSchemes/icons/vpay.svg | 10 - src/components/CardSchemes/index.js | 18 - .../__snapshots__/Carousel.spec.js.snap | 637 +-- .../Carousel/components/Buttons/Buttons.js | 22 +- .../__snapshots__/Buttons.spec.js.snap | 169 +- .../components/Buttons/icons/arrow.svg | 4 - .../components/Buttons/icons/pause.svg | 4 - .../components/Buttons/icons/play.svg | 4 - src/components/Checkbox/Checkbox.js | 14 +- .../__snapshots__/Checkbox.spec.js.snap | 129 +- src/components/Checkbox/checked-icon.svg | 6 - src/components/CloseButton/CloseButton.js | 8 +- .../__snapshots__/CloseButton.spec.js.snap | 27 +- src/components/CloseButton/close-icon.svg | 4 - .../SimpleCurrencyInput.js | 21 +- .../SimpleCurrencyInput.spec.js.snap | 161 +- src/components/IconButton/IconButton.js | 8 +- src/components/IconButton/IconButton.story.js | 23 +- .../__snapshots__/IconButton.spec.js.snap | 7 +- src/components/InfoIcon/InfoIcon.js | 28 - src/components/InfoIcon/InfoIcon.spec.js | 37 - src/components/InfoIcon/InfoIcon.story.js | 28 - .../__snapshots__/InfoIcon.spec.js.snap | 7 - src/components/InfoIcon/index.js | 18 - src/components/InfoIcon/info.svg | 3 - src/components/Input/Input.js | 30 +- .../Input/__snapshots__/Input.spec.js.snap | 188 +- .../LoadingButton/LoadingButton.story.js | 16 +- .../__snapshots__/LoadingButton.spec.js.snap | 277 +- .../Button/__snapshots__/Button.spec.js.snap | 271 +- .../components/LoadingIcon/LoadingIcon.js | 78 +- .../__snapshots__/LoadingIcon.spec.js.snap | 601 +-- src/components/LoadingButton/icons/error.svg | 3 - .../LoadingButton/icons/success.svg | 3 - .../Notification/components/Icon/Icon.js | 18 +- .../Icon/__snapshots__/Icon.spec.js.snap | 54 +- .../components/NotificationWarning.js | 28 - .../Notification/components/index.js | 3 +- .../Notification/notification-error.svg | 7 - .../Notification/notification-success.svg | 15 - src/components/SearchInput/SearchInput.js | 7 +- .../__snapshots__/SearchInput.spec.js.snap | 48 +- src/components/SearchInput/icons/clear.svg | 3 - src/components/SearchInput/icons/search.svg | 1 - src/components/Select/Select.js | 18 +- src/components/Select/Select.spec.js | 4 +- src/components/Select/Select.story.js | 50 +- .../Select/__snapshots__/Select.spec.js.snap | 226 +- src/components/Select/flags/de.svg | 10 - src/components/Select/flags/fr.svg | 10 - src/components/Select/flags/us.svg | 11 - src/components/Sidebar/Sidebar.story.js | 58 +- .../__snapshots__/Sidebar.spec.js.snap | 34 +- .../components/Aggregator/Aggregator.js | 12 - .../__snapshots__/Aggregator.spec.js.snap | 42 +- .../components/CloseButton/CloseButton.js | 12 +- .../__snapshots__/CloseButton.spec.js.snap | 34 +- .../components/CloseButton/closeIcon.svg | 1 - .../Sidebar/components/NavItem/NavItem.js | 12 - .../__snapshots__/NavItem.spec.js.snap | 32 - .../Sidebar/components/NavItem/lock.svg | 3 - .../Sidebar/components/NavItem/utils.js | 5 +- .../Sidebar/components/NavItem/utils.spec.js | 5 +- src/components/Sidebar/icons/home-empty.svg | 14 - src/components/Sidebar/icons/home-full.svg | 14 - src/components/Sidebar/icons/list-empty.svg | 19 - src/components/Sidebar/icons/list-full.svg | 3 - src/components/Sidebar/icons/me-empty.svg | 19 - src/components/Sidebar/icons/me-full.svg | 19 - src/components/Spinner/Spinner.js | 74 +- src/components/Spinner/Spinner.spec.js | 5 + src/components/Spinner/Spinner.story.js | 15 +- .../__snapshots__/Spinner.spec.js.snap | 122 +- src/components/Spinner/icons/spinner.svg | 5 - .../Table/__snapshots__/Table.spec.js.snap | 707 ++- src/components/Table/components/Arrow.svg | 3 - .../Table/components/SortArrow/SortArrow.js | 41 +- .../__snapshots__/SortArrow.spec.js.snap | 143 +- .../Table/components/SortArrow/arrow.svg | 3 - .../__snapshots__/TableHead.spec.js.snap | 116 +- .../__snapshots__/TableHeader.spec.js.snap | 163 +- src/components/Tag/Tag.js | 24 +- src/components/Tag/Tag.spec.js | 82 +- src/components/Tag/Tag.story.js | 10 +- .../Tag/__snapshots__/Tag.spec.js.snap | 71 +- src/components/Tag/icon-tick.svg | 10 - .../__snapshots__/TextArea.spec.js.snap | 181 +- src/components/Tooltip/Tooltip.story.js | 19 +- src/icons/arrows.svg | 3 - src/icons/error.svg | 16 - src/icons/valid.svg | 15 - src/icons/warning.svg | 16 - src/index.js | 3 - src/styles/style-helpers.js | 9 +- src/themes/circuit.js | 4 +- yarn.lock | 78 +- 151 files changed, 5423 insertions(+), 5944 deletions(-) create mode 100644 .storybook/components/Icons.js rename .babelrc => babel.config.json (97%) create mode 100644 docs/advanced/icons.story.mdx delete mode 100644 src/components/Calendar/arrow-left.svg delete mode 100644 src/components/Calendar/arrow-right.svg delete mode 100644 src/components/Calendar/close.svg delete mode 100644 src/components/CardSchemes/CardSchemes.docs.mdx delete mode 100644 src/components/CardSchemes/CardSchemes.js delete mode 100644 src/components/CardSchemes/CardSchemes.spec.js delete mode 100644 src/components/CardSchemes/CardSchemes.story.js delete mode 100644 src/components/CardSchemes/__snapshots__/CardSchemes.spec.js.snap delete mode 100644 src/components/CardSchemes/card-scheme-icons.js delete mode 100644 src/components/CardSchemes/components/PaymentMethodIcon/PaymentMethodIcon.js delete mode 100644 src/components/CardSchemes/components/PaymentMethodIcon/PaymentMethodIcon.spec.js delete mode 100644 src/components/CardSchemes/components/PaymentMethodIcon/PaymentMethodIcon.story.js delete mode 100644 src/components/CardSchemes/components/PaymentMethodIcon/__snapshots__/PaymentMethodIcon.spec.js.snap delete mode 100644 src/components/CardSchemes/components/PaymentMethodIcon/index.js delete mode 100755 src/components/CardSchemes/icons/amex.svg delete mode 100644 src/components/CardSchemes/icons/apple-pay.svg delete mode 100755 src/components/CardSchemes/icons/balance.svg delete mode 100644 src/components/CardSchemes/icons/banco-estado.svg delete mode 100755 src/components/CardSchemes/icons/card.svg delete mode 100755 src/components/CardSchemes/icons/cash.svg delete mode 100644 src/components/CardSchemes/icons/dankort.svg delete mode 100755 src/components/CardSchemes/icons/diners.svg delete mode 100755 src/components/CardSchemes/icons/discover.svg delete mode 100755 src/components/CardSchemes/icons/ec.svg delete mode 100755 src/components/CardSchemes/icons/elo.svg delete mode 100755 src/components/CardSchemes/icons/elv.svg delete mode 100644 src/components/CardSchemes/icons/google-pay.svg delete mode 100644 src/components/CardSchemes/icons/hiper.svg delete mode 100755 src/components/CardSchemes/icons/hipercard.svg delete mode 100644 src/components/CardSchemes/icons/jcb.svg delete mode 100755 src/components/CardSchemes/icons/maestro.svg delete mode 100755 src/components/CardSchemes/icons/mastercard.svg delete mode 100644 src/components/CardSchemes/icons/nfc.svg delete mode 100644 src/components/CardSchemes/icons/red-compra.svg delete mode 100644 src/components/CardSchemes/icons/union-pay.svg delete mode 100755 src/components/CardSchemes/icons/unknown.svg delete mode 100755 src/components/CardSchemes/icons/visa-electron.svg delete mode 100755 src/components/CardSchemes/icons/visa.svg delete mode 100755 src/components/CardSchemes/icons/vpay.svg delete mode 100644 src/components/CardSchemes/index.js delete mode 100644 src/components/Carousel/components/Buttons/icons/arrow.svg delete mode 100644 src/components/Carousel/components/Buttons/icons/pause.svg delete mode 100644 src/components/Carousel/components/Buttons/icons/play.svg delete mode 100644 src/components/Checkbox/checked-icon.svg delete mode 100755 src/components/CloseButton/close-icon.svg delete mode 100644 src/components/InfoIcon/InfoIcon.js delete mode 100644 src/components/InfoIcon/InfoIcon.spec.js delete mode 100644 src/components/InfoIcon/InfoIcon.story.js delete mode 100644 src/components/InfoIcon/__snapshots__/InfoIcon.spec.js.snap delete mode 100644 src/components/InfoIcon/index.js delete mode 100644 src/components/InfoIcon/info.svg delete mode 100644 src/components/LoadingButton/icons/error.svg delete mode 100644 src/components/LoadingButton/icons/success.svg delete mode 100644 src/components/Notification/components/NotificationWarning.js delete mode 100644 src/components/Notification/notification-error.svg delete mode 100644 src/components/Notification/notification-success.svg delete mode 100644 src/components/SearchInput/icons/clear.svg delete mode 100644 src/components/SearchInput/icons/search.svg delete mode 100644 src/components/Select/flags/de.svg delete mode 100644 src/components/Select/flags/fr.svg delete mode 100644 src/components/Select/flags/us.svg delete mode 100644 src/components/Sidebar/components/CloseButton/closeIcon.svg delete mode 100644 src/components/Sidebar/components/NavItem/lock.svg delete mode 100644 src/components/Sidebar/icons/home-empty.svg delete mode 100644 src/components/Sidebar/icons/home-full.svg delete mode 100644 src/components/Sidebar/icons/list-empty.svg delete mode 100644 src/components/Sidebar/icons/list-full.svg delete mode 100644 src/components/Sidebar/icons/me-empty.svg delete mode 100644 src/components/Sidebar/icons/me-full.svg delete mode 100755 src/components/Spinner/icons/spinner.svg delete mode 100644 src/components/Table/components/Arrow.svg delete mode 100644 src/components/Table/components/SortArrow/arrow.svg delete mode 100644 src/components/Tag/icon-tick.svg delete mode 100644 src/icons/arrows.svg delete mode 100644 src/icons/error.svg delete mode 100644 src/icons/valid.svg delete mode 100644 src/icons/warning.svg diff --git a/.storybook/.babelrc b/.storybook/.babelrc index a00483203c..9a32bba549 100644 --- a/.storybook/.babelrc +++ b/.storybook/.babelrc @@ -1,10 +1,5 @@ { - "plugins": [ - "@babel/plugin-proposal-class-properties", - "lodash", - "inline-react-svg", - "macros" - ], + "plugins": ["@babel/plugin-proposal-class-properties", "lodash", "macros"], "presets": [ ["@babel/preset-env", { "loose": true }], "@babel/preset-react", diff --git a/.storybook/components/IconSize.js b/.storybook/components/IconSize.js index 900317760b..42a916f149 100644 --- a/.storybook/components/IconSize.js +++ b/.storybook/components/IconSize.js @@ -69,8 +69,6 @@ const IconSize = ({ size }) => ( ); IconSize.propTypes = { - // eslint-disable-next-line - theme: PropTypes.object.isRequired, size: PropTypes.string.isRequired }; diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js new file mode 100644 index 0000000000..8d15a5aa4b --- /dev/null +++ b/.storybook/components/Icons.js @@ -0,0 +1,189 @@ +/** + * 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 React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import styled from '@emotion/styled'; +import { css } from '@emotion/core'; +import { ThemeProvider } from 'emotion-theming'; +import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp'; +import * as iconComponents from '@sumup/icons'; +import { icons } from '@sumup/icons/manifest.json'; + +import { + theme as themes, + Heading, + Text, + InlineElements, + Label, + SearchInput, + Select +} from '../../src'; + +function group(key, collection) { + const grouped = groupBy(key, collection); + return entries(grouped).map(([name, items]) => ({ [key]: name, items })); +} + +function getComponentName(name) { + // Split on non-word characters + const words = name.split(/[^a-z0-9]/i); + // Uppercase the first letter and lowercase the rest + const pascalCased = words.map( + part => part.charAt(0).toUpperCase() + part.substr(1).toLowerCase() + ); + return pascalCased.join(''); +} + +const Filters = styled(InlineElements)` + margin-top: ${p => p.theme.spacings.tera}; + margin-bottom: ${p => p.theme.spacings.peta}; +`; + +const Category = styled.section` + margin-bottom: ${p => p.theme.spacings.tera}; +`; + +const List = styled.div` + display: flex; + flex-wrap: wrap; +`; + +const Wrapper = styled.div` + width: 7.5rem; + text-align: center; + margin-top: ${p => p.theme.spacings.giga}; + margin-bottom: ${p => p.theme.spacings.giga}; +`; + +const Size = styled.p` + color: ${p => p.theme.colors.n700}; + font-style: italic; +`; + +const iconStyles = color => theme => css` + height: 3rem; + width: auto; + max-width: 6rem; + color: ${theme.colors[color]}; + background-color: ${color === 'white' + ? theme.colors.n900 + : theme.colors.bodyBg}; +`; + +const Icons = () => { + const [search, setSearch] = useState(''); + const [size, setSize] = useState('all'); + const [color, setColor] = useState('n900'); + + const handleSearch = event => { + setSearch(event.target.value); + }; + + const handleSizeChange = event => { + setSize(event.target.value); + }; + + const handleColorChange = event => { + setColor(event.target.value); + }; + + const sizeOptions = [ + { label: 'All sizes', value: 'all' }, + { label: 'Small', value: 'small' }, + { label: 'Large', value: 'large' } + ]; + + const colorOptions = [ + { label: 'Dark gray', value: 'n900' }, + { label: 'Gray', value: 'n500' }, + { label: 'White', value: 'white' }, + { label: 'Primary', value: 'p500' }, + { label: 'Success', value: 'success' }, + { label: 'Warning', value: 'warning' }, + { label: 'Danger', value: 'danger' } + ]; + + const activeIcons = icons.filter( + icon => + includes(search, icon.name) && (size === 'all' || size === icon.size) + ); + + return ( + + + + + + + + {isEmpty(activeIcons) ? ( + No icons found + ) : ( + group('category', activeIcons).map(({ category, items }) => ( + + + {category} + + + {sortBy('name', items).map(icon => { + const id = `${icon.name}-${icon.size}`; + const componentName = getComponentName(icon.name); + const Icon = iconComponents[componentName]; + return ( + + + + + ); + })} + + + )) + )} + + ); +}; + +export default Icons; diff --git a/.storybook/components/index.js b/.storybook/components/index.js index 3c7bf9bbaf..111abd1a5f 100644 --- a/.storybook/components/index.js +++ b/.storybook/components/index.js @@ -31,6 +31,7 @@ export { default as MediaQueriesTable } from './MediaQueriesTable'; export { default as BorderWidth } from './BorderWidth'; export { default as BorderRadius } from './BorderRadius'; export { default as IconSize } from './IconSize'; +export { default as Icons } from './Icons'; export { Grid, Row, Col } from './Grid'; export { default as Intro } from './Intro'; export { default as Teaser } from './Teaser'; diff --git a/.storybook/preview.js b/.storybook/preview.js index b011cc51bc..19b77f6b27 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -21,7 +21,14 @@ const SORT_ORDER = { 'Contributing', 'Code of Conduct' ], - Advanced: ['Static CSS', 'Base Components', 'Theme', 'Grid', 'Fonts'], + Advanced: [ + 'Static CSS', + 'Base Components', + 'Theme', + 'Grid', + 'Icons', + 'Fonts' + ], Typography: ['Heading', 'SubHeading', 'Text'], Layout: [], Forms: [], diff --git a/.babelrc b/babel.config.json similarity index 97% rename from .babelrc rename to babel.config.json index bd42e670ab..946fca9046 100644 --- a/.babelrc +++ b/babel.config.json @@ -16,7 +16,6 @@ "plugins": [ "@babel/plugin-proposal-class-properties", "lodash", - "inline-react-svg", "dev-expression", "react-docgen" ], diff --git a/docs/advanced/icons.story.mdx b/docs/advanced/icons.story.mdx new file mode 100644 index 0000000000..a0e4fdd6a8 --- /dev/null +++ b/docs/advanced/icons.story.mdx @@ -0,0 +1,15 @@ +import { Meta, Icons } from '../../.storybook/components'; + + + +# Icons + +The icons used throughout Circuit UI come from [SumUp's icon library](https://github.com/sumup-oss/icons). The [`@sumup/icons`](https://www.npmjs.com/package/@sumup/icons) package is a required peer dependency of [`@sumup/circuit-ui`](https://www.npmjs.com/package/@sumup/circuit-ui). You can install the package by running the following command in your project: + +```bash +yarn add @sumup/icons +# Or if you prefer npm: +npm install @sumup/icons +``` + + diff --git a/jest.config.js b/jest.config.js index d200e05be2..12dbec56e7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -23,7 +23,7 @@ module.exports = { collectCoverageFrom: [ 'src/@(components|util|styles)/**/*.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/index.{ts,tsx,js,jsx}', - '!src/@(components|util|styles)/**/*.story.{jts,tsx,s,jsx}', + '!src/@(components|util|styles)/**/*.story.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/*.docs.mdx', '!**/node_modules/**' ], diff --git a/package.json b/package.json index dc72d8b5de..119d4c2364 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@storybook/react": "^5.2.0", "@storybook/source-loader": "^5.2.4", "@sumup/foundry": "^2.1.0", + "@sumup/icons": "^1.0.0-canary.7", "@svgr/webpack": "^4.3.3", "@testing-library/dom": "^6.5.0", "@testing-library/jest-dom": "^4.1.0", @@ -114,7 +115,6 @@ "babel-loader": "^8.0.5", "babel-plugin-dev-expression": "^0.2.2", "babel-plugin-dynamic-import-node": "^2.2.0", - "babel-plugin-inline-react-svg": "^1.1.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-module-resolver": "^3.2.0", "babel-plugin-react-docgen": "^3.0.0", @@ -155,6 +155,7 @@ "@emotion/is-prop-valid": "0.8.x", "@emotion/styled": "10.x", "@emotion/stylis": "0.8.x", + "@sumup/icons": "1.x", "emotion-theming": "10.x", "react": ">=16.8.0 < 17", "react-dom": ">=16.8.0 < 17" diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js index 2aa945474d..c370124fa1 100644 --- a/scripts/static-styles/config.js +++ b/scripts/static-styles/config.js @@ -181,8 +181,9 @@ export default { size: [SubHeading.KILO, SubHeading.MEGA] }), getComponentInfo(Tag, { - icon: PropTypes.element, - onRemove: PropTypes.func + onRemove: PropTypes.func, + prefix: PropTypes.element, + suffix: PropTypes.element }), getComponentInfo(Text, { size: [Text.KILO, Text.MEGA, Text.GIGA] diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index dcbde1675f..01bf275edb 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -1193,10 +1193,14 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = ` background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-3:hover { + color: #212933; } .circuit-3:focus, @@ -1211,13 +1215,24 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = ` `; @@ -1309,7 +1324,7 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = ` } } -.circuit-8 { +.circuit-7 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -1335,36 +1350,36 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = ` overflow: hidden; } -.circuit-8:active { +.circuit-7:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-8:focus { +.circuit-7:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-8:hover { +.circuit-7:hover { background-color: #D8DDE1; } -.circuit-8:hover, -.circuit-8:active { +.circuit-7:hover, +.circuit-7:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-8[href] { +.circuit-7[href] { display: inline-block; } -.circuit-8:disabled, -.circuit-8[disabled] { +.circuit-7:disabled, +.circuit-7[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -1373,60 +1388,60 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = ` user-selectable: none; } -.circuit-8:active { +.circuit-7:active { background-color: #1760CE; border-color: #003C8B; } -.circuit-8:focus { +.circuit-7:focus { border-color: #1760CE; } -.circuit-8:hover { +.circuit-7:hover { background-color: #1760CE; } -.circuit-8:hover, -.circuit-8:active { +.circuit-7:hover, +.circuit-7:active { border-color: #003C8B; } -.circuit-3 { - opacity: 0; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - position: relative; - -webkit-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; +.circuit-2 { height: 24px; width: 24px; position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - -.circuit-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; - height: 100%; -} - -.circuit-0 > path { - fill: #FFFFFF; } -.circuit-0 > path { +.circuit-0 { + width: 24px; + height: 24px; + border-radius: 100%; + border: 2px solid #FFFFFF; + border-top-color: transparent; -webkit-animation: animation-0 1s infinite linear; animation: animation-0 1s infinite linear; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; + opacity: 0; + -webkit-transition: opacity 200ms ease-in-out; + transition: opacity 200ms ease-in-out; } -.circuit-5 { +.circuit-4 { display: inline-block; opacity: 1; -webkit-transform: translate(0,0); @@ -1438,23 +1453,20 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = ` } @@ -5310,10 +5341,14 @@ HTMLCollection [ background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-5:hover { + color: #212933; } .circuit-5:focus, @@ -5341,13 +5376,24 @@ HTMLCollection [

1 @@ -5971,14 +5940,27 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` 3

@@ -6011,7 +5993,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` } } -.circuit-64 { +.circuit-63 { width: 100%; height: auto; position: relative; @@ -6142,7 +6124,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` z-index: -2; } -.circuit-62 { +.circuit-61 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -6220,7 +6202,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` height: 100%; } -.circuit-60 { +.circuit-59 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6237,7 +6219,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` } @media (max-width:479px) { - .circuit-60 { + .circuit-59 { margin-left: 12px; } } @@ -6344,102 +6326,12 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` align-items: center; } -.circuit-53 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: #D8DDE1; - width: 32px; - height: 32px; - padding: 0; - overflow: hidden; - border-radius: 50%; - margin-left: 8px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.circuit-53:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-53:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-53:hover { - background-color: #D8DDE1; -} - -.circuit-53:hover, -.circuit-53:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-53[href] { - display: inline-block; -} - -.circuit-53:disabled, -.circuit-53[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-53:first-of-type { - margin-left: 0; -} - -.circuit-53:active, -.circuit-53:focus, -.circuit-53:hover { - padding: 0; -} - -@media (max-width:479px) { - .circuit-53 { - width: 24px; - height: 24px; - } - - .circuit-53 svg { - width: 25%; - } -} -

@@ -6675,113 +6602,23 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = ` align-items: center; } -.circuit-14 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: #D8DDE1; - width: 32px; - height: 32px; - padding: 0; - overflow: hidden; - border-radius: 50%; - margin-left: 8px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.circuit-14:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-14:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-14:hover { - background-color: #D8DDE1; -} - -.circuit-14:hover, -.circuit-14:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-14[href] { - display: inline-block; -} - -.circuit-14:disabled, -.circuit-14[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-14:first-of-type { - margin-left: 0; -} - -.circuit-14:active, -.circuit-14:focus, -.circuit-14:hover { - padding: 0; -} - -@media (max-width:479px) { - .circuit-14 { - width: 24px; - height: 24px; - } - - .circuit-14 svg { - width: 25%; - } -} - -.circuit-21 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; +.circuit-20 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; }
@@ -8570,10 +8456,14 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-5:hover { + color: #212933; } .circuit-5:focus, @@ -8643,13 +8533,24 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = @@ -8966,7 +8880,7 @@ exports[`Storyshots Components/Notification Base 1`] = ` `; exports[`Storyshots Components/Notification Success 1`] = ` -.circuit-2 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -8975,13 +8889,13 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-4 { +.circuit-5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9000,14 +8914,14 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-5 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-0 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9021,23 +8935,47 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-0 { + .circuit-1 { margin: 0 16px 0 0; } } +.circuit-0 { + color: #47995A; +} +
-
- notification-success.svg -
+ + + +

Transaction successfully refunded

@@ -9045,7 +8983,7 @@ exports[`Storyshots Components/Notification Success 1`] = ` `; exports[`Storyshots Components/Notification Warning 1`] = ` -.circuit-6 { +.circuit-5 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -9066,36 +9004,36 @@ exports[`Storyshots Components/Notification Warning 1`] = ` padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-6:active { +.circuit-5:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-6:focus { +.circuit-5:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(4px - 1px) calc(16px - 1px); } -.circuit-6:hover { +.circuit-5:hover { background-color: #D8DDE1; } -.circuit-6:hover, -.circuit-6:active { +.circuit-5:hover, +.circuit-5:active { border-color: #9DA7B1; border-width: 1px; padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-6[href] { +.circuit-5[href] { display: inline-block; } -.circuit-6:disabled, -.circuit-6[disabled] { +.circuit-5:disabled, +.circuit-5[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -9104,7 +9042,7 @@ exports[`Storyshots Components/Notification Warning 1`] = ` user-selectable: none; } -.circuit-4 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -9113,13 +9051,13 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-10 { +.circuit-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9138,14 +9076,14 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-10 { + .circuit-9 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-2 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9159,16 +9097,16 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-1 { margin: 0 16px 0 0; } } -.circuit-0 rect { - fill: #D8A413; +.circuit-0 { + color: #D8A413; } -.circuit-8 { +.circuit-7 { display: block; padding-left: 24px; margin-top: 16px; @@ -9186,33 +9124,44 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-8 { + .circuit-7 { margin-top: 0; } }
-
- notification-success.svg -
+ +

You still need to verify your account

@@ -9334,7 +9283,7 @@ exports[`Storyshots Components/Notification/NotificationBanner Base 1`] = ` `; exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` -.circuit-2 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -9343,13 +9292,13 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-4 { +.circuit-5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9368,14 +9317,14 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-5 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-0 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9389,12 +9338,16 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-0 { + .circuit-1 { margin: 0 16px 0 0; } } -.circuit-8 { +.circuit-0 { + color: #47995A; +} + +.circuit-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9407,22 +9360,22 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` max-width: calc(100vw - 48px); } -.circuit-8 > * { +.circuit-9 > * { margin-top: 16px; } -.circuit-8 > *:first-child { +.circuit-9 > *:first-child { margin-top: 0; } @media (max-width:767px) { - .circuit-8 { + .circuit-9 { max-width: none; width: 100%; } } -.circuit-6 { +.circuit-7 { background-color: #FFFFFF; border-radius: 4px; display: -webkit-box; @@ -9442,24 +9395,44 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = `
  • -
    - notification-success.svg -
    + + + +

    Transaction successfully refunded

    @@ -10353,11 +10326,11 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = ` `; exports[`Storyshots Components/Sidebar Base 1`] = ` -.circuit-47 { +.circuit-52 { height: 100vh; } -.circuit-39 { +.circuit-44 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10382,7 +10355,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-39 { + .circuit-44 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); @@ -10391,7 +10364,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-39 { + .circuit-44 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); @@ -10421,7 +10394,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #FAFBFC; } -.circuit-35 { +.circuit-40 { height: auto; justify-self: flex-start; overflow-y: auto; @@ -10456,14 +10429,6 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #FAFBFC; } -.circuit-4 * { - fill: #9DA7B1; -} - -.circuit-4 * { - fill: #FAFBFC; -} - .circuit-2 { margin-left: 12px; } @@ -10487,18 +10452,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #9DA7B1; } -.circuit-9 * { - fill: #9DA7B1; -} - .circuit-9:hover { color: #D8DDE1; } -.circuit-9:hover * { - fill: #D8DDE1; -} - .circuit-26 { margin: -8px 0 8px 32px; list-style: none; @@ -10545,18 +10502,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` transition: top 200ms ease-in-out; } -.circuit-13 * { - fill: #9DA7B1; -} - .circuit-13:hover { color: #D8DDE1; } -.circuit-13:hover * { - fill: #D8DDE1; -} - .circuit-11 { margin-left: 12px; margin-left: 0px; @@ -10565,7 +10514,31 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` transition: margin-top 300ms ease-in-out; } -.circuit-28 { +.circuit-30 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + height: auto; + margin: 16px; + padding: 4px; + cursor: pointer; + color: #9DA7B1; + -webkit-text-decoration: none; + text-decoration: none; + cursor: not-allowed; + color: #5C656F; +} + +.circuit-33 { display: block; width: 100%; border: 1px solid #D8DDE1; @@ -10574,7 +10547,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` border: 1px solid #323E49; } -.circuit-32 { +.circuit-37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10596,26 +10569,18 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` text-decoration: none; } -.circuit-32 * { - fill: #9DA7B1; -} - -.circuit-32:hover { +.circuit-37:hover { color: #D8DDE1; } -.circuit-32:hover * { - fill: #D8DDE1; -} - -.circuit-37 { +.circuit-42 { margin-top: auto; padding: 24px; background-color: #212933; color: #FAFBFC; } -.circuit-41 { +.circuit-46 { width: 100%; height: 100%; position: absolute; @@ -10630,14 +10595,15 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-41 { + .circuit-46 { visibility: hidden; } } -.circuit-45 { +.circuit-50 { cursor: pointer; outline: none; + border: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10667,12 +10633,12 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-45 { + .circuit-50 { visibility: hidden; } } -.circuit-43 { +.circuit-48 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -10686,10 +10652,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` }
Footer
@@ -11696,25 +11735,27 @@ tbody .circuit-18:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -11904,14 +11945,38 @@ tbody .circuit-32:hover th { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Name @@ -11932,14 +11997,38 @@ tbody .circuit-32:hover th { -
+ + + - arrow.svg -
-
- arrow.svg -
+ + Created at @@ -12180,25 +12269,27 @@ tbody .circuit-8:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -12290,14 +12381,38 @@ tbody .circuit-8:last-child td { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Country @@ -12516,25 +12631,27 @@ tbody .circuit-14:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -12667,14 +12784,38 @@ tbody .circuit-14:last-child td { -
+ + + - arrow.svg -
-
- arrow.svg -
+ + Name @@ -12695,14 +12836,38 @@ tbody .circuit-14:last-child td { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Date added @@ -13763,13 +13928,17 @@ exports[`Storyshots Components/Tag Removable 1`] = ` background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; margin-left: 4px; } +.circuit-4:hover { + color: #212933; +} + .circuit-4:focus, .circuit-4:active { outline: none; @@ -13804,13 +13973,24 @@ exports[`Storyshots Components/Tag Removable 1`] = `
@@ -14133,20 +14264,16 @@ exports[`Storyshots Components/Tooltip Bottom Right 1`] = ` -
@@ -14220,20 +14347,16 @@ exports[`Storyshots Components/Tooltip Left Center 1`] = ` -
@@ -14302,20 +14425,16 @@ exports[`Storyshots Components/Tooltip Top Left 1`] = ` - @@ -14387,16 +14506,16 @@ exports[`Storyshots Forms/Checkbox Base 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14420,11 +14539,22 @@ exports[`Storyshots Forms/Checkbox Base 1`] = ` for="checkbox_5" > Unchecked - + + `; @@ -14498,16 +14628,16 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14528,7 +14658,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = ` opacity: 0.5; pointer-events: none; box-shadow: none; - fill: #9DA7B1; + color: #9DA7B1; }
Unchecked - + +
`; @@ -14623,16 +14764,16 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14647,7 +14788,7 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` } .circuit-2:not(:focus) svg { - fill: #DB4D4D; + color: #DB4D4D; } .circuit-4 { @@ -14706,11 +14847,22 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` for="checkbox_6" > Unchecked - + +
Apples - + +
, .circuit-4 { @@ -14892,16 +15055,16 @@ HTMLCollection [ } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14925,11 +15088,22 @@ HTMLCollection [ for="checkbox_9" > Bananas - + + , .circuit-4 { @@ -14997,16 +15171,16 @@ HTMLCollection [ } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -15030,11 +15204,22 @@ HTMLCollection [ for="checkbox_10" > Oranges - + + , ] @@ -15295,10 +15480,11 @@ label + .circuit-4 { position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } , @@ -15854,10 +16067,11 @@ label + .circuit-4 { position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-0 { @@ -15957,10 +16171,11 @@ label + .circuit-4 { position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-0 { @@ -16107,16 +16322,18 @@ label + .circuit-7 { position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-2 { display: block; height: 100%; width: 100%; + color: #47995A; } .circuit-5 { @@ -16177,12 +16394,30 @@ label + .circuit-7 {
- + + +
- + + +
, @@ -16333,10 +16588,11 @@ label + .circuit-7 { position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-5 { @@ -16451,6 +16707,7 @@ label + .circuit-7 { display: block; height: 100%; width: 100%; + color: #D8A413; } , @@ -16652,10 +16933,11 @@ label + .circuit-3 { position: absolute; top: 1px; left: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-1 { @@ -16721,11 +17003,22 @@ label + .circuit-3 {
-
- search.svg -
+ + -
- search.svg -
+ + -
- search.svg -
+ + -
- search.svg -
+ + -
- clear.svg -
+ + @@ -17197,10 +17542,11 @@ label + .circuit-3 { position: absolute; top: 1px; left: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; } .circuit-1 { @@ -17264,11 +17610,22 @@ label + .circuit-3 {
-
- search.svg -
+ + -
- search.svg -
+ + -
- close-icon.svg -
+ + @@ -17538,7 +17922,7 @@ label + .circuit-4 { padding-right: calc( 12px + 16px + 12px ); text-align: right; padding-right: 48px; - padding-right: calc(24px + 1ch); + padding-right: calc(16px + 1ch); } .circuit-0:focus, @@ -17574,14 +17958,27 @@ label + .circuit-4 { .circuit-2 { color: #1760CE; line-height: 16px; - width: 1ch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + min-width: 1ch; position: absolute; top: 1px; right: 1px; - height: 40px; - width: 40px; - padding: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; }