chore(Clipboard copy): convert examples to TypeScript/functional components

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -11,167 +11,55 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied">This is editable</ClipboardCopy>;
+```ts file="./ClipboardCopyBasic.tsx"
 ```
 
 ### Read Only
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">This is read-only</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnly.tsx"
 ```
 
 ### Expanded
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion} >
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyExpanded.tsx"
 ```
 
 ### Read only expanded
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnlyExpanded.tsx"
 ```
 
 ### Read only expanded by default
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnlyExpandedByDefault.tsx"
 ```
 
 ### Expanded with array
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-ClipboardCopyArrayOfElements = () => {
-  let text = [
-    'Got a lot of text here,',
-    'need to see all of it?',
-    'Click that arrow on the left side and check out the resulting expansion.'
-  ];
-  return <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>{text.join(' ')}</ClipboardCopy>;
-};
+```ts file="./ClipboardCopyExpandedWithArray.tsx"
 ```
 
 ### JSON object (wrap code with pre)
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  {`{ "menu": {
-  "id": "file",
-  "value": "File",
-  "popup": {
-    "menuitem": [
-      {"value": "New", "onclick": "CreateNewDoc()"},
-      {"value": "Open", "onclick": "OpenDoc()"},
-      {"value": "Close", "onclick": "CloseDoc()"}
-    ]
-  }
-}} `}
-</ClipboardCopy>;
+```ts file="./ClipboardCopyJSONObject.tsx"
 ```
 
 ### Inline compact
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">2.3.4-2-redhat</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompact.tsx"
 ```
 
 ### Inline compact code
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
-  2.3.4-2-redhat
-</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompactCode.tsx"
 ```
 
 ### Inline compact with additional action
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-<ClipboardCopy
-  hoverTip="Copy"
-  clickTip="Copied"
-  variant="inline-compact"
-  additionalActions={
-    <ClipboardCopyAction>
-      <Button variant="plain" aria-label="Run in web terminal">
-        <PlayIcon aria-hidden />
-      </Button>
-    </ClipboardCopyAction>
-  }
->
-  2.3.4-2-redhat
-</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompactWithAdditionalAction.tsx"
 ```
 
 ### Inline compact in sentence
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<React.Fragment>
-  <b>Basic</b>
-  <br />
-  Lorem ipsum {<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">2.3.4-2-redhat</ClipboardCopy>} dolor sit amet.
-  <br /> <br />
-  <b>Long copy string</b>
-  <br />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-  {
-    <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
-      https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
-    </ClipboardCopy>
-  }{' '}
-  Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
-  <br /> <br />
-  <b>Long copy string in block</b>
-  <br />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-  {
-    <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
-      https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
-    </ClipboardCopy>
-  }{' '}
-  Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
-</React.Fragment>;
+```ts file="./ClipboardCopyInlineCompactInSentence.tsx"
 ```

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyBasic: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied">
+    This is editable
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyExpanded: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+const text = [
+  'Got a lot of text here,',
+  'need to see all of it?',
+  'Click that arrow on the left side and check out the resulting expansion.'
+];
+
+export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    {text.join(' ')}
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+export const ClipboardCopyInlineCompact: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = () => (
+  <React.Fragment>
+    <b>Basic</b>
+    <br />
+    Lorem ipsum{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+        2.3.4-2-redhat
+      </ClipboardCopy>
+    }
+    dolor sit amet.
+    <br /> <br />
+    <b>Long copy string</b>
+    <br />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
+      </ClipboardCopy>
+    }{' '}
+    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
+    <br /> <br />
+    <b>Long copy string in block</b>
+    <br />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
+      </ClipboardCopy>
+    }{' '}
+    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
+  </React.Fragment>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => (
+  <ClipboardCopy
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant="inline-compact"
+    additionalActions={
+      <ClipboardCopyAction>
+        <Button variant="plain" aria-label="Run in web terminal">
+          <PlayIcon aria-hidden />
+        </Button>
+      </ClipboardCopyAction>
+    }
+  >
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyJSONObject: React.FunctionComponent = () => (
+  <ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    {`{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} `}
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnly: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">
+    This is read-only
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);