@patternfly/react-core 4.227.5 → 4.227.8

package/src/components/Pagination/examples/PaginationTop.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

package/src/components/Spinner/examples/Spinner.md

@@ -7,31 +7,13 @@ propComponents: ['Spinner']
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG aria-label="Contents of the basic example"/>
+```ts file="./SpinnerBasic.tsx"
 ```
 
 ### Size variations
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Spinner isSVG size="sm" aria-label="Contents of the small example"/>
-  <Spinner isSVG size="md" aria-label="Contents of the medium example"/>
-  <Spinner isSVG size="lg" aria-label="Contents of the large example"/>
-  <Spinner isSVG size="xl" aria-label="Contents of the extra large example"/>
-</React.Fragment>
+```ts file="./SpinnerSizeVariations.tsx"
 ```
 
 ### Custom size
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG diameter="80px" aria-label="Contents of the custom size example"/>
+```ts file="./SpinnerCustomSize.tsx"
 ```
-

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerCustomSize: React.FunctionComponent = () => (
+  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+);

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerSizeVariations: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
+    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
+    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
+    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+  </React.Fragment>
+);

package/src/components/Switch/examples/Switch.md

@@ -10,177 +10,30 @@ ouia: true
 
 ### Basic
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class SimpleSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="simple-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchBasic.tsx"
 ```
 
 ### Reversed Layout
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class ReversedSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="reversed-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-        isReversed
-      />
-    );
-  }
-}
+```ts file="./SwitchReversed.tsx"
 ```
 
 ### Without label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class NoLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={this.handleChange} />
-    );
-  }
-}
+```ts file="./SwitchWithoutLabel.tsx"
 ```
 
 ### Checked with label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class CheckedWithLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        label="Message when on"
-        labelOff="Message when off"
-        id="checked-with-label-switch-on"
-        aria-label="Message when on"
-        isChecked={isChecked}
-        hasCheckIcon
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchCheckedWithLabel.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="disabled-switch-on"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked
-    isDisabled
-  />
-  <br />
-  <Switch
-    id="disabled-switch-off"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked={false}
-    isDisabled
-  />
-  <br />
-  <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
-  <br />
-  <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
-</React.Fragment>;
+```ts file="./SwitchDisabled.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="uncontrolled-switch-no-label"
-    aria-label="An uncontrolled switch with no label"
-    defaultChecked={false}
-  />
-  <br />
-  <Switch
-    id="uncontrolled-switch-with-label"
-    label="An uncontrolled switch"
-    defaultChecked={false}
-  />
-</React.Fragment>;
+```ts file="./SwitchUncontrolled.tsx"
 ```

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchBasic: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="simple-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      label="Message when on"
+      labelOff="Message when off"
+      id="checked-with-label-switch-on"
+      aria-label="Message when on"
+      isChecked={isChecked}
+      hasCheckIcon
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchDisabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="disabled-switch-on"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked
+      isDisabled
+    />
+    <br />
+    <Switch
+      id="disabled-switch-off"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={false}
+      isDisabled
+    />
+    <br />
+    <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
+    <br />
+    <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchReversed.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchReversed: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="reversed-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+      isReversed
+    />
+  );
+};

package/src/components/Switch/examples/SwitchUncontrolled.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchUncontrolled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="uncontrolled-switch-no-label"
+      aria-label="An uncontrolled switch with no label"
+      defaultChecked={false}
+    />
+    <br />
+    <Switch id="uncontrolled-switch-with-label" label="An uncontrolled switch" defaultChecked={false} />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchWithoutLabel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchWithoutLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={handleChange} />;
+};