From 205b1d44bedd83af78bc96da008b4791c9b725c4 Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Wed, 30 Oct 2024 12:54:25 -0400
Subject: [PATCH] feat(filters stories): clean up story code a bit

---
 .../filters/src/filters.stories.tsx           | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx
index c41a1141ec..2c5595d47a 100644
--- a/packages/components/filters/src/filters.stories.tsx
+++ b/packages/components/filters/src/filters.stories.tsx
@@ -27,8 +27,30 @@ type TFiltersPropsWithCustomArgs = TFiltersProps & {
   isDisabled?: boolean;
   isPersistent?: boolean;
 };
+
 const CustomSearchExample = () => <div>im an example</div>;
 
+const SelectedValueWithOperator = ({
+  operator,
+  value,
+}: {
+  operator: string;
+  value: string;
+}) => (
+  <div>
+    <span
+      css={{
+        fontStyle: 'italic',
+        marginRight: '4px',
+        fontWeight: '600',
+      }}
+    >
+      {operator}
+    </span>
+    {value}
+  </div>
+);
+
 const meta: Meta<TFiltersPropsWithCustomArgs> = {
   title: 'components/Filters',
   component: Filters,
@@ -55,7 +77,7 @@ const meta: Meta<TFiltersPropsWithCustomArgs> = {
       control: false,
       table: {
         type: {
-          detail: 'see "PRIMARY COLORS SECTION" for controls',
+          detail: 'see "PRIMARY COLORS FILTER" section below for controls',
         },
       },
     },
@@ -183,18 +205,10 @@ export const BasicExample: Story = (props: TFiltersPropsWithCustomArgs) => {
           value: value,
           // display selected operator in selected value if an operators input is rendered
           label: props.renderOperatorsInput ? (
-            <div>
-              <span
-                css={{
-                  fontStyle: 'italic',
-                  marginRight: '4px',
-                  fontWeight: '600',
-                }}
-              >
-                {primaryColorOperator}
-              </span>
-              {value}
-            </div>
+            <SelectedValueWithOperator
+              operator={primaryColorOperator}
+              value={value}
+            />
           ) : (
             value
           ),