From 5f99022e8a376f86d58464c4d262d7c471164820 Mon Sep 17 00:00:00 2001
From: marlin dalpozzo <marlin.dalpozzo@appfolio.com>
Date: Fri, 10 May 2024 12:57:13 -0700
Subject: [PATCH] feat(CollapsableText): add alignToggleButton prop to
 CollapsableText

---
 .../CollapsableText.stories.js                | 24 +++++++++++++++
 .../CollapsableText/CollapsableText.tsx       | 30 +++++++++++--------
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js
index ab1440cfc..becc22706 100644
--- a/src/components/CollapsableText/CollapsableText.stories.js
+++ b/src/components/CollapsableText/CollapsableText.stories.js
@@ -48,3 +48,27 @@ export const CustomComponents = () => (
     </CollapsableText>
   </div>
 );
+
+export const AlignToggleButtonStart = () => (
+  <div>
+    <CollapsableText alignToggleButton="start">{loremIpsum}</CollapsableText>
+  </div>
+);
+
+export const AlignToggleButtonCenter = () => (
+  <div>
+    <CollapsableText alignToggleButton="center">{loremIpsum}</CollapsableText>
+  </div>
+);
+
+export const AlignToggleButtonEnd = () => (
+  <div>
+    <CollapsableText alignToggleButton="end">{loremIpsum}</CollapsableText>
+  </div>
+);
+
+export const AlignToggleButtonAuto = () => (
+  <div>
+    <CollapsableText alignToggleButton="auto">{loremIpsum}</CollapsableText>
+  </div>
+);
diff --git a/src/components/CollapsableText/CollapsableText.tsx b/src/components/CollapsableText/CollapsableText.tsx
index 7edfdc81c..54a595dc5 100644
--- a/src/components/CollapsableText/CollapsableText.tsx
+++ b/src/components/CollapsableText/CollapsableText.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
+import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
 import { useIntervalRef } from '../../hooks/useIntervalRef';
 import Button from '../Button/Button';
@@ -23,14 +24,16 @@ export interface CollapsableTextProps {
   /**  @deprecated maxLength has no effect. Use maxLines instead */
   maxLength?: number;
   maxLines?: number;
+  alignToggleButton?: 'start' | 'center' | 'end' | 'auto';
 }
 
 export default function CollapsableText({
   children,
-  collapsed = CollapsableText.defaultProps.collapsed,
-  lessLabel = CollapsableText.defaultProps.lessLabel,
-  moreLabel = CollapsableText.defaultProps.moreLabel,
-  maxLines = CollapsableText.defaultProps.maxLines,
+  collapsed = true,
+  lessLabel = 'Show Less',
+  moreLabel = 'Show More',
+  maxLines = 2,
+  alignToggleButton = 'start',
 }: CollapsableTextProps) {
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
   const [hideToggle, setHideToggle] = useState(collapsed);
@@ -59,17 +62,20 @@ export default function CollapsableText({
         {children}
       </div>
       {!hideToggle && (
-        <Button color="link" onClick={() => setIsCollapsed((c) => !c)}>
+        <Button
+          color="link"
+          className={classNames({
+            'align-self-start': alignToggleButton === 'start',
+            'align-self-center': alignToggleButton === 'center',
+            'align-self-end': alignToggleButton === 'end',
+            // 'auto' should center align the button on xs screen sizes and start align on sm breakpoint and up (FEE-476)
+            'align-self-center align-self-sm-start': alignToggleButton === 'auto',
+          })}
+          onClick={() => setIsCollapsed((c) => !c)}
+        >
           {isCollapsed ? moreLabel : lessLabel}
         </Button>
       )}
     </div>
   );
 }
-
-CollapsableText.defaultProps = {
-  collapsed: true,
-  lessLabel: 'Show Less',
-  maxLines: 2,
-  moreLabel: 'Show More',
-};