diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md index 7199b35ef76..515f83e6432 100644 --- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md @@ -11,167 +11,55 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; ### Basic -```js -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -This is editable; +```ts file="./ClipboardCopyBasic.tsx" ``` ### Read Only -```js -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -This is read-only; +```ts file="./ClipboardCopyReadOnly.tsx" ``` ### Expanded -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - - - Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting - expansion. -; +```ts file="./ClipboardCopyExpanded.tsx" ``` ### Read only expanded -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - - - Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting - expansion. -; +```ts file="./ClipboardCopyReadOnlyExpanded.tsx" ``` ### Read only expanded by default -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - - - Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting - expansion. -; +```ts file="./ClipboardCopyReadOnlyExpandedByDefault.tsx" ``` ### Expanded with array -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - -ClipboardCopyArrayOfElements = () => { - let text = [ - 'Got a lot of text here,', - 'need to see all of it?', - 'Click that arrow on the left side and check out the resulting expansion.' - ]; - return {text.join(' ')}; -}; +```ts file="./ClipboardCopyExpandedWithArray.tsx" ``` ### JSON object (wrap code with pre) -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - - - {`{ "menu": { - "id": "file", - "value": "File", - "popup": { - "menuitem": [ - {"value": "New", "onclick": "CreateNewDoc()"}, - {"value": "Open", "onclick": "OpenDoc()"}, - {"value": "Close", "onclick": "CloseDoc()"} - ] - } -}} `} -; +```ts file="./ClipboardCopyJSONObject.tsx" ``` ### Inline compact -```js -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -2.3.4-2-redhat; +```ts file="./ClipboardCopyInlineCompact.tsx" ``` ### Inline compact code -```js -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - - - 2.3.4-2-redhat -; +```ts file="./ClipboardCopyInlineCompactCode.tsx" ``` ### Inline compact with additional action -```js -import React from 'react'; -import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core'; -import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; - - - - - } -> - 2.3.4-2-redhat -; +```ts file="./ClipboardCopyInlineCompactWithAdditionalAction.tsx" ``` ### Inline compact in sentence -```js -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - - - Basic -
- Lorem ipsum {2.3.4-2-redhat} dolor sit amet. -

- Long copy string -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '} - { - - https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 - - }{' '} - Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. -

- Long copy string in block -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '} - { - - https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 - - }{' '} - Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. -; +```ts file="./ClipboardCopyInlineCompactInSentence.tsx" ``` diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx new file mode 100644 index 00000000000..b1a7d29316e --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ClipboardCopy } from '@patternfly/react-core'; + +export const ClipboardCopyBasic: React.FunctionComponent = () => ( + + This is editable + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx new file mode 100644 index 00000000000..c81d494cb5d --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; + +export const ClipboardCopyExpanded: React.FunctionComponent = () => ( + + Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting + expansion. + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx new file mode 100644 index 00000000000..8eb3c1e6f58 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; + +const text = [ + 'Got a lot of text here,', + 'need to see all of it?', + 'Click that arrow on the left side and check out the resulting expansion.' +]; + +export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => ( + + {text.join(' ')} + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx new file mode 100644 index 00000000000..bdb80f67c1e --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { ClipboardCopy } from '@patternfly/react-core'; +export const ClipboardCopyInlineCompact: React.FunctionComponent = () => ( + + 2.3.4-2-redhat + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx new file mode 100644 index 00000000000..fa1ff0423ae --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ClipboardCopy } from '@patternfly/react-core'; + +export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => ( + + 2.3.4-2-redhat + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx new file mode 100644 index 00000000000..2adab4eafd5 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { ClipboardCopy } from '@patternfly/react-core'; + +export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = () => ( + + Basic +
+ Lorem ipsum{' '} + { + + 2.3.4-2-redhat + + } + dolor sit amet. +

+ Long copy string +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '} + { + + https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 + + }{' '} + Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. +

+ Long copy string in block +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '} + { + + https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 + + }{' '} + Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx new file mode 100644 index 00000000000..bfb39e08afb --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; + +export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => ( + + + + } + > + 2.3.4-2-redhat + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx new file mode 100644 index 00000000000..92a85a4c8f9 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; + +export const ClipboardCopyJSONObject: React.FunctionComponent = () => ( + + {`{ "menu": { + "id": "file", + "value": "File", + "popup": { + "menuitem": [ + {"value": "New", "onclick": "CreateNewDoc()"}, + {"value": "Open", "onclick": "OpenDoc()"}, + {"value": "Close", "onclick": "CloseDoc()"} + ] + } + }} `} + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx new file mode 100644 index 00000000000..1d133b97364 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ClipboardCopy } from '@patternfly/react-core'; + +export const ClipboardCopyReadOnly: React.FunctionComponent = () => ( + + This is read-only + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx new file mode 100644 index 00000000000..985919999dd --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; + +export const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => ( + + Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting + expansion. + +); diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx new file mode 100644 index 00000000000..b7963fbb3c9 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; + +export const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => ( + + Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting + expansion. + +);