@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/src/demos/examples/Banner/BannerTopBottom.tsx

@@ -0,0 +1,81 @@
+import { Fragment } from 'react';
+import {
+  Banner,
+  Card,
+  CardBody,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  PageSection,
+  Content
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
+export const BannerTopBottom: React.FunctionComponent = () => (
+  <Fragment>
+    <Flex
+      direction={{ default: 'column' }}
+      flexWrap={{ default: 'nowrap' }}
+      spaceItems={{ default: 'spaceItemsNone' }}
+      style={{ height: '100%' }}
+    >
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the top of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+      <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
+        <DashboardWrapper breadcrumb={null}>
+          <PageSection aria-labelledby="main-title">
+            <Content>
+              <h1 id="main-title">Main title</h1>
+              <p>
+                Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because <br />
+                of it's relative line height of 1.5.
+              </p>
+            </Content>
+          </PageSection>
+          <PageSection aria-label="Cards gallery">
+            <Gallery hasGutter>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
+                    <CardBody>This is a card</CardBody>
+                  </Card>
+                </GalleryItem>
+              ))}
+            </Gallery>
+          </PageSection>
+        </DashboardWrapper>
+      </FlexItem>
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the bottom of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+    </Flex>
+  </Fragment>
+);

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);

package/src/demos/examples/Page/PageDockedNav.tsx

@@ -0,0 +1,259 @@
+import { useRef, useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Content,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Gallery,
+  GalleryItem,
+  Masthead,
+  MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
+  MenuToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  SkipToContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Tooltip
+} from '@patternfly/react-core';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const PageDockedNav: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const navItem1Ref = useRef<HTMLAnchorElement>(null);
+  const navItem2Ref = useRef<HTMLAnchorElement>(null);
+  const navItem3Ref = useRef<HTMLAnchorElement>(null);
+  const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const settingsRef = useRef<HTMLButtonElement>(null);
+  const helpRef = useRef<HTMLButtonElement>(null);
+  const userMenuRef = useRef<HTMLButtonElement>(null);
+
+  const masthead = (
+    <Masthead id="icon-router-link" variant="docked">
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            <Brand src={pfIconLogo} alt="PatternFly" heights={{ default: '37px' }} />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <Divider />
+      <MastheadContent>
+        <Toolbar id="toolbar" isVertical>
+          <ToolbarContent>
+            <ToolbarItem>
+              <Nav onSelect={onNavSelect} variant="docked" aria-label="Icon global" ouiaId="IconNav">
+                <NavList>
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
+                    isActive={activeItem === 0}
+                    icon={<CubeIcon />}
+                    anchorRef={navItem1Ref}
+                    aria-label="Link 1"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link2"
+                    to="#nav-icon-link2"
+                    itemId={1}
+                    isActive={activeItem === 1}
+                    icon={<FolderIcon />}
+                    anchorRef={navItem2Ref}
+                    aria-label="Link 2"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link3"
+                    to="#nav-icon-link3"
+                    itemId={2}
+                    isActive={activeItem === 2}
+                    icon={<CloudIcon />}
+                    anchorRef={navItem3Ref}
+                    aria-label="Link 3"
+                  />
+                  <NavItem
+                    preventDefault
+                    id="nav-icon-link4"
+                    to="#nav-icon-link4"
+                    itemId={3}
+                    isActive={activeItem === 3}
+                    icon={<CodeIcon />}
+                    anchorRef={navItem4Ref}
+                    aria-label="Link 4"
+                  />
+                </NavList>
+              </Nav>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
+            </ToolbarItem>
+            <ToolbarGroup
+              variant="action-group-plain"
+              align={{ default: 'alignEnd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
+            >
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
+                    <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
+                  </Tooltip>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
+                    <Button
+                      ref={helpRef}
+                      aria-label="Help"
+                      variant={ButtonVariant.plain}
+                      icon={<QuestionCircleIcon />}
+                    />
+                  </Tooltip>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarGroup>
+            <ToolbarItem>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                shouldFocusToggleOnSelect
+                onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+                toggle={{
+                  toggleNode: (
+                    <Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
+                      <MenuToggle
+                        ref={userMenuRef}
+                        onClick={onDropdownToggle}
+                        isExpanded={isDropdownOpen}
+                        icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                        variant="plain"
+                        aria-label="User menu"
+                      />
+                    </Tooltip>
+                  ),
+                  toggleRef: userMenuRef
+                }}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      variant="docked"
+      masthead={masthead}
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isHorizontalSubnavWidthLimited
+      isBreadcrumbWidthLimited
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection aria-labelledby="main-title">
+          <Content>
+            <h1 id="main-title">Main title</h1>
+            <p>This is a full page demo.</p>
+          </Content>
+        </PageSection>
+      }
+    >
+      <PageSection aria-label="Card gallery">
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/demos/examples/Progress/ProgressBasic.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const ProgressBasic: React.FunctionComponent = () => {
+  const [currentValue, setCurrentValue] = useState(0);
+
+  const onProgressUpdate = (nextValue) => {
+    setCurrentValue(nextValue);
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
+          Decrease value
+        </Button>{' '}
+        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
+          Increase value
+        </Button>
+        <br />
+        <br />
+      </StackItem>
+      <StackItem>
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
+          {`Progress value is ${currentValue}%.`}
+        </div>
+        <Progress value={currentValue} title="Title" />
+      </StackItem>
+    </Stack>
+  );
+};

package/src/demos/examples/Progress/ProgressWithOnlyIncreasing.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const ProgressWithOnlyIncreasing: React.FunctionComponent = () => {
+  const [currentValue, setCurrentValue] = useState(0);
+
+  const onProgressUpdate = (nextValue) => {
+    if (nextValue > currentValue) {
+      setCurrentValue(nextValue);
+    }
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
+          Decrease value
+        </Button>{' '}
+        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
+          Increase value
+        </Button>
+        <br />
+        <br />
+      </StackItem>
+      <StackItem>
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
+          {`Progress value is ${currentValue}%.`}
+        </div>
+        <Progress value={currentValue} title="Title" />
+      </StackItem>
+    </Stack>
+  );
+};