feat(AspectRatio): add AspectRatio compoennt

layout component that maintains the arpect ratio of the box

Author: stuarthendren

package-lock.json

@@ -150,6 +150,7 @@
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.0",
+    "@radix-ui/react-aspect-ratio": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-context-menu": "^1.0.0",

package.json

@@ -0,0 +1,64 @@
+import { Meta, Story } from '@storybook/react'
+import React, { ComponentProps, useState } from 'react'
+import { AspectRatio } from '.'
+import { Box } from '../Box'
+import { Card, CardBody, CardHeading, CardSubheading } from '../Card'
+import { Row } from '../Flex'
+import { Image } from '../Image'
+import { Label } from '../Label'
+import { Slider } from '../Slider'
+
+export default {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+} as Meta
+
+export const Default: Story<ComponentProps<typeof AspectRatio>> = ({
+  ratio = 9 / 16,
+  ...args
+}) => (
+  <Card css={{ width: '50%' }}>
+    <CardHeading>Photo by Damian Markutt</CardHeading>
+    <CardSubheading>@wildandfree_photography</CardSubheading>
+    <CardBody>
+      {/* ratio={ 9 / 16} */}
+      <AspectRatio ratio={ratio} {...args}>
+        <Image
+          src="https://images.unsplash.com/photo-1572302895496-a09d147fa902?w=300&dpr=2&q=80"
+          alt="Photo by Damian Markutt @wildandfree_photography"
+        />
+      </AspectRatio>
+    </CardBody>
+  </Card>
+)
+
+/**
+ * The ratio can be entered as a numerator and denominator to give comm0n values like `16 / 9`.
+ */
+export const Dynamic: Story = () => {
+  const [numerator, setNumerator] = useState([9])
+  const [denominator, setDenominator] = useState([16])
+
+  return (
+    <Row>
+      <Box variant="wide">
+        <Label>Numerator</Label>
+        <Slider value={numerator} onValueChange={setNumerator} />
+        <Label>Denominator</Label>
+        <Slider value={denominator} onValueChange={setDenominator} />
+      </Box>
+      <Card css={{ width: '50%' }}>
+        <CardHeading>Photo by Damian Markutt</CardHeading>
+        <CardSubheading>@wildandfree_photography</CardSubheading>
+        <CardBody>
+          <AspectRatio ratio={numerator[0] / denominator[0]}>
+            <Image
+              src="https://images.unsplash.com/photo-1572302895496-a09d147fa902?w=300&dpr=2&q=80"
+              alt="Photo by Damian Markutt @wildandfree_photography"
+            />
+          </AspectRatio>
+        </CardBody>
+      </Card>
+    </Row>
+  )
+}

src/components/AspectRatio/AspectRatio.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { renderDark, renderLight } from 'test-utils'
+import { Default } from './AspectRatio.stories'
+
+it('renders light without error', () => {
+  const { asFragment } = renderLight(<Default />)
+  expect(asFragment()).toBeDefined()
+})
+
+it('renders dark without error', () => {
+  const { asFragment } = renderDark(<Default />)
+  expect(asFragment()).toBeDefined()
+})

src/components/AspectRatio/AspectRatio.test.tsx

@@ -0,0 +1,6 @@
+import { Root } from '@radix-ui/react-aspect-ratio'
+
+/**
+ * AspectRatio can be used to display content with a fixed aspect ratio
+ */
+export const AspectRatio = Root

src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1 @@
+export * from './AspectRatio'

src/components/AspectRatio/index.ts

@@ -1,6 +1,7 @@
 export * from './Accordion'
 export * from './Alert'
 export * from './AppBar'
+export * from './AspectRatio'
 export * from './Avatar'
 export * from './Backdrop'
 export * from './Badge'