Image component

CHANGELOG.md

@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `<EuiImage>` component to allow for image sizing and zooms. [(#262)](https://github.com/elastic/eui/pull/262)
 - Updated `<EuiOverlayMask>` to append `<div>` to body. [(#254)](https://github.com/elastic/eui/pull/254)
 
 **Bug fixes**

src-docs/src/services/routes/routes.js

@@ -83,6 +83,9 @@ import { HorizontalRuleExample }
 import { IconExample }
   from '../../views/icon/icon_example';
 
+import { ImageExample }
+  from '../../views/image/image_example';
+
 import { KeyPadMenuExample }
   from '../../views/key_pad_menu/key_pad_menu_example';
 
@@ -208,6 +211,7 @@ const components = [
   HealthExample,
   HorizontalRuleExample,
   IconExample,
+  ImageExample,
   KeyPadMenuExample,
   LinkExample,
   LoadingExample,

src-docs/src/views/image/image.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {
+  EuiImage,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiImage
+    size="l"
+    hasShadow
+    allowFullScreen
+    caption="Click me to see full screen"
+    title="Accessible image title goes here"
+    url="https://i.imgur.com/4qx7HhE.jpg"
+  />
+);

src-docs/src/views/image/image_example.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import Image from './image';
+const imageSource = require('!!raw-loader!./image');
+const imageHtml = renderToHtml(Image);
+
+import ImageSizes from './image_size';
+const imageSizesSource = require('!!raw-loader!./image_size');
+const imageSizesHtml = renderToHtml(ImageSizes);
+
+export const ImageExample = {
+  title: 'Image',
+  sections: [
+    {
+      title: 'Image',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: imageSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: imageHtml,
+      }],
+      text: (
+        <div>
+          <p>
+            Use <EuiCode>EuiImage</EuiCode> when you need to place a static image
+            into a page with an optional caption. It has the following props.
+          </p>
+          <ul>
+            <li>
+              <EuiCode>size</EuiCode> accepts <EuiCode>s / m / l / xl / original / fullWidth</EuiCode>.
+              The later will set the figure to stretch to 100% of its container.
+            </li>
+            <li>
+              <EuiCode>allowFullScreen</EuiCode> when set to true (default) will make the image
+              clicakable to a larger version.
+            </li>
+            <li>
+              <EuiCode>hasShadow</EuiCode> when set to true (default) will apply
+              a slight shadow below the image.
+            </li>
+            <li>
+              <EuiCode>caption</EuiCode> will provide a caption to the image.
+            </li>
+          </ul>
+        </div>
+      ),
+      demo: <Image />,
+    },
+    {
+      title: 'Images can be sized',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: imageSizesSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: imageSizesHtml,
+      }],
+      text: (
+        <p>
+          Images can be sized by passing the <EuiCode>size</EuiCode> prop a value
+          of <EuiCode>s / m / l / original / fullWidth</EuiCode>.
+        </p>
+      ),
+      demo: <ImageSizes />,
+    },
+  ],
+};

src-docs/src/views/image/image_size.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+  EuiImage,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiImage
+      size="s"
+      hasShadow
+      allowFullScreen
+      caption="Small"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="m"
+      hasShadow
+      allowFullScreen
+      caption="Medium"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="l"
+      hasShadow
+      allowFullScreen
+      caption="Large"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="xl"
+      hasShadow
+      allowFullScreen
+      caption="Extra large"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      hasShadow
+      allowFullScreen
+      caption="Original"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      hasShadow
+      allowFullScreen
+      size="fullWidth"
+      caption="Full width"
+      title="Accessible image title goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+  </div>
+);

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiImage is rendered 1`] = `
+<figure
+  aria-label="aria-label"
+  class="euiImage euiImage--large testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <img
+    class="euiImage__img"
+    title="title"
+  />
+</figure>
+`;

src/components/image/_image.scss

@@ -0,0 +1,78 @@
+// Main <figure> that wraps images.
+.euiImage {
+  display: inline-block;
+  max-width: 100%;
+
+
+  &.euiImage--hasShadow {
+    .euiImage__img {
+      @include euiBottomShadowMedium;
+    }
+  }
+
+  &.euiImage--allowFullScreen:hover {
+    .euiImage__img {
+      cursor: pointer;
+    }
+  }
+
+  // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
+  &.euiImage--small {
+    width: convertToRem(120px);
+  }
+
+  &.euiImage--medium {
+    width: convertToRem(200px);
+  }
+
+  &.euiImage--large {
+    width: convertToRem(360px);
+  }
+
+  &.euiImage--xlarge {
+    width: convertToRem(600px);
+  }
+
+  &.euiImage--fullWidth {
+    width: 100%;
+  }
+}
+
+// The image itself is full width within the container.
+.euiImage__img {
+  width: 100%;
+}
+
+.euiImage__caption {
+  text-align: center;
+  @include euiFontSizeS;
+}
+
+// The FullScreen image that optionally pops up on click.
+.euiImageFullScreen {
+  max-height: 80vh;
+  max-width: 80vw;
+  animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
+
+  .euiImageFullScreen__img {
+    max-height: 80vh;
+    max-width: 80vw;
+    cursor: pointer;
+  }
+
+  &:hover .euiImageFullScreen__img {
+    cursor: pointer;
+  }
+}
+
+
+@keyframes euiImageFullScreen {
+  0% {
+    opacity: 0;
+    transform: translateY($euiSizeXL * 2);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/image/_index.scss

@@ -0,0 +1 @@
+@import 'image';