diff --git a/packages/react-core/index.d.ts b/packages/react-core/index.d.ts new file mode 100644 index 00000000000..cdb2b1a9a23 --- /dev/null +++ b/packages/react-core/index.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +} diff --git a/packages/react-core/src/components/BackToTop/examples/BackToTop.css b/packages/react-core/src/components/BackToTop/examples/BackToTop.css index be127704d46..299d5e26a3b 100644 --- a/packages/react-core/src/components/BackToTop/examples/BackToTop.css +++ b/packages/react-core/src/components/BackToTop/examples/BackToTop.css @@ -1,4 +1,4 @@ #ws-react-c-back-to-top-basic { - height: 300px; - position: relative; -} \ No newline at end of file + height: 300px; + position: relative; +} diff --git a/packages/react-core/src/components/BackToTop/examples/BackToTop.md b/packages/react-core/src/components/BackToTop/examples/BackToTop.md index 23b13caa7c0..66ecb6b328e 100644 --- a/packages/react-core/src/components/BackToTop/examples/BackToTop.md +++ b/packages/react-core/src/components/BackToTop/examples/BackToTop.md @@ -16,9 +16,5 @@ Back to top only shows after overflowing element has been scrolled 400px. ### Basic -```js -import React from 'react'; -import { BackToTop } from '@patternfly/react-core'; - - +```ts file="./BackToTopBasic.tsx" ``` diff --git a/packages/react-core/src/components/BackToTop/examples/BackToTopBasic.tsx b/packages/react-core/src/components/BackToTop/examples/BackToTopBasic.tsx new file mode 100644 index 00000000000..3ff05cc5c52 --- /dev/null +++ b/packages/react-core/src/components/BackToTop/examples/BackToTopBasic.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { BackToTop } from '@patternfly/react-core'; + +export const BackToTopBasic: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/Backdrop/examples/Backdrop.md b/packages/react-core/src/components/Backdrop/examples/Backdrop.md index f432236d922..e3006fc33be 100644 --- a/packages/react-core/src/components/Backdrop/examples/Backdrop.md +++ b/packages/react-core/src/components/Backdrop/examples/Backdrop.md @@ -6,22 +6,13 @@ propComponents: ['Backdrop'] --- ## Examples + ### Basic -```js isFullscreen -import React from 'react'; -import { Backdrop } from '@patternfly/react-core'; - +```ts isFullscreen file="./BackdropBasic.tsx" ``` ### With spinner -```js isFullscreen -import React from 'react'; -import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core'; - - - - - +```ts isFullscreen file="./BackdropSpinner.tsx" ``` diff --git a/packages/react-core/src/components/Backdrop/examples/BackdropBasic.tsx b/packages/react-core/src/components/Backdrop/examples/BackdropBasic.tsx new file mode 100644 index 00000000000..642e27428f7 --- /dev/null +++ b/packages/react-core/src/components/Backdrop/examples/BackdropBasic.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { Backdrop } from '@patternfly/react-core'; + +export const BackdropBasic: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx new file mode 100644 index 00000000000..9f6d48426e9 --- /dev/null +++ b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core'; + +export const BackdropSpinner: React.FunctionComponent = () => ( + + + + + +); diff --git a/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md b/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md index f604346f1f7..548ec4c3c35 100644 --- a/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md +++ b/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md @@ -6,27 +6,8 @@ propComponents: ['BackgroundImage'] --- ## Examples + ### Basic -```js isFullscreen -import React from 'react'; -import { BackgroundImage } from '@patternfly/react-core'; -class SimpleBackgroundImage extends React.Component { - constructor(props) { - super(props); - /** - * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier - */ - this.images = { - 'xs': '/assets/images/pfbg_576.jpg', - 'xs2x': '/assets/images/pfbg_576@2x.jpg', - 'sm': '/assets/images/pfbg_768.jpg', - 'sm2x': '/assets/images/pfbg_768@2x.jpg', - 'lg': '/assets/images/pfbg_1200.jpg' - }; - } - render() { - return ; - } -} +```ts isFullscreen file="./BackgroundImageBasic.tsx" ``` diff --git a/packages/react-core/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx b/packages/react-core/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx new file mode 100644 index 00000000000..cdf92cc933d --- /dev/null +++ b/packages/react-core/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { BackgroundImage } from '@patternfly/react-core'; + +/** + * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier + */ +const images = { + xs: '/assets/images/pfbg_576.jpg', + xs2x: '/assets/images/pfbg_576@2x.jpg', + sm: '/assets/images/pfbg_768.jpg', + sm2x: '/assets/images/pfbg_768@2x.jpg', + lg: '/assets/images/pfbg_1200.jpg' +}; + +export const BackgroundImageBasic: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md index 120603cd09e..0afb2abc282 100644 --- a/packages/react-core/src/components/Badge/examples/Badge.md +++ b/packages/react-core/src/components/Badge/examples/Badge.md @@ -6,34 +6,13 @@ propComponents: ['Badge'] --- ## Examples + ### Read -```js -import React from 'react'; -import { Badge } from '@patternfly/react-core'; - - 7 - {' '} - 24 - {' '} - 240 - {' '} - 999+ - +```ts file="./BadgeRead.tsx" ``` ### Unread -```js -import React from 'react'; -import { Badge } from '@patternfly/react-core'; - - 7 - {' '} - 24 - {' '} - 240 - {' '} - 999+ - +```ts file="./BadgeUnread.tsx" ``` diff --git a/packages/react-core/src/components/Badge/examples/BadgeRead.tsx b/packages/react-core/src/components/Badge/examples/BadgeRead.tsx new file mode 100644 index 00000000000..f9e16286453 --- /dev/null +++ b/packages/react-core/src/components/Badge/examples/BadgeRead.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +export const BadgeRead: React.FunctionComponent = () => ( + + + 7 + {' '} + + 24 + {' '} + + 240 + {' '} + + 999+ + + +); diff --git a/packages/react-core/src/components/Badge/examples/BadgeUnread.tsx b/packages/react-core/src/components/Badge/examples/BadgeUnread.tsx new file mode 100644 index 00000000000..19c2e4bb3cf --- /dev/null +++ b/packages/react-core/src/components/Badge/examples/BadgeUnread.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +export const BadgeUnread: React.FunctionComponent = () => ( + + 7 24 240 999+ + +); diff --git a/packages/react-core/src/components/Banner/examples/Banner.md b/packages/react-core/src/components/Banner/examples/Banner.md index 8cc06de8a1e..8669d5220ea 100644 --- a/packages/react-core/src/components/Banner/examples/Banner.md +++ b/packages/react-core/src/components/Banner/examples/Banner.md @@ -8,19 +8,6 @@ propComponents: ['Banner'] ## Examples ### Basic -```js -import React from 'react'; -import { Banner } from '@patternfly/react-core'; - - Default banner -
- Info banner -
- Danger banner -
- Success banner -
- Warning banner - +```ts file="./BannerBasic.tsx" ``` diff --git a/packages/react-core/src/components/Banner/examples/BannerBasic.tsx b/packages/react-core/src/components/Banner/examples/BannerBasic.tsx new file mode 100644 index 00000000000..a293f7fe631 --- /dev/null +++ b/packages/react-core/src/components/Banner/examples/BannerBasic.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Banner } from '@patternfly/react-core'; + +export const BannerBasic: React.FunctionComponent = () => ( + + Default banner +
+ Info banner +
+ Danger banner +
+ Success banner +
+ Warning banner + +); diff --git a/packages/react-core/src/components/Brand/examples/Brand.md b/packages/react-core/src/components/Brand/examples/Brand.md index a9e85b0cada..029768e38d0 100644 --- a/packages/react-core/src/components/Brand/examples/Brand.md +++ b/packages/react-core/src/components/Brand/examples/Brand.md @@ -4,14 +4,12 @@ section: components cssPrefix: null propComponents: ['Brand'] --- + import pfLogo from './pfLogo.svg'; ## Examples + ### Basic -```js -import React from 'react'; -import { Brand } from '@patternfly/react-core'; -import pfLogo from './examples/pfLogo.svg'; - +```ts file="./BrandBasic.tsx" ``` diff --git a/packages/react-core/src/components/Brand/examples/BrandBasic.tsx b/packages/react-core/src/components/Brand/examples/BrandBasic.tsx new file mode 100644 index 00000000000..c6e1dcfb185 --- /dev/null +++ b/packages/react-core/src/components/Brand/examples/BrandBasic.tsx @@ -0,0 +1,5 @@ +import React from 'react'; +import { Brand } from '@patternfly/react-core'; +import pfLogo from './pfLogo.svg'; + +export const BrandBasic: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md index 93918b7ff71..0fa86853556 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md +++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md @@ -12,121 +12,20 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico ### Basic -```js -import React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; - - - Section home - Section title - Section title - - Section landing - -; +```ts file="./BreadcrumbBasic.tsx" ``` ### Without home link -```js -import React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; - - - Section Home - Section title - Section title - Section title - Section title - - Section landing - -; +```ts file="./BreadcrumbWithoutHomeLink.tsx" ``` ### With heading -```js -import React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; - - - Section home - Section title - Section title - Section title - Section title -; +```ts file="./BreadcrumbWithHeading.tsx" ``` ### With dropdown -```js -import React from 'react'; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbHeading, - Dropdown, - DropdownItem, - BadgeToggle -} from '@patternfly/react-core'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; - -class BreadcrumbDropdown extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id'); - element.focus(); - }; - } - - render() { - const { isOpen } = this.state; - const dropdownItems = [ - }> - Edit - , - }> - Deployment - , - }> - Applications - - ]; - return ( - - Section home - - - {dropdownItems.length} - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - - Section title - - ); - } -} +```ts file="./BreadcrumbDropdown.tsx" ``` diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx new file mode 100644 index 00000000000..d5d6c0f3e60 --- /dev/null +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; + +export const BreadcrumbBasic: React.FunctionComponent = () => ( + + Section home + Section title + Section title + + Section landing + + +); diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx new file mode 100644 index 00000000000..70ed91cf735 --- /dev/null +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbHeading, + Dropdown, + BadgeToggle, + DropdownItem +} from '@patternfly/react-core'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; + +const dropdownItems: JSX.Element[] = [ + }> + Edit + , + }> + Deployment + , + }> + Applications + +]; + +export const BreadcrumbDropdown: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + const badgeToggleRef = React.useRef(); + + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + + const onSelect = () => { + setIsOpen((prevIsOpen: boolean) => !prevIsOpen); + badgeToggleRef.current.focus(); + }; + + return ( + + Section home + + + {dropdownItems.length} + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + + Section title + + ); +}; diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithHeading.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithHeading.tsx new file mode 100644 index 00000000000..bf811d1bbe9 --- /dev/null +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithHeading.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; + +export const BreadcrumbWithHeading: React.FunctionComponent = () => ( + + Section home + Section title + Section title + Section title + Section title + +); diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithoutHomeLink.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithoutHomeLink.tsx new file mode 100644 index 00000000000..74777e99b13 --- /dev/null +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbWithoutHomeLink.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; + +export const BreadcrumbHomeLink: React.FunctionComponent = () => ( + + Section Home + Section title + Section title + Section title + Section title + + Section landing + + +); diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx index 43bce4e68f8..1bea26b7b56 100644 --- a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx @@ -1,43 +1,39 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const ButtonAriaDisabled: React.FunctionComponent = () => ( - - - - - - - - - - - - - - - - - - + + {' '} + {' '} + {' '} + {' '} + +
+
+ {' '} + {' '} + {' '} + {' '} + + ); diff --git a/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx b/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx index efdf1ffcd35..934c57a7426 100644 --- a/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx @@ -1,20 +1,22 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; export const ButtonCallToAction: React.FunctionComponent = () => ( - + + {' '} + {' '} + {' '} - +
+
+ ); diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx index b9d421240c1..3deb37bff32 100644 --- a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx @@ -1,43 +1,39 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const ButtonDisabled: React.FunctionComponent = () => ( - - - - - - - - - - - - - - - - - - + + {' '} + {' '} + {' '} + {' '} + +
+
+ {' '} + {' '} + {' '} + {' '} + + ); diff --git a/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx b/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx index 25ac07115bc..7e532c196c9 100644 --- a/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx @@ -13,7 +13,7 @@ const handleKeydown = (event: React.KeyboardEvent) => { }; export const ButtonInlineSpanLink: React.FunctionComponent = () => ( - <> +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.

- + ); diff --git a/packages/react-core/src/components/Button/examples/ButtonLinks.tsx b/packages/react-core/src/components/Button/examples/ButtonLinks.tsx index c6f7334e31f..232be49f72a 100644 --- a/packages/react-core/src/components/Button/examples/ButtonLinks.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonLinks.tsx @@ -1,19 +1,19 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; export const ButtonLinks: React.FunctionComponent = () => ( - + + {' '} + {' '} + {' '} - + ); diff --git a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx index a0243494431..d8a5fcc9990 100644 --- a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx @@ -1,22 +1,23 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; export const ButtonProgress: React.FunctionComponent = () => { const [isPrimaryLoading, setIsPrimaryLoading] = React.useState(true); const [isSecondaryLoading, setIsSecondaryLoading] = React.useState(true); return ( - + - + {' '} - +
+
+ ); }; diff --git a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx index 26e21960fe5..9e32fe99e65 100644 --- a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx @@ -1,22 +1,24 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; export const ButtonSmall: React.FunctionComponent = () => ( - + + {' '} + {' '} + {' '} + {' '} - +
+
+ ); diff --git a/packages/react-core/src/components/Button/examples/ButtonTypes.tsx b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx index 51cb5ae3f9d..7fd63e119b1 100644 --- a/packages/react-core/src/components/Button/examples/ButtonTypes.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx @@ -1,10 +1,8 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; export const ButtonTypes: React.FunctionComponent = () => ( - - - - - + + + ); diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx index 2bcba2abca3..a8693012911 100644 --- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx @@ -1,47 +1,42 @@ import React from 'react'; -import { Button, Flex } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; export const ButtonVariations: React.FunctionComponent = () => ( - - - - - - - - - - - - - - - - - + + {' '} + {' '} + {' '} + +
+
+ {' '} + {' '} + {' '} + +
+
- - - - - - +
+
+ {' '} + + );