From 9df86b239cebdb3b9348955c7c0b5730b5edf4de Mon Sep 17 00:00:00 2001
From: Zoe Hayes <zoehayes286@gmail.com>
Date: Wed, 24 Apr 2024 11:23:45 -0400
Subject: [PATCH] refactor: minor QueryItem Action refinements

---
 .../data-entry/QueryItem/Action.stories.tsx   | 12 +++++-------
 .../data-entry/QueryItem/Action.tsx           | 19 ++++++++++++-------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/data-entry/QueryItem/Action.stories.tsx b/src/components/data-entry/QueryItem/Action.stories.tsx
index 70c0481d7..2f4d11708 100644
--- a/src/components/data-entry/QueryItem/Action.stories.tsx
+++ b/src/components/data-entry/QueryItem/Action.stories.tsx
@@ -22,31 +22,29 @@ type Story = StoryObj<typeof QueryItem.Action>
 export const Primary: Story = {
   args: {
     text: 'Primary Action',
-    isPrimary: true,
-    isDisabled: false,
+    type: "primary"
   },
 }
 
 export const Secondary: Story = {
   args: {
     text: 'Secondary Action',
-    isPrimary: false,
-    isDisabled: false,
+    type: "default"
   },
 }
 
 export const Disabled: Story = {
   args: {
     text: 'Disabled Action',
-    isPrimary: true,
-    isDisabled: true,
+    type: "disabled"
+
   },
 }
 
 export const OnClick: Story = {
   args: {
     text: 'On Click Action',
-    isPrimary: true,
+    type: "primary",
     onClick: () => alert('You clicked the QueryItem.Action!')
   },
 }
diff --git a/src/components/data-entry/QueryItem/Action.tsx b/src/components/data-entry/QueryItem/Action.tsx
index fdcce83c0..72c58ab5d 100644
--- a/src/components/data-entry/QueryItem/Action.tsx
+++ b/src/components/data-entry/QueryItem/Action.tsx
@@ -1,20 +1,25 @@
-import { AddIcon, Button } from 'src/components'
+import { AddIcon, Button, IButtonProps } from 'src/components'
 import './query-item.css'
 
 export interface IActionProps {
-  isPrimary?: boolean
-  isDisabled?: boolean
+  type?: 'disabled' | 'primary' | 'default'
   text?: string
   onClick?: () => void
 }
 
 export const Action = (props: IActionProps) => {
-  const buttonClassNames: string = props.isPrimary
-    ? 'query-item query-item--action'
-    : 'query-item query-item--action query-item--secondary'
+  let buttonClassNames: string = 'query-item query-item--action'
+  if ((props.type ?? 'default') !== 'primary') buttonClassNames += ` query-item--secondary`
+  const baseProps: IButtonProps = {
+    className: buttonClassNames,
+    type: props.type === 'disabled' ? 'default' : 'primary',
+    disabled: props.type === 'disabled',
+    onClick: props.onClick,
+  }
+
   return (
     <>
-      <Button className={buttonClassNames} type={props.isPrimary ? 'primary' : 'default'} disabled={props.isDisabled} onClick={props.onClick}>
+      <Button {...baseProps}>
         <AddIcon className="query-item__icon" />
         <span>{props.text}</span>
       </Button>