implemented KJs suggestions

Author: Corey Lafferty

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

@@ -22,7 +22,7 @@ const duration = allVars.reduce((allDurations, [key, value]) => {
 
 const Duration: Story = args => {
   return (
-    <div className={styles['duration']}>
+    <div className={styles.duration}>
       <div className={styles.helptext}>(Hover to demo duration)</div>
       <div className={styles.group}>
         {Object.entries(args.duration as DurationOptions).map(

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

@@ -7,12 +7,10 @@ const settings: Meta = {
 
 const allVars = getCssVariables();
 
-const basefontsize = allVars.reduce((BaseFontSize, [key, value]) => {
-  if (key.indexOf('--base-font-size') === 0) {
-    BaseFontSize = value;
-  }
-  return BaseFontSize;
-}, {} as string);
+const baseFontVar = allVars.find(
+  ([key]) => key.indexOf('--base-font-size') === 0,
+);
+const baseFontSize = baseFontVar ? parseInt(baseFontVar[1]) : 16;
 
 interface SpacingOptions {
   [space: string]: string;
@@ -23,8 +21,6 @@ const spacing = allVars.reduce((allSpacing, [key, value]) => {
     let space = key.substring(10);
     if (space.includes('-')) {
       space = space.replace('-', '.');
-    } else {
-      space = space + '.0';
     }
     allSpacing[space] = value;
   }
@@ -43,26 +39,27 @@ const Spacing: Story = args => {
         </tr>
       </thead>
       <tbody>
-        {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>
-        ))}
+        {Object.entries(args.spacing as SpacingOptions)
+          .sort(([keyA], [keyB]) => Number(keyA) - Number(keyB))
+          .map(([name, unit]) => (
+            <tr key={`spacing-${name}`}>
+              <td>{name}</td>
+              <td>
+                {parseInt(unit) / baseFontSize}
+                rem
+              </td>
+              <td>{unit}</td>
+              <td>
+                <div
+                  style={{
+                    height: unit,
+                    width: unit,
+                    backgroundColor: '#ccc',
+                  }}
+                ></div>
+              </td>
+            </tr>
+          ))}
       </tbody>
     </table>
   );