feat(CollapsableText): add alignToggleButton prop to CollapsableText

appfolio · May 13, 2024 · f6e8938 · f6e8938
1 parent 3cf8acd
commit f6e8938
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { boolean, number, text } from '@storybook/addon-knobs';
+import { boolean, number, text, radios } from '@storybook/addon-knobs';
 import React from 'react';
 import Icon from '../Icon/Icon';
 import CollapsableText from './CollapsableText';
@@ -25,6 +25,11 @@ export const LiveExample = () => (
     maxLines={number('maxLines', CollapsableText.defaultProps.maxLines)}
     moreLabel={text('showMore', CollapsableText.defaultProps.moreLabel)}
     lessLabel={text('lessLabel', CollapsableText.defaultProps.lessLabel)}
+    alignToggleButton={radios(
+      'alignToggleButton',
+      ['start', 'center', 'end', 'auto'],
+      CollapsableText.defaultProps.alignToggleButton
+    )}
   >
     Some text <strong>with bold</strong> and <a href="#">links and other things</a>
     <br />
@@ -48,3 +53,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';
@@ -15,6 +16,8 @@ function getEllipsisStyle(maxLines: number) {
   } as const;
 }
 
+type AlignToggleButton = 'start' | 'center' | 'end' | 'auto';
+
 export interface CollapsableTextProps {
   children?: React.ReactNode;
   collapsed?: boolean;
@@ -23,6 +26,7 @@ export interface CollapsableTextProps {
   /**  @deprecated maxLength has no effect. Use maxLines instead */
   maxLength?: number;
   maxLines?: number;
+  alignToggleButton?: AlignToggleButton;
 }
 
 export default function CollapsableText({
@@ -31,6 +35,7 @@ export default function CollapsableText({
   lessLabel = CollapsableText.defaultProps.lessLabel,
   moreLabel = CollapsableText.defaultProps.moreLabel,
   maxLines = CollapsableText.defaultProps.maxLines,
+  alignToggleButton = CollapsableText.defaultProps.alignToggleButton,
 }: CollapsableTextProps) {
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
   const [hideToggle, setHideToggle] = useState(collapsed);
@@ -59,17 +64,38 @@ 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 = {
+export interface CollapsableTextDefaultProps {
+  collapsed: boolean;
+  lessLabel: string;
+  moreLabel: string;
+  maxLines: number;
+  alignToggleButton: AlignToggleButton;
+}
+
+const defaultProps: CollapsableTextDefaultProps = {
   collapsed: true,
   lessLabel: 'Show Less',
-  maxLines: 2,
   moreLabel: 'Show More',
+  maxLines: 2,
+  alignToggleButton: 'start',
 };
+
+CollapsableText.defaultProps = defaultProps;