fix: prevent initial fanfare on first render

stories/Actions.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from './Button';
 
 import { Actions, ActionsProps } from './Actions';
-import { Icon } from './Icon';
+import { Icon, IconType } from './Icon';
 
 export default {
   title: 'Components/Actions',
@@ -23,16 +23,16 @@ Simple.args = {
   primary: (
     <>
       <Button>
-        <Icon icon='heart' />
+        <Icon icon={IconType.Heart} />
       </Button>
       <Button>
-        <Icon icon='delete' />
+        <Icon icon={IconType.Delete} />
       </Button>
     </>
   ),
   secondary: (
     <Button>
-      <Icon icon='share' />
+      <Icon icon={IconType.Share} />
     </Button>
   ),
 };
@@ -42,10 +42,10 @@ PrimaryOnly.args = {
   primary: (
     <>
       <Button>
-        <Icon icon='heart' />
+        <Icon icon={IconType.Heart} />
       </Button>
       <Button>
-        <Icon icon='delete' />
+        <Icon icon={IconType.Delete} />
       </Button>
     </>
   ),
@@ -55,7 +55,7 @@ export const SecondaryOnly = Template.bind({});
 SecondaryOnly.args = {
   secondary: (
     <Button>
-      <Icon icon='share' />
+      <Icon icon={IconType.Share} />
     </Button>
   ),
 };

stories/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button, ButtonProps } from './Button';
 import { Theme } from './constants';
-import { Icon } from './Icon';
+import { Icon, IconType } from './Icon';
 
 export default {
   title: 'Components/Button',
@@ -32,10 +32,10 @@ Secondary.args = {
   theme: Theme.Secondary,
 };
 
-export const Accent = Template.bind({});
-Accent.args = {
+export const PrimaryAccent = Template.bind({});
+PrimaryAccent.args = {
   children: 'Button',
-  theme: Theme.Accent,
+  theme: Theme.PrimaryAccent,
 };
 
 export const Inverse = Template.bind({});
@@ -49,7 +49,7 @@ export const WithIcon = Template.bind({});
 WithIcon.args = {
   children: (
     <>
-      <Icon icon='plus'/>
+      <Icon icon={IconType.Plus} />
       <div>Test with lots of text</div>
     </>
   ),
@@ -59,15 +59,15 @@ WithIcon.args = {
 export const Twitter = Template.bind({});
 Twitter.args = {
   children: (
-    <Icon icon='twitter' />
+    <Icon icon={IconType.Twitter} />
   ),
   theme: Theme.Twitter,
 };
 
 export const Facebook = Template.bind({});
 Facebook.args = {
   children: (
-    <Icon icon='facebook' />
+    <Icon icon={IconType.Facebook} />
   ),
   theme: Theme.Secondary,
 };

stories/Card.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from './Button';
 import { Card, CardProps } from './Card';
 import { Checkbox } from './Checkbox';
 import { Layout } from './constants';
-import { Icon } from './Icon';
+import { Icon, IconType } from './Icon';
 import { Input } from './Input';
 
 export default {
@@ -39,13 +39,13 @@ Vertical.args = {
         primary={(
           <>
             <Button inverse>
-              <Icon icon='delete' />
+              <Icon icon={IconType.Delete} />
             </Button>
           </>
         )}
         secondary={(
           <Button inverse>
-            <Icon icon='share' />
+            <Icon icon={IconType.Share} />
           </Button>
         )}
       />
@@ -59,10 +59,10 @@ Horizontal.args = {
   children: (
     <>
       <Button inverse>
-        <Icon icon='share'/>
+        <Icon icon={IconType.Share}/>
       </Button>
       <Button inverse>
-        <Icon icon='delete'/>
+        <Icon icon={IconType.Delete}/>
       </Button>
     </>
   ),

stories/Checkbox.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import styles from './Checkbox.scss';
+import { noop } from './utils/noop';
 import { Checked } from './constants';
 
 export interface CheckboxProps {
@@ -26,7 +27,7 @@ export function Checkbox({
   checked = false,
   className,
   disabled = false,
-  onChange,
+  onChange = noop,
 }: CheckboxProps): JSX.Element {
   const [internallyChecked, setInternallyChecked] = useState<Checked>(Checked.Unchecked);
 
@@ -44,7 +45,7 @@ export function Checkbox({
 
     const isChecked = [Checked.Unchecked, Checked.Indeterminate].includes(internallyChecked);
     setInternallyChecked(isChecked ? Checked.Checked : Checked.Unchecked);
-    if (onChange) onChange(isChecked);
+    onChange(isChecked);
   }
 
   return (

stories/Favorite.scss

@@ -49,7 +49,6 @@
 
   &.checked > .fanfare {
     animation: fanfare steps(27);
-    animation-duration: 1s;
   }
 }
 

stories/Favorite.stories.tsx

@@ -9,7 +9,13 @@ export default {
 
 const Template = (args: FavoriteProps) => <Favorite {...args} />;
 
-export const Simple = Template.bind({});
-Simple.args = {
+export const Unchecked = Template.bind({});
+Unchecked.args = {
   tooltip: 'This is an example',
-}
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+  tooltip: 'This is an example',
+};

stories/Favorite.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Icon } from './Icon';
+import classNames from 'classnames';
+import { Icon, IconType } from './Icon';
 import { Tooltip, getTooltipIdentifier } from './Tooltip';
 
 import styles from './Favorite.scss';
-import classNames from 'classnames';
+import { noop } from './utils/noop';
 import { Alignment } from './constants';
 
 export interface FavoriteProps {
@@ -16,9 +17,10 @@ export interface FavoriteProps {
 export function Favorite({
   checked,
   className,
-  onChange,
+  onChange = noop,
   tooltip,
 }: FavoriteProps): JSX.Element {
+  const [hasBeenClicked, setHasBeenClicked] = useState<boolean>(false);
   const [tooltipId] = useState<string>(() => getTooltipIdentifier())
   const [internallyChecked, setInternallyChecked] = useState<boolean>();
 
@@ -40,7 +42,8 @@ export function Favorite({
 
         const updatedChecked = !internallyChecked;
         setInternallyChecked(updatedChecked);
-        if (onChange) onChange(updatedChecked);
+        onChange(updatedChecked);
+        setHasBeenClicked(true);
       }}
     >
       {tooltip && (
@@ -52,13 +55,18 @@ export function Favorite({
         </Tooltip>
       )}
       <Icon
-        icon={'heart'}
+        icon={IconType.Heart}
       />
       <Icon
         className={styles.pseudoHover}
-        icon={'heart'}
+        icon={IconType.Heart}
+      />
+      <div
+        className={styles.fanfare}
+        style={{
+          animationDuration: hasBeenClicked ? '1s' : '0s',
+        }}
       />
-      <div className={styles.fanfare} />
     </div>
   );
 }

stories/Grid.stories.tsx

@@ -24,10 +24,10 @@ Vertical.args = {
   children: (
     <>
       <Button>
-        <Icon icon='delete' />
+        <Icon icon={IconType.delete} />
       </Button>
       <Button>
-        <Icon icon='share' />
+        <Icon icon={IconType.share} />
       </Button>
     </>
   ),
@@ -39,10 +39,10 @@ Horizontal.args = {
   children: (
     <>
       <Button>
-        <Icon icon='share'/>
+        <Icon icon={IconType.share}/>
       </Button>
       <Button>
-        <Icon icon='delete'/>
+        <Icon icon={IconType.delete}/>
       </Button>
     </>
   ),

stories/Input.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { Keys, UpdateOn } from './constants';
+import { noop } from './utils/noop';
 import styles from './Input.scss';
 
 export interface InputProps {
@@ -11,7 +12,7 @@ export interface InputProps {
   /**
    * Invoked when the checkbox checked value is modified internally.
    */
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   submitKeys?: Keys[];
 
   updateOn?: UpdateOn;
@@ -21,7 +22,7 @@ export function Input({
   className,
   value,
   placeholder,
-  onChange,
+  onChange = noop,
   submitKeys = [Keys.Enter],
   updateOn = UpdateOn.Blur,
 }: InputProps): JSX.Element {

stories/Tooltip.stories.tsx

@@ -12,7 +12,7 @@ export default {
 const Template = (args: TooltipProps) => (
   <>
     <Button data-tooltip='add'>
-      <Icon icon='plus' />
+      <Icon icon={IconType.plus} />
       <Tooltip id='add' {...args}>
         Create a List
       </Tooltip>

stories/utils/noop.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function noop(): void {}