@patternfly/react-core 4.232.6 → 4.232.9

package/src/components/Progress/examples/Progress.md

@@ -7,169 +7,70 @@ propComponents: ['Progress']
 
 ## Examples
 ### Basic
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" />
+```ts file="./ProgressBasic.tsx"
 ```
 
 ### Small
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" size={ProgressSize.sm} />
+```ts file="./ProgressSmall.tsx"
 ```
 
 ### Large
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" size={ProgressSize.lg} />
+```ts file="./ProgressLarge.tsx"
 ```
 
 ### Outside
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.outside} />
+```ts file="./ProgressOutside.tsx"
 ```
 
 ### Inside
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.inside} />
+```ts file="./ProgressInside.tsx"
 ```
 
 ### Success
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={100} title="Title" variant={ProgressVariant.success} />
+```ts file="./ProgressSuccess.tsx"
 ```
 
 ### Failure
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" variant={ProgressVariant.danger} />
+```ts file="./ProgressFailure.tsx"
 ```
 
 ### Warning
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={90} title="Title" variant={ProgressVariant.warning} />
+```ts file="./ProgressWarning.tsx"
 ```
 
 ### Inside success
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={100}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.inside}
-  variant={ProgressVariant.success}
-/>
+```ts file="./ProgressInsideSuccess.tsx"
 ```
 
 ### Outside failure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={33}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.outside}
-  variant={ProgressVariant.danger}
-/>
+```ts file="./ProgressOutsideFailure.tsx"
 ```
 
 ### Single line
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-label="Title"/>
+```ts file="./ProgressSingleLine.tsx"
 ```
 
 ### Without measure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} />
+```ts file="./ProgressWithoutMeasure.tsx"
 ```
 
 ### Failure without measure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={33}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.none}
-  variant={ProgressVariant.danger}
-/>
+```ts file="./ProgressFailureWithoutMeasure.tsx"
 ```
 
 
 ### Finite step
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
-
-<Progress value={2} min={0} max={5} title="Title" measureLocation={ProgressMeasureLocation.top} label="2 of 5" valueText="2 of 5"/>
+```ts file="./ProgressFiniteStep.tsx"
 ```
 
-### Progress (step instruction)
-```ts
-import React from 'react';
-import { Progress} from '@patternfly/react-core';
-
-<Progress value={2} title="Title" min={0} max={5} label="Step 2: Copying files" valueText="Step 2: Copying files" />
+### Progress with step instructions
+```ts file="./ProgressStepInstruction.tsx"
 ```
 
 ### Truncate title
-```ts
-import React from 'react';
-import { Progress } from '@patternfly/react-core';
-
-<Progress value={33} title="Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar" isTitleTruncated />
+```ts file="./ProgressTruncateTitle.tsx"
 ```
 
 ### Title outside of progress bar
-```ts
-import React from 'react';
-import {
-    DescriptionList, 
-    DescriptionListGroup, 
-    DescriptionListTerm, 
-    DescriptionListDescription,
-    Progress, 
-    ProgressMeasureLocation,
-} from '@patternfly/react-core';
-
-<DescriptionList>
-  <DescriptionListGroup>
-    <DescriptionListTerm id="progress-label">
-        Title outside of progress bar
-    </DescriptionListTerm>
-    <DescriptionListDescription>
-      <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-labelledby="progress-label"/>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-</DescriptionList>
+```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
 ```

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressBasic: React.FunctionComponent = () => <Progress value={33} title="Title" />;

package/src/components/Progress/examples/ProgressFailure.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressFailure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" variant={ProgressVariant.danger} />
+);

package/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressFailureWithoutMeasure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} variant={ProgressVariant.danger} />
+);

package/src/components/Progress/examples/ProgressFiniteStep.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressFiniteStep: React.FunctionComponent = () => (
+  <Progress
+    value={2}
+    min={0}
+    max={5}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.top}
+    label="2 of 5"
+    valueText="2 of 5"
+  />
+);

package/src/components/Progress/examples/ProgressInside.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressInside: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.inside} />
+);

package/src/components/Progress/examples/ProgressInsideSuccess.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressInsideSuccess: React.FunctionComponent = () => (
+  <Progress
+    value={100}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.inside}
+    variant={ProgressVariant.success}
+  />
+);

package/src/components/Progress/examples/ProgressLarge.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressSize } from '@patternfly/react-core';
+
+export const ProgressLarge: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" size={ProgressSize.lg} />
+);

package/src/components/Progress/examples/ProgressOutside.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressOutside: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.outside} />
+);

package/src/components/Progress/examples/ProgressOutsideFailure.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressOutsideFailure: React.FunctionComponent = () => (
+  <Progress
+    value={33}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.outside}
+    variant={ProgressVariant.danger}
+  />
+);

package/src/components/Progress/examples/ProgressSingleLine.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressSingleLine: React.FunctionComponent = () => (
+  <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-label="Title" />
+);

package/src/components/Progress/examples/ProgressSmall.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressSize } from '@patternfly/react-core';
+
+export const ProgressSmall: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" size={ProgressSize.sm} />
+);

package/src/components/Progress/examples/ProgressStepInstruction.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressStepInstruction: React.FunctionComponent = () => (
+  <Progress value={2} title="Title" min={0} max={5} label="Step 2: Copying files" valueText="Step 2: Copying files" />
+);

package/src/components/Progress/examples/ProgressSuccess.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressSuccess: React.FunctionComponent = () => (
+  <Progress value={100} title="Title" variant={ProgressVariant.success} />
+);

package/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Progress,
+  ProgressMeasureLocation
+} from '@patternfly/react-core';
+
+export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
+  <DescriptionList>
+    <DescriptionListGroup>
+      <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Progress
+          value={33}
+          measureLocation={ProgressMeasureLocation.outside}
+          aria-labelledby="title-outside-progress-example-label"
+        />
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);

package/src/components/Progress/examples/ProgressTruncateTitle.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressTruncateTitle: React.FunctionComponent = () => (
+  <Progress
+    value={33}
+    title="Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar"
+    isTitleTruncated
+  />
+);

package/src/components/Progress/examples/ProgressWarning.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressWarning: React.FunctionComponent = () => (
+  <Progress value={90} title="Title" variant={ProgressVariant.warning} />
+);

package/src/components/Progress/examples/ProgressWithoutMeasure.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressWithoutMeasure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} />
+);

package/src/demos/JumpLinks.md

@@ -10,6 +10,7 @@ import DashboardWrapper from './examples/DashboardWrapper';
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
 
 1. Find the correct `scrollableSelector` for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
+   - If you add `hasOverflowScroll` to a Page sub-component you should also add a relevant aria-label to that component as well.
 2. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
 
 ### Scrollspy with subsections

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -34,7 +34,12 @@ export const Name = () => {
             <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
           </TextContent>
         </PageSection>
-        <PageSection hasOverflowScroll name="scrolling-section" tabIndex={0}>
+        <PageSection
+          hasOverflowScroll
+          name="scrolling-section"
+          tabIndex={0}
+          aria-label="Scrollable container of demonstration cards with a back to top element"
+        >
           <Gallery hasGutter>
             {Array.apply(0, Array(60)).map((_x: any, i: number) => (
               <GalleryItem key={i}>