From 4a9532b1d74a88a30d1312489420c31427f49ef5 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 29 Mar 2022 15:34:20 -0400 Subject: [PATCH] chore(DescriptionList): convert examples to TypeScript --- .../examples/DescriptionList.md | 952 +----------------- .../examples/DescriptionListAutoFitBasic.tsx | 40 + ...DescriptionListAutoFitMinWidthModified.tsx | 40 + ...scriptionListAutoFitMinWidthResponsive.tsx | 40 + .../examples/DescriptionListBasic.tsx | 40 + .../examples/DescriptionListColumnFill.tsx | 42 + .../examples/DescriptionListCompact.tsx | 40 + .../DescriptionListCompactHorizontal.tsx | 40 + .../DescriptionListDefaultAutoColumn.tsx | 40 + .../DescriptionListDefaultInlineGrid.tsx | 40 + ...escriptionListDefaultResponsiveColumns.tsx | 40 + .../DescriptionListDefaultThreeColLg.tsx | 40 + .../examples/DescriptionListDefaultTwoCol.tsx | 44 + .../DescriptionListFluidHorizontal.tsx | 40 + .../examples/DescriptionListHorizontal.tsx | 40 + .../DescriptionListHorizontalAutoColumn.tsx | 40 + ...scriptionListHorizontalCustomTermWidth.tsx | 50 + ...riptionListHorizontalResponsiveColumns.tsx | 40 + .../DescriptionListHorizontalThreeColLg.tsx | 40 + .../DescriptionListHorizontalTwoCol.tsx | 40 + .../examples/DescriptionListIconsOnTerms.tsx | 45 + ...DescriptionListResponsiveHoriVertGroup.tsx | 48 + .../DescriptionListWithTermHelpText.tsx | 62 ++ 23 files changed, 953 insertions(+), 930 deletions(-) create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx create mode 100644 packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md index 8d80f1cf5bc..77ab17730da 100644 --- a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md @@ -26,1028 +26,120 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon'; ### Basic -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListBasic.tsx' ``` ### Term help text -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription, - DescriptionListTermHelpText, - DescriptionListTermHelpTextButton, - Popover -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - - Name} bodyContent={
Additional name info
}> - Name - - - Example - - - - Namespace} bodyContent={
Additional namespace info
}> - Namespace - - - - mary-test - - - - - Labels} bodyContent={
Additional labels info
}> - Labels - - - example - - - - Pod selector} bodyContent={
Additional pod selector info
}> - Pod selector - - - - - - - - - Annotation} bodyContent={
Additional annotation info
}> - Annotation - - - 2 Annotations - -; +```ts file='./DescriptionListWithTermHelpText.tsx' ``` ### Default 2 col -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListDefaultTwoCol.tsx' ``` ### Default 3 col on lg -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListDefaultThreeColLg.tsx' ``` ### Horizontal -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - -const DescriptionListHorizontal = () => { - return ( - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - - - ) -} +```ts file='./DescriptionListHorizontal.tsx' ``` ### Horizontal using custom term width modifier -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription, -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - -const DescriptionListHorizontalTermWidthModifier = () => { - return ( - - - Name longer than the default term width - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - - - ) -} +```ts file='./DescriptionListHorizontalCustomTermWidth.tsx' ``` ### Horizontal 2 col -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListHorizontalTwoCol.tsx' ``` ### Horizontal 3 col on lg -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListHorizontalThreeColLg.tsx' ``` ### Compact -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListCompact.tsx' ``` ### Compact horizontal -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListCompactHorizontal.tsx' ``` ### Fluid horizontal -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListFluidHorizontal.tsx' ``` ### Column fill -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - - This is a long description that should wrap to multiple lines in a multi-column layout. - - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListColumnFill.tsx' ``` ## Responsive column definitions ### Default responsive columns -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListDefaultResponsiveColumns.tsx' ``` ### Horizontal responsive columns -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListHorizontalResponsiveColumns.tsx' ``` ### Responsive horizontal, vertical group layout -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListResponsiveHoriVertGroup.tsx' ``` ## Auto-column-width ### Default auto column width -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListDefaultAutoColumn.tsx' ``` ### Horizontal auto column width -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListHorizontalAutoColumn.tsx' ``` ## Inline grid ### Default inline grid -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListDefaultInlineGrid.tsx' ``` ## Auto fit ### Auto-fit basic -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListAutoFitBasic.tsx' ``` ### Auto-fit, min width modified grid template columns -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListAutoFitMinWidthModified.tsx' ``` ### Auto-fit, min width modified, responsive grid template columns -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListText, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; - - - - Name - example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - -; +```ts file='./DescriptionListAutoFitMinWidthResponsive.tsx' ``` ## With icons ### Icons on terms -```js -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon'; -import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon'; -import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; -import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon'; - - - - }>Name - Example - - - }>Namespace - - mary-test - - - - }>Labels - example - - - }>Pod selector - - - - - - }>Annotation - 2 Annotations - -; +```ts file='./DescriptionListIconsOnTerms.tsx' ``` diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx new file mode 100644 index 00000000000..350ce0c3244 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListAutoFitBasic: React.FunctionComponent = () => ( + + + Name + example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx new file mode 100644 index 00000000000..a9a7f930f60 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => ( + + + Name + example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx new file mode 100644 index 00000000000..c6a6baf0967 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => ( + + + Name + example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx new file mode 100644 index 00000000000..2e757d7c134 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListBasic: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx new file mode 100644 index 00000000000..4130504079d --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListColumnFill: React.FunctionComponent = () => ( + + + Name + + This is a long description that should wrap to multiple lines in a multi-column layout. + + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx new file mode 100644 index 00000000000..b88b87a1dce --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListCompact: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx new file mode 100644 index 00000000000..9f830d4dc11 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListCompactHorizontal: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx new file mode 100644 index 00000000000..faafefab01b --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx new file mode 100644 index 00000000000..f7efc50cf19 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx new file mode 100644 index 00000000000..62831bc0a1b --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx new file mode 100644 index 00000000000..06e60b06979 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx new file mode 100644 index 00000000000..a06a0d48aac --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDefaultTwoCol: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx new file mode 100644 index 00000000000..152d4142490 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListFluidHorizontal: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx new file mode 100644 index 00000000000..9ef28e516af --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontal: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx new file mode 100644 index 00000000000..28c76e77467 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx new file mode 100644 index 00000000000..888cc033939 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent = () => ( + + + Name longer than the default term width + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx new file mode 100644 index 00000000000..22f77d4cabd --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx new file mode 100644 index 00000000000..a582b4dfaca --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx new file mode 100644 index 00000000000..3e43bf50592 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx new file mode 100644 index 00000000000..98d896285f9 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon'; +import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon'; +import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; +import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon'; + +export const DescriptionListIconsOnTerms: React.FunctionComponent = () => ( + + + }>Name + Example + + + }>Namespace + + mary-test + + + + }>Labels + example + + + }>Pod selector + + + + + + }>Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx new file mode 100644 index 00000000000..e60d592fdf9 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = () => ( + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + +); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx new file mode 100644 index 00000000000..297995a4a2d --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListGroup, + DescriptionListDescription, + DescriptionListTermHelpText, + DescriptionListTermHelpTextButton, + Popover +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListWithTermHelpText: React.FunctionComponent = () => ( + + + + Name} bodyContent={
Additional name info
}> + Name + + + Example + + + + Namespace} bodyContent={
Additional namespace info
}> + Namespace + + + + mary-test + + + + + Labels} bodyContent={
Additional labels info
}> + Labels + + + example + + + + Pod selector} bodyContent={
Additional pod selector info
}> + Pod selector + + + + + + + + + Annotation} bodyContent={
Additional annotation info
}> + Annotation + + + 2 Annotations + + +);