diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index aae416129a4..b3514be92e5 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -21,447 +21,36 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Open tabs -```js isFullscreen -import { useState } from 'react'; -import { - PageSection, - PageBreadcrumb, - Breadcrumb, - BreadcrumbItem, - Tabs, - Tab, - TabContent, - TabContentBody, - TabTitleText, - Title, - DescriptionList, - DescriptionListGroup, - DescriptionListTerm, - DescriptionListDescription, - Label, - LabelGroup, - Flex, - FlexItem -} from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; -import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; - -TabsOpenDemo = () => { - const [activeTabKey, setActiveTabKey] = useState(0); +```ts file="examples/Tabs/TabsOpen.tsx" isFullscreen - // Toggle currently active tab - const handleTabClick = (event, tabIndex) => { - setActiveTabKey(tabIndex); - }; - - const tabsBreadcrumb = ( - - - Overview - Pods - - Pod details{' '} - - - - ); - - const tabContent = ( - - - - Pod details - - - - - - Name - 3scale-control-fccb6ddb9-phyqv9 - - - Status - - - - - - Running - - - - - Namespace - - - - - - - knative-serving-ingress - - - - - - Restart policy - Always restart - - - Labels - - - - - - - - - Active deadline seconds - Not configured - - - Tolerations - stuff - - - Pod IP - 10..345.2.197 - - - Annotations - stuff - - - Node - - - - - - ip-10-0-233-118.us-east-2.computer.external - - - - - Created at - - - - - - - - ); - - return ( - - {tabsBreadcrumb} - - - - - - - - 3scale-control-fccb6ddb9-phyqv9 - - - - - - - - - - Details} tabContentId={`tabContent${0}`} /> - YAML} tabContentId={`tabContent${1}`} /> - Environment} tabContentId={`tabContent${2}`} /> - Events} tabContentId={`tabContent${3}`} /> - Terminal} tabContentId={`tabContent${4}`} /> - - - - - - - - - - - ); -}; ``` ### Open tabs with secondary tabs -```js isFullscreen -import { useState } from 'react'; -import { - PageSection, - PageBreadcrumb, - Breadcrumb, - BreadcrumbItem, - Tabs, - Tab, - TabContent, - TabContentBody, - TabTitleText, - Title, - DescriptionList, - DescriptionListGroup, - DescriptionListTerm, - DescriptionListDescription, - Label, - LabelGroup, - Flex, - FlexItem -} from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; -import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; - -TabsOpenWithSecondaryTabsDemo = () => { - const [activeTabKey, setActiveTabKey] = useState(0); - const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); - - // Toggle currently active tab - const handleTabClick = (event, tabIndex) => { - setActiveTabKey(tabIndex); - }; - - // Toggle currently active secondary tab - const handleTabClickSecondary = (event, tabIndex) => { - setActiveTabKeySecondary(tabIndex); - }; - - const tabsBreadcrumb = ( - - - Overview - Pods - - Pod details{' '} - - - - ); - - const tabContent = ( - - - - Pod details - - - - - - Name - 3scale-control-fccb6ddb9-phyqv9 - - - Status - - - - - - Running - - - - - Namespace - - - - - - - knative-serving-ingress - - - - - - Restart policy - Always restart - - - Labels - - - - - - - - - Active deadline seconds - Not configured - - - Tolerations - stuff - - - Pod IP - 10..345.2.197 - - - Annotations - stuff - - - Node - - - - - - ip-10-0-233-118.us-east-2.computer.external - - - - - Created at - - - - - - - - ); +```ts file="examples/Tabs/TabsOpenWithSecondaryTabs.tsx" isFullscreen - return ( - - {tabsBreadcrumb} - - - - - - - - 3scale-control-fccb6ddb9-phyqv9 - - - - - - - - - - Details} tabContentId={`tabContent${0}`} /> - YAML} tabContentId={`tabContent${1}`} /> - Environment} tabContentId={`tabContent${2}`} /> - Events} tabContentId={`tabContent${3}`} /> - Terminal} tabContentId={`tabContent${4}`} /> - - - - - - - - - - - ); -}; ``` ### Nested tabs -```js isFullscreen file="./examples/Tabs/NestedTabs.tsx" +```ts isFullscreen file="examples/Tabs/NestedTabs.tsx" ``` ### Nested, unindented tabs -```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx" +```ts isFullscreen file="examples/Tabs/NestedUnindentedTabs.tsx" ``` ### Tables and tabs -```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx" +```ts isFullscreen file="examples/Tabs/TabsAndTable.tsx" ``` ### Modal tabs -```js isFullscreen file="./examples/Tabs/ModalTabs.tsx" +```ts isFullscreen file="examples/Tabs/ModalTabs.tsx" ``` diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx new file mode 100644 index 00000000000..57cb2bc9672 --- /dev/null +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx @@ -0,0 +1,185 @@ +import { useState } from 'react'; +import { + PageSection, + PageBreadcrumb, + Breadcrumb, + BreadcrumbItem, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + DescriptionList, + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + LabelGroup, + Flex, + FlexItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +export const TabsOpen: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + + // Toggle currently active tab + const handleTabClick = (_event: React.MouseEvent, tabIndex: number | string) => { + setActiveTabKey(tabIndex); + }; + + const tabsBreadcrumb = ( + + + Overview + Pods + + Pod details{' '} + + + + ); + + const tabContent = ( + + + + Pod details + + + + + + Name + 3scale-control-fccb6ddb9-phyqv9 + + + Status + + + + + + Running + + + + + Namespace + + + + + + + knative-serving-ingress + + + + + + Restart policy + Always restart + + + Labels + + + + + + + + + Active deadline seconds + Not configured + + + Tolerations + stuff + + + Pod IP + 10.345.2.197 + + + Annotations + stuff + + + Node + + + + + + ip-10-0-233-118.us-east-2.computer.external + + + + + Created at + + + + + + + + ); + + return ( + + {tabsBreadcrumb} + + + + + + + + 3scale-control-fccb6ddb9-phyqv9 + + + + + + + + + + Details} tabContentId={`tabContent${0}`} /> + YAML} tabContentId={`tabContent${1}`} /> + Environment} tabContentId={`tabContent${2}`} /> + Events} tabContentId={`tabContent${3}`} /> + Terminal} tabContentId={`tabContent${4}`} /> + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx new file mode 100644 index 00000000000..1bd0223ee17 --- /dev/null +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx @@ -0,0 +1,228 @@ +import { useState } from 'react'; +import { + PageSection, + PageBreadcrumb, + Breadcrumb, + BreadcrumbItem, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + DescriptionList, + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + LabelGroup, + Flex, + FlexItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); + + // Toggle currently active tab + const handleTabClick = (_event: React.MouseEvent, tabIndex: number) => { + setActiveTabKey(tabIndex); + }; + + // Toggle currently active secondary tab + const handleTabClickSecondary = (_event: React.MouseEvent, tabIndex: number) => { + setActiveTabKeySecondary(tabIndex); + }; + + const tabsBreadcrumb = ( + + + Overview + Pods + + Pod details{' '} + + + + ); + + const tabContent = ( + + + + Pod details + + + + + + Name + 3scale-control-fccb6ddb9-phyqv9 + + + Status + + + + + + Running + + + + + Namespace + + + + + + + knative-serving-ingress + + + + + + Restart policy + Always restart + + + Labels + + + + + + + + + Active deadline seconds + Not configured + + + Tolerations + stuff + + + Pod IP + 10.345.2.197 + + + Annotations + stuff + + + Node + + + + + + ip-10-0-233-118.us-east-2.computer.external + + + + + Created at + + + + + + + + ); + + return ( + + {tabsBreadcrumb} + + + + + + + + 3scale-control-fccb6ddb9-phyqv9 + + + + + + + + + + Details} tabContentId={`tabContent${0}`} /> + YAML} tabContentId={`tabContent${1}`} /> + Environment} tabContentId={`tabContent${2}`} /> + Events} tabContentId={`tabContent${3}`} /> + Terminal} tabContentId={`tabContent${4}`} /> + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/layouts/Gallery/examples/Gallery.md b/packages/react-core/src/layouts/Gallery/examples/Gallery.md index 6681d2fecf3..f8b0d998e51 100644 --- a/packages/react-core/src/layouts/Gallery/examples/Gallery.md +++ b/packages/react-core/src/layouts/Gallery/examples/Gallery.md @@ -12,123 +12,32 @@ import './gallery.css'; ### Basic -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryBasic.tsx" + ``` ### With gutters -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryWithGutters.tsx" ``` ### Adjusting min widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMinWidths.tsx" + ``` ### Adjusting max widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMaxWidths.tsx" ``` ### Adjusting min and max widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMinMaxWidths.tsx" ``` ### Alternative components -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery item - Gallery item - Gallery item - Gallery item - Gallery item -; +```ts file="GalleryAlternativeComponents.tsx" ``` diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx new file mode 100644 index 00000000000..137031ad0dd --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx @@ -0,0 +1,21 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMaxWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx new file mode 100644 index 00000000000..084446447b7 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx @@ -0,0 +1,25 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMinMaxWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx new file mode 100644 index 00000000000..7990b401f8c --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx @@ -0,0 +1,22 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMinWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx new file mode 100644 index 00000000000..29cece740e8 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx @@ -0,0 +1,11 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAlternativeComponents: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx new file mode 100644 index 00000000000..a043e634be9 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx @@ -0,0 +1,14 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryBasic: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx new file mode 100644 index 00000000000..88402f0465d --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx @@ -0,0 +1,12 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryWithGutters: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +);