@mskcc/carbon-react/es/components/AspectRatio/AspectRatio.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default from 'react';
import { usePrefix } from '../../internal/usePrefix.js';

/**
 * The AspectRatio component provides a `ratio` prop that will be used to
 * specify the aspect ratio that the children you provide will be displayed in.
 * This is often useful alongside our grid components, or for media assets like
 * images or videos.
 */
const AspectRatio = _ref => {
  let {
    as: BaseComponent = 'div',
    className: containerClassName,
    children,
    ratio = '1x1',
    ...rest
  } = _ref;
  const prefix = usePrefix();
  const className = cx(containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`);
  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
    className: className
  }, rest), children);
};
AspectRatio.propTypes = {
  /**
   * Provide a custom component or string to be rendered as the outermost node
   * of the component. This is useful if you want to deviate from the default
   * `div` tag, where you could specify `section` or `article` instead.
   *
   * ```jsx
   * <AspectRatio as="article">My content</AspectRatio>
   * ```
   */
  as: PropTypes.elementType,
  /**
   * Specify the content that will be placed in the aspect ratio
   */
  children: PropTypes.node,
  /**
   * Specify a class name for the outermost node of the component
   */
  className: PropTypes.string,
  /**
   * Specify the ratio to be used by the aspect ratio container. This will
   * determine what aspect ratio your content will be displayed in.
   */
  ratio: PropTypes.oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '3x2', '2x3', '1x1'])
};

export { AspectRatio as default };