@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/demos/examples/Card/CardAggregateStatus.tsx

@@ -12,9 +12,9 @@ import {
   Stack,
   Icon
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-warning-fill-icon';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
@@ -44,7 +44,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           )
         }
@@ -57,7 +57,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           )
         }
@@ -70,7 +70,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           )
         }
@@ -85,7 +85,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 2
@@ -93,7 +93,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 1
@@ -107,7 +107,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 5
@@ -115,7 +115,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 12
@@ -129,7 +129,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 3
@@ -137,7 +137,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 7
@@ -153,7 +153,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '2 errors',
@@ -162,7 +162,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '1 warning',
@@ -177,7 +177,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           status: '2 successes',
@@ -186,7 +186,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '3 warnings',
@@ -201,7 +201,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '7 warnings',
@@ -210,7 +210,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '1 error',

package/src/demos/examples/Card/CardEventsView.tsx

@@ -22,8 +22,8 @@ import {
   Timestamp,
   Title
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
@@ -77,7 +77,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="danger">
-                        <ExclamationCircleIcon />
+                        <RhUiErrorFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -98,7 +98,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -134,7 +134,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -19,7 +19,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -88,16 +88,16 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           <Level hasGutter>
             <CardTitle id="titleId">Getting Started</CardTitle>
             <LabelGroup isCompact>
-              <Label isCompact icon={<InfoCircleIcon />} color="blue">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="blue">
                 Set up your cluster
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="purple">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="purple">
                 Guided tours
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="green">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="green">
                 Quick starts
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="orange">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="orange">
                 Learning resources
               </Label>
             </LabelGroup>
@@ -118,7 +118,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="blue">
+                <Label icon={<RhUiInformationFillIcon />} color="blue">
                   Set up your cluster
                 </Label>
                 <p>Continue setting up your cluster to access all you cain in the Console</p>
@@ -149,7 +149,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="purple">
+                <Label icon={<RhUiInformationFillIcon />} color="purple">
                   Guided tours
                 </Label>
                 <p>Tour some of the key features around the console</p>
@@ -177,7 +177,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="green">
+                <Label icon={<RhUiInformationFillIcon />} color="green">
                   Quick starts
                 </Label>
                 <p>Get started with features using our step-by-step documentation</p>
@@ -208,7 +208,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="orange">
+                <Label icon={<RhUiInformationFillIcon />} color="orange">
                   Learning resources
                 </Label>
                 <p>Learn about new features within the Console and get started with demo apps</p>

package/src/demos/examples/Card/CardStatus.tsx

@@ -22,10 +22,8 @@ import {
   Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
@@ -139,7 +137,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -151,7 +149,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -167,7 +165,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -184,7 +182,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -206,21 +204,11 @@ export const CardStatus: React.FunctionComponent = () => {
       <FlexItem spacer={{ default: 'spacerMd' }}>
         <span>Notifications</span>
       </FlexItem>
-      <Label color="red" icon={<ExclamationCircleIcon />}>
-        1
-      </Label>
-      <Label color="orange" icon={<ExclamationTriangleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<CheckCircleIcon />}>
-        3
-      </Label>
-      <Label color="blue" icon={<ExclamationCircleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<BellIcon />}>
-        3
-      </Label>
+      <Label status="danger">1</Label>
+      <Label status="warning">3</Label>
+      <Label status="success">3</Label>
+      <Label status="danger">3</Label>
+      <Label status="info">3</Label>
     </Flex>
   );
 

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -16,8 +16,8 @@ import {
   TabTitleText,
   Title
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 const descriptionListData = [
   {
@@ -26,7 +26,7 @@ const descriptionListData = [
     detail: '121 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -36,7 +36,7 @@ const descriptionListData = [
     detail: '123 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   },
@@ -46,7 +46,7 @@ const descriptionListData = [
     detail: '122 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -56,7 +56,7 @@ const descriptionListData = [
     detail: '124 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   }

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -17,7 +17,7 @@ import {
   MenuToggleElement,
   Icon
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
@@ -80,7 +80,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                 </FlexItem>
                 <Flex>
                   <Icon status="danger">
-                    <ExclamationCircleIcon />
+                    <RhUiErrorFillIcon />
                   </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>

package/src/demos/examples/DateTimePicker/DateTimeRangePicker.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  Flex,
+  FlexItem,
+  InputGroup,
+  InputGroupItem,
+  DatePicker,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat
+} from '@patternfly/react-core';
+
+export const DateTimeRangePicker: React.FunctionComponent = () => {
+  const [from, setFrom] = useState<Date | undefined>(undefined);
+  const [to, setTo] = useState<Date | undefined>(undefined);
+
+  const toValidator = (date: Date) =>
+    isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
+      ? ''
+      : 'The "to" date must be after the "from" date';
+
+  const onFromDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newFromDate: Date) => {
+    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      newFromDate.setHours(from.getHours());
+      newFromDate.setMinutes(from.getMinutes());
+    }
+    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      setFrom(new Date(newFromDate));
+    }
+  };
+
+  const onFromTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {
+    if (isValidDate(from)) {
+      const updatedFromDate = new Date(from);
+      updatedFromDate.setHours(hour);
+      updatedFromDate.setMinutes(minute);
+      setFrom(updatedFromDate);
+    }
+  };
+
+  const onToDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newToDate: Date) => {
+    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      newToDate.setHours(to.getHours());
+      newToDate.setMinutes(to.getMinutes());
+    }
+    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      setTo(newToDate);
+    }
+  };
+
+  const onToTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {
+    if (isValidDate(to)) {
+      const updatedToDate = new Date(to);
+      updatedToDate.setHours(hour);
+      updatedToDate.setMinutes(minute);
+      setTo(updatedToDate);
+    }
+  };
+
+  return (
+    <Flex direction={{ default: 'column', lg: 'row' }}>
+      <FlexItem>
+        <InputGroup>
+          <InputGroupItem>
+            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          </InputGroupItem>
+        </InputGroup>
+      </FlexItem>
+      <FlexItem>to</FlexItem>
+      <FlexItem>
+        <InputGroup>
+          <InputGroupItem>
+            <DatePicker
+              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+              onChange={onToDateChange}
+              isDisabled={!isValidDate(from)}
+              rangeStart={from}
+              validators={[toValidator]}
+              aria-label="End date"
+              placeholder="YYYY-MM-DD"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          </InputGroupItem>
+        </InputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};

package/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import {
+  PageSection,
+  JumpLinks,
+  JumpLinksItem,
+  JumpLinksList,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+  Switch,
+  Title,
+  Content,
+  getResizeObserver
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+
+export const JumpLinksScrollspy: React.FunctionComponent = () => {
+  const headings = [1, 2, 3, 4, 5];
+
+  const [isVertical, setIsVertical] = useState(true);
+  const [offsetHeight, setOffsetHeight] = useState(10);
+  const offsetForPadding = 10;
+
+  // Update offset based on the masthead and jump links nav heights.
+  useEffect(() => {
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
+
+    if (isVertical) {
+      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+    } else {
+      // Append jump links nav height to the masthead height when value exists.
+      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+    }
+
+    const observer = getResizeObserver(
+      document.getElementsByClassName(mastheadStyles.masthead)[0],
+      () => {
+        if (isVertical) {
+          setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+        } else {
+          // Append jump links nav height to the masthead height when value exists.
+          const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+          jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+        }
+      },
+      true
+    );
+
+    return () => observer();
+  }, [isVertical]);
+
+  return (
+    <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
+      <PageSection aria-labelledby="main-title">
+        <Title headingLevel="h1" size="2xl" id="main-title">
+          Main title
+        </Title>
+        <Switch
+          id="is-vertical"
+          label="Vertical jump links"
+          isChecked={isVertical}
+          onChange={(_event, check) => setIsVertical(check)}
+        />
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Sidebar hasGutter orientation={!isVertical && 'stack'}>
+          <SidebarPanel variant="sticky">
+            <PageSection aria-label="Jump links navigation">
+              <JumpLinks
+                isVertical={isVertical}
+                isCentered={!isVertical}
+                label="Jump to section"
+                scrollableSelector=".pf-v6-c-page__main-container"
+                offset={offsetHeight}
+                expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
+                isExpanded
+              >
+                {headings.map((i) => (
+                  <JumpLinksItem key={i} href={`#heading-${i}`}>
+                    {`Heading ${i}`}
+                    <JumpLinksList></JumpLinksList>
+                  </JumpLinksItem>
+                ))}
+              </JumpLinks>
+            </PageSection>
+          </SidebarPanel>
+          <SidebarContent hasNoBackground>
+            <PageSection aria-label="Main content">
+              <Content>
+                {headings.map((i) => (
+                  <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
+                    <h2 id={`heading-${i}`} tabIndex={-1}>
+                      {`Heading ${i}`}
+                    </h2>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+                      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+                      in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <br />
+                    <p>
+                      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+                      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+                      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+                      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+                      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+                      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                    </p>
+                  </div>
+                ))}
+              </Content>
+            </PageSection>
+          </SidebarContent>
+        </Sidebar>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/JumpLinks/{JumpLinksWithDrawer.js → JumpLinksWithDrawer.tsx}

@@ -40,7 +40,7 @@ const JumpLinksWrapper = ({ headings }) => {
   );
 };
 
-export const JumpLinksWithDrawer = () => {
+export const JumpLinksWithDrawer: React.FunctionComponent = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
   const [isExpanded, setIsExpanded] = useState(false);