feat(components): extract icons to separate package

.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",

.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
 };
 

.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;

.storybook/components/Teaser.js

@@ -20,6 +20,10 @@ import { ThemeProvider } from 'emotion-theming';
 
 import { theme as themes, Heading, Text, Card } from '../../src';
 
+// HACK: This prevents the cards from awkwardly wrapping if one of them
+//       only has one line of text.
+const CARD_HEIGHT = '185px';
+
 const Wrapper = styled(Card)(
   ({ theme }) => css`
     width: 100%;
@@ -29,6 +33,7 @@ const Wrapper = styled(Card)(
     ${theme.mq.mega} {
       width: calc(50% - ${theme.spacings.giga});
       margin-right: ${theme.spacings.giga};
+      min-height: ${CARD_HEIGHT};
     }
   `
 );

.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';

.storybook/manager.js

@@ -6,7 +6,7 @@ import { theme, components } from './util/theme';
 addons.setConfig({
   theme,
   isFullscreen: false,
-  showPanel: false,
+  showPanel: true,
   panelPosition: 'bottom',
   isToolshown: true
 });

.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: [],

.babelrc → babel.config.json

@@ -16,7 +16,6 @@
       "plugins": [
         "@babel/plugin-proposal-class-properties",
         "lodash",
-        "inline-react-svg",
         "dev-expression",
         "react-docgen"
       ],

docs/advanced/grid.story.mdx

@@ -7,7 +7,7 @@ import { Meta, Preview, Grid, Row, Col } from '../../.storybook/components';
 The grid provided by Circuit UI is a float-based grid. We use
 this grid in applications where we need to support older browsers, such as Android and iOS webviews.
 
-The [static CSS](Advanced|Static-CSS) does not include a grid system.
+The [static CSS](Advanced/Static-CSS) does not include a grid system.
 
 ## Static columns
 
@@ -34,7 +34,7 @@ scenario, you can use the normal `span` attribute of the grid.
 
 ## Responsive columns
 
-You can use the following [breakpoints](Advanced|Theme) to define the
+You can use the following [breakpoints](Advanced/Theme) to define the
 responsive behavior of your grid:
 
 - `untilKilo`

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 />

docs/advanced/theme.story.mdx

@@ -195,7 +195,7 @@ theme.borderWidth.[kilo|mega]
 theme.typography.[headings|subHeadings|text].<SIZE_NAME>.[fontSize|lineHeight]
 ```
 
-Avoid using `theme.typography` directly in your styles, rather use the specialized components [`Heading`](Typography|Heading/Base), [`SubHeading`](Typography|SubHeading/Base), and [`Text`](Typography|Text/Base).
+Avoid using `theme.typography` directly in your styles, rather use the specialized components [`Heading`](Typography/Heading/Base), [`SubHeading`](Typography/SubHeading/Base), and [`Text`](Typography/Text/Base).
 
 #### Headings
 
@@ -230,7 +230,7 @@ Avoid using `theme.typography` directly in your styles, rather use the specializ
 theme.fontStack.[default|mono]
 ```
 
-Refer to the [Fonts](Advanced|Fonts) documentation to learn how to define and load custom fonts in a performant way.
+Refer to the [Fonts](Advanced/Fonts) documentation to learn how to define and load custom fonts in a performant way.
 
 ### Font weight
 
@@ -254,9 +254,9 @@ theme.grid.<BREAKPOINT>.[priority|breakpoint|cols|maxWidth|gutter]
 The grid provided by Circuit UI is a float-based grid. We use
 this grid in applications where we need to support older browsers, such as Android and iOS webviews.
 
-The [static CSS](Advanced|Static-CSS) does not include a grid system.
+The [static CSS](Advanced/Static-CSS) does not include a grid system.
 
-Refer to the [grid](Advanced|Grid) documentation for an overview of the grid system.
+Refer to the [grid](Advanced/Grid) documentation for an overview of the grid system.
 
 ### Breakpoints and media queries
 

docs/introduction/contributing.story.mdx

@@ -10,7 +10,7 @@ import { Meta, Intro, Image } from '../../.storybook/components';
   or become a core contributor. Here's how.
 </Intro>
 
-**In the interest of fostering an open and welcoming environment, we expect all participants to read and adhere to our [Code of Conduct](Introduction|Code-of-Conduct).**
+**In the interest of fostering an open and welcoming environment, we expect all participants to read and adhere to our [Code of Conduct](Introduction/Code-of-Conduct).**
 
 ## Filing an issue
 

docs/introduction/getting-started.story.mdx

@@ -67,4 +67,4 @@ const App = () => (
 export default App;
 ```
 
-Refer to the [Theme documentation](Advanced|Theme) to learn how to use and customize the theme.
+Refer to the [Theme documentation](Advanced/Theme) to learn how to use and customize the theme.

docs/introduction/welcome.story.mdx

@@ -29,31 +29,31 @@ import {
 
 Set up a new app with Circuit UI or add it to an existing project.
 
-[Get started](Introduction|Getting-started)
+[Get started](Introduction/Getting-started)
 
 </Teaser>
 
 <Teaser title="Design principles">
 
 Discover the guiding principles behind Circuit UI's design.
 
-[Read design guidelines](Introduction|Design-Principles)
+[Read design guidelines](Introduction/Design-Principles)
 
 </Teaser>
 
 <Teaser title="Theming">
 
 Learn about our foundations such as colors, spacing, and typography.
 
-[Browse theme reference](Advanced|Theme)
+[Browse theme reference](Advanced/Theme)
 
 </Teaser>
 
 <Teaser title="Contributing">
 
 File a bug report, suggest a change, or open a pull request.
 
-[Contribute](Introduction|Contributing)
+[Contribute](Introduction/Contributing)
 
 </Teaser>
 

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/**'
   ],