add aspectRatio prop back in

primer · Jul 2, 2024 · 552132e · 552132e
1 parent cde56f8
commit 552132e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/packages/react/src/Image/Image.module.css b/packages/react/src/Image/Image.module.css
@@ -4,6 +4,26 @@
   aspect-ratio: var(--brand-image-aspectRatio);
 }
 
+.Image--aspectRatio-custom {
+  aspect-ratio: var(--brand-image-aspectRatio);
+}
+
+.Image--aspectRatio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.Image--aspectRatio-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.Image--aspectRatio-16-10 {
+  aspect-ratio: 16 / 10;
+}
+
+.Image--aspectRatio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
 .Image--borderRadius-small {
   display: block;
   border-radius: var(--brand-borderRadius-small);

diff --git a/packages/react/src/Image/Image.module.css.d.ts b/packages/react/src/Image/Image.module.css.d.ts
@@ -1,5 +1,10 @@
 declare const styles: {
   readonly "Image": 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;

diff --git a/packages/react/src/Image/Image.tsx b/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}