diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 80f041d7ab4..f25f38ecf9f 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -11,125 +11,34 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples -Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo). +Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). ### Basic -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; - -
- - - -
; +```ts file="./TileBasic.tsx" ``` ### With subtext -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; - -
- - Subtext goes here - {' '} - - Subtext goes here - {' '} - - Subtext goes here - -
; +```ts file="./TileWithSubtext.tsx" ``` ### With icon -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; - -
- } isSelected={false}> - Subtext goes here - {' '} - } isSelected> - Subtext goes here - {' '} - } isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileWithIcon.tsx" ``` ### Stacked -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- } isStacked isSelected={false}> - Subtext goes here - {' '} - } isStacked isSelected> - Subtext goes here - {' '} - } isStacked isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileStacked.tsx" ``` ### Stacked with large icons -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- } isStacked isDisplayLarge isSelected={false}> - Subtext goes here - {' '} - } isStacked isDisplayLarge isSelected> - Subtext goes here - {' '} - } isStacked isDisplayLarge isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileStackedWithLargeIcons.tsx" ``` ### With extra content -```js -import React from 'react'; -import { Tile, Flex } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- - - } isStacked isSelected={false}> - This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really - really long subtext that goes on for so long that it has to wrap to the next line. - - - - } isStacked isSelected> - This is really really long subtext that goes on for so long that it has to wrap to the next line. - - - - } isStacked isDisabled isSelected={false}> - Subtext goes here - - - -
; +```ts file="./TileWithExtraContent.tsx" ``` diff --git a/packages/react-core/src/components/Tile/examples/TileBasic.tsx b/packages/react-core/src/components/Tile/examples/TileBasic.tsx new file mode 100644 index 00000000000..40549eb85e0 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileBasic.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; + +export const TileBasic: React.FunctionComponent = () => ( +
+ + + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileStacked.tsx b/packages/react-core/src/components/Tile/examples/TileStacked.tsx new file mode 100644 index 00000000000..82728f9cda8 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileStacked.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileStacked: React.FunctionComponent = () => ( +
+ } isStacked isSelected={false}> + Subtext goes here + {' '} + } isStacked isSelected> + Subtext goes here + {' '} + } isStacked isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx b/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx new file mode 100644 index 00000000000..ccaf2ce1c56 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileStackedWithLargeIcons: React.FunctionComponent = () => ( +
+ } isStacked isDisplayLarge isSelected={false}> + Subtext goes here + {' '} + } isStacked isDisplayLarge isSelected> + Subtext goes here + {' '} + } isStacked isDisplayLarge isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx b/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx new file mode 100644 index 00000000000..b71e4094ac6 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Tile, Flex } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileWithExtraContent: React.FunctionComponent = () => ( +
+ + + } isStacked isSelected={false}> + This is really really long subtext that goes on for so long that it has to wrap to the next line. This is + really really long subtext that goes on for so long that it has to wrap to the next line. + + + + } isStacked isSelected> + This is really really long subtext that goes on for so long that it has to wrap to the next line. + + + + } isStacked isDisabled isSelected={false}> + Subtext goes here + + + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx b/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx new file mode 100644 index 00000000000..8d6110b0ab1 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; + +export const TileWithIcon: React.FunctionComponent = () => ( +
+ } isSelected={false}> + Subtext goes here + {' '} + } isSelected> + Subtext goes here + {' '} + } isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx b/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx new file mode 100644 index 00000000000..73e39747999 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; + +export const TileWithSubtext: React.FunctionComponent = () => ( +
+ + Subtext goes here + {' '} + + Subtext goes here + {' '} + + Subtext goes here + +
+); diff --git a/packages/react-core/src/demos/TileDemo.md b/packages/react-core/src/demos/TileDemo.md index 5c47e5410ed..e65369c1383 100644 --- a/packages/react-core/src/demos/TileDemo.md +++ b/packages/react-core/src/demos/TileDemo.md @@ -27,10 +27,10 @@ const TileSingleSelect: React.FunctionComponent = () => { return (
- - - - + + + +
); }; @@ -71,14 +71,14 @@ const TileMultiSelect: React.FunctionComponent = () => { id="multiselect-tile-1" onClick={onSelect} onKeyDown={onKeyDown} - isSelected={selectedIds.includes('tile-1')} + isSelected={selectedIds.includes('multiselect-tile-1')} /> { id="multiselect-tile-4" onClick={onSelect} onKeyDown={onKeyDown} - isSelected={selectedIds.includes('tile-4')} + isSelected={selectedIds.includes('multiselect-tile-4')} /> );