Storybook: Update BoxControl stories (#31029)

* Update BoxControl stories to highlight configurable sides
* Update BoxControl readme with sides prop info

packages/components/src/box-control/README.md

@@ -123,6 +123,13 @@ A callback function for visualizer changes, based on input hover interactions.
 -   Type: `Function`
 -   Required: Yes
 
+### sides
+
+Collection of sides to allow control of. If omitted or empty, all sides will be available.
+
+-   Type: `Array<Object>`
+-   Required: No
+
 ### units
 
 Collection of available units which are compatible with [UnitControl](../unit-control).

packages/components/src/box-control/stories/index.js

@@ -20,14 +20,15 @@ export const _default = () => {
 	return <BoxControl />;
 };
 
-function DemoExample() {
-	const [ values, setValues ] = useState( {
-		top: '10px',
-		right: '10px',
-		bottom: '10px',
-		left: '10px',
-	} );
+const defaultSideValues = {
+	top: '10px',
+	right: '10px',
+	bottom: '10px',
+	left: '10px',
+};
 
+function DemoExample( { sides, defaultValues = defaultSideValues } ) {
+	const [ values, setValues ] = useState( defaultValues );
 	const [ showVisualizer, setShowVisualizer ] = useState( {} );
 
 	return (
@@ -37,6 +38,7 @@ function DemoExample() {
 					<BoxControl
 						label="Padding"
 						values={ values }
+						sides={ sides }
 						onChange={ setValues }
 						onChangeShowVisualizer={ setShowVisualizer }
 					/>
@@ -62,6 +64,24 @@ export const visualizer = () => {
 	return <DemoExample />;
 };
 
+export const arbitrarySides = () => {
+	return (
+		<DemoExample
+			sides={ [ 'top', 'bottom' ] }
+			defaultValues={ { top: '10px', bottom: '10px' } }
+		/>
+	);
+};
+
+export const singleSide = () => {
+	return (
+		<DemoExample
+			sides={ [ 'bottom' ] }
+			defaultValues={ { bottom: '10px' } }
+		/>
+	);
+};
+
 const Container = styled( Flex )`
 	max-width: 780px;
 `;