From cd2906387092231d8309447636ea8c77e904b30b Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Fri, 27 Oct 2023 16:32:23 +0200
Subject: [PATCH] Show correct colors in Highlight story (#680)

* Parameterise text color, remove repetition

* Refine inverseColor logic

* Fix incorrect merge conflict resolution
---
 .../src/Highlight/Highlight.stories.tsx       | 105 ++----------------
 1 file changed, 12 insertions(+), 93 deletions(-)

diff --git a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx
index c65bc10183..45b5512a52 100644
--- a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx
+++ b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx
@@ -32,151 +32,70 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Highlight>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    children: (
+  render: ({ color }) => (
+    <Highlight color={color}>
       <PageGrid>
         <GridCell fullWidth>
-          <Blockquote inverseColor>
+          <Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>
             We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
             sporten. Buitenspelen zou een vak moeten zijn op school.
           </Blockquote>
         </GridCell>
       </PageGrid>
-    ),
-  },
-}
+    </Highlight>
+  ),
+} satisfies Meta<typeof Highlight>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
 
 export const Yellow: Story = {
   args: {
     color: 'yellow',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const Orange: Story = {
   args: {
     color: 'orange',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const Magenta: Story = {
   args: {
     color: 'magenta',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote inverseColor>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const Purple: Story = {
   args: {
     color: 'purple',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote inverseColor>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const Blue: Story = {
   args: {
     color: 'blue',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote inverseColor>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const LightBlue: Story = {
   args: {
     color: 'light-blue',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const Green: Story = {
   args: {
     color: 'green',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }
 
 export const DarkGreen: Story = {
   args: {
     color: 'dark-green',
-    children: (
-      <PageGrid>
-        <GridCell fullWidth>
-          <Blockquote inverseColor>
-            We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
-            sporten. Buitenspelen zou een vak moeten zijn op school.
-          </Blockquote>
-        </GridCell>
-      </PageGrid>
-    ),
   },
 }