chore(password generator, button): move demos to separate files (#12035)

Author: Mash707

packages/react-core/src/demos/Button/Button.md

@@ -0,0 +1,19 @@
+---
+id: Button
+section: components
+---
+
+import { useState } from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+## Demos 
+
+### Progress button
+
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
+```ts file="./examples/ButtonProgress.tsx"
+
+```

packages/react-core/src/demos/Button.md …demos/Button/examples/ButtonProgress.tsxpackages/react-core/src/demos/Button.md renamed to packages/react-core/src/demos/Button/examples/ButtonProgress.tsx packages/react-core/src/demos/Button.md renamed to packages/react-core/src/demos/Button/examples/ButtonProgress.tsx

@@ -1,25 +1,8 @@
----
-id: Button
-section: components
----
-
-import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-
-## Demos 
-
-### Progress button
-
-The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
-
-Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
-
-```ts
 import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-const ProgressButton: React.FunctionComponent = () => {
+export const ButtonProgress: React.FunctionComponent = () => {
   const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
 
   return (
@@ -69,4 +52,3 @@ const ProgressButton: React.FunctionComponent = () => {
     </Form>
   );
 };
-```

packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md

@@ -0,0 +1,16 @@
+---
+id: Password generator
+section: patterns
+---
+
+import { useEffect, useRef, useState } from 'react';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+
+## Demos
+
+### Provide a generated password
+
+```ts file="./examples/PasswordGenerator.tsx"
+```

…eact-core/src/demos/PasswordGenerator.md …Generator/examples/PasswordGenerator.tsxpackages/react-core/src/demos/PasswordGenerator.md renamed to packages/react-core/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx packages/react-core/src/demos/PasswordGenerator.md renamed to packages/react-core/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx

@@ -1,18 +1,3 @@
----
-id: Password generator
-section: patterns
----
-
-import { useEffect, useRef, useState } from 'react';
-import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
-
-## Demos
-
-### Provide a generated password
-
-```ts
 import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
@@ -30,12 +15,12 @@ import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
-const PasswordGenerator: React.FunctionComponent = () => {
+export const PasswordGenerator: React.FunctionComponent = () => {
   const generatePassword = () => {
     const length = 12;
     const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@%()_-=+';
     let retVal = '';
-    for (var i = 0, n = charset.length; i < length; ++i) {
+    for (let i = 0, n = charset.length; i < length; ++i) {
       retVal += charset.charAt(Math.floor(Math.random() * n));
     }
     return retVal;
@@ -153,7 +138,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
             actions={
               <MenuItemAction
                 icon={<RedoIcon />}
-                onClick={(e) => {
+                onClick={(_e) => {
                   setGeneratedPassword(generatePassword());
                 }}
                 actionId="redo"
@@ -181,4 +166,3 @@ const PasswordGenerator: React.FunctionComponent = () => {
     />
   );
 };
-```