@patternfly/react-core 6.4.1-prerelease.7 → 6.4.1-prerelease.9

package/src/components/Alert/examples/AlertTruncated.tsx

@@ -0,0 +1,28 @@
+import { Fragment } from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const AlertTruncated: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      variant="info"
+      truncateTitle={1}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+    <Alert
+      variant="warning"
+      truncateTitle={2}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+    <Alert
+      variant="danger"
+      truncateTitle={3}
+      title={`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
+  `}
+    />
+  </Fragment>
+);

package/src/components/Alert/examples/AlertVariants.tsx

@@ -0,0 +1,12 @@
+import { Fragment } from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const AlertVariants: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert title="Custom alert title" ouiaId="CustomAlert" />
+    <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
+    <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
+    <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
+    <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
+  </Fragment>
+);

package/src/components/Alert/examples/AlertVariations.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
+
+export const AlertVariations: React.FunctionComponent = () => (
+  <Fragment>
+    <Alert
+      variant="success"
+      title="Success alert title"
+      actionLinks={
+        <Fragment>
+          <AlertActionLink component="a" href="#">
+            View details
+          </AlertActionLink>
+          <AlertActionLink // eslint-disable-next-line no-console
+            onClick={() => console.log('Clicked on Ignore')}
+          >
+            Ignore
+          </AlertActionLink>
+        </Fragment>
+      }
+    >
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+    </Alert>
+    <Alert variant="success" title="Success alert title">
+      <p>
+        Success alert description. This should tell the user more information about the alert.{' '}
+        <a href="#">This is a link.</a>
+      </p>
+    </Alert>
+    <Alert
+      variant="success"
+      title="Success alert title"
+      // eslint-disable-next-line no-console
+      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
+    >
+      <p>Short alert description.</p>
+    </Alert>
+    <Alert variant="success" title="div success alert title" component="div" />
+    <Alert variant="success" title="h6 Success alert title" component="h6">
+      <p>Short alert description.</p>
+    </Alert>
+  </Fragment>
+);

package/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"
+
+```

package/src/demos/{Button.md → 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>
   );
 };
-```

package/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"
+```

package/src/demos/{PasswordGenerator.md → 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 = () => {
     />
   );
 };
-```