add aspectRatio prop back in

Author: joshfarrant

packages/react/src/Image/Image.module.css

@@ -4,23 +4,23 @@
   aspect-ratio: var(--brand-image-aspectRatio);
 }
 
-.Image--aspect-ratio-custom {
+.Image--aspectRatio-custom {
   aspect-ratio: var(--brand-image-aspectRatio);
 }
 
-.Image--aspect-ratio-1-1 {
+.Image--aspectRatio-1-1 {
   aspect-ratio: 1 / 1;
 }
 
-.Image--aspect-ratio-16-9 {
+.Image--aspectRatio-16-9 {
   aspect-ratio: 16 / 9;
 }
 
-.Image--aspect-ratio-16-10 {
+.Image--aspectRatio-16-10 {
   aspect-ratio: 16 / 10;
 }
 
-.Image--aspect-ratio-4-3 {
+.Image--aspectRatio-4-3 {
   aspect-ratio: 4 / 3;
 }
 

packages/react/src/Image/Image.module.css.d.ts

@@ -1,10 +1,10 @@
 declare const styles: {
   readonly "Image": string;
-  readonly "Image--aspect-ratio-custom": string;
-  readonly "Image--aspect-ratio-1-1": string;
-  readonly "Image--aspect-ratio-16-9": string;
-  readonly "Image--aspect-ratio-16-10": string;
-  readonly "Image--aspect-ratio-4-3": string;
+  readonly "Image--aspectRatio-custom": string;
+  readonly "Image--aspectRatio-1-1": string;
+  readonly "Image--aspectRatio-16-9": string;
+  readonly "Image--aspectRatio-16-10": string;
+  readonly "Image--aspectRatio-4-3": string;
   readonly "Image--borderRadius-small": string;
   readonly "Image--borderRadius-medium": string;
   readonly "Image--borderRadius-large": string;

packages/react/src/Image/Image.tsx

@@ -5,19 +5,41 @@ import {AnimateProps, useAnimation} from '../animation'
 
 export const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const
 export type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]
+export type ImageAspectRatio = '1:1' | '16:9' | '16:10' | '4:3' | 'custom'
 
 export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   alt: string
   animate?: AnimateProps
   borderRadius?: ImageBorderRadiusOptions
+  aspectRatio?: ImageAspectRatio
 }
 
-export const Image = ({alt, animate, borderRadius, className, style, ...props}: ImageProps) => {
+const getAspectRatioClassName = (aspectRatio?: ImageAspectRatio): string | null => {
+  if (!aspectRatio) {
+    return null
+  }
+
+  if (aspectRatio === 'custom') {
+    return styles['Image--aspectRatio-custom']
+  }
+
+  const className = `Image--aspectRatio-${aspectRatio.replace(':', '-')}`
+
+  return styles[className]
+}
+
+export const Image = ({alt, animate, borderRadius, className, style, aspectRatio, ...props}: ImageProps) => {
   const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)
 
   return (
     <img
-      className={clsx(animationClasses, styles.Image, styles[`Image--borderRadius-${borderRadius}`], className)}
+      className={clsx(
+        animationClasses,
+        styles.Image,
+        styles[`Image--borderRadius-${borderRadius}`],
+        getAspectRatioClassName(aspectRatio),
+        className,
+      )}
       style={{...animationInlineStyles, ...style}}
       alt={alt}
       {...props}