Components: update components provider story (#32743)

* Refactor outerContext value out of story component

* Add more descriptive text to Card contents

* Remove unnecessary outer fragment

* Move "as=div" to innerContext

* Change elevation to lower value to make it easy to visually debug

* Use `style` prop instead of `css` for applying CSS inline styles

* Add text outline via inner context

* Use new `Card` component, remove debug styles

* Change innerContext background value to be different than white

packages/components/src/ui/context/stories/ComponentsProvider.stories.js

@@ -19,20 +19,39 @@ export default {
 	title: 'G2 Components (Experimental)/ContextSystemProvider',
 };
 
+const outerContext = {
+	Card: {
+		isRounded: false,
+		elevation: 15,
+	},
+	CardBody: {
+		as: 'a',
+		href: 'https://wordpress.org',
+		style: {
+			display: 'block',
+		},
+	},
+};
+
 const innerContext = {
 	Card: {
-		css: {
-			background: 'white',
+		style: {
+			background: 'rgba(35, 255, 55, 0.2)',
 		},
 	},
+	CardBody: {
+		as: 'div',
+	},
 };
 
 const InnerContent = memo( () => {
 	const state = useSomeContext();
 	const isEven = state % 2 === 0;
 	return (
-		<View css={ { background: isEven ? 'red' : 'initial' } }>
-			{ state }
+		<View style={ { background: isEven ? 'red' : 'initial' } }>
+			<Text>Card (inside innerContext)</Text>
+			<br />
+			<Text>Counter:{ state }</Text>
 		</View>
 	);
 } );
@@ -41,7 +60,7 @@ const InnerCard = memo( () => {
 	return (
 		<View style={ { padding: 40 } }>
 			<Card>
-				<CardBody as="div" style={ { border: '3px solid green' } }>
+				<CardBody style={ { border: '3px solid green' } }>
 					<InnerContent />
 				</CardBody>
 			</Card>
@@ -53,40 +72,26 @@ export const Default = () => {
 	const [ state, update ] = useState( 0 );
 	const forceUpdate = () => update( ( prev ) => prev + 1 );
 
-	const value = {
-		Card: {
-			isRounded: false,
-			elevation: 100,
-		},
-		CardBody: {
-			as: 'a',
-			href: 'https://wordpress.org',
-			style: {
-				display: 'block',
-			},
-		},
-	};
-
 	return (
-		<>
-			<SomeContext.Provider value={ state }>
-				<button onClick={ forceUpdate }>Force Update</button>
-				<ContextSystemProvider value={ value }>
-					<Card>
-						<CardBody>
-							<Text optimizeReadabilityFor="blue">Card</Text>
-							<ContextSystemProvider value={ innerContext }>
-								<InnerCard />
-							</ContextSystemProvider>
-						</CardBody>
-					</Card>
-				</ContextSystemProvider>
+		<SomeContext.Provider value={ state }>
+			<button onClick={ forceUpdate }>
+				Force Update (increment counter)
+			</button>
+			<ContextSystemProvider value={ outerContext }>
 				<Card>
 					<CardBody>
-						<Text>Card</Text>
+						<Text>Card (inside outerContext)</Text>
+						<ContextSystemProvider value={ innerContext }>
+							<InnerCard />
+						</ContextSystemProvider>
 					</CardBody>
 				</Card>
-			</SomeContext.Provider>
-		</>
+			</ContextSystemProvider>
+			<Card>
+				<CardBody>
+					<Text>Card (outside of outerContext)</Text>
+				</CardBody>
+			</Card>
+		</SomeContext.Provider>
 	);
 };