@patternfly/chatbot 2.2.0-prerelease.44 → 2.2.0-prerelease.46

package/src/SourcesCard/SourcesCard.tsx

@@ -12,6 +12,8 @@ import {
   CardFooter,
   CardProps,
   CardTitle,
+  ExpandableSection,
+  ExpandableSectionVariant,
   Icon,
   pluralize,
   Truncate
@@ -23,12 +25,18 @@ export interface SourcesCardProps extends CardProps {
   className?: string;
   /** Flag indicating if the pagination is disabled. */
   isDisabled?: boolean;
-  /** Label for the English word "of". */
+  /** @deprecated ofWord has been deprecated. Label for the English word "of." */
   ofWord?: string;
   /** Accessible label for the pagination component. */
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
-  sources: { title?: string; link: string; body?: React.ReactNode | string; isExternal?: boolean }[];
+  sources: {
+    title?: string;
+    link: string;
+    body?: React.ReactNode | string;
+    isExternal?: boolean;
+    hasShowMore?: boolean;
+  }[];
   /** Label for the English word "source" */
   sourceWord?: string;
   /** Plural for sourceWord */
@@ -43,12 +51,15 @@ export interface SourcesCardProps extends CardProps {
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Label for English words "show more" */
+  showMoreWords?: string;
+  /** Label for English words "show less" */
+  showLessWords?: string;
 }
 
 const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
-  ofWord = 'of',
   paginationAriaLabel = 'Pagination',
   sources,
   sourceWord = 'source',
@@ -58,9 +69,16 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onNextClick,
   onPreviousClick,
   onSetPage,
+  showMoreWords = 'show more',
+  showLessWords = 'show less',
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
 
   const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
@@ -93,10 +111,23 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
           </Button>
         </CardTitle>
         {sources[page - 1].body && (
-          <CardBody
-            className={`pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}`}
-          >
-            {sources[page - 1].body}
+          <CardBody className={`pf-chatbot__sources-card-body`}>
+            {sources[page - 1].hasShowMore ? (
+              // prevents extra VO announcements of button text - parent Message has aria-live
+              <div aria-live="off">
+                <ExpandableSection
+                  variant={ExpandableSectionVariant.truncate}
+                  toggleText={isExpanded ? showLessWords : showMoreWords}
+                  onToggle={onToggle}
+                  isExpanded={isExpanded}
+                  truncateMaxLines={2}
+                >
+                  {sources[page - 1].body}
+                </ExpandableSection>
+              </div>
+            ) : (
+              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
+            )}
           </CardBody>
         )}
         {sources.length > 1 && (
@@ -129,6 +160,9 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                     </svg>
                   </Icon>
                 </Button>
+                <span aria-hidden="true">
+                  {page}/{sources.length}
+                </span>
                 <Button
                   variant={ButtonVariant.plain}
                   isDisabled={isDisabled || page === sources.length}
@@ -156,10 +190,6 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                   </Icon>
                 </Button>
               </nav>
-
-              <span aria-hidden="true">
-                {page} {ofWord} {sources.length}
-              </span>
             </div>
           </CardFooter>
         )}