feat(v5): update ResponsiveEmbed to Ratio (react-bootstrap#5714)

* feat(v5): update ResponsiveEmbed to Ratio

* Add custom ratios

* Allow custom ratio strings

Author: kyletsang

src/Ratio.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps } from './helpers';
+
+export type AspectRatio = '1x1' | '4x3' | '16x9' | '21x9' | string;
+
+export interface RatioProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactChild;
+  aspectRatio?: AspectRatio | number;
+}
+
+const propTypes = {
+  /**
+   * @default 'ratio'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * This component requires a single child element
+   */
+  children: PropTypes.element.isRequired,
+
+  /**
+   * Set the aspect ratio of the embed. A fraction or a percentage can also
+   * be used to create custom aspect ratios.
+   */
+  aspectRatio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+const defaultProps = {
+  aspectRatio: '1x1' as const,
+};
+
+function toPercent(num: number): string {
+  if (num <= 0 || num > 100) return '100%';
+  if (num < 1) return `${num * 100}%`;
+  return `${num}%`;
+}
+
+const Ratio = React.forwardRef<HTMLDivElement, RatioProps>(
+  ({ bsPrefix, className, children, aspectRatio, style, ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'ratio');
+    const isCustomRatio = typeof aspectRatio === 'number';
+
+    return (
+      <div
+        ref={ref}
+        {...props}
+        style={{
+          ...style,
+          ...(isCustomRatio && {
+            '--bs-aspect-ratio': toPercent(aspectRatio as number),
+          }),
+        }}
+        className={classNames(
+          bsPrefix,
+          className,
+          !isCustomRatio && `${bsPrefix}-${aspectRatio}`,
+        )}
+      >
+        {React.Children.only(children)}
+      </div>
+    );
+  },
+);
+
+Ratio.propTypes = propTypes;
+Ratio.defaultProps = defaultProps;
+
+export default Ratio;

src/ResponsiveEmbed.tsx

@@ -160,8 +160,8 @@ export { default as PopoverBody } from './PopoverBody';
 export { default as ProgressBar } from './ProgressBar';
 export type { ProgressBarProps } from './ProgressBar';
 
-export { default as ResponsiveEmbed } from './ResponsiveEmbed';
-export type { ResponsiveEmbedProps } from './ResponsiveEmbed';
+export { default as Ratio } from './Ratio';
+export type { RatioProps } from './Ratio';
 
 export { default as Row } from './Row';
 export type { RowProps } from './Row';

src/index.tsx

@@ -0,0 +1,61 @@
+import { mount } from 'enzyme';
+
+import Ratio from '../src/Ratio';
+
+describe('Ratio', () => {
+  it('should contain `ratio` class', () => {
+    mount(
+      <Ratio aspectRatio="1x1" className="custom-class">
+        <div />
+      </Ratio>,
+    ).assertSingle('div.custom-class.ratio.ratio-1x1 div');
+  });
+
+  it('should support custom ratios using percent for aspectRatio', () => {
+    const wrapper = mount(
+      <Ratio aspectRatio={50}>
+        <div />
+      </Ratio>,
+    );
+
+    expect(wrapper.find('.ratio').props().style['--bs-aspect-ratio']).to.equal(
+      '50%',
+    );
+  });
+
+  it('should support custom ratios using fraction for aspectRatio', () => {
+    const wrapper = mount(
+      <Ratio aspectRatio={1 / 2}>
+        <div />
+      </Ratio>,
+    );
+
+    expect(wrapper.find('.ratio').props().style['--bs-aspect-ratio']).to.equal(
+      '50%',
+    );
+  });
+
+  it('should support use 100% as custom ratio if aspectRatio is less than 0', () => {
+    const wrapper = mount(
+      <Ratio aspectRatio={-1}>
+        <div />
+      </Ratio>,
+    );
+
+    expect(wrapper.find('.ratio').props().style['--bs-aspect-ratio']).to.equal(
+      '100%',
+    );
+  });
+
+  it('should support use 100% as custom ratio if aspectRatio is greater than 100', () => {
+    const wrapper = mount(
+      <Ratio aspectRatio={200}>
+        <div />
+      </Ratio>,
+    );
+
+    expect(wrapper.find('.ratio').props().style['--bs-aspect-ratio']).to.equal(
+      '100%',
+    );
+  });
+});

test/RatioSpec.js

@@ -139,7 +139,7 @@ const components = [
   'toasts',
 ];
 
-const utilities = ['transitions', 'responsive-embed', 'react-overlays'];
+const utilities = ['transitions', 'ratio', 'react-overlays'];
 
 // We need to configure this
 function attachSearch(ref) {

test/ResponsiveEmbedSpec.js

@@ -4,6 +4,23 @@
   max-width: 400px;
 }
 
+.ratio-examples {
+  :global(.ratio) {
+    display: inline-block;
+    width: 10rem;
+    color: #6c757d;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    margin-right: 5px;
+  
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
 .static-dropdown-menu {
   composes: clearfix from global;
 

www/src/components/SideNav.js

@@ -55,7 +55,7 @@
     "Popover": false,
     "ProgressBar": false,
     "Radio": false,
-    "ResponsiveEmbed": false,
+    "Ratio": false,
     "Row": false,
     "SplitButton": false,
     "Tab": false,

www/src/css/examples.module.scss

@@ -1,5 +1,5 @@
 <div style={{ width: 660, height: 'auto' }}>
-  <ResponsiveEmbed aspectRatio="16by9">
+  <Ratio aspectRatio="16x9">
     <embed type="image/svg+xml" src="/TheresaKnott_castle.svg" />
-  </ResponsiveEmbed>
+  </Ratio>
 </div>;

www/src/examples/.eslintrc

@@ -0,0 +1,8 @@
+<>
+  <Ratio aspectRatio={1 / 2}>
+    <div>2x1</div>
+  </Ratio>
+  <Ratio aspectRatio={50}>
+    <div>2x1</div>
+  </Ratio>
+</>;