Better classNames for Icon, Image and allowing for both

elastic · Feb 13, 2018 · 5ad5bee · 5ad5bee
1 parent b62ebec
commit 5ad5bee
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 30 deletions.
diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
@@ -39,7 +39,7 @@ export const CardExample = {
         Description needed: how to use the <EuiCode>EuiCard</EuiCode> component.
       </p>
     ),
-    components: { EuiCard },
+    props: { EuiCard },
     demo: <Card />,
   },
   {

diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.js
@@ -5,25 +5,35 @@ import {
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
 } from '../../../../src/components';
 
-const images = ['Nature', 'Water', 'City'];
-
-const cardNodes = images.map(function (item) {
-  return (
+export default () => (
+  <EuiFlexGroup gutterSize="l">
     <EuiFlexItem>
       <EuiCard
-        image={`https://source.unsplash.com/400x200/?${item}`}
-        title={`Elastic in ${item}`}
+        image="https://source.unsplash.com/400x200/?Nature"
+        title="Elastic in Nature"
+        description="Example of a card's description. Stick to one or two sentences."
+        footer={<EuiButton>Go for it</EuiButton>}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        image="https://source.unsplash.com/400x200/?Water"
+        title="Elastic in Water"
+        description="Example of a card's description. Stick to one or two sentences."
+        footer={<EuiButton>Go for it</EuiButton>}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        image="https://source.unsplash.com/400x200/?City"
+        icon={<EuiIcon size="xxl" type="logoBeats" />}
+        title={`Beats in the City`}
         description="Example of a card's description. Stick to one or two sentences."
         footer={<EuiButton>Go for it</EuiButton>}
       />
     </EuiFlexItem>
-  );
-});
-
-export default () => (
-  <EuiFlexGroup gutterSize="l">
-    {cardNodes}
   </EuiFlexGroup>
 );
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
@@ -56,7 +56,6 @@ export const PanelExample = {
         add <EuiCode>isHoverable</EuiCode> as a prop.
       </p>
     ),
-    props: { EuiPanel },
     demo: <PanelHover />,
   }],
 };
diff --git a/src-docs/src/views/panel/panel_hover.js b/src-docs/src/views/panel/panel_hover.js
@@ -6,6 +6,6 @@ import {
 
 export default () => (
   <EuiPanel isHoverable>
-    <p>Hover or focus on me to see my hover state.</p>
+    <p>Hover me to see my hover state.</p>
   </EuiPanel>
 );
diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiCard is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiCard__image"
+    class="euiCard__top"
   />
   <div
     class="euiCard__content"

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -18,33 +18,49 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   }
 }
 
+/**
+ * 1. Footer is always at the bottom.
+ */
+
 .euiCard__content {
-  flex-grow: 1;
+  flex-grow: 1; /* 1 */
+
+  .euiCard__title {
+    display: block;
+    margin-top: $euiCardSpacing;
+  }
 
   .euiCard__description {
     margin-top: $euiCardSpacing/2;
   }
 }
 
-.euiCard__image,
-.euiCard__footer {
-  flex-grow: 0;
-}
+.euiCard__top {
+  flex-grow: 0; /* 1 */
+  position: relative;
 
-.euiCard__image {
-  .euiIcon {
+  .euiCard__icon {
     margin-top: $euiCardSpacing/2;
-    margin-bottom: $euiCardSpacing;
   }
 
-  .euiImage {
-    max-width: none;
+  .euiCard__image {
+    position: relative;
     width: calc(100% + #{$euiCardSpacing}*2);
     left: $euiCardSpacing * -1;
     top: $euiCardSpacing * -1;
+    margin-bottom: $euiCardSpacing * -1; // ensure the parent is only as tall as the image
+
+    // IF both exist, position the icon centered on top of image
+    + .euiCard__icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, calc(-50% + #{$euiCardSpacing * -1}));
+    }
   }
 }
 
 .euiCard__footer:not(:empty) {
+  flex-grow: 0; /* 1 */
   margin-top: $euiCardSpacing;
 }
diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { EuiPanel } from '../panel';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
-import { EuiImage } from '../image';
 import { EuiKeyboardAccessible } from '../accessibility';
 
 export const EuiCard = ({
@@ -31,7 +30,15 @@ export const EuiCard = ({
   let imageNode;
   if (image) {
     imageNode = (
-      <EuiImage url={image} alt="" />
+      <img className="euiCard__image" src={image} alt="" />
+    );
+  }
+
+  let iconNode;
+  if (icon) {
+    iconNode = React.cloneElement(
+      icon,
+      { className: 'euiCard__icon' }
     );
   }
 
@@ -42,9 +49,9 @@ export const EuiCard = ({
       className={classes}
       {...rest}
     >
-      <div className="euiCard__image">
+      <div className="euiCard__top">
         {imageNode}
-        {icon}
+        {iconNode}
       </div>
 
       <div className="euiCard__content">