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

package/src/layouts/Split/examples/Split.md

@@ -11,17 +11,47 @@ import './split.css';
 
 ### Basic
 
-```ts file="SplitBasic.tsx"
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
+
+<Split>
+  <SplitItem>content</SplitItem>
+  <SplitItem isFilled>pf-m-fill</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```
 
 ### With gutter
 
-```ts file="SplitWithGutter.tsx"
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
 
+<Split hasGutter>
+  <SplitItem>content</SplitItem>
+  <SplitItem isFilled>pf-m-fill</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```
 
 ### Wrappable
 
-```ts file="SplitWrappable.tsx"
-
+```js
+import { Split, SplitItem } from '@patternfly/react-core';
+
+<Split hasGutter isWrappable>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+  <SplitItem>content</SplitItem>
+</Split>;
 ```

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

@@ -1,17 +0,0 @@
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
-import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
-import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
-
-export const AlertCustomIcons: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert customIcon={<UsersIcon />} title="Default alert title" />
-    <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
-    <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
-    <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
-    <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
-  </Fragment>
-);

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

@@ -1,36 +0,0 @@
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-
-export const AlertExpandable: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert
-      isExpandable
-      variant="success"
-      title="Success alert title"
-      // eslint-disable-next-line no-console
-      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-    >
-      <p>Success alert description. This should tell the user more information about the alert.</p>
-    </Alert>
-    <Alert
-      isExpandable
-      isInline
-      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>
-  </Fragment>
-);

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

@@ -1,12 +0,0 @@
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-export const AlertInlineVariants: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert variant="custom" isInline title="Custom inline alert title" />
-    <Alert variant="info" isInline title="Info inline alert title" />
-    <Alert variant="success" isInline title="Success inline alert title" />
-    <Alert variant="warning" isInline title="Warning inline alert title" />
-    <Alert variant="danger" isInline title="Danger inline alert title" />
-  </Fragment>
-);

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

@@ -1,45 +0,0 @@
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
-
-export const AlertInlineVariations: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert
-      isInline
-      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 isInline 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
-      isInline
-      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 isInline variant="success" title="div success alert title" component="div" />
-    <Alert isInline variant="success" title="h6 Success alert title" component="h6">
-      <p>Short alert description.</p>
-    </Alert>
-  </Fragment>
-);

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

@@ -1,12 +0,0 @@
-import { Fragment } from 'react';
-import { Alert } from '@patternfly/react-core';
-
-export const AlertPlainInlineVariants: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert variant="custom" isInline isPlain title="Custom inline alert title" />
-    <Alert variant="info" isInline isPlain title="Info inline alert title" />
-    <Alert variant="success" isInline isPlain title="Success inline alert title" />
-    <Alert variant="warning" isInline isPlain title="Warning inline alert title" />
-    <Alert variant="danger" isInline isPlain title="Danger inline alert title" />
-  </Fragment>
-);

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

@@ -1,7 +0,0 @@
-import { Alert } from '@patternfly/react-core';
-
-export const AlertPlainInlineVariations: React.FunctionComponent = () => (
-  <Alert isInline isPlain variant="success" title="Success alert title">
-    <p>Success alert description. This should tell the user more information about the alert.</p>
-  </Alert>
-);

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

@@ -1,29 +0,0 @@
-import { Fragment } from 'react';
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
-
-export const AlertStaticLiveRegion: React.FunctionComponent = () => (
-  <Fragment>
-    <Alert
-      isLiveRegion
-      variant="info"
-      title="Default live region configuration"
-      // eslint-disable-next-line no-console
-      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-    >
-      This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS
-      classes.
-    </Alert>
-    <Alert
-      aria-live="assertive"
-      aria-relevant="additions text"
-      aria-atomic="true"
-      variant="info"
-      title="Customized live region"
-      // eslint-disable-next-line no-console
-      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}
-    >
-      You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the
-      containing element.
-    </Alert>
-  </Fragment>
-);

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

@@ -1,45 +0,0 @@
-import { Fragment, useState } from 'react';
-import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
-
-export const AlertTimeout: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
-  const [newAlertKey, setNewAlertKey] = useState<number>(0);
-
-  const onClick = () => {
-    const timeout = 8000;
-    setNewAlertKey((key) => key + 1);
-    setAlerts((prevAlerts) => [
-      <Alert
-        title="Default timeout Alert"
-        timeout={timeout}
-        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>
-        }
-        key={newAlertKey}
-      >
-        This alert will dismiss after {`${timeout / 1000} seconds`}
-      </Alert>,
-      ...prevAlerts
-    ]);
-  };
-
-  return (
-    <Fragment>
-      <Button variant="secondary" onClick={onClick}>
-        Add alert
-      </Button>
-      <AlertGroup hasAnimations isLiveRegion>
-        {alerts}
-      </AlertGroup>
-    </Fragment>
-  );
-};

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

@@ -1,28 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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/components/MenuToggle/examples/MenuToggleAvatarText.tsx

@@ -1,15 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-
-export const MenuToggleAvatarText: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
-      Ned Username
-    </MenuToggle>{' '}
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
-      Ned Username
-    </MenuToggle>
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleBadge.tsx

@@ -1,9 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle, Badge } from '@patternfly/react-core';
-
-export const MenuToggleBadge: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-    <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleDisabled.tsx

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleExpanded.tsx

@@ -1,3 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx

@@ -1,9 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleFullHeight: React.FunctionComponent = () => (
-  <div style={{ height: '80px' }}>
-    <MenuToggle isFullHeight aria-label="Full height menu toggle">
-      Full height
-    </MenuToggle>
-  </div>
-);

package/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx

@@ -1,7 +0,0 @@
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleFullWidth: React.FunctionComponent = () => (
-  <MenuToggle isFullWidth aria-label="Full width menu toggle">
-    Full width
-  </MenuToggle>
-);

package/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx

@@ -1,11 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-export const MenuTogglePlainIcon: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab" />{' '}
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab" />{' '}
-    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab" />
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx

@@ -1,16 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
-      Disabled
-    </MenuToggle>{' '}
-    <MenuToggle variant="plainText" aria-label="Plain menu toggle">
-      Custom text
-    </MenuToggle>{' '}
-    <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
-      Custom text (expanded)
-    </MenuToggle>
-  </Fragment>
-);

package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx

@@ -1,14 +0,0 @@
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-
-export const MenuToggleVariantStyles: React.FunctionComponent = () => (
-  <Fragment>
-    <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="primary" isExpanded>
-      Expanded
-    </MenuToggle>{' '}
-    <MenuToggle variant="primary" isDisabled>
-      Disabled
-    </MenuToggle>
-  </Fragment>
-);

package/src/components/Panel/examples/PanelBasic.tsx

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-export const PanelBasic: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelBordered.tsx

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-export const PanelBordered: React.FunctionComponent = () => (
-  <Panel variant="bordered">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelFooterExample.tsx

@@ -1,10 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
-
-export const PanelFooterExample: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelHeaderExample.tsx

@@ -1,11 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
-
-export const PanelHeaderExample: React.FunctionComponent = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelHeaderFooter.tsx

@@ -1,12 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-export const PanelHeaderFooter: React.FunctionComponent = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelNoBody.tsx

@@ -1,7 +0,0 @@
-import { Panel, PanelMain } from '@patternfly/react-core';
-
-export const PanelNoBody: React.FunctionComponent = () => (
-  <Panel>
-    <PanelMain>Main content</PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelRaised.tsx

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-export const PanelRaised: React.FunctionComponent = () => (
-  <Panel variant="raised">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelScrollable.tsx

@@ -1,35 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-export const PanelScrollable: React.FunctionComponent = () => (
-  <Panel isScrollable>
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx

@@ -1,38 +0,0 @@
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
-  <Panel isScrollable>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);

package/src/components/Panel/examples/PanelSecondaryVariant.tsx

@@ -1,9 +0,0 @@
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-export const PanelSecondaryVariant: React.FunctionComponent = () => (
-  <Panel variant="secondary">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);

package/src/demos/Button/Button.md

@@ -1,19 +0,0 @@
----
-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"
-
-```