feat(tile): add eight by nine aspect ratio (#504)

Adds an eight by nine tile aspect ratio, which will be used in the image collage component in modern

client.

Author: jessemartin

config/styleguide-visual/reference/Tile_with_images_desktop.png

@@ -33,6 +33,23 @@ const image = <Image source={yammerLogo} description={yammerLogoDescription} ful
 
   <br />
 
+  <FixedGridRow>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+  </FixedGridRow>
+
+  <br />
+
   <FixedGridRow>
     <FixedGridColumn>
       <Tile aspectRatio={TileAspectRatio.OneOne}>{image}</Tile>

src/components/Tile/Tile.md

@@ -12,6 +12,7 @@ export interface TileClassNameProps {
 
 const mapAspectRatioToPercent: Record<TileAspectRatio, string> = {
   [TileAspectRatio.TwoThree]: '150%',
+  [TileAspectRatio.EightNine]: '112.5%',
   [TileAspectRatio.OneOne]: '100%',
   [TileAspectRatio.FourThree]: '75%',
   [TileAspectRatio.SixteenNine]: '56.25%',

src/components/Tile/Tile.styles.ts

@@ -13,6 +13,8 @@ export enum TileAspectRatio {
   FourThree = '4_3',
   /** 1:1 aspect ratio */
   OneOne = '1_1',
+  /** 8:9 aspect ratio */
+  EightNine = '8_9',
   /** 2:3 aspect ratio */
   TwoThree = '2_3',
 }