Merge pull request #292 from commitd/sh/layout

Layout components

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,71 @@
+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 { Image } from '../Image'
+import { Inline } from '../Inline'
+import { Label } from '../Label'
+import { Slider } from '../Slider'
+import { Stack } from '../Stack'
+
+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 (
+    <Inline>
+      <Box variant="wide">
+        <Stack>
+          <Label>
+            Numerator
+            <Slider value={numerator} onValueChange={setNumerator} />
+          </Label>
+          <Label>
+            Denominator
+            <Slider value={denominator} onValueChange={setDenominator} />
+          </Label>
+        </Stack>
+      </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>
+    </Inline>
+  )
+}

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,7 +1,9 @@
 import { Meta, Story } from '@storybook/react'
 import React, { ComponentProps } from 'react'
-import { Column, Grid, Row } from '../'
+import { Grid } from '../'
 import { Variants } from '../../docs/util'
+import { Inline } from '../Inline'
+import { Stack } from '../Stack'
 import { Button } from './Button'
 
 export default {
@@ -61,16 +63,16 @@ export const Default: Story<ComponentProps<typeof Button>> = (args) => {
 
 /* Three size options are available */
 export const Size: Story = () => (
-  <Row css={{ gap: '$3', mb: '$3' }}>
+  <Inline>
     <Button size="small">Small</Button>
     <Button size="default">Default</Button>
     <Button size="large">Large</Button>
-  </Row>
+  </Inline>
 )
 
 /* Add `full-width` to make the button grow to take the full width */
 export const FullWidth: Story = () => (
-  <Column css={{ gap: '$3' }}>
+  <Stack>
     <Button full-width size="small">
       Small
     </Button>
@@ -80,7 +82,7 @@ export const FullWidth: Story = () => (
     <Button full-width size="large">
       Large
     </Button>
-  </Column>
+  </Stack>
 )
 
 /* Three variants are supported,
@@ -90,16 +92,16 @@ export const FullWidth: Story = () => (
  * - `tertiary` use to pair with others as cancel or for icon buttons
  */
 export const Variant: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button variant="primary">Primary</Button>
     <Button variant="secondary">Secondary</Button>
     <Button variant="tertiary">Tertiary</Button>
-  </Row>
+  </Inline>
 )
 
 /** If the action is destructive, say a delete or an action that cannot be undone, add the `destructive` flag */
 export const Destructive: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button destructive variant="primary">
       Primary
     </Button>
@@ -109,12 +111,12 @@ export const Destructive: Story = () => (
     <Button destructive variant="tertiary">
       Tertiary
     </Button>
-  </Row>
+  </Inline>
 )
 
 /** The `disabled` state is controlled in the standard way */
 export const Disabled: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button disabled variant="primary">
       Primary
     </Button>
@@ -124,7 +126,7 @@ export const Disabled: Story = () => (
     <Button disabled variant="tertiary">
       Tertiary
     </Button>
-  </Row>
+  </Inline>
 )
 
 /**

src/components/Button/Button.stories.tsx

@@ -10,7 +10,8 @@ import {
   CardLeadIn,
   CardSubheading,
 } from '.'
-import { Button, IconButton, Row, Svg, Text } from '../'
+import { Button, IconButton, Svg, Text } from '../'
+import { Inline } from '../Inline'
 
 export default {
   title: 'Components/Card',
@@ -44,7 +45,7 @@ export const Default: Story = () => {
  */
 export const Classic: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card>
         <CardHeading>Default Card</CardHeading>
         <CardBody>
@@ -57,7 +58,7 @@ export const Classic: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -68,7 +69,7 @@ export const Classic: Story = () => {
  */
 export const Outline: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card variant="outline">
         <CardHeading>Outline</CardHeading>
         <CardBody>
@@ -81,7 +82,7 @@ export const Outline: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -92,7 +93,7 @@ export const Outline: Story = () => {
  */
 export const Ghost: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card variant="ghost">
         <CardHeading>Ghost</CardHeading>
         <CardBody>
@@ -105,7 +106,7 @@ export const Ghost: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -128,7 +129,7 @@ export const Body: Story = () => (
  * By default headings are just `div`s, use the `as` prop if the heading should be semantic.
  */
 export const Headers: Story = () => (
-  <Row css={{ flexWrap: 'wrap', gap: '$3' }}>
+  <Inline wrap>
     <Card>
       <CardHeading>Heading</CardHeading>
       <CardBody>
@@ -149,7 +150,7 @@ export const Headers: Story = () => (
         <Text>Lorem Ipsum is simply dummy text...</Text>
       </CardBody>
     </Card>
-  </Row>
+  </Inline>
 )
 
 /**
@@ -159,7 +160,7 @@ export const Headers: Story = () => (
  * If a more complex layout is required you can create your own.
  */
 export const Actions: Story = () => (
-  <Row css={{ flexWrap: 'wrap', gap: '$3' }}>
+  <Inline wrap>
     <Card>
       <CardHeading>
         Heading
@@ -228,5 +229,5 @@ export const Actions: Story = () => (
         />
       </CardActions>
     </Card>
-  </Row>
+  </Inline>
 )

src/components/Card/Card.stories.tsx

@@ -2,8 +2,8 @@ import { action } from '@storybook/addon-actions'
 import { Meta, Story } from '@storybook/react'
 import React from 'react'
 import { Chip } from '.'
-import { Row } from '../'
 import { Variants } from '../../docs/util'
+import { Inline } from '../Inline'
 
 export default {
   title: 'Components/Chip',
@@ -14,17 +14,17 @@ export const Default: Story = (args) => <Chip {...args}>Chip</Chip>
 
 /** Chips are available in 2 sizes, `default` and `small`  */
 export const Sizes: Story = () => (
-  <>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip variant="info" size="small">
       New
     </Chip>
     <Chip variant="error">Error</Chip>
-  </>
+  </Inline>
 )
 
 /** If an `onClose` prop is provided a close button is added and clicking calls the onClose`  */
 export const Closable: Story = () => (
-  <Row css={{ gap: '$3', alignItems: 'center' }}>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip variant="info" size="small" onClose={action('close')}>
       Close
     </Chip>
@@ -50,7 +50,7 @@ export const Closable: Story = () => (
     >
       Click
     </Chip>
-  </Row>
+  </Inline>
 )
 
 export const All: Story = () => (
@@ -95,7 +95,7 @@ export const Interactive: Story = () => (
 )
 
 export const Disabled: Story = () => (
-  <Row css={{ gap: '$3', alignItems: 'center' }}>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip
       as="button"
       onClick={action('disabled')}
@@ -128,5 +128,5 @@ export const Disabled: Story = () => (
     >
       Disabled
     </Chip>
-  </Row>
+  </Inline>
 )

src/components/Chip/Chip.stories.tsx

@@ -42,7 +42,7 @@ export type ComponentsProviderProps = {
    */
   viewport?: false | ToastViewportPropsWithoutChildren
   /**
-   * By default the childre are put into their own stacking context to better separate the content from the portalled dialog elements. Set false to turn this off and controll it yourself.
+   * By default the children are put into their own stacking context to better separate the content from the portalled dialog elements. Set false to turn this off and control it yourself.
    */
   isolated?: boolean
 } & CSSProps