EuiCards

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `EuiBasicTable` as an opinionated, high level component for constructing tables. Its addition deprecates `EuiTableOfRecords` which is still avaiable, but now marked for removal. ([#377](https://github.com/elastic/eui/pull/377))
 - Add styles for `readOnly` states of form controls. ([#391](https://github.com/elastic/eui/pull/391))
 - Added importAction and exportAction icons ([#394](https://github.com/elastic/eui/pull/394))
+- Added `EuiCard` for UI patterns that need an icon/image, title and description with some sort of action. ([#380](https://github.com/elastic/eui/pull/380))
 
 **Bug fixes**
 

src-docs/src/routes.js

@@ -46,6 +46,9 @@ import { BottomBarExample }
 import { ButtonExample }
   from './views/button/button_example';
 
+import { CardExample }
+  from './views/card/card_example';
+
 import { CallOutExample }
   from './views/call_out/call_out_example';
 
@@ -211,6 +214,7 @@ const components = [
   BadgeExample,
   BottomBarExample,
   ButtonExample,
+  CardExample,
   CallOutExample,
   CodeEditorExample,
   CodeExample,

src-docs/src/views/card/card.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana'];
+
+const cardNodes = icons.map(function (item, index) {
+  return (
+    <EuiFlexItem key={index}>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type={`logo${item}`} />}
+        title={`Elastic ${item}`}
+        description="Example of a card's description. Stick to one or two sentences."
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+  );
+});
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {cardNodes}
+  </EuiFlexGroup>
+);

src-docs/src/views/card/card_example.js

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiCard,
+} from '../../../../src/components';
+
+import Card from './card';
+const cardSource = require('!!raw-loader!./card');
+const cardHtml = renderToHtml(Card);
+
+import CardImage from './card_image';
+const cardImageSource = require('!!raw-loader!./card_image');
+const cardImageHtml = renderToHtml(CardImage);
+
+import CardFooter from './card_footer';
+const cardFooterSource = require('!!raw-loader!./card_footer');
+const cardFooterHtml = renderToHtml(CardFooter);
+
+export const CardExample = {
+  title: 'Card',
+  sections: [{
+    title: 'Basic Card',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          At it&apos;s core an <EuiCode>EuiCard</EuiCode> should contain a <EuiCode>title</EuiCode>,
+          <EuiCode>description</EuiCode>, and an <EuiCode>icon</EuiCode>. You can make the whole card
+          clickable by giving it an <EuiCode>onClick</EuiCode> handler.
+        </p>
+        <p>
+          By default a card&apos;s content is center aligned. To change the alignment
+          set <EuiCode>textAlign</EuiCode> to <EuiCode>left</EuiCode> or <EuiCode>right</EuiCode>.
+        </p>
+      </div>
+    ),
+    props: { EuiCard },
+    demo: <Card />,
+  },
+  {
+    title: 'Images',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardImageSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardImageHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Images can be added in place of, or in conjuction with, icons.
+          Just pass a url into the <EuiCode>image</EuiCode> prop and it will expand to to edges of the card.
+        </p>
+        <p>
+          Make sure that all images are the <strong>same proportions</strong> when used in a singular row.
+        </p>
+      </div>
+    ),
+    components: { EuiCard },
+    demo: <CardImage />,
+  },
+  {
+    title: 'Footer',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardFooterSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardFooterHtml,
+    }],
+    text: (
+      <p>
+        Footers can contain any number of elements and will always align to the bottom of the card.
+        However, if you supply a footer containing a <EuiCode>EuiButton</EuiCode> you <strong>must not</strong> also
+        give it an <EuiCode>onClick</EuiCode>.
+      </p>
+    ),
+    components: { EuiCard },
+    demo: <CardFooter />,
+  }],
+};

src-docs/src/views/card/card_footer.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiCard,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiText,
+} from '../../../../src/components';
+
+const cardFooterContent = (
+  <div>
+    <EuiButton>Go for it</EuiButton>
+    <EuiSpacer size="xs"/>
+    <EuiText size="s">
+      <p>Or try <EuiLink>this</EuiLink></p>
+    </EuiText>
+  </div>
+);
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type="devToolsApp" />}
+        title="Developers Tools"
+        description="Example of a short card description."
+        footer={cardFooterContent}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type="dashboardApp" />}
+        title="Dashboards"
+        description="Example of a short longer card description. See how the footers stay lined up."
+        footer={cardFooterContent}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type="savedObjectsApp" />}
+        title="Save Objects"
+        description="Example of a short card description."
+        footer={cardFooterContent}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/card/card_image.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+} from '../../../../src/components';
+
+const cardFooterContent = (
+  <EuiFlexGroup justifyContent="flexEnd">
+    <EuiFlexItem grow={false}>
+      <EuiButton>Go for it</EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    <EuiFlexItem>
+      <EuiCard
+        textAlign="left"
+        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={cardFooterContent}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        textAlign="left"
+        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={cardFooterContent}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        textAlign="left"
+        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={cardFooterContent}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/panel/panel_example.js

@@ -17,6 +17,10 @@ import Panel from './panel';
 const panelSource = require('!!raw-loader!./panel');
 const panelHtml = renderToHtml(Panel);
 
+import PanelHover from './panel_hover';
+const panelHoverSource = require('!!raw-loader!./panel_hover');
+const panelHoverHtml = renderToHtml(PanelHover);
+
 export const PanelExample = {
   title: 'Panel',
   sections: [{
@@ -37,5 +41,21 @@ export const PanelExample = {
     ),
     props: { EuiPanel },
     demo: <Panel />,
+  }, {
+    title: 'Panel can be hoverable',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: panelHoverSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: panelHoverHtml,
+    }],
+    text: (
+      <p>
+        Adding an <EuiCode>onClick</EuiCode> handler to the <EuiCode>EuiPanel</EuiCode> will
+        turn the wrapping element into a button to allow for interaction.
+      </p>
+    ),
+    demo: <PanelHover />,
   }],
 };

src-docs/src/views/panel/panel_hover.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  EuiPanel,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiPanel onClick={() => window.alert('Panel clicked')}>
+    <p>Hover me to see my hover state.</p>
+  </EuiPanel>
+);

src/components/card/__snapshots__/card.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCard is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPanel euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--textAlign testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiCard__top"
+  />
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiCard__footer"
+  />
+</div>
+`;