fix(components): show border styles when CardList.Item component is s…

…elected (#507) Addresses [PMNTSS-205].
sumup-oss · Nov 2, 2019 · facc2b5 · facc2b5
1 parent ff84f71
commit facc2b5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/src/components/CardList/__snapshots__/CardList.spec.js.snap b/src/components/CardList/__snapshots__/CardList.spec.js.snap
@@ -83,7 +83,7 @@ exports[`CardList should render with default styles 1`] = `
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
   background: #EDF4FC;
-  color: #003C8B;
+  outline: none;
 }
 
 .circuit-2:first-child {
@@ -96,6 +96,17 @@ exports[`CardList should render with default styles 1`] = `
   border-bottom-right-radius: 4px;
 }
 
+.circuit-2::after {
+  content: ' ';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  box-shadow: 0px 0px 0px 2px #3388FF;
+  border-radius: 4px;
+}
+
 @media (hover:hover) {
   .circuit-2:hover {
     outline: none;

diff --git a/src/components/CardList/components/Item/Item.js b/src/components/CardList/components/Item/Item.js
@@ -51,21 +51,6 @@ const baseStyles = ({ theme }) => css`
   }
 `;
 
-const paddingStyles = ({ theme, padding }) =>
-  padding &&
-  css`
-    padding: ${theme.spacings[sizeMap[padding]]};
-  `;
-
-const selectedStyles = ({ theme, selected }) =>
-  selected &&
-  css`
-    label: cardlist__item--selected;
-
-    background: ${theme.colors.p100};
-    color: ${theme.colors.p900};
-  `;
-
 const getBorderStyles = theme => css`
   outline: none;
 
@@ -81,6 +66,22 @@ const getBorderStyles = theme => css`
   }
 `;
 
+const paddingStyles = ({ theme, padding }) =>
+  padding &&
+  css`
+    padding: ${theme.spacings[sizeMap[padding]]};
+  `;
+
+const selectedStyles = ({ theme, selected }) =>
+  selected &&
+  css`
+    label: cardlist__item--selected;
+
+    background: ${theme.colors.p100};
+
+    ${getBorderStyles(theme)};
+  `;
+
 const hoverStyles = ({ theme }) => css`
   @media (hover: hover) {
     &:hover {