fixed linting errors

Author: Corey Lafferty

services/app/source/01-global/duration/duration.stories.tsx

@@ -23,21 +23,17 @@ const duration = allVars.reduce((allDurations, [key, value]) => {
 const Duration: Story = args => {
   return (
     <div className={styles['duration']}>
-      <div className={styles.helptext}>
-        (Hover to demo duration)
-      </div>
+      <div className={styles.helptext}>(Hover to demo duration)</div>
       <div className={styles.group}>
         {Object.entries(args.duration as DurationOptions).map(
           ([duration, transitionDuration]) => (
-            <div className={styles.item}>
+            <div className={styles.item} key={`duration-${duration}`}>
               <div
-                key={`duration-${duration}`}
                 className={styles.indicator}
                 style={{
                   transitionDuration,
                 }}
-              >
-              </div>
+              ></div>
               <div className={styles.label}>
                 <div>{duration}</div>
                 <div>{transitionDuration}</div>

services/app/source/01-global/easing/easing.stories.tsx

@@ -23,24 +23,18 @@ const easing = allVars.reduce((allEases, [key, value]) => {
 const Easing: Story = args => {
   return (
     <div className={styles['easing']}>
-      <div className={styles.helptext}>
-        (Hover to demo easing)
-      </div>
+      <div className={styles.helptext}>(Hover to demo easing)</div>
       {Object.entries(args.easing as EasingOptions).map(
         ([ease, transitionTimingFunction]) => (
-          <div className={styles.group}>
+          <div className={styles.group} key={`easing-${ease}`}>
             <div className={styles.item}>
               <div
-                key={`easing-${ease}`}
                 className={styles.indicator}
                 style={{
                   transitionTimingFunction,
                 }}
-              >
-              </div>
-              <div className={styles.label}>
-                {ease}
-              </div>
+              ></div>
+              <div className={styles.label}>{ease}</div>
             </div>
           </div>
         ),

services/app/source/01-global/spacing/space.stories.tsx

@@ -22,7 +22,7 @@ const spacing = allVars.reduce((allSpacing, [key, value]) => {
   if (key.indexOf('--spacing') === 0) {
     let space = key.substring(10);
     if (space.includes('-')) {
-      space = space.replace('-','.');
+      space = space.replace('-', '.');
     } else {
       space = space + '.0';
     }
@@ -43,28 +43,28 @@ const Spacing: Story = args => {
         </tr>
       </thead>
       <tbody>
-        {Object.entries(args.spacing as SpacingOptions).map(
-          ([name, unit]) => (
-            <tr>
-              <td>{name.replace('.0','')}</td>
-              <td>{Number(unit.replace('px','')) / Number(basefontsize.replace('px',''))}rem</td>
-              <td>{unit}</td>
-              <td>
-                <div
-                  style={{
-                    height: unit,
-                    width: unit,
-                    backgroundColor: '#ccc',
-                  }}
-                >
-                </div>
-              </td>
-            </tr>
-          ),
-        )}
+        {Object.entries(args.spacing as SpacingOptions).map(([name, unit]) => (
+          <tr key={`spacing-${name}`}>
+            <td>{name.replace('.0', '')}</td>
+            <td>
+              {Number(unit.replace('px', '')) /
+                Number(basefontsize.replace('px', ''))}
+              rem
+            </td>
+            <td>{unit}</td>
+            <td>
+              <div
+                style={{
+                  height: unit,
+                  width: unit,
+                  backgroundColor: '#ccc',
+                }}
+              ></div>
+            </td>
+          </tr>
+        ))}
       </tbody>
     </table>
-
   );
 };
 Spacing.args = {