Image component (#262)

Image component adds the ability to size and zoom images with captions.

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/icon/icon_colors.js

@@ -17,6 +17,7 @@ const iconColors = [
   'danger',
   'text',
   'subdued',
+  'ghost',
 ];
 
 export default () => (

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  EuiImage,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiImage
+    size="l"
+    hasShadow
+    caption="I am a starship. Zooom!"
+    alt="Accessible image alt goes here"
+    url="https://i.imgur.com/4qx7HhE.jpg"
+  />
+);

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

@@ -0,0 +1,112 @@
+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);
+
+import ImageZoom from './image_zoom';
+const imageZoomSource = require('!!raw-loader!./image_zoom');
+const imageZoomHtml = renderToHtml(ImageZoom);
+
+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 latter will set the figure to stretch to 100% of its container.
+            </li>
+            <li>
+              <EuiCode>allowFullScreen</EuiCode> when set to true will make the image
+              clicakable to a larger version.
+            </li>
+            <li>
+              <EuiCode>fullScreenIconColor</EuiCode> allows you to change the color of
+              the icon that floats above the image when it can be clicked to fullscreen.
+              The default value of <EuiCode>light</EuiCode> is fine unless your image
+              has a white background, in which case you should change it to <EuiCode>dark</EuiCode>.
+            </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>
+            <li>
+              <EuiCode>alt</EuiCode> Sepearate from the caption is a title on the alt tag itself.
+              This one is required for accessibility.
+            </li>
+          </ul>
+        </div>
+      ),
+      demo: <Image />,
+    },
+    {
+      title: 'Click an image for a full screen version',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: imageZoomSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: imageZoomHtml,
+      }],
+      text: (
+        <p>
+          Apply the <EuiCode>allowFullScreen</EuiCode> prop to make the image
+          clickable and show a full screen version. Note that the second image also
+          passes <EuiCode>fullScreenIconColor=&quot;dark&quot;</EuiCode> to change icon color
+          to better contrast against the light background of that image.
+        </p>
+      ),
+      demo: <ImageZoom />,
+    },
+    {
+      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 / xl / original / fullWidth</EuiCode>. Note that this size
+          is applied to the width of the image.
+        </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"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="m"
+      hasShadow
+      allowFullScreen
+      caption="Medium"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="l"
+      hasShadow
+      allowFullScreen
+      caption="Large"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      size="xl"
+      hasShadow
+      allowFullScreen
+      caption="Extra large"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      hasShadow
+      allowFullScreen
+      caption="Original"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+    <EuiSpacer />
+    <EuiImage
+      hasShadow
+      allowFullScreen
+      size="fullWidth"
+      caption="Full width"
+      alt="Accessible image alt goes here"
+      url="https://i.imgur.com/4qx7HhE.jpg"
+    />
+  </div>
+);

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {
+  EuiImage,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup>
+    <EuiFlexItem grow={false}>
+      <EuiImage
+        size="m"
+        hasShadow
+        allowFullScreen
+        caption="Click me"
+        alt="Accessible image alt goes here"
+        url="https://i.imgur.com/4qx7HhE.jpg"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiImage
+        size="m"
+        hasShadow
+        allowFullScreen
+        caption="Click me"
+        alt="Accessible image alt goes here"
+        fullScreenIconColor="dark"
+        url="https://78.media.tumblr.com/a68012e7630f4633e83f58f49cb4fb0a/tumblr_ni61qyN2X91rv33k2o1_500.jpg"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src/components/icon/_icon.scss

@@ -41,6 +41,10 @@
   fill: $euiColorDanger;
 }
 
+.euiIcon--ghost {
+  fill: $euiColorGhost;
+}
+
 .euiIcon--small {
   @include size($euiSizeM);
 }

src/components/icon/icon.js

@@ -224,6 +224,7 @@ const colorToClassMap = {
   danger: 'euiIcon--danger',
   text: 'euiIcon--text',
   subdued: 'euiIcon--subdued',
+  ghost: 'euiIcon--ghost',
 };
 
 export const COLORS = Object.keys(colorToClassMap);

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
+    alt="alt"
+    class="euiImage__img"
+  />
+</figure>
+`;

src/components/image/_image.scss

@@ -0,0 +1,93 @@
+// Main <figure> that wraps images.
+.euiImage {
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+
+  &.euiImage--hasShadow {
+    .euiImage__img {
+      @include euiBottomShadowMedium;
+    }
+  }
+
+  &.euiImage--allowFullScreen:hover {
+    .euiImage__img {
+      cursor: pointer;
+    }
+
+    .euiImage__icon {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  // 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;
+}
+
+.euiImage__icon {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  right: $euiSize;
+  top: $euiSize;
+  transition: opacity $euiAnimSpeedSlow $euiAnimSlightResistance ;
+  cursor: pointer;
+}
+
+// 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';