From 1baf8d3b06cf9aec00c94334457bd421a0f9da2b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:29:32 -0800
Subject: [PATCH] Add support for left and right button accessories

---
 components/Button/index.tsx        | 41 ++++++++++++++++++++++++++----
 components/CharacterUnit/index.tsx |  2 +-
 components/GridRep/index.tsx       |  2 +-
 components/JobImage/index.tsx      |  2 +-
 components/PartyDetails/index.tsx  |  6 ++---
 components/SummonUnit/index.tsx    |  2 +-
 components/WeaponUnit/index.tsx    |  2 +-
 7 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index e87e7ff7..f75b9a48 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -8,7 +8,10 @@ interface Props
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   > {
-  accessoryIcon?: React.ReactNode
+  leftAccessoryIcon?: React.ReactNode
+  leftAccessoryClassName?: string
+  rightAccessoryIcon?: React.ReactNode
+  rightAccessoryClassName?: string
   active?: boolean
   blended?: boolean
   contained?: boolean
@@ -24,7 +27,18 @@ const defaultProps = {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
-  { accessoryIcon, active, blended, contained, buttonSize, text, ...props },
+  {
+    leftAccessoryIcon,
+    leftAccessoryClassName,
+    rightAccessoryIcon,
+    rightAccessoryClassName,
+    active,
+    blended,
+    contained,
+    buttonSize,
+    text,
+    ...props
+  },
   forwardedRef
 ) {
   const classes = classNames(
@@ -38,8 +52,24 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
     props.className
   )
 
-  const hasAccessory = () => {
-    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
+  const leftAccessoryClasses = classNames(leftAccessoryClassName, {
+    Accessory: true,
+    Left: true,
+  })
+
+  const rightAccessoryClasses = classNames(rightAccessoryClassName, {
+    Accessory: true,
+    Right: true,
+  })
+
+  const hasLeftAccessory = () => {
+    if (leftAccessoryIcon)
+      return <span className={leftAccessoryClasses}>{leftAccessoryIcon}</span>
+  }
+
+  const hasRightAccessory = () => {
+    if (rightAccessoryIcon)
+      return <span className={rightAccessoryClasses}>{rightAccessoryIcon}</span>
   }
 
   const hasText = () => {
@@ -48,8 +78,9 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
 
   return (
     <button {...props} className={classes} ref={forwardedRef}>
-      {hasAccessory()}
+      {hasLeftAccessory()}
       {hasText()}
+      {hasRightAccessory()}
     </button>
   )
 })
diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx
index d813b877..6e1b0674 100644
--- a/components/CharacterUnit/index.tsx
+++ b/components/CharacterUnit/index.tsx
@@ -218,7 +218,7 @@ const CharacterUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index 813635de..3f406b4b 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -208,7 +208,7 @@ const GridRep = (props: Props) => {
             <a href="#">
               <Button
                 className="Save"
-                accessoryIcon={<SaveIcon className="stroke" />}
+                leftAccessoryIcon={<SaveIcon className="stroke" />}
                 active={props.favorited}
                 contained={true}
                 buttonSize="small"
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index 8902abaa..91339331 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -76,7 +76,7 @@ const JobImage = ({
 
     return (
       <Button
-        accessoryIcon={icon}
+        leftAccessoryIcon={icon}
         className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index 285f8f59..ee5927d9 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -538,7 +538,7 @@ const PartyDetails = (props: Props) => {
         <div className="left">
           {router.pathname !== '/new' ? (
             <Button
-              accessoryIcon={<CrossIcon />}
+              leftAccessoryIcon={<CrossIcon />}
               className="Blended medium destructive"
               onClick={handleClick}
               text={t('buttons.delete')}
@@ -550,7 +550,7 @@ const PartyDetails = (props: Props) => {
         <div className="right">
           <Button text={t('buttons.cancel')} onClick={toggleDetails} />
           <Button
-            accessoryIcon={<CheckIcon className="Check" />}
+            leftAccessoryIcon={<CheckIcon className="Check" />}
             text={t('buttons.save_info')}
             onClick={updateDetails}
           />
@@ -643,7 +643,7 @@ const PartyDetails = (props: Props) => {
         <div className="Right">
           {party.editable ? (
             <Button
-              accessoryIcon={<EditIcon />}
+              leftAccessoryIcon={<EditIcon />}
               text={t('buttons.show_info')}
               onClick={toggleDetails}
             />
diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx
index 9da0b566..1fc9274a 100644
--- a/components/SummonUnit/index.tsx
+++ b/components/SummonUnit/index.tsx
@@ -172,7 +172,7 @@ const SummonUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index 8149f6a6..2da4c276 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -450,7 +450,7 @@ const WeaponUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />