Add simpler slotfill example

WordPress · Jan 27, 2022 · e15e9de · e15e9de
1 parent caac47f
commit e15e9de
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/packages/components/src/utils/hooks/stories/use-cx.js b/packages/components/src/utils/hooks/stories/use-cx.js
@@ -28,7 +28,7 @@ const Example = ( { args, children } ) => {
 	return <span className={ classes }>{ children }</span>;
 };
 
-export const _slotfill = () => {
+export const _slotFill = () => {
 	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlot' );
 
 	const redText = css`
@@ -72,6 +72,27 @@ export const _slotfill = () => {
 	);
 };
 
+export const _slotFillSimple = () => {
+	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlotTwo' );
+
+	const redText = css`
+		color: red;
+	`;
+
+	return (
+		<SlotFillProvider>
+			<Iframe>
+				<Fill name="test-slot">
+					<Example args={ [ redText ] }>
+						This text should be red
+					</Example>
+				</Fill>
+			</Iframe>
+			<Slot bubblesVirtually name="test-slot" />
+		</SlotFillProvider>
+	);
+};
+
 export const _default = () => {
 	const redText = css`
 		color: red;