From 596bfb9d8f458832ef669b323df379b39506a715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Mon, 18 Jul 2022 15:40:23 +0200
Subject: [PATCH 1/2] chore(Radio): convert examples to TypeScript

---
 .../src/components/Radio/examples/Radio.md    | 80 +++----------------
 .../Radio/examples/RadioControlled.tsx        | 21 +++++
 .../Radio/examples/RadioDisabled.tsx          | 15 ++++
 .../Radio/examples/RadioLabelWraps.tsx        |  6 ++
 .../Radio/examples/RadioReversed.tsx          |  6 ++
 .../Radio/examples/RadioStandaloneInput.tsx   |  6 ++
 .../Radio/examples/RadioUncontrolled.tsx      |  6 ++
 .../Radio/examples/RadioWithBody.tsx          |  6 ++
 .../Radio/examples/RadioWithDescription.tsx   | 11 +++
 .../examples/RadioWithDescriptionAndBody.tsx  | 12 +++
 10 files changed, 101 insertions(+), 68 deletions(-)
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioControlled.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioDisabled.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioLabelWraps.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioReversed.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioStandaloneInput.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioUncontrolled.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioWithBody.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioWithDescription.tsx
 create mode 100644 packages/react-core/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx

diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md
index 2fe14ab9c43..fe26623a9fa 100644
--- a/packages/react-core/src/components/Radio/examples/Radio.md
+++ b/packages/react-core/src/components/Radio/examples/Radio.md
@@ -7,104 +7,48 @@ ouia: true
 ---
 
 ## Examples
+
 ### Controlled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-class ControlledRadio extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      check1: false,
-    };
-
-    this.handleChange = (_, event) => {
-      const { value } = event.currentTarget;
-      this.setState({ [value]: true });
-    };
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Radio
-          isChecked={this.state.check1}
-          name="radio-1"
-          onChange={this.handleChange}
-          label="Controlled radio"
-          id="radio-controlled"
-          value="check1"
-        />
-      </React.Fragment>
-    );
-  }
-}
+
+```ts file="./RadioControlled.tsx"
 ```
 
 ### Uncontrolled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+```ts file="./RadioUncontrolled.tsx"
 ```
 
 ### Reversed
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+```ts file="./RadioReversed.tsx"
 ```
 
 ### Label wraps
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+```ts file="./RadioLabelWraps.tsx"
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
-  <Radio id="radio-disabled-checked" defaultChecked label="Disabled and checked radio example" isDisabled name="radio-6" />
-</React.Fragment>
+
+```ts file="./RadioDisabled.tsx"
 ```
 
 ### With description
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-description" label="Radio with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." />
+```ts file="./RadioWithDescription.tsx"
 ```
 
 ### With body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-body" label="Radio with body" body="This is where custom content goes." />
+```ts file="./RadioWithBody.tsx"
 ```
 
 ### With description and body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-description-body" label="Radio with description and body" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes." />
+```ts file="./RadioWithDescriptionAndBody.tsx"
 ```
 
 ### Standalone input
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone"/>
+```ts file="./RadioStandaloneInput.tsx"
 ```
diff --git a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
new file mode 100644
index 00000000000..09f24181e71
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioControlled: React.FunctionComponent = () => {
+  const [check1, setCheck1] = React.useState(false);
+
+  function handleChange(_: boolean) {
+    setCheck1(true);
+  }
+  return (
+    <React.Fragment>
+      <Radio
+        isChecked={check1}
+        name="radio-1"
+        onChange={handleChange}
+        label="Controlled Radio"
+        id="radio-controlled"
+      ></Radio>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Radio/examples/RadioDisabled.tsx b/packages/react-core/src/components/Radio/examples/RadioDisabled.tsx
new file mode 100644
index 00000000000..08183cb58b4
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioDisabled.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
+    <Radio
+      id="radio-disabled-checked"
+      defaultChecked
+      label="Disabled and checked radio example"
+      isDisabled
+      name="radio-6"
+    />
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioLabelWraps.tsx b/packages/react-core/src/components/Radio/examples/RadioLabelWraps.tsx
new file mode 100644
index 00000000000..c7888590b8f
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioLabelWraps.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioLabelWraps: React.FunctionComponent = () => (
+  <Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioReversed.tsx b/packages/react-core/src/components/Radio/examples/RadioReversed.tsx
new file mode 100644
index 00000000000..5c0951955da
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioReversed.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioReversed: React.FunctionComponent = () => (
+  <Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioStandaloneInput.tsx b/packages/react-core/src/components/Radio/examples/RadioStandaloneInput.tsx
new file mode 100644
index 00000000000..4f0aac7f8e1
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioStandaloneInput.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioStandaloneInput: React.FunctionComponent = () => (
+  <Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone" />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioUncontrolled.tsx b/packages/react-core/src/components/Radio/examples/RadioUncontrolled.tsx
new file mode 100644
index 00000000000..da70f382536
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioUncontrolled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioUncontrolled: React.FunctionComponent = () => (
+  <Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioWithBody.tsx b/packages/react-core/src/components/Radio/examples/RadioWithBody.tsx
new file mode 100644
index 00000000000..804550d5ad0
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioWithBody.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithBody: React.FunctionComponent = () => (
+  <Radio id="radio-with-body" label="Radio with body" name="radio-8" body="This is where custom content goes." />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioWithDescription.tsx b/packages/react-core/src/components/Radio/examples/RadioWithDescription.tsx
new file mode 100644
index 00000000000..2e92b7795b7
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioWithDescription.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescription: React.FunctionComponent = () => (
+  <Radio
+    id="radio-with-description"
+    label="Radio with description example"
+    name="radio-7"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+  />
+);
diff --git a/packages/react-core/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx b/packages/react-core/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx
new file mode 100644
index 00000000000..c50158c3968
--- /dev/null
+++ b/packages/react-core/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescriptionAndBody: React.FunctionComponent = () => (
+  <Radio
+    id="radio-description-body"
+    label="Radio with description and body"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+    body="This is where custom content goes."
+    name="radio-8"
+  />
+);

From eab294c36589dc8b927b100827d0cba3fcec7206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Mon, 25 Jul 2022 16:34:51 +0200
Subject: [PATCH 2/2] chore(Radio): convert examples to TypeScript

---
 .../src/components/Radio/examples/RadioControlled.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
index 09f24181e71..957da3eb7e0 100644
--- a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
+++ b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx
@@ -4,9 +4,9 @@ import { Radio } from '@patternfly/react-core';
 export const RadioControlled: React.FunctionComponent = () => {
   const [check1, setCheck1] = React.useState(false);
 
-  function handleChange(_: boolean) {
+  const handleChange = () => {
     setCheck1(true);
-  }
+  };
   return (
     <React.Fragment>
       <Radio