chore(Indicator): use predefined icon set

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Indicator, Tree } from '@stardust-ui/react'
+import { Icon, Tree } from '@stardust-ui/react'
 
 import { examplePathToHash } from 'docs/src/utils'
 
@@ -98,7 +98,7 @@ export default class ComponentSidebarSection extends React.PureComponent<any, an
         active={active}
       >
         <span>{content}</span>
-        {hasSubtree && <Indicator direction={open ? 'bottom' : 'start'} />}
+        {hasSubtree && <Icon direction={name ? 'arrow-down' : 'arrow-end'} />}
       </Component>
     )
 

packages/react/src/components/Accordion/AccordionTitle.tsx

@@ -14,7 +14,7 @@ import {
   rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../types'
-import Indicator from '../Indicator/Indicator'
+import Icon from '../Icon/Icon'
 import Layout from '../Layout/Layout'
 
 export interface AccordionTitleProps
@@ -67,9 +67,9 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
 
     const contentElement = (
       <Layout
-        start={Indicator.create(indicatorWithDefaults, {
+        start={Icon.create(indicatorWithDefaults, {
           defaultProps: {
-            direction: active ? 'bottom' : 'end',
+            name: active ? 'stardust-arrow-down' : 'stardust-arrow-end',
             styles: styles.indicator,
           },
         })}

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -30,7 +30,6 @@ import {
   handleRef,
   UIComponentProps,
 } from '../../lib'
-import Indicator, { IndicatorProps } from '../Indicator/Indicator'
 import List from '../List/List'
 import Ref from '../Ref/Ref'
 import DropdownItem from './DropdownItem'
@@ -275,7 +274,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
 
   static defaultProps: DropdownProps = {
     as: 'div',
-    clearIndicator: 'close',
+    clearIndicator: 'stardust-close',
     itemToString: item => {
       if (!item || React.isValidElement(item)) {
         return ''
@@ -397,14 +396,14 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
                           },
                         }),
                       })
-                    : Indicator.create(toggleIndicator, {
+                    : Icon.create(toggleIndicator, {
                         defaultProps: {
                           className: Dropdown.slotClassNames.toggleIndicator,
-                          direction: open ? 'top' : 'bottom',
+                          name: open ? 'stardust-arrow-up' : 'stardust-arrow-down',
                           styles: styles.toggleIndicator,
                         },
-                        overrideProps: (predefinedProps: IndicatorProps) => ({
-                          onClick: (e, indicatorProps: IndicatorProps) => {
+                        overrideProps: (predefinedProps: IconProps) => ({
+                          onClick: (e, indicatorProps: IconProps) => {
                             _.invoke(predefinedProps, 'onClick', e, indicatorProps)
                             getToggleButtonProps().onClick(e)
                           },

packages/react/src/components/Input/Input.tsx

@@ -203,7 +203,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     const { value } = this.state
 
     if (clearable && (value as string).length !== 0) {
-      return 'close'
+      return 'stardust-close'
     }
 
     return icon || null

packages/react/src/components/Menu/MenuItem.tsx

@@ -26,7 +26,6 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
 import { focusAsync } from '../../lib/accessibility/FocusZone'
 import Ref from '../Ref/Ref'
-import Indicator from '../Indicator/Indicator'
 
 export interface MenuItemSlotClassNames {
   wrapper: string
@@ -216,9 +215,9 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
             })}
           {rtlTextContainer.createFor({ element: content })}
           {menu &&
-            Indicator.create(indicatorWithDefaults, {
+            Icon.create(indicatorWithDefaults, {
               defaultProps: {
-                direction: vertical ? 'end' : 'bottom',
+                name: vertical ? 'arrow-end' : 'arrow-down',
                 styles: styles.indicator,
               },
             })}

packages/react/src/index.ts

@@ -152,8 +152,6 @@ export { default as Animation, AnimationProps } from './components/Animation/Ani
 
 export { default as Tree } from './components/Tree'
 
-export { default as Indicator, IndicatorProps } from './components/Indicator/Indicator'
-
 export { default as Reaction, ReactionProps, ReactionState } from './components/Reaction/Reaction'
 export { default as ReactionGroup, ReactionGroupProps } from './components/Reaction/ReactionGroup'
 

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

@@ -1,4 +1,5 @@
 export { default as Dialog } from './components/Dialog/dialogStyles'
+export { default as Icon } from './components/Icon/iconStyles'
 export { default as Loader } from './components/Loader/loaderStyles'
 export { default as ProviderBox } from './components/Provider/providerBoxStyles'
 export { default as Text } from './components/Text/textStyles'

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

@@ -1,4 +1,5 @@
 export { default as Dialog } from './components/Dialog/dialogVariables'
+export { default as Icon } from './components/Icon/iconVariables'
 export { default as Loader } from './components/Loader/loaderVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Text } from './components/Text/textVariables'

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

@@ -0,0 +1,21 @@
+import { ThemeIcons, ThemeIconSpec } from '../../../types'
+
+const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({
+  icon: { content: `'\\${content}'`, fontFamily },
+})
+
+const normal = (content: string) => fontIcon(content, '"Font Awesome 5 Free"')
+
+// Originally generated from:
+// https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/icon.css
+// Corrections were made to duplicate icon names and incorrectly mapped alternates
+const fontAwesomeIcons: ThemeIcons = {
+  'stardust-close': normal('f00d'),
+  'stardust-arrow-down': normal('f0d7'),
+  'stardust-arrow-end': normal('f0da'),
+  'stardust-arrow-up': normal('f0d8'),
+}
+
+const emptyIcon = { icon: { content: '?', fontFamily: '' } }
+
+export default (name: string): ThemeIconSpec => fontAwesomeIcons[name] || emptyIcon