fix(KpiBlock): update style when there is no variation (#459)

tillersystems · Apr 2, 2019 · 6916641 · 6916641
1 parent b512cca
commit 6916641
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/src/KpiBlock/__tests__/__snapshots__/KpiBlock.test.js.snap b/src/KpiBlock/__tests__/__snapshots__/KpiBlock.test.js.snap
@@ -42,10 +42,7 @@ exports[`<KpiBlock /> should render with a negative variation value 1`] = `
 }
 
 .c0 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  text-align: center;
   background: hsl(0,100%,100%);
   border: 1px solid hsl(207,22%,90%);
   border-radius: 0.4rem;
@@ -145,10 +142,7 @@ exports[`<KpiBlock /> should render with a positive variation value 1`] = `
 }
 
 .c0 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  text-align: center;
   background: hsl(0,100%,100%);
   border: 1px solid hsl(207,22%,90%);
   border-radius: 0.4rem;
@@ -223,10 +217,7 @@ exports[`<KpiBlock /> should render without a problem 1`] = `
 }
 
 .c0 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  text-align: center;
   background: hsl(0,100%,100%);
   border: 1px solid hsl(207,22%,90%);
   border-radius: 0.4rem;
@@ -235,7 +226,7 @@ exports[`<KpiBlock /> should render without a problem 1`] = `
   display: grid;
   grid-template-areas: 'variation' 'value' 'title';
   height: 10rem;
-  grid-template-rows: max-content max-content max-content;
+  grid-template-rows: auto max-content;
   padding: 1rem;
   position: relative;
 }

diff --git a/src/KpiBlock/index.js b/src/KpiBlock/index.js
@@ -60,7 +60,7 @@ KpiBlock.defaultProps = {
 };
 
 export default styled(KpiBlock)`
-  align-items: center;
+  text-align: center;
   background: ${({ theme: { palette } }) => palette.white};
   border: 1px solid ${({ theme: { palette } }) => palette.lightGrey};
   border-radius: ${({ theme: { dimensions } }) => dimensions.radius};
@@ -75,7 +75,8 @@ export default styled(KpiBlock)`
   ${({ isCompacted }) =>
     !isCompacted &&
     css`
-      grid-template-rows: max-content max-content max-content;
+      grid-template-rows: ${({ variation }) =>
+        variation ? 'max-content max-content max-content' : 'auto max-content'};
     `};
 
   padding: ${({ isCompacted }) => (isCompacted ? '1.2rem' : '1rem')};