feat(docs): remove Font Awesome icons from examples

CHANGELOG.md

@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Documentation
 - Restore docs for `Ref` component @layershifter ([#1777](https://github.com/stardust-ui/react/pull/1777))
 - Add prototype for expandable control messages in `Chat` @sophieH29 ([#1765](https://github.com/stardust-ui/react/pull/1765))
+- Remove Font Awesome icons from docs examples @lucivpav ([#1764](https://github.com/stardust-ui/react/pull/1764))
 
 <!--------------------------------[ v0.36.1 ]------------------------------- -->
 ## [v0.36.1](https://github.com/stardust-ui/react/tree/v0.36.1) (2019-08-09)

docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx

@@ -7,7 +7,7 @@ const AccordionPanelCustomTitleExample = () => {
       title: (
         <Layout
           key="title"
-          start={<Label icon="warning circle" iconPosition="start" circular content="Warnings" />}
+          start={<Label icon="error" iconPosition="start" circular content="Warnings" />}
         />
       ),
       content: {

docs/src/examples/components/Animation/Types/AnimationExample.tsx

@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExample = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner">
-      <Icon name="umbrella" circular bordered />
+      <Icon name="mention" circular bordered />
     </Animation>
   </Provider>
 )

docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx

@@ -20,7 +20,7 @@ const AnimationExampleDelay = () => (
     <br />
     <Provider theme={{ animations: { spinner } }}>
       <Animation name="spinner" delay="5s">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Provider>
   </div>

docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx

@@ -22,16 +22,16 @@ const AnimationExampleDirection = () => (
       <Text content="Alternate" />
       <Text content="Alternate reverse" />
       <Animation name="spinner">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="reverse">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate-reverse">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>

docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx

@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExampleDuration = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner" duration="1s">
-      <Icon name="umbrella" circular bordered />
+      <Icon name="mention" circular bordered />
     </Animation>
   </Provider>
 )

docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx

@@ -18,16 +18,16 @@ const AnimationExampleFillMode = () => (
       <Text content="Backwards" />
       <Text content="Both" />
       <Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>

docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx

@@ -22,16 +22,16 @@ const AnimationExampleIterationCount = () => (
       <Text content="5 iterations" />
       <Text content="Infinite" />
       <Animation name="spinner" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="2">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="5">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="infinite">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>

docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx

@@ -19,13 +19,13 @@ const AnimationExample = () => (
   <Provider theme={{ animations: { colorChanger } }}>
     <Flex gap="gap.smaller">
       <Animation name="colorChanger">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ fromColor: 'green', toColor: 'yellow' }}>
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ toColor: 'black' }}>
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Flex>
   </Provider>

docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx

@@ -38,7 +38,7 @@ class AnimationExamplePlayState extends React.Component {
           <br />
           <br />
           <Animation name="spinner" playState={this.state.playState}>
-            <Icon name="umbrella" circular bordered />
+            <Icon name="mention" circular bordered />
           </Animation>
         </div>
       </Provider>

docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx

@@ -24,22 +24,22 @@ const AnimationExampleTimingFunction = () => (
       <Text content="Ease in out" />
       <Text content="Cubic bezier" />
       <Animation name="spinner" timingFunction="ease">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="linear">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-out">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in-out">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>

docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx

@@ -6,7 +6,7 @@ const AvatarExampleRtl = () => (
     name="جون دو"
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
     }}
   />
 )

docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const status = { color: 'green', icon: 'check', title: 'Available' }
+const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
 
 const AvatarUsageExampleShorthand = () => (
   <div>

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const status = { color: 'green', icon: 'check', title: 'Available' }
+const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
 
 const AvatarExampleExcludedInitialsShorthand = () => (
   <div>

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

@@ -7,7 +7,7 @@ const AvatarExampleGetInitialsShorthand = () => (
   <Avatar
     name="John Doe"
     getInitials={getInitials}
-    status={{ color: 'green', icon: 'check', title: 'Available' }}
+    status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
   />
 )
 

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

@@ -5,12 +5,12 @@ const AvatarExampleImageCustomizationShorthand = () => (
   <>
     <Avatar
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of John Doe' }}
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/large/jerry.png"
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar
@@ -28,7 +28,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
           />
         ))
       }
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
   </>
 )

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

@@ -6,7 +6,7 @@ const AvatarExampleNameShorthand = () => (
     name="John Doe"
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
       title: 'Available',
     }}
   />

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

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Avatar, Grid, SizeValue } from '@stardust-ui/react'
 
 const statusProps = {
-  icon: 'check',
+  icon: 'stardust-checkmark',
   color: 'green',
   title: 'Available',
 }

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

@@ -5,21 +5,11 @@ const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
     &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'red', icon: 'minus', title: 'Do not disturb' }}
-    />
-    &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'yellow', icon: 'clock', title: 'Away' }}
-    />
-    &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
       status={{ color: 'grey', title: 'Offline' }}

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

@@ -6,7 +6,7 @@ const defaultAvatar = (
     image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
       title: 'Available',
     }}
   />
@@ -23,7 +23,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
       }}
       variables={{ statusBorderColor: 'orange' }}
@@ -35,7 +35,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
       }}
     />
@@ -45,7 +45,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
         size: 'larger',
       }}
@@ -57,7 +57,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
         size: 'medium',
       }}

docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx

@@ -5,8 +5,8 @@ const ButtonGroupCircularExampleShorthand = () => (
   <Button.Group
     circular
     buttons={[
-      { key: 'book', icon: 'book', primary: true },
-      { key: 'coffee', icon: 'coffee' },
+      { key: 'emoji', icon: 'emoji', primary: true },
+      { key: 'translation', icon: 'translation' },
       { key: 'play', icon: 'play', primary: true },
     ]}
   />

docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx

@@ -4,8 +4,8 @@ import { Button } from '@stardust-ui/react'
 const ButtonGroupExampleShorthand = () => (
   <Button.Group
     buttons={[
-      { key: 'book', icon: 'book', iconOnly: true },
-      { key: 'coffee', icon: 'coffee', iconOnly: true },
+      { key: 'emoji', icon: 'emoji', iconOnly: true },
+      { key: 'translation', icon: 'translation', iconOnly: true },
       { key: 'play', icon: 'play', iconOnly: true },
     ]}
   />

docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx

@@ -6,8 +6,8 @@ const ButtonExampleDisabled = () => (
     <Flex gap="gap.smaller">
       <Button disabled content="Default" />
       <Button disabled content="Primary" primary />
-      <Button disabled icon="book" content="Click me" iconPosition="before" primary />
-      <Button disabled circular icon="coffee" />
+      <Button disabled icon="emoji" content="Click me" iconPosition="before" primary />
+      <Button disabled circular icon="translation" />
       <Button
         disabled
         text

docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx

@@ -9,11 +9,11 @@ const ButtonExampleDisabled = () => (
         Primary
       </Button>
       <Button disabled icon iconPosition="before" primary>
-        <Icon name="book" xSpacing="after" />
+        <Icon name="emoji" xSpacing="after" />
         <Text content="Click me" />
       </Button>
       <Button disabled circular>
-        <Icon name="coffee" xSpacing="none" />
+        <Icon name="translation" xSpacing="none" />
       </Button>
       <Button disabled text>
         <Icon name="call-video" xSpacing="before" />

docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx

@@ -4,8 +4,8 @@ import { Button, Flex } from '@stardust-ui/react'
 const ButtonExampleCircular = () => (
   <Flex gap="gap.smaller">
     <Button circular content="C" />
-    <Button circular icon="book" />
-    <Button circular icon="coffee" primary />
+    <Button circular icon="emoji" />
+    <Button circular icon="broadcast" primary />
   </Flex>
 )
 export default ButtonExampleCircular

docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx

@@ -5,10 +5,10 @@ const ButtonExampleCircular = () => (
   <Flex gap="gap.smaller">
     <Button circular>C</Button>
     <Button circular icon>
-      <Icon name="book" xSpacing="none" />
+      <Icon name="emoji" xSpacing="none" />
     </Button>
     <Button circular icon primary>
-      <Icon name="coffee" xSpacing="none" />
+      <Icon name="broadcast" xSpacing="none" />
     </Button>
   </Flex>
 )

docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx

@@ -2,8 +2,8 @@ import { Avatar, Chat, ChatItemProps, ReactionProps, ShorthandCollection } from
 import * as React from 'react'
 
 const reactions: ShorthandCollection<ReactionProps> = [
-  { key: 'up', icon: 'thumbs up', content: '1K' },
-  { key: 'down', icon: 'thumbs down', content: 5 },
+  { key: 'up', icon: 'like', content: '1K' },
+  { key: 'smile', icon: 'emoji', content: 5 },
 ]
 
 const items: ShorthandCollection<ChatItemProps> = [
@@ -27,7 +27,7 @@ const items: ShorthandCollection<ChatItemProps> = [
     key: 'message-2',
     message: (
       <Chat.Message
-        reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
+        reactionGroup={[{ key: 'up', icon: 'like', content: '8' }]}
         content="I'm back!"
         author="John Doe"
         timestamp="Yesterday, 10:15 PM"