Add Playground story to Box

Author: pouretrebelle

apps/docs/content/components/Box/react.mdx

@@ -3,7 +3,7 @@ title: Box
 status: Experimental
 a11yReviewed: false
 source: https://github.com/primer/brand/blob/main/packages/react/src/Box/Box.tsx
-storybook: '/brand/storybook/?path=/story/components-box--default'
+storybook: '/brand/storybook/?path=/story/components-box--playground'
 description: Use a box to simplify the process of applying one-off styles to an element
 ---
 

packages/react/src/Box/Box.stories.tsx

@@ -1,18 +1,82 @@
 import React from 'react'
 
 import {Meta, StoryFn} from '@storybook/react'
-import {Box} from './Box'
+import {
+  Box,
+  BoxBackgroundColors,
+  BoxBorderColorOptions,
+  BoxBorderRadiusOptions,
+  BoxBorderWidthOptions,
+  BoxSpacingValues,
+} from './Box'
 import {Text} from '../'
 
 export default {
   title: 'Components/Box',
   component: Box,
 } as Meta<typeof Box>
 
-const Template: StoryFn<typeof Box> = args => (
-  <Box {...args}>
+export const Default = () => (
+  <Box>
     <Text>Default Box</Text>
   </Box>
 )
 
-export const Default = Template.bind({})
+export const Playground: StoryFn<typeof Box> = args => (
+  <Box {...args}>
+    <Text>Default Box</Text>
+  </Box>
+)
+Playground.args = {
+  padding: 'normal',
+  margin: 'normal',
+  backgroundColor: 'inset',
+  borderRadius: 'medium',
+  borderWidth: 'thin',
+  borderColor: 'default',
+  borderStyle: 'solid',
+}
+Playground.argTypes = {
+  padding: {
+    options: BoxSpacingValues,
+    control: {
+      type: 'select',
+    },
+  },
+  margin: {
+    options: BoxSpacingValues,
+    control: {
+      type: 'select',
+    },
+  },
+  backgroundColor: {
+    options: BoxBackgroundColors,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderRadius: {
+    options: BoxBorderRadiusOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderWidth: {
+    options: BoxBorderWidthOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderColor: {
+    options: BoxBorderColorOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderStyle: {
+    options: ['none', 'solid'],
+    control: {
+      type: 'inline-radio',
+    },
+  },
+}