Merge pull request #142 from kids-first/refactor-badge

♻️ Refactor badge by adding loading css

src/components/Badge/Badge.js

@@ -11,22 +11,26 @@ const badgeState = {
   changesRequired: {name: 'Changes Required', color: 'bg-red'},
 };
 
-const Badge = ({className, state}) => {
-  if (badgeState[state]) {
-    const color = badgeState[state].color;
-    const name = badgeState[state].name;
-    const validBadgeClass = classes('Badge', className, color);
-    return <div className={validBadgeClass}>{name}</div>;
-  } else {
-    return <div className="Badge sm:min-w-full bg-darkGrey">Invalid State</div>;
-  }
+const Badge = ({className, state, loading}) => {
+  const color = state in badgeState ? badgeState[state].color : null;
+  const name = state in badgeState ? badgeState[state].name : 'invalid';
+  const badgeClass = classes(className, 'Badge', {
+    [color]: !loading,
+    'Badge--loading': loading,
+    'Badge--invalid': !(state in badgeState),
+  });
+  return (
+    <div className={badgeClass}>
+      <span className={loading && 'invisible'}>{name}</span>
+    </div>
+  );
 };
 
 Badge.propTypes = {
   /** Any additional classes to be applied to the nav bar button*/
   className: PropTypes.string,
   /** Badge state. */
-  state: PropTypes.string.isRequired,
+  state: PropTypes.string,
 };
 
 Badge.defaultProps = {

src/components/Badge/badge.css

@@ -1,5 +1,16 @@
 .Badge {
-  @inherit: .bg-teal, .max-w-full, .self-center, .m-1, .px-4, .py-1,
+  @inherit: .max-w-full, .self-center, .m-1, .px-4, .py-1, .rounded-full,
+    .text-center, .text-xs, .text-white, .leading-tight, .whitespace-no-wrap;
+}
+
+.Badge--loading {
+  @inherit: .bg-lightGrey, .max-w-full, .self-center, .m-1, .px-4, .py-1,
+    .rounded-full, .text-center, .text-xs, .text-white, .leading-tight,
+    .whitespace-no-wrap;
+}
+
+.Badge--invalid {
+  @inherit: .bg-darkGrey, .max-w-full, .self-center, .m-1, .px-4, .py-1,
     .rounded-full, .text-center, .text-xs, .text-white, .leading-tight,
     .whitespace-no-wrap;
 }

src/components/FileList/FileElement.js

@@ -72,8 +72,12 @@ const FileElement = ({
         <Icon kind="reset" width={24} className="float-right mt-5 mr-5 spin" />
       )}
       <div className="FileList--ElementBadge sm:w-48">
-        <Badge state="new" className="sm:min-w-full" />
-        <Badge state="pendingApproval" className="sm:min-w-full" />
+        <Badge state="new" loading={loading} className="sm:min-w-full" />
+        <Badge
+          state="pendingApproval"
+          loading={loading}
+          className="sm:min-w-full"
+        />
       </div>
       <div className="flex-initial">
         <p className="mt-1 font-bold text-sm" title={fileNode.description}>