Converted existing examples to TS

Author: Eric Olkowski

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

@@ -15,58 +15,32 @@ The default behavior of the `Truncate` component is to truncate based on whether
 
 By default content will be truncated at its end when it cannot fit entirely inside its parent container.
 
-```js
-import { Truncate } from '@patternfly/react-core';
+```ts file="./TruncateDefault.tsx"
 
-<div className="truncate-example-resize">
-  <Truncate content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} />
-</div>;
 ```
 
 ### Middle
 
 When passing a `position` property with a value of "middle", the position of the truncation will change based on the parent container's width and the amount of `trailingNumChars` passed in. The `trailingNumChars` will always be displayed, while the rest of the content will be truncated based on the parent container width.
 
-```js
-import { Truncate } from '@patternfly/react-core';
+```ts file="./TruncateMiddle.tsx"
 
-<div className="truncate-example-resize">
-  <Truncate
-    content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
-    trailingNumChars={10}
-    position={'middle'}
-  />
-</div>;
 ```
 
 ### Start
 
 You can truncate content at its start by passing the `position` property with a value of "start". This can be useful if you have several strings to truncate that have similar text at the start, but unique text at the end that you want to have visible.
 
-```js
-import { Truncate } from '@patternfly/react-core';
+```ts file="./TruncateStart.tsx"
 
-<div className="truncate-example-resize">
-  <Truncate
-    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
-    position={'start'}
-  />
-</div>;
 ```
 
 ### With custom tooltip position
 
 You can customize the position of the `<Tooltip>` that is rendered by passing in the `tooltipPosition` property. The following example overrides the default "top" position with a "bottom" position.
 
-```js
-import { Truncate } from '@patternfly/react-core';
+```ts file="./TruncateCustomTooltipPosition.tsx"
 
-<div className="truncate-example-resize">
-  <Truncate
-    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
-    tooltipPosition={'bottom'}
-  />
-</div>;
 ```
 
 ### Based on max characters

packages/react-core/src/components/Truncate/examples/TruncateCustomTooltipPosition.tsx

@@ -0,0 +1,10 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateCustomTooltipPosition: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+      tooltipPosition={'bottom'}
+    />
+  </div>
+);

packages/react-core/src/components/Truncate/examples/TruncateDefault.tsx

@@ -0,0 +1,7 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateDefault: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} />
+  </div>
+);

packages/react-core/src/components/Truncate/examples/TruncateMaxChars.tsx

@@ -5,23 +5,23 @@ export const TruncateMaxChars: React.FunctionComponent = () => (
     <div>Truncated at end position:</div>
     <Truncate
       maxCharsDisplayed={15}
-      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     />
     <br />
     <br />
     <div>Truncated at middle position:</div>
     <Truncate
       maxCharsDisplayed={15}
       position={TruncatePosition.middle}
-      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     />
     <br />
     <br />
     <div>Truncated at start position:</div>
     <Truncate
       maxCharsDisplayed={15}
       position={TruncatePosition.start}
-      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     />
   </>
 );

packages/react-core/src/components/Truncate/examples/TruncateMiddle.tsx

@@ -0,0 +1,11 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateMiddle: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+      trailingNumChars={10}
+      position={'middle'}
+    />
+  </div>
+);

packages/react-core/src/components/Truncate/examples/TruncateStart.tsx

@@ -0,0 +1,7 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateStart: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} position={'start'} />
+  </div>
+);