From 4096943e5330d2e82f30c0873349554a2e34fb6b Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Thu, 21 Nov 2019 11:54:12 -0800
Subject: [PATCH] Aspect ratio component (#2535)

EuiAspectRatio provides a way to responsively resize a single block level child element to a specified ratio. This is useful for things like YouTube iframes that initially have a fixed size.
---
 CHANGELOG.md                                  |  1 +
 .../templates/stateless_function.tsx          |  4 +-
 src-docs/src/routes.js                        |  3 +
 .../src/views/aspect_ratio/aspect_ratio.js    | 56 +++++++++++++++++
 .../aspect_ratio/aspect_ratio_example.js      | 62 +++++++++++++++++++
 src-docs/src/views/image/image.js             |  2 +-
 .../__snapshots__/aspect_ratio.test.tsx.snap  | 43 +++++++++++++
 .../aspect_ratio/_aspect_ratio.scss           | 12 ++++
 src/components/aspect_ratio/_index.scss       |  1 +
 .../aspect_ratio/aspect_ratio.test.tsx        | 51 +++++++++++++++
 src/components/aspect_ratio/aspect_ratio.tsx  | 53 ++++++++++++++++
 src/components/aspect_ratio/index.ts          |  1 +
 src/components/index.js                       |  2 +
 src/components/index.scss                     |  1 +
 14 files changed, 289 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/aspect_ratio/aspect_ratio.js
 create mode 100644 src-docs/src/views/aspect_ratio/aspect_ratio_example.js
 create mode 100644 src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
 create mode 100644 src/components/aspect_ratio/_aspect_ratio.scss
 create mode 100644 src/components/aspect_ratio/_index.scss
 create mode 100644 src/components/aspect_ratio/aspect_ratio.test.tsx
 create mode 100644 src/components/aspect_ratio/aspect_ratio.tsx
 create mode 100644 src/components/aspect_ratio/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c3d93f3eda..bd5bfbdb53e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added new keyboard shortcuts for the data grid component: `Home` (same row, first column), `End` (same row, last column), `Ctrl+Home` (first row, first column), `Ctrl+End` (last row, last column), `Page Up` (next page) and `Page Down` (previous page) ([#2519](https://github.com/elastic/eui/pull/2519))
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
 - Added `disabled` option to the `option` attribute of the `options` object that is passed to the `EuiCheckboxGroup` so that checkboxes in a group can be individually disabled ([#2548](https://github.com/elastic/eui/pull/2548))
+- Added `EuiAspectRatio` component that allows for responsively resizing embeds ([#2535](https://github.com/elastic/eui/pull/2535))
 
 **Bug fixes**
 
diff --git a/generator-eui/component/templates/stateless_function.tsx b/generator-eui/component/templates/stateless_function.tsx
index 17a009510b7..a85b766c170 100644
--- a/generator-eui/component/templates/stateless_function.tsx
+++ b/generator-eui/component/templates/stateless_function.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, SFC } from 'react';
+import React, { HTMLAttributes, FunctionComponent } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
@@ -6,7 +6,7 @@ export type <%= componentName %>Props = HTMLAttributes<HTMLDivElement> & CommonP
 
 };
 
-export const <%= componentName %>: React.SFC<<%= componentName %>Props> = ({
+export const <%= componentName %>: FunctionComponent<<%= componentName %>Props> = ({
   children,
   className,
   ...rest
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index b366166d992..b3aec97f6ff 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -39,6 +39,8 @@ import { AccessibilityExample } from './views/accessibility/accessibility_exampl
 
 import { AccordionExample } from './views/accordion/accordion_example';
 
+import { AspectRatioExample } from './views/aspect_ratio/aspect_ratio_example';
+
 import { AvatarExample } from './views/avatar/avatar_example';
 
 import { BadgeExample } from './views/badge/badge_example';
@@ -334,6 +336,7 @@ const navigation = [
   {
     name: 'Display',
     items: [
+      AspectRatioExample,
       AvatarExample,
       BadgeExample,
       CallOutExample,
diff --git a/src-docs/src/views/aspect_ratio/aspect_ratio.js b/src-docs/src/views/aspect_ratio/aspect_ratio.js
new file mode 100644
index 00000000000..8bac7081423
--- /dev/null
+++ b/src-docs/src/views/aspect_ratio/aspect_ratio.js
@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiAspectRatio,
+  EuiSpacer,
+  EuiTitle,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+    <EuiTitle size="s">
+      <p>16x9 aspect</p>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiAspectRatio width={16} height={9}>
+      <iframe
+        title="Elastic is a search company"
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/yJarWSLRM24"
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </EuiAspectRatio>
+    <EuiSpacer size="xl" />
+    <EuiTitle size="s">
+      <p>4x3 aspect</p>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiAspectRatio width={4} height={3}>
+      <iframe
+        title="Elastic is a search company"
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/yJarWSLRM24"
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </EuiAspectRatio>
+    <EuiSpacer size="xl" />
+    <EuiTitle size="s">
+      <p>220x150 with a maxWidth set to 500</p>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiAspectRatio width={220} height={150} maxWidth={500}>
+      <iframe
+        src="https://app.stitcher.com/splayer/f/13377/54057816"
+        title="something"
+        frameBorder="0"
+        scrolling="no"
+      />
+    </EuiAspectRatio>
+  </Fragment>
+);
diff --git a/src-docs/src/views/aspect_ratio/aspect_ratio_example.js b/src-docs/src/views/aspect_ratio/aspect_ratio_example.js
new file mode 100644
index 00000000000..8d573807944
--- /dev/null
+++ b/src-docs/src/views/aspect_ratio/aspect_ratio_example.js
@@ -0,0 +1,62 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+import {
+  EuiLink,
+  EuiCode,
+  EuiCallOut,
+  EuiAspectRatio,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import AspectRatio from './aspect_ratio';
+const aspectRatioSource = require('!!raw-loader!./aspect_ratio');
+const aspectRatioHtml = renderToHtml(AspectRatio);
+
+const aspectRatioSnippet = `<EuiAspectRatio width={16} height={9}>
+  <!-- Embed goes here -->
+</EuiAspectRatio>`;
+
+export const AspectRatioExample = {
+  title: 'Aspect ratio',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: aspectRatioSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: aspectRatioHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <EuiCallOut
+            size="s"
+            color="warning"
+            title="In some cases, aspect ratio sizing may not be supported by the embed. This component will only work with ones that do, like YouTube."
+          />
+          <EuiSpacer />
+          <p>
+            <EuiCode>EuiAspectRatio</EuiCode> provides a way to responsively
+            resize a single block level child element to a specificied ratio.
+            This is useful for things like YouTube iframes or other embeds that
+            initially have a fixed size. If you need something similar for
+            images, take a look at CSS&apos;s{' '}
+            <EuiLink href="https://www.w3schools.com/css/css3_object-fit.asp">
+              object-fit property
+            </EuiLink>
+            .
+          </p>
+        </Fragment>
+      ),
+      props: { EuiAspectRatio },
+      demo: <AspectRatio />,
+      snippet: aspectRatioSnippet,
+    },
+  ],
+};
diff --git a/src-docs/src/views/image/image.js b/src-docs/src/views/image/image.js
index 658a9dcce55..485ef1a56c7 100644
--- a/src-docs/src/views/image/image.js
+++ b/src-docs/src/views/image/image.js
@@ -8,6 +8,6 @@ export default () => (
     hasShadow
     caption="Random nature image"
     alt="Random nature image"
-    url="https://source.unsplash.com/300x300/?Nature"
+    url="https://picsum.photos/300/300"
   />
 );
diff --git a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
new file mode 100644
index 00000000000..d392f34e5bb
--- /dev/null
+++ b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiAspectRatio is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiAspectRatio testClass1 testClass2"
+  data-test-subj="test subject string"
+  style="padding-bottom:44.44444444444444%;max-width:auto"
+>
+  <iframe
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen=""
+    frameborder="0"
+    height="315"
+    src="https://www.youtube.com/embed/yJarWSLRM24"
+    title="Elastic is a search company"
+    width="560"
+  />
+</div>
+`;
+
+exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
+<div
+  style="max-width:500px"
+>
+  <div
+    aria-label="aria-label"
+    class="euiAspectRatio testClass1 testClass2"
+    data-test-subj="test subject string"
+    style="padding-bottom:177.77777777777777%;max-width:500px"
+  >
+    <iframe
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen=""
+      frameborder="0"
+      height="315"
+      src="https://www.youtube.com/embed/yJarWSLRM24"
+      title="Elastic is a search company"
+      width="560"
+    />
+  </div>
+</div>
+`;
diff --git a/src/components/aspect_ratio/_aspect_ratio.scss b/src/components/aspect_ratio/_aspect_ratio.scss
new file mode 100644
index 00000000000..bb7fae76d8e
--- /dev/null
+++ b/src/components/aspect_ratio/_aspect_ratio.scss
@@ -0,0 +1,12 @@
+.euiAspectRatio {
+  position: relative;
+
+  > * {
+    // sass-lint:disable-block no-important
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
diff --git a/src/components/aspect_ratio/_index.scss b/src/components/aspect_ratio/_index.scss
new file mode 100644
index 00000000000..75582bd6f29
--- /dev/null
+++ b/src/components/aspect_ratio/_index.scss
@@ -0,0 +1 @@
+@import 'aspect_ratio';
diff --git a/src/components/aspect_ratio/aspect_ratio.test.tsx b/src/components/aspect_ratio/aspect_ratio.test.tsx
new file mode 100644
index 00000000000..2c07967bd74
--- /dev/null
+++ b/src/components/aspect_ratio/aspect_ratio.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiAspectRatio } from './aspect_ratio';
+
+describe('EuiAspectRatio', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiAspectRatio height={4} width={9} {...requiredProps}>
+        <iframe
+          title="Elastic is a search company"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/yJarWSLRM24"
+          frameBorder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </EuiAspectRatio>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('maxWidth', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiAspectRatio
+            height={16}
+            width={9}
+            maxWidth={500}
+            {...requiredProps}>
+            <iframe
+              title="Elastic is a search company"
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/yJarWSLRM24"
+              frameBorder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </EuiAspectRatio>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
new file mode 100644
index 00000000000..ed5a8028937
--- /dev/null
+++ b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -0,0 +1,53 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+import classNames from 'classnames';
+
+export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /**
+     * Aspect ratio height. For example 9 would be widescreen video.
+     */
+    height: number;
+    /**
+     * Aspect ratio width. For example 16 would be widescreen video.
+     */
+    width: number;
+    /**
+     * The maximum width you want the child to stretch to.
+     */
+    maxWidth?: number;
+  };
+
+export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
+  children,
+  className,
+  height,
+  width,
+  maxWidth,
+  ...rest
+}) => {
+  const classes = classNames('euiAspectRatio', className);
+
+  const paddingBottom = `${(height / width) * 100}%`;
+
+  const content = (
+    <div
+      className={classes}
+      {...rest}
+      style={{
+        paddingBottom: paddingBottom,
+        maxWidth: maxWidth ? maxWidth : 'auto',
+      }}>
+      {children}
+    </div>
+  );
+
+  let contentwithoptionalwrap = content;
+  if (maxWidth) {
+    contentwithoptionalwrap = (
+      <div style={{ maxWidth: maxWidth }}>{content}</div>
+    );
+  }
+
+  return contentwithoptionalwrap;
+};
diff --git a/src/components/aspect_ratio/index.ts b/src/components/aspect_ratio/index.ts
new file mode 100644
index 00000000000..15e2c11352b
--- /dev/null
+++ b/src/components/aspect_ratio/index.ts
@@ -0,0 +1 @@
+export { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
diff --git a/src/components/index.js b/src/components/index.js
index a4638e56f05..829ab8a0594 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,7 @@
 export { EuiAccordion } from './accordion';
 
+export { EuiAspectRatio } from './aspect_ratio';
+
 export { EuiAvatar } from './avatar';
 
 export { EuiKeyboardAccessible, EuiScreenReaderOnly } from './accessibility';
diff --git a/src/components/index.scss b/src/components/index.scss
index fb352de5c13..57f885deb08 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -3,6 +3,7 @@
 
 @import 'accessibility/index';
 @import 'accordion/index';
+@import 'aspect_ratio/index';
 @import 'avatar/index';
 @import 'badge/index';
 @import 'basic_table/index';