From cc14203e9fcae719b0f6f242472ad30f4a0e3676 Mon Sep 17 00:00:00 2001
From: Charlotte Dann <pouretrebelle@github.com>
Date: Wed, 31 Jul 2024 19:48:36 +0100
Subject: [PATCH] Add Playground story to Box

---
 apps/docs/content/components/Box/react.mdx |  2 +-
 packages/react/src/Box/Box.stories.tsx     | 72 ++++++++++++++++++++--
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/apps/docs/content/components/Box/react.mdx b/apps/docs/content/components/Box/react.mdx
index b2ced7a26..7fd284414 100644
--- a/apps/docs/content/components/Box/react.mdx
+++ b/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
 ---
 
diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx
index 0425382b8..90be4958e 100644
--- a/packages/react/src/Box/Box.stories.tsx
+++ b/packages/react/src/Box/Box.stories.tsx
@@ -1,7 +1,14 @@
 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 {
@@ -9,10 +16,67 @@ export default {
   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',
+    },
+  },
+}