Aspect ratio component

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**
 

generator-eui/component/templates/stateless_function.tsx

@@ -1,12 +1,12 @@
-import React, { HTMLAttributes, SFC } from 'react';
+import React, { HTMLAttributes, FunctionComponent } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
 export type <%= componentName %>Props = HTMLAttributes<HTMLDivElement> & CommonProps & {
 
 };
 
-export const <%= componentName %>: React.SFC<<%= componentName %>Props> = ({
+export const <%= componentName %>: FunctionComponent<<%= componentName %>Props> = ({
   children,
   className,
   ...rest

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,

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>
+);

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,
+    },
+  ],
+};

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"
   />
 );

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>
+`;

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;
+  }
+}

src/components/aspect_ratio/_index.scss

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

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();
+      });
+    });
+  });
+});

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;
+};

src/components/aspect_ratio/index.ts

@@ -0,0 +1 @@
+export { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';

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';

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';