From d1d643efc94f58f5602d82d2e796860ad75283a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Tue, 16 Aug 2022 16:17:33 +0200
Subject: [PATCH 1/2] chore(Progress) convert examples to TypeScript

---
 .../components/Progress/examples/Progress.md  | 133 +++---------------
 .../Progress/examples/ProgressBasic.tsx       |   4 +
 .../Progress/examples/ProgressFailure.tsx     |   6 +
 .../ProgressFailureWithoutMeasure.tsx         |   6 +
 .../Progress/examples/ProgressFiniteStep.tsx  |  14 ++
 .../Progress/examples/ProgressInside.tsx      |   6 +
 .../examples/ProgressInsideSuccess.tsx        |  11 ++
 .../Progress/examples/ProgressLarge.tsx       |   6 +
 .../Progress/examples/ProgressOutside.tsx     |   6 +
 .../examples/ProgressOutsideFailure.tsx       |  11 ++
 .../Progress/examples/ProgressSingleLine.tsx  |   6 +
 .../Progress/examples/ProgressSmall.tsx       |   6 +
 .../examples/ProgressStepInstruction.tsx      |   6 +
 .../Progress/examples/ProgressSuccess.tsx     |   6 +
 .../ProgressTitleOutsideOfProgressBar.tsx     |  20 +++
 .../examples/ProgressTruncateTitle.tsx        |  10 ++
 .../Progress/examples/ProgressWarning.tsx     |   6 +
 .../examples/ProgressWithoutMeasure.tsx       |   6 +
 18 files changed, 153 insertions(+), 116 deletions(-)
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressBasic.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressFailure.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressInside.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressLarge.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressOutside.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressSmall.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressWarning.tsx
 create mode 100644 packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx

diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md
index d8823835d22..6cba1bb467e 100644
--- a/packages/react-core/src/components/Progress/examples/Progress.md
+++ b/packages/react-core/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" />
+```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"
 ```
diff --git a/packages/react-core/src/components/Progress/examples/ProgressBasic.tsx b/packages/react-core/src/components/Progress/examples/ProgressBasic.tsx
new file mode 100644
index 00000000000..8354e262026
--- /dev/null
+++ b/packages/react-core/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" />;
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressFailure.tsx
new file mode 100644
index 00000000000..d41f6768909
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx b/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx
new file mode 100644
index 00000000000..164a997e98d
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx b/packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx
new file mode 100644
index 00000000000..a00e6b2c1df
--- /dev/null
+++ b/packages/react-core/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"
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressInside.tsx b/packages/react-core/src/components/Progress/examples/ProgressInside.tsx
new file mode 100644
index 00000000000..63702846161
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx b/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx
new file mode 100644
index 00000000000..9b731eac103
--- /dev/null
+++ b/packages/react-core/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}
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressLarge.tsx b/packages/react-core/src/components/Progress/examples/ProgressLarge.tsx
new file mode 100644
index 00000000000..6ef927cf25a
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressOutside.tsx b/packages/react-core/src/components/Progress/examples/ProgressOutside.tsx
new file mode 100644
index 00000000000..c2069fe2bed
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx
new file mode 100644
index 00000000000..b6e879d3e2e
--- /dev/null
+++ b/packages/react-core/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}
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx b/packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx
new file mode 100644
index 00000000000..b529a39c012
--- /dev/null
+++ b/packages/react-core/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" />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSmall.tsx b/packages/react-core/src/components/Progress/examples/ProgressSmall.tsx
new file mode 100644
index 00000000000..c732475d330
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx b/packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx
new file mode 100644
index 00000000000..3376f7bdf68
--- /dev/null
+++ b/packages/react-core/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" />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx b/packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx
new file mode 100644
index 00000000000..ef9ffc4bc26
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
new file mode 100644
index 00000000000..e35e60fc00b
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Progress,
+  ProgressMeasureLocation
+} from '@patternfly/react-core';
+
+export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
+  <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>
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx b/packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx
new file mode 100644
index 00000000000..a2f455256ba
--- /dev/null
+++ b/packages/react-core/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
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressWarning.tsx b/packages/react-core/src/components/Progress/examples/ProgressWarning.tsx
new file mode 100644
index 00000000000..4eefe9880ef
--- /dev/null
+++ b/packages/react-core/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} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx b/packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx
new file mode 100644
index 00000000000..4cf8f4af7bb
--- /dev/null
+++ b/packages/react-core/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} />
+);

From 9c1520aa3bb38068248e8c952af5386282d8ccdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 18 Aug 2022 13:14:26 +0200
Subject: [PATCH 2/2] minor changes

---
 .../src/components/Progress/examples/Progress.md          | 2 +-
 .../examples/ProgressTitleOutsideOfProgressBar.tsx        | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md
index 6cba1bb467e..34ecd6c5bdd 100644
--- a/packages/react-core/src/components/Progress/examples/Progress.md
+++ b/packages/react-core/src/components/Progress/examples/Progress.md
@@ -63,7 +63,7 @@ propComponents: ['Progress']
 ```ts file="./ProgressFiniteStep.tsx"
 ```
 
-### Progress (step instruction)
+### Progress with step instructions
 ```ts file="./ProgressStepInstruction.tsx"
 ```
 
diff --git a/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
index e35e60fc00b..f570629a753 100644
--- a/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
+++ b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
@@ -11,9 +11,13 @@ import {
 export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
   <DescriptionList>
     <DescriptionListGroup>
-      <DescriptionListTerm id="progress-label">Title outside of progress bar</DescriptionListTerm>
+      <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
       <DescriptionListDescription>
-        <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-labelledby="progress-label" />
+        <Progress
+          value={33}
+          measureLocation={ProgressMeasureLocation.outside}
+          aria-labelledby="title-outside-progress-example-label"
+        />
       </DescriptionListDescription>
     </DescriptionListGroup>
   </DescriptionList>