@patternfly/react-core 4.227.4 → 4.227.7

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.227.7 (2022-07-28)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.227.6 (2022-07-28)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.227.5 (2022-07-27)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.227.4 (2022-07-27)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.4",
+  "version": "4.227.7",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.78.4",
-    "@patternfly/react-styles": "^4.77.4",
-    "@patternfly/react-tokens": "^4.79.4",
+    "@patternfly/react-icons": "^4.78.7",
+    "@patternfly/react-styles": "^4.77.7",
+    "@patternfly/react-tokens": "^4.79.7",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "bf9f5697021d8b85cd20ce4c5c8899dbcf922cdd"
+  "gitHead": "86dc74f93f58bd72ce6ac164e9bda25422494ca0"
 }

package/src/components/Pagination/examples/Pagination.md

@@ -10,389 +10,42 @@ ouia: true
 
 ### Top
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./PaginationTop.tsx"
 ```
 
 ### Bottom
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationBottom extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1
-    };
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={333}
-        widgetId="pagination-options-menu-bottom"
-        perPage={this.state.perPage}
-        page={this.state.page}
-        variant={PaginationVariant.bottom}
-        onSetPage={this.onSetPage}
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./PaginationBottom.tsx"
 ```
 
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 
-```js
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-
-PaginationIndeterminate = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
-
-  const onSetPage = (_event, pageNumber) => setPage(pageNumber);
-  const onPerPageSelect = (_event, perPage) => setPerPage(perPage);
-
-  return (
-    <Pagination
-      perPageComponent="button"
-      toggleTemplate={({ firstIndex, lastIndex }) => (
-        <React.Fragment>
-          <b>
-            {firstIndex} - {lastIndex}
-          </b>
-          of
-          <b>many</b>
-        </React.Fragment>
-      )}
-      widgetId="pagination-indeterminate"
-      perPage={perPage}
-      page={page}
-      onSetPage={onSetPage}
-      onPerPageSelect={onPerPageSelect}
-    />
-  );
-};
+```ts file="./PaginationIndeterminate.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationDisabled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-        isDisabled
-      />
-    );
-  }
-}
+```ts file="./PaginationDisabled.tsx"
 ```
 
 ### No items
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={0}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./PaginationNoItems.tsx"
 ```
 
 ### One page
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={15}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./PaginationOnePage.tsx"
 ```
 
 ### Compact
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-        isCompact
-      />
-    );
-  }
-}
+```ts file="./PaginationCompact.tsx"
 ```
 
 ### Sticky
 
-```js isFullscreen
-import React from 'react';
-import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
-
-class PaginationSticky extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20,
-      isTopSticky: true
-    };
-
-    this.onToggleSticky = () => {
-      this.setState({
-        isTopSticky: !this.state.isTopSticky
-      });
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        {this.state.isTopSticky && (
-          <React.Fragment>
-            <Pagination
-              perPageComponent="button"
-              itemCount={523}
-              perPage={this.state.perPage}
-              page={this.state.page}
-              onSetPage={this.onSetPage}
-              widgetId="pagination-options-menu-top"
-              onPerPageSelect={this.onPerPageSelect}
-              isSticky
-            >
-              <button onClick={this.onToggleSticky}>Toggle to bottom position</button>
-            </Pagination>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(40)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </React.Fragment>
-        )}
-        {!this.state.isTopSticky && (
-          <React.Fragment>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(40)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-            <Pagination
-              perPageComponent="button"
-              itemCount={523}
-              perPage={this.state.perPage}
-              page={this.state.page}
-              onSetPage={this.onSetPage}
-              widgetId="pagination-options-menu-top"
-              onPerPageSelect={this.onPerPageSelect}
-              isSticky
-              variant={PaginationVariant.bottom}
-            >
-              <button onClick={this.onToggleSticky}>Toggle to top position</button>
-            </Pagination>
-          </React.Fragment>
-        )}
-      </div>
-    );
-  }
-}
+```ts isFullscreen file="./PaginationSticky.tsx"
 ```

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+export const PaginationBottom: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+
+  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={333}
+      widgetId="pagination-options-menu-bottom"
+      perPage={perPage}
+      page={page}
+      variant={PaginationVariant.bottom}
+      onSetPage={onSetPage}
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationCompact: 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}
+      isCompact
+    />
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationDisabled: 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}
+      isDisabled
+    />
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationIndeterminate: 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"
+      toggleTemplate={({ firstIndex, lastIndex }) => (
+        <React.Fragment>
+          <b>
+            {firstIndex} - {lastIndex}
+          </b>
+          of
+          <b>many</b>
+        </React.Fragment>
+      )}
+      widgetId="pagination-indeterminate"
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationNoItems: 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={0}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationOnePage: 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={15}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+export const PaginationSticky: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+  const [isTopSticky, setIsTopSticky] = React.useState(true);
+
+  const onToggleSticky = () => {
+    setIsTopSticky(prev => !prev);
+  };
+
+  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 (
+    <div>
+      {isTopSticky && (
+        <React.Fragment>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={perPage}
+            page={page}
+            onSetPage={onSetPage}
+            widgetId="pagination-options-menu-top"
+            onPerPageSelect={onPerPageSelect}
+            isSticky
+          >
+            <button onClick={onToggleSticky}>Toggle to bottom position</button>
+          </Pagination>
+          <Gallery hasGutter>
+            {Array.apply(0, Array(40)).map((x, i) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </React.Fragment>
+      )}
+      {!isTopSticky && (
+        <React.Fragment>
+          <Gallery hasGutter>
+            {Array.apply(0, Array(40)).map((x, i) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={perPage}
+            page={page}
+            onSetPage={onSetPage}
+            widgetId="pagination-options-menu-top"
+            onPerPageSelect={onPerPageSelect}
+            isSticky
+            variant={PaginationVariant.bottom}
+          >
+            <button onClick={onToggleSticky}>Toggle to top position</button>
+          </Pagination>
+        </React.Fragment>
+      )}
+    </div>
+  );
+};

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/Radio/examples/Radio.md

@@ -7,104 +7,48 @@ ouia: true
 ---
 
 ## Examples
+
 ### Controlled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-class ControlledRadio extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      check1: false,
-    };
-
-    this.handleChange = (_, event) => {
-      const { value } = event.currentTarget;
-      this.setState({ [value]: true });
-    };
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Radio
-          isChecked={this.state.check1}
-          name="radio-1"
-          onChange={this.handleChange}
-          label="Controlled radio"
-          id="radio-controlled"
-          value="check1"
-        />
-      </React.Fragment>
-    );
-  }
-}
+
+```ts file="./RadioControlled.tsx"
 ```
 
 ### Uncontrolled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+```ts file="./RadioUncontrolled.tsx"
 ```
 
 ### Reversed
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+```ts file="./RadioReversed.tsx"
 ```
 
 ### Label wraps
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+```ts file="./RadioLabelWraps.tsx"
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
-  <Radio id="radio-disabled-checked" defaultChecked label="Disabled and checked radio example" isDisabled name="radio-6" />
-</React.Fragment>
+
+```ts file="./RadioDisabled.tsx"
 ```
 
 ### With description
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-description" label="Radio with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." />
+```ts file="./RadioWithDescription.tsx"
 ```
 
 ### With body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-body" label="Radio with body" body="This is where custom content goes." />
+```ts file="./RadioWithBody.tsx"
 ```
 
 ### With description and body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-description-body" label="Radio with description and body" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes." />
+```ts file="./RadioWithDescriptionAndBody.tsx"
 ```
 
 ### Standalone input
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone"/>
+```ts file="./RadioStandaloneInput.tsx"
 ```

package/src/components/Radio/examples/RadioControlled.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioControlled: React.FunctionComponent = () => {
+  const [check1, setCheck1] = React.useState(false);
+
+  const handleChange = () => {
+    setCheck1(true);
+  };
+  return (
+    <React.Fragment>
+      <Radio
+        isChecked={check1}
+        name="radio-1"
+        onChange={handleChange}
+        label="Controlled Radio"
+        id="radio-controlled"
+      ></Radio>
+    </React.Fragment>
+  );
+};

package/src/components/Radio/examples/RadioDisabled.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
+    <Radio
+      id="radio-disabled-checked"
+      defaultChecked
+      label="Disabled and checked radio example"
+      isDisabled
+      name="radio-6"
+    />
+  </React.Fragment>
+);

package/src/components/Radio/examples/RadioLabelWraps.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioLabelWraps: React.FunctionComponent = () => (
+  <Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+);

package/src/components/Radio/examples/RadioReversed.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioReversed: React.FunctionComponent = () => (
+  <Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+);

package/src/components/Radio/examples/RadioStandaloneInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioStandaloneInput: React.FunctionComponent = () => (
+  <Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone" />
+);

package/src/components/Radio/examples/RadioUncontrolled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioUncontrolled: React.FunctionComponent = () => (
+  <Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+);

package/src/components/Radio/examples/RadioWithBody.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithBody: React.FunctionComponent = () => (
+  <Radio id="radio-with-body" label="Radio with body" name="radio-8" body="This is where custom content goes." />
+);

package/src/components/Radio/examples/RadioWithDescription.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescription: React.FunctionComponent = () => (
+  <Radio
+    id="radio-with-description"
+    label="Radio with description example"
+    name="radio-7"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+  />
+);

package/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescriptionAndBody: React.FunctionComponent = () => (
+  <Radio
+    id="radio-description-body"
+    label="Radio with description and body"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+    body="This is where custom content goes."
+    name="radio-8"
+  />
+);

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>
+);