feat(components): extract icons to separate package (#571)

* 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 <larissa.maza@sumup.com> * fix(components): move global styles to ModalProvider Co-authored-by: Lari Maza <larissa.maza@sumup.com> Co-authored-by: Lari Maza <larissa.maza@gmail.com> * 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 4d11c26. * 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 <mariela.kasovska@sumup.com> * 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 <connor-baer@users.noreply.github.com> * Fix test Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com> * 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 <larissa.maza@gmail.com> Co-authored-by: nico <nicosommi@gmail.com> Co-authored-by: Lari Maza <larissa.maza@sumup.com> Co-authored-by: Dmitri Suvorov <53574544+dmitri-suvorov-sumup@users.noreply.github.com> Co-authored-by: Mariela Kasovska <mariela.kasovska@sumup.com> 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.
sumup-oss · Apr 30, 2020 · 3344f46 · 3344f46
1 parent 1f2badb
commit 3344f46
Show file tree

Hide file tree

Showing 151 changed files with 5,423 additions and 5,944 deletions.
diff --git 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
@@ -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
@@ -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 (
+    <ThemeProvider theme={themes.circuit}>
+      <Filters>
+        <Label htmlFor="search-icon">
+          Filter icons by name
+          <SearchInput
+            id="search-icon"
+            placeholder="Search..."
+            value={search}
+            onChange={handleSearch}
+          />
+        </Label>
+
+        <Label htmlFor="select-size">
+          Select icon size
+          <Select
+            id="select-size"
+            options={sizeOptions}
+            value={size}
+            onChange={handleSizeChange}
+          />
+        </Label>
+
+        <Label htmlFor="select-color">
+          Select icon color
+          <Select
+            id="select-color"
+            options={colorOptions}
+            value={color}
+            onChange={handleColorChange}
+          />
+        </Label>
+      </Filters>
+
+      {isEmpty(activeIcons) ? (
+        <Text>No icons found</Text>
+      ) : (
+        group('category', activeIcons).map(({ category, items }) => (
+          <Category key={category}>
+            <Heading as="h3" size={Heading.GIGA}>
+              {category}
+            </Heading>
+            <List>
+              {sortBy('name', items).map(icon => {
+                const id = `${icon.name}-${icon.size}`;
+                const componentName = getComponentName(icon.name);
+                const Icon = iconComponents[componentName];
+                return (
+                  <Wrapper key={id}>
+                    <Icon id={id} size={icon.size} css={iconStyles(color)} />
+                    <Label htmlFor="id">
+                      {icon.name}
+                      {size === 'all' && <Size>{icon.size}</Size>}
+                    </Label>
+                  </Wrapper>
+                );
+              })}
+            </List>
+          </Category>
+        ))
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default Icons;
diff --git 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
@@ -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 → babel.config.json b/.babelrc → 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
@@ -0,0 +1,15 @@
+import { Meta, Icons } from '../../.storybook/components';
+
+<Meta title="Advanced/Icons" />
+
+# 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
+```
+
+<Icons />
diff --git 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
@@ -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
@@ -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]