feat(themes): add FontAwesome theme

CHANGELOG.md

@@ -24,12 +24,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed `Flex.Item` children prop type @mnajdova ([#1320](https://github.com/stardust-ui/react/pull/1320))
 - Fixed `Icon`'s color example to align with the latest color updates @mnajdova ([#1336](https://github.com/stardust-ui/react/pull/1336))
 - Fixed `TreeTitle` - `tabIndex` prop should be camel case in behavior @sophieH29 ([#1345](https://github.com/stardust-ui/react/pull/1345))
+- FontAwesome icons is not part of Teams theme more @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 ### Features
 - Add `selected`, `isFromKeyboard` props to `DropdownItem` @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
 - Add styles for the dark and high contrast Teams themes for the `Dropdown` component @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
 - Highlight options by character keys in `Dropdown` non-search versions @silviuavram ([#1270](https://github.com/stardust-ui/react/pull/1270))
 - Aligned link styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
+- Add FontAwesome theme @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)

docs/src/app.tsx

@@ -20,7 +20,7 @@ class App extends React.Component<any, ThemeContextData> {
       <ThemeContext.Provider value={this.state}>
         <Provider
           as={React.Fragment}
-          theme={mergeThemes(themes[themeName], {
+          theme={mergeThemes(themes.fontAwesome, themes[themeName], {
             // adjust Teams' theme to Semantic UI's font size scheme
             staticStyles: [
               {

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -498,7 +498,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       description,
       title,
     } = this.props
-    const { showCode, showRtl, showTransparent } = this.state
+    const { showCode, showRtl, showTransparent, themeName } = this.state
 
     return (
       <Flex column>
@@ -540,6 +540,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
               render={this.renderElement}
               renderHtml={showCode}
               resolver={importResolver}
+              themeName={themeName}
             >
               <Provider.Consumer
                 render={({ siteVariables }) => {

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -18,7 +18,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
         <Icon
-          name="user"
+          name="lock"
           circular
           bordered
           variables={{ color: 'blue' }}

docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx

@@ -1,46 +1,46 @@
 import * as React from 'react'
-import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
+import { Grid, Divider, Header, Icon, themes } from '@stardust-ui/react'
 
 const cellStyles = {
   margin: '10px 0',
 }
 
-const IconSetExampleShorthand = () => (
-  <Provider.Consumer
-    render={theme => (
-      <>
-        <div>
-          <Divider>
-            <Header as="h3" content="Regular" />
-          </Divider>
-          <Grid columns={4} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={name} style={cellStyles}>
-                <Icon name={name} />
-                <br />
-                <code>{name}</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
+const IconSetExampleShorthand: React.FunctionComponent<{ themeName: string }> = ({ themeName }) => (
+  <>
+    <div>
+      <Divider>
+        <Header as="h3" content="Regular" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].icons).map(name => (
+          <div key={name} style={cellStyles}>
+            <Icon name={name} />
+            <br />
+            <code>{name}</code>
+          </div>
+        ))}
+      </Grid>
+    </div>
 
-        <div>
-          <Divider>
-            <Header as="h3" content="Outline" />
-          </Divider>
-          <Grid columns={4} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={`${name}-outline`} style={cellStyles}>
-                <Icon name={name} outline />
-                <br />
-                <code>{name} outline</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
-      </>
-    )}
-  />
+    <div>
+      <Divider>
+        <Header as="h3" content="Outline" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].icons).map(name => (
+          <div key={`${name}-outline`} style={cellStyles}>
+            <Icon name={name} outline />
+            <br />
+            <code>{name} outline</code>
+          </div>
+        ))}
+      </Grid>
+    </div>
+  </>
 )
 
+IconSetExampleShorthand.defaultProps = {
+  themeName: 'teams',
+}
+
 export default IconSetExampleShorthand

packages/react/src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
-import * as React from 'react'
+import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 import {
   callable,
@@ -12,9 +12,8 @@ import {
 } from '../../lib'
 import { iconBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-
-import { SvgIconSpec } from '../../themes/types'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
+import Box from '../Box/Box'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
@@ -80,46 +79,28 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
     rotate: 0,
   }
 
-  private renderFontIcon(ElementType, classes, unhandledProps, accessibility): React.ReactNode {
-    return (
-      <ElementType
-        className={classes.root}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-      />
-    )
-  }
-
-  private renderSvgIcon(
-    ElementType,
-    svgIconDescriptor: SvgIconSpec,
-    classes,
-    unhandledProps,
-    accessibility,
-    rtl,
-  ): React.ReactNode {
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {svgIconDescriptor && callable(svgIconDescriptor)({ classes, rtl })}
-      </ElementType>
-    )
-  }
-
-  public renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl }) {
+  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
+    const { className, name } = this.props
     const { icons = {} } = theme
 
-    const maybeIcon = icons[this.props.name]
-
-    return maybeIcon && maybeIcon.isSvg
-      ? this.renderSvgIcon(
-          ElementType,
-          maybeIcon.icon as SvgIconSpec,
-          classes,
-          unhandledProps,
-          accessibility,
-          rtl,
-        )
-      : this.renderFontIcon(ElementType, classes, unhandledProps, accessibility)
+    const maybeIcon = icons[name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
+    return Box.create(
+      { content: isSvgIcon && callable(maybeIcon.icon)({ classes, rtl }) },
+      {
+        defaultProps: {
+          as: ElementType,
+          className: cx(Icon.className, className),
+          ...accessibility.attributes.root,
+          ...unhandledProps,
+          styles: {
+            ...(isSvgIcon ? styles.svgRoot : styles.fontRoot),
+            ...styles.root,
+          },
+        },
+      },
+    )
   }
 }
 

packages/react/src/themes/base/components/Icon/index.ts → packages/react/src/themes/base/components/Icon/iconNames.ts

@@ -13,6 +13,6 @@ export const icons: ThemeIcons = {
   'stardust-play': fontIcon('23F8'),
 }
 
-const emptyIcon = { icon: { content: '?' } }
+export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } }
 
 export default (name: string): ThemeIconSpec => icons[name] || emptyIcon

packages/react/src/themes/base/components/Icon/iconStyles.ts

@@ -1,39 +1,9 @@
-import icons from './index'
-import { callable, pxToRem } from '../../../../lib'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../types'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { IconVariables } from './iconVariables'
-
-const getDefaultFontIcon = (iconName: string) => {
-  return callable(icons(iconName).icon)()
-}
-
-const getFontStyles = (
-  size: number,
-  iconName: string,
-  themeIcon?: ResultOf<FontIconSpec>,
-): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-  const sizeInRems = pxToRem(size)
-
-  return {
-    fontFamily,
-    fontSize: sizeInRems,
-    lineHeight: 1,
-
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    width: sizeInRems,
-    height: sizeInRems,
-
-    '::before': {
-      content,
-    },
-  }
-}
+import { emptyIcon } from './iconNames'
 
 const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
   switch (xSpacing) {
@@ -61,27 +31,39 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
 })
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({ props: p, variables: v, theme }): ICSSInJSStyle => {
-    const iconSpec = theme.icons[p.name]
-    const rtl = theme.rtl
-    const isFontBased = p.name && (!iconSpec || !iconSpec.isSvg)
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    speak: 'none',
+    verticalAlign: 'middle',
+
+    ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
+
+    ...(p.bordered && getBorderedStyles(v.borderColor)),
+    ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+    ...(p.disabled && {
+      color: v.disabledColor,
+    }),
+  }),
+  fontRoot: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => {
+    const iconSpec = t.icons[p.name] || emptyIcon
+    const icon = iconSpec.icon as ResultOf<FontIconSpec>
 
     return {
-      display: 'inline-block',
-      speak: 'none',
-      verticalAlign: 'middle',
-
+      alignItems: 'center',
       boxSizing: 'content-box',
+      display: 'inline-flex',
+      justifyContent: 'center',
 
-      ...(isFontBased && getFontStyles(16, p.name)),
-
-      ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
-
-      ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+      fontFamily: icon.fontFamily,
+      fontSize: v[`${p.size}Size`],
+      lineHeight: 1,
+      width: v[`${p.size}Size`],
+      height: v[`${p.size}Size`],
 
-      ...(p.bordered && getBorderedStyles(v.borderColor)),
+      '::before': {
+        content: icon.content,
+      },
 
-      transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
+      transform: t.rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
     }
   },
 }

packages/react/src/themes/base/components/Icon/iconVariables.ts

@@ -1,19 +1,34 @@
 import { pxToRem } from '../../../../lib'
 
-export type IconSizeModifier = 'x' | 'xx'
-
 export interface IconVariables {
-  [key: string]: object | string | number | boolean | undefined
-  color?: string
-  borderColor?: string
-
+  color: string
+  borderColor: string
+  backgroundColor: string
+  disabledColor: string
   horizontalSpace: string
+
+  smallestSize: string
+  smallerSize: string
+  smallSize: string
+  mediumSize: string
+  largeSize: string
+  largerSize: string
+  largestSize: string
 }
 
 export default (): IconVariables => ({
   color: undefined,
+  backgroundColor: undefined,
   borderColor: 'black',
   disabledColor: 'gray',
 
   horizontalSpace: pxToRem(10),
+
+  smallestSize: pxToRem(7),
+  smallerSize: pxToRem(10),
+  smallSize: pxToRem(12),
+  mediumSize: pxToRem(16),
+  largeSize: pxToRem(20),
+  largerSize: pxToRem(32),
+  largestSize: pxToRem(40),
 })

packages/react/src/themes/base/index.ts

@@ -2,19 +2,11 @@ import { ThemeInput } from '../types'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
-import { FontIconSpec, ThemeIconSpec, ThemeIcons } from 'src/themes/types'
-import { default as fontIcons, icons } from './components/Icon/index'
-
-const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
-
-const themeIcons: ThemeIcons = {}
-Object.keys(icons).forEach(iconName => {
-  themeIcons[iconName] = declareFontBased(fontIcons[iconName])
-})
+import { icons } from './components/Icon/iconNames'
 
 export default {
   siteVariables,
-  icons: themeIcons,
+  icons,
   componentVariables,
   componentStyles,
 } as ThemeInput

packages/react/src/themes/font-awesome/componentStyles.ts

@@ -0,0 +1 @@
+export { default as Icon } from './components/Icon/iconStyles'

packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts → packages/react/src/themes/font-awesome/components/Icon/iconNames.ts

@@ -1311,6 +1311,4 @@ const fontAwesomeIcons: ThemeIcons = {
   'star empty': outline('f089'),
 }
 
-const emptyIcon = { icon: { content: '?', fontFamily: '' } }
-
-export default (name: string): ThemeIconSpec => fontAwesomeIcons[name] || emptyIcon
+export default fontAwesomeIcons