feat(CollapsableText): add alignToggleButton prop to CollapsableText

appfolio · May 10, 2024 · 5f99022 · 5f99022
1 parent 3cf8acd
commit 5f99022
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git 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
@@ -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',
-};