Skip to content

Commit

Permalink
feat(CollapsableText): add alignToggleButton prop to CollapsableText
Browse files Browse the repository at this point in the history
  • Loading branch information
mdalpozzo committed May 13, 2024
1 parent 3cf8acd commit f6e8938
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 4 deletions.
31 changes: 30 additions & 1 deletion src/components/CollapsableText/CollapsableText.stories.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 />
Expand All @@ -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>
);
32 changes: 29 additions & 3 deletions src/components/CollapsableText/CollapsableText.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,6 +16,8 @@ function getEllipsisStyle(maxLines: number) {
} as const;
}

type AlignToggleButton = 'start' | 'center' | 'end' | 'auto';

export interface CollapsableTextProps {
children?: React.ReactNode;
collapsed?: boolean;
Expand All @@ -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({
Expand All @@ -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);
Expand Down Expand Up @@ -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;

0 comments on commit f6e8938

Please sign in to comment.