diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md index f933f6ff7db..19af1a2ba55 100644 --- a/packages/react-core/src/demos/Banner.md +++ b/packages/react-core/src/demos/Banner.md @@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Basic sticky banner -```js isFullscreen -import { Fragment } from 'react'; -import { Banner, Card, CardBody, Flex, 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'; - -class BannerDemo extends React.Component { - render() { - const banner = ( - - -
Localhost
-
- This message is sticky to the top of the page. -
-
Drop some text on mobile, truncate if needed.
-
Ned Username
- - - ); - return ( - - - - -

Main title

-

- Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
- of it’s relative line height of 1.5. -

- - - - - {Array.from({ length: 30 }).map((_value, index) => ( - - - This is a card - - - ))} - - - - - ); - } -} +```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen ``` ### Top and bottom banner -```js isFullscreen -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'; +```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen -class BannerDemo extends React.Component { - render() { - return ( - - - - - -
Localhost
-
- This message is sticky to the top of the page. -
-
Drop some text on mobile, truncate if needed.
-
Ned Username
- - - - - - - -

Main title

-

- Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '} -
- of it’s relative line height of 1.5. -

- - - - - {Array.from({ length: 30 }).map((_value, index) => ( - - - This is a card - - - ))} - - - - - - - -
Localhost
-
- This message is sticky to the bottom of the page. -
-
Drop some text on mobile, truncate if needed.
-
Ned Username
- - - - - - ); - } -} ``` diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md index 11593da2ac2..c010fd5b5df 100644 --- a/packages/react-core/src/demos/DateTimePicker.md +++ b/packages/react-core/src/demos/DateTimePicker.md @@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen ### Date and time picker -```ts file="./examples/DateTimePicker/DateTimePicker.tsx" +```ts file="examples/DateTimePicker/DateTimePicker.tsx" ``` ### Date and time range picker -```js -import { useState } from 'react'; -import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core'; - -DateTimeRangePicker = () => { - const [from, setFrom] = useState(); - const [to, setTo] = useState(); - - const toValidator = (date) => { - return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from) - ? '' - : 'The "to" date must be after the "from" date'; - }; - - const onFromDateChange = (_event, inputDate, newFromDate) => { - 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, time, hour, minute) => { - if (isValidDate(from)) { - const updatedFromDate = new Date(from); - updatedFromDate.setHours(hour); - updatedFromDate.setMinutes(minute); - setFrom(updatedFromDate); - } - }; - - const onToDateChange = (_event, inputDate, newToDate) => { - 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, time, hour, minute) => { - if (isValidDate(to)) { - const updatedToDate = new Date(to); - updatedToDate.setHours(hour); - updatedToDate.setMinutes(minute); - setTo(updatedToDate); - } - }; +```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx" - return ( - - - - - - - - - - - - to - - - - - - - - - - - - ); -} ``` diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index 9a84154de56..2a233a99bba 100644 --- a/packages/react-core/src/demos/JumpLinks.md +++ b/packages/react-core/src/demos/JumpLinks.md @@ -21,134 +21,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them. -```js isFullscreen -import { useEffect, useState } from 'react'; -import { - PageSection, - JumpLinks, - JumpLinksItem, - JumpLinksList, - PageGroup, - 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'; - -ScrollspyH2 = () => { - const headings = [1, 2, 3, 4, 5]; - - const [isVertical, setIsVertical] = useState(true); - const [offsetHeight, setOffsetHeight] = useState(10); - const offsetForPadding = 10; - let masthead; - - // Update offset based on the masthead and jump links nav heights. - useEffect(() => { - 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); - } - - - }, [isVertical]); - - 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 ( - - - - Main title - - setIsVertical(check)} - /> - - - - - - - {headings.map(i => ( - - {`Heading ${i}`} - - - ))} - - - - - - - {headings.map(i => ( -
-

- {`Heading ${i}`} -

-

- 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. -

-
-

- 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. -

-
- ))} - - - - - - - ); -}; +```ts file="examples/JumpLinks/JumpLinksScrollspy.tsx" isFullscreen ``` ### With drawer @@ -157,5 +30,5 @@ This demo shows how jump links can be used in combination with a drawer. This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component. -```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js" +```ts file="examples/JumpLinks/JumpLinksWithDrawer.tsx" isFullscreen ``` diff --git a/packages/react-core/src/demos/ProgressDemo.md b/packages/react-core/src/demos/ProgressDemo.md index d7c40237f61..3381d96bd77 100644 --- a/packages/react-core/src/demos/ProgressDemo.md +++ b/packages/react-core/src/demos/ProgressDemo.md @@ -9,77 +9,14 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib ### Basic -```js -import { useState } from 'react'; -import { Progress, Button, Stack, StackItem } from '@patternfly/react-core'; -import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; - -ProgressStepperDemo = () => { - const [currentValue, setCurrentValue] = useState(0); - - const onProgressUpdate = (nextValue) => { - setCurrentValue(nextValue); - }; +```ts file="examples/Progress/ProgressBasic.tsx" - return ( - - - {' '} - -
-
- - -
- {`Progress value is ${currentValue}%.`} -
- - - - ); -}; ``` ### With only increasing progress Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check. -```js -import { useState } from 'react'; -import { Progress, Button, Stack, StackItem } from '@patternfly/react-core'; - -ProgressStepperDemo = () => { - const [currentValue, setCurrentValue] = useState(0); - - const onProgressUpdate = (nextValue) => { - if (nextValue > currentValue) { - setCurrentValue(nextValue); - } - }; +```ts file="examples/Progress/ProgressWithOnlyIncreasing.tsx" - return ( - - - {' '} - -
-
- - -
- {`Progress value is ${currentValue}%.`} -
- - - - ); -}; ``` diff --git a/packages/react-core/src/demos/ProgressStepperDemo.md b/packages/react-core/src/demos/ProgressStepperDemo.md index d14fe7b2327..75d82821a46 100644 --- a/packages/react-core/src/demos/ProgressStepperDemo.md +++ b/packages/react-core/src/demos/ProgressStepperDemo.md @@ -10,77 +10,6 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib ### Basic -```js -import { useState } from 'react'; -import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core'; -import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; - -ProgressStepperDemo = () => { - const [currentStep, setCurrentStep] = useState(0); - - const steps = [ - { title: 'First step', id: 'step1' }, - { title: 'Second step', id: 'step2' }, - { title: 'Third step', id: 'step3' }, - { title: 'Fourth step', id: 'step4' }, - { title: 'Fifth step', id: 'step5' } - ]; - - const onStepForward = event => { - const next = currentStep + 1; - setCurrentStep(next <= 5 ? next : 4); - }; - - const onStepBack = event => { - const next = currentStep - 1; - setCurrentStep(next > 0 ? next : 0); - }; - - return ( - - - {' '} - -
-
- - -
- {steps[currentStep] && `On ${steps[currentStep].title}.`} - {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`} -
- - {steps.map((step, index) => { - let variant = 'pending'; - let ariaLabel = 'pending step'; - if (index < currentStep) { - variant = 'success'; - ariaLabel = 'completed step, step with success'; - } else if (index === currentStep) { - variant = 'info'; - ariaLabel = 'current step'; - } +```ts file="examples/ProgressStepper/ProgressStepperBasic.tsx" - return ( - - {step.title} - - ); - })} - - - - ); -}; ``` diff --git a/packages/react-core/src/demos/examples/Banner/BannerBasicSticky.tsx b/packages/react-core/src/demos/examples/Banner/BannerBasicSticky.tsx new file mode 100644 index 00000000000..3457e168da2 --- /dev/null +++ b/packages/react-core/src/demos/examples/Banner/BannerBasicSticky.tsx @@ -0,0 +1,55 @@ +import { Fragment } from 'react'; +import { Banner, Card, CardBody, Flex, 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 BannerBasicSticky: React.FunctionComponent = () => { + const banner = ( + + +
Localhost
+ +
+ This message is sticky to the top of the page. +
+ +
Drop some text on mobile, truncate if needed.
+ +
Ned Username
+ + + ); + + return ( + + + + +

Main title

+

+ Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem (24px) because
+ of its relative line height of 1.5. +

+ + + + + + {Array.from({ length: 30 }).map((_value, index) => ( + + + This is a card + + + ))} + + + + + ); +}; diff --git a/packages/react-core/src/demos/examples/Banner/BannerTopBottom.tsx b/packages/react-core/src/demos/examples/Banner/BannerTopBottom.tsx new file mode 100644 index 00000000000..3b13364fa99 --- /dev/null +++ b/packages/react-core/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 = () => ( + + + + + +
Localhost
+
+ This message is sticky to the top of the page. +
+
Drop some text on mobile, truncate if needed.
+
Ned Username
+ + + + + + + +

Main title

+

+ Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because
+ of it's relative line height of 1.5. +

+ + + + + {Array.from({ length: 30 }).map((_value, index) => ( + + + This is a card + + + ))} + + + + + + + +
Localhost
+
+ This message is sticky to the bottom of the page. +
+
Drop some text on mobile, truncate if needed.
+
Ned Username
+ + + + + +); diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimeRangePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimeRangePicker.tsx new file mode 100644 index 00000000000..c56a9ea020a --- /dev/null +++ b/packages/react-core/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(undefined); + const [to, setTo] = useState(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, 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, _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, 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, _time: string, hour: number, minute: number) => { + if (isValidDate(to)) { + const updatedToDate = new Date(to); + updatedToDate.setHours(hour); + updatedToDate.setMinutes(minute); + setTo(updatedToDate); + } + }; + + return ( + + + + + + + + + + + + to + + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx new file mode 100644 index 00000000000..bd636cbd743 --- /dev/null +++ b/packages/react-core/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 ( + + + + Main title + + setIsVertical(check)} + /> + + + + + + + {headings.map((i) => ( + + {`Heading ${i}`} + + + ))} + + + + + + + {headings.map((i) => ( +
+

+ {`Heading ${i}`} +

+

+ 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. +

+
+

+ 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. +

+
+ ))} + + + + + + + ); +}; diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.tsx similarity index 98% rename from packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js rename to packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.tsx index 0f79c33dcec..35f5c3cbf3b 100644 --- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +++ b/packages/react-core/src/demos/examples/JumpLinks/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); diff --git a/packages/react-core/src/demos/examples/Progress/ProgressBasic.tsx b/packages/react-core/src/demos/examples/Progress/ProgressBasic.tsx new file mode 100644 index 00000000000..17c1b865ddf --- /dev/null +++ b/packages/react-core/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 ( + + + {' '} + +
+
+ + +
+ {`Progress value is ${currentValue}%.`} +
+ + + + ); +}; diff --git a/packages/react-core/src/demos/examples/Progress/ProgressWithOnlyIncreasing.tsx b/packages/react-core/src/demos/examples/Progress/ProgressWithOnlyIncreasing.tsx new file mode 100644 index 00000000000..8388a629a46 --- /dev/null +++ b/packages/react-core/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 ( + + + {' '} + +
+
+ + +
+ {`Progress value is ${currentValue}%.`} +
+ + + + ); +}; diff --git a/packages/react-core/src/demos/examples/ProgressStepper/ProgressStepperBasic.tsx b/packages/react-core/src/demos/examples/ProgressStepper/ProgressStepperBasic.tsx new file mode 100644 index 00000000000..0d5c31d72ec --- /dev/null +++ b/packages/react-core/src/demos/examples/ProgressStepper/ProgressStepperBasic.tsx @@ -0,0 +1,72 @@ +import { useState } from 'react'; +import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core'; +import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; + +export const ProgressStepperBasic: React.FunctionComponent = () => { + const [currentStep, setCurrentStep] = useState(0); + + const steps = [ + { title: 'First step', id: 'step1' }, + { title: 'Second step', id: 'step2' }, + { title: 'Third step', id: 'step3' }, + { title: 'Fourth step', id: 'step4' }, + { title: 'Fifth step', id: 'step5' } + ]; + + const onStepForward = (_event) => { + const next = currentStep + 1; + setCurrentStep(next <= 5 ? next : 4); + }; + + const onStepBack = (_event) => { + const next = currentStep - 1; + setCurrentStep(next > 0 ? next : 0); + }; + + return ( + + + {' '} + +
+
+ + +
+ {steps[currentStep] && `On ${steps[currentStep].title}.`} + {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`} +
+ + {steps.map((step, index) => { + let variant = 'pending'; + let ariaLabel = 'pending step'; + if (index < currentStep) { + variant = 'success'; + ariaLabel = 'completed step, step with success'; + } else if (index === currentStep) { + variant = 'info'; + ariaLabel = 'current step'; + } + + return ( + + {step.title} + + ); + })} + + + + ); +};