Clean code for circleimage component

nasa-jpl · Jul 31, 2023 · 366707b · 366707b
1 parent 7f1d428
commit 366707b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 36 deletions.
diff --git a/src/scss/components/_BlockCircleImageCard.scss b/src/scss/components/_BlockCircleImageCard.scss
@@ -1,15 +1,13 @@
 .BlockCircleImageCard {
-  $smallsize: 90px;
-  $largesize: 130px;
+  $circlesize: 90px;
 
-  img.BaseImage {
-    width: $smallsize;
-    height: $smallsize;
+  @screen lg {
+    $circlesize: 130px;
+  }
 
-    @screen lg {
-      width: $largesize;
-      height: $largesize;
-    }
+  img.BaseImage {
+    width: $circlesize;
+    height: $circlesize;
   }
 
   .BaseImagePlaceholder {
@@ -18,37 +16,21 @@
 
   &.imageOnLeft {
     > div:first-of-type {
-      left: calc(-1 * $smallsize / 2);
-
-      @screen lg {
-        left: calc(-1 * $largesize / 2);
-      }
+      left: calc(-1 * $circlesize / 2);
     }
 
     .content {
-      padding-left: calc($smallsize / 2 + 32px);
-
-      @screen lg {
-        padding-left: calc($largesize / 2 + 32px);
-      }
+      padding-left: calc($circlesize / 2 + 2rem);
     }
   }
 
   &.imageOnRight {
     > div:first-of-type {
-      right: calc(-1 * $smallsize / 2);
-
-      @screen lg {
-        right: calc(-1 * $largesize / 2);
-      }
+      right: calc(-1 * $circlesize / 2);
     }
 
     .content {
-      padding-right: calc($smallsize / 2 + 32px);
-
-      @screen lg {
-        padding-right: calc($largesize / 2 + 32px);
-      }
+      padding-right: calc($circlesize / 2 + 2rem);
     }
   }
 }
diff --git a/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js b/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js
@@ -2,17 +2,13 @@ import { BaseImagePlaceholderTemplate } from '../BaseImagePlaceholder/BaseImageP
 import { BaseHeadingTemplate } from '../BaseHeading/BaseHeading'
 
 export const BlockCircleImageCardTemplate = ({
-  type,
+  type = 'imageOnLeft',
   title,
   label,
-  secondaryLabel,
+  secondaryLabel = '',
   image,
-  customClass,
+  customClass = '',
 }) => {
-  if (!type) type = 'imageOnLeft'
-  if (!secondaryLabel) secondaryLabel = ''
-  if (!customClass) customClass = ''
-
   return `
   <div class="BlockCircleImageCard shadow-jpl relative ${type} ${customClass}">
     ${BaseImagePlaceholderTemplate({