feat(icon): add possibility to extend icons pack or using fontawesome

8base · Dec 13, 2018 · 05e025b · 05e025b
1 parent e56c121
commit 05e025b
Show file tree

Hide file tree

Showing 8 changed files with 9,601 additions and 8,617 deletions.
diff --git a/README.md b/README.md
@@ -70,3 +70,48 @@ const App = () => {
   )
 }
 ```
+
+
+## Icons
+
+### Extends icons pack
+To expand icons pack you should add [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) or describe svg 
+components manual.
+
+```js
+import { EightBaseBoostProvider, createTheme } from '@8base/boost';
+
+import SomeSvgIcon from './some-svg-icon.svg';
+import AnotherSvgIcon from './another-svg-icon.svg';
+
+const icons = {
+  SomeSvgIcon,
+  AnotherSvgIcon,
+}
+
+const App = () => {
+  return (
+    <EightBaseBoostProvider icons={ icons }>
+      ...
+      <Icon name="AnotherSvgIcon" size="lg" color="RED" />
+    </EightBaseBoostProvider>
+  )
+}
+```
+
+
+### Using with fontawesome
+At the first you need to add install aswesome font to the index.html [as described in the fontawesome docs](https://fontawesome.com/start).
+
+```js
+import { EightBaseBoostProvider, createTheme } from '@8base/boost';
+
+const App = () => {
+  return (
+    <EightBaseBoostProvider>
+      ...
+      <Icon className="fas fa-igloo" color="RED" size="lg" />
+    </EightBaseBoostProvider>
+  )
+}
+```
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "cz-conventional-changelog": "^2.1.0",
     "dotenv": "^5.0.1",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-adapter-react-16": "^1.7.1",
     "eslint": "4.1.1",
     "eslint-config-react-app": "2.1.0",
     "eslint-plugin-flowtype": "2.34.1",

diff --git a/src/EightBaseBoostProvider.js b/src/EightBaseBoostProvider.js
@@ -3,10 +3,12 @@
 import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { ModalProvider } from './atoms/Modal/ModalProvider';
+import { IconsProvider } from './atoms/typography/Icon/IconsProvider';
 import { createTheme, resetGlobal, type Theme } from './theme';
 
 type EightBaseBoostProviderProps = {
   theme?: Theme,
+  icons?: { [name: string]: React$Node },
   children: React$Node,
 };
 
@@ -24,12 +26,14 @@ class EightBaseBoostProvider extends React.Component<EightBaseBoostProviderProps
   }
 
   render() {
-    const { children } = this.props;
+    const { children, icons } = this.props;
 
     return (
       <ThemeProvider theme={ this.theme }>
         <ModalProvider>
-          { children }
+          <IconsProvider icons={ icons }>
+            { children }
+          </IconsProvider>s
         </ModalProvider>
       </ThemeProvider>
     );

diff --git a/src/atoms/typography/Icon/Icon.js b/src/atoms/typography/Icon/Icon.js
@@ -3,10 +3,11 @@
 import React from 'react';
 import fp from 'lodash/fp';
 
+import { IconsConsumer } from './IconsProvider';
 import { PALETTE } from '../../../theme';
 import { SECONDARY_COLORS, MAIN_BRAND_COLORS } from '../../../theme/dsmColors';
 import { createStyledTag, createComponentTheme } from '../../../utils';
-import type { Theme } from '../../../types';
+
 import * as glyphs from './glyphs';
 
 type IconProps = {
@@ -18,11 +19,13 @@ type IconProps = {
     | $Keys<typeof MAIN_BRAND_COLORS>,
   /** icon size */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'stretch',
+  /** custom icon class */
+  className?: string,
 };
 
 const name = 'icon';
 
-const theme : Theme<IconProps> = createComponentTheme(name, {
+const themeWrapper = createComponentTheme(`${name}Wrapper`, {
   modifiers: {
     color: {
       ...fp.mapValues(
@@ -34,47 +37,99 @@ const theme : Theme<IconProps> = createComponentTheme(name, {
         },
       ),
     },
+  },
+});
+
+
+const themeSvg = createComponentTheme(`${name}Svg`, {
+  modifiers: {
     size: {
       xs: {
-        width: '1rem',
         height: '1rem',
+        width: '1rem',
       },
       sm: {
-        width: '1.4rem',
         height: '1.4rem',
+        width: '1.4rem',
       },
       md: {
-        width: '1.8rem',
         height: '1.8rem',
+        width: '1.8rem',
       },
       lg: {
-        width: '2.4rem',
         height: '2.4rem',
+        width: '2.4rem',
       },
       xl: {
-        width: '3.6rem',
         height: '3.6rem',
+        width: '3.6rem',
       },
       stretch: {
-        width: '100%',
         height: '100%',
+        width: '100%',
       },
     },
   },
-  defaults: {},
 });
 
-const IconTag = createStyledTag(name, {
+const themeFonts = createComponentTheme(`${name}Font`, {
+  modifiers: {
+    size: {
+      xs: {
+        fontSize: '1rem',
+      },
+      sm: {
+        fontSize: '1.4rem',
+      },
+      md: {
+        fontSize: '1.8rem',
+      },
+      lg: {
+        fontSize: '2.4rem',
+      },
+      xl: {
+        fontSize: '3.6rem',
+      },
+    },
+  },
+});
+
+const theme = {
+  ...themeWrapper,
+  ...themeFonts,
+  ...themeSvg,
+};
+
+const IconWrapperTag = createStyledTag(`${name}Wrapper`, {
   display: 'inline-flex',
 });
 
-const Icon = ({ name, ...rest }: IconProps) => {
-  const Glyph = glyphs[name];
+
+const IconSvgTag = createStyledTag(`${name}Svg`, {});
+const IconFontTag = createStyledTag(`${name}Font`, {});
+
+const Icon = ({ name, color, className, ...rest }: IconProps) => {
 
   return (
-    <IconTag { ...rest } tagName="div">
-      <Glyph width="100%" height="100%" />
-    </IconTag>
+    <IconsConsumer>
+      { ({ icons }) => {
+        const Glyph: any = glyphs[name] || icons[name];
+
+        return (
+          <IconWrapperTag tagName="span" color={ color }>
+            <Choose>
+              <When condition={ !!className && !Glyph }>
+                <IconFontTag tagName="i" className={ className } { ...rest } />
+              </When>
+              <When condition={ !className && !!Glyph }>
+                <IconSvgTag tagName="i" { ...rest }>
+                  <Glyph width="100%" height="100%" />
+                </IconSvgTag>
+              </When>
+            </Choose>
+          </IconWrapperTag>
+        ); } }
+    </IconsConsumer>
   );
 };
 

diff --git a/src/atoms/typography/Icon/IconsProvider.js b/src/atoms/typography/Icon/IconsProvider.js
@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+
+const IconsContext = React.createContext({});
+
+type IconsProviderProps = {
+  children: React$Node,
+  icons?: { [name: string]: React$Node }
+}
+
+const IconsProvider = (props: IconsProviderProps) => (
+  <IconsContext.Provider value={{ icons: props.icons || {}}}>
+    { props.children }
+  </IconsContext.Provider>
+);
+
+const IconsConsumer: React$ComponentType<{
+  children: Object => React$Node,
+}> = IconsContext.Consumer;
+
+export { IconsProvider, IconsConsumer };
+
diff --git a/src/atoms/typography/Icon/index.js b/src/atoms/typography/Icon/index.js
@@ -1,3 +1,4 @@
 // @flow
 
 export { Icon, theme } from './Icon';
+export { IconsProvider } from './IconsProvider';