From 52b0ce9ae15b5ebc806b48e0f8a057a5098ce299 Mon Sep 17 00:00:00 2001
From: Tomas Psota <tpsota@redhat.com>
Date: Wed, 1 Jun 2022 13:24:15 +0200
Subject: [PATCH] chore(InputGroup): convert examples to TypeScript

Signed-off-by: Tomas Psota <tpsota@redhat.com>
---
 .../InputGroup/examples/InputGroup.md         | 242 +-----------------
 .../InputGroup/examples/InputGroupBasic.tsx   |  31 +++
 .../examples/InputGroupWithDropdown.tsx       |  43 ++++
 .../examples/InputGroupWithPopover.tsx        |  33 +++
 .../examples/InputGroupWithSiblings.tsx       |  32 +++
 .../examples/InputGroupWithTextarea.tsx       |  13 +
 6 files changed, 157 insertions(+), 237 deletions(-)
 create mode 100644 packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
 create mode 100644 packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
 create mode 100644 packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
 create mode 100644 packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
 create mode 100644 packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx

diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index fddb92ff4db..3872100de72 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -8,256 +8,24 @@ import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import {
-  Button,
-  ButtonVariant,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  TextInput,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  Popover,
-  PopoverPosition
-} from '@patternfly/react-core';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import {
-  Button,
-  InputGroup,
-  InputGroupText,
-  InputGroupTextVariant,
-  TextInput,
-  ValidatedOptions
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextInput id="textInput6" type="email" aria-label="email input field" />
-          <InputGroupText id="email-example">@example.com</InputGroupText>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <InputGroupText id="username">
-            <AtIcon />
-          </InputGroupText>
-          <TextInput validated={ValidatedOptions.error} id="textInput7" type="email" aria-label="Error state username example" />
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
-          <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>%</InputGroupText>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupBasic.tsx'
 ```
 
 ### With textarea
-```js
-import React from 'react';
-import {
-  Button,
-  TextArea,
-  InputGroup
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
-          <Button id="textAreaButton2" variant="control">
-            Button
-          </Button>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithTextarea.tsx'
 ```
 
 ### With dropdown
-```js
-import React from 'react';
-import {
-  Button,
-  InputGroup,
-  TextInput,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      selected: ''
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: false,
-        selected: event.currentTarget.value
-      });
-    };
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={
-              <DropdownToggle onToggle={this.onToggle}>
-                {this.state.selected ? this.state.selected : 'Dropdown'}
-              </DropdownToggle>
-            }
-            isOpen={this.state.isOpen}
-            dropdownItems={[
-              <DropdownItem key="opt-1" value="Option 1" component="button">
-                Option 1
-              </DropdownItem>,
-              <DropdownItem key="opt-2" value="Option 2" component="button">
-                Option 2
-              </DropdownItem>,
-              <DropdownItem key="opt-3" value="Option 3" component="button">
-                Option 3
-              </DropdownItem>
-            ]}
-          />
-          <TextInput id="textInput3" aria-label="input with dropdown and button" />
-          <Button id="inputDropdownButton1" variant="control">Button</Button>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithDropdown.tsx'
 ```
 
 ### With popover
-```js
-import React from 'react';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import {
-  Button,
-  InputGroup,
-  TextInput,
-  Popover,
-  PopoverPosition
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
-          <Popover
-            aria-label="popover example"
-            position={PopoverPosition.top}
-            bodyContent="This field is an example of an input group with a popover."
-          >
-            <Button variant="control" aria-label="popover for input">
-              <QuestionCircleIcon />
-            </Button>
-          </Popover>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
-          <Popover
-            aria-label="popover example"
-            position={PopoverPosition.top}
-            bodyContent="This field is an example of an input group with a popover."
-          >
-            <Button variant="plain" aria-label="Popover for input">
-              <QuestionCircleIcon />
-            </Button>
-          </Popover>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file ='./InputGroupWithPopover.tsx'
 ```
 
-
 ### With multiple group siblings
-```js
-import React from 'react';
-import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import {
-  Button,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  TextInput
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <Button id="textAreaButton1" variant="control">
-            Button
-          </Button>
-          <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
-          <Button variant="control">Button</Button>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <Button id="textAreaButton3" variant="control">
-            Button
-          </Button>
-          <Button variant="control">Button</Button>
-          <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
-          <Button variant="control">Button</Button>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <InputGroupText>
-            <DollarSignIcon />
-          </InputGroupText>
-          <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
-          <InputGroupText>.00</InputGroupText>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithSiblings.tsx'
 ```
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
new file mode 100644
index 00000000000..ba05602c7d3
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
+import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, ValidatedOptions } from '@patternfly/react-core';
+
+export const InputGroupBasic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput id="textInput6" type="email" aria-label="email input field" />
+      <InputGroupText id="email-example">@example.com</InputGroupText>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText id="username">
+        <AtIcon />
+      </InputGroupText>
+      <TextInput
+        validated={ValidatedOptions.error}
+        id="textInput7"
+        type="email"
+        aria-label="Error state username example"
+      />
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
+      <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+        %
+      </InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
new file mode 100644
index 00000000000..d5a03e683cf
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+
+export const InputGroupWithDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="opt-1" value="Option 1" component="button">
+      Option 1
+    </DropdownItem>,
+    <DropdownItem key="opt-2" value="Option 2" component="button">
+      Option 2
+    </DropdownItem>,
+    <DropdownItem key="opt-3" value="Option 3" component="button">
+      Option 3
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <InputGroup>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
+          isOpen={isOpen}
+          dropdownItems={dropdownItems}
+        />
+        <TextInput id="textInput3" aria-label="input with dropdown and button" />
+        <Button id="inputDropdownButton1" variant="control">
+          Button
+        </Button>
+      </InputGroup>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
new file mode 100644
index 00000000000..683dd9c612d
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
+
+export const InputGroupWithPopover: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="control" aria-label="popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="plain" aria-label="Popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
new file mode 100644
index 00000000000..7c52717c8a1
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
+import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+
+export const InputGroupWithSiblings: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <Button id="textAreaButton1" variant="control">
+        Button
+      </Button>
+      <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <Button id="textAreaButton3" variant="control">
+        Button
+      </Button>
+      <Button variant="control">Button</Button>
+      <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText>
+        <DollarSignIcon />
+      </InputGroupText>
+      <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+      <InputGroupText>.00</InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx
new file mode 100644
index 00000000000..4800035219d
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, TextArea, InputGroup } from '@patternfly/react-core';
+
+export const InputGroupWithTextarea: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+      <Button id="textAreaButton2" variant="control">
+        Button
+      </Button>
+    </InputGroup>
+  </React.Fragment>
+);