From 1d2267277038374839b57a5a08515e107a374124 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 14 Mar 2022 17:06:30 -0400 Subject: [PATCH 1/2] convert clipboard copy examples to ts --- .../ClipboardCopy/examples/ClipboardCopy.md | 210 ++++++++++-------- 1 file changed, 120 insertions(+), 90 deletions(-) diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md index 7199b35ef76..cef4a2c2f01 100644 --- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md @@ -11,167 +11,197 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; ### Basic -```js +```ts import React from 'react'; import { ClipboardCopy } from '@patternfly/react-core'; -This is editable; +export const ClipboardCopyBasic: React.FunctionComponent = () => ( + + This is editable + +); ``` ### Read Only -```js +```ts import React from 'react'; import { ClipboardCopy } from '@patternfly/react-core'; -This is read-only; +export const ClipboardCopyReadOnly: React.FunctionComponent = () => ( + + This is read-only + +); ``` ### Expanded -```js +```ts 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. -; +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. + +); ``` ### Read only expanded -```js +```ts 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. -; +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. + +); ``` ### Read only expanded by default -```js +```ts 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. -; +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. + +); ``` ### Expanded with array -```js +```ts 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(' ')}; -}; +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.' +]; + +export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => ( + + {text.join(' ')} + +); ``` ### JSON object (wrap code with pre) -```js +```ts 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()"} - ] - } -}} `} -; +export const ClipboardCopyJSONObject: React.FunctionComponent = () => ( + + {`{ "menu": { + "id": "file", + "value": "File", + "popup": { + "menuitem": [ + {"value": "New", "onclick": "CreateNewDoc()"}, + {"value": "Open", "onclick": "OpenDoc()"}, + {"value": "Close", "onclick": "CloseDoc()"} + ] + } + }} `} + +); ``` ### Inline compact -```js +```ts import React from 'react'; import { ClipboardCopy } from '@patternfly/react-core'; - -2.3.4-2-redhat; +export const ClipboardCopyInlineCompact: React.FunctionComponent = () => ( + + 2.3.4-2-redhat + +); ``` ### Inline compact code -```js +```ts import React from 'react'; import { ClipboardCopy } from '@patternfly/react-core'; - - 2.3.4-2-redhat -; +export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => ( + + 2.3.4-2-redhat + +); ``` ### Inline compact with additional action -```js +```ts 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 -; +export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => ( + + + + } + > + 2.3.4-2-redhat + +); ``` ### Inline compact in sentence -```js +```ts 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. -; +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. + +); ``` From f180d094eee6d7b97d8bdb0889a446a6845f3526 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 15 Mar 2022 16:49:58 -0400 Subject: [PATCH 2/2] move to separate TSX files --- .../ClipboardCopy/examples/ClipboardCopy.md | 164 ++---------------- .../examples/ClipboardCopyBasic.tsx | 8 + .../examples/ClipboardCopyExpanded.tsx | 9 + .../ClipboardCopyExpandedWithArray.tsx | 14 ++ .../examples/ClipboardCopyInlineCompact.tsx | 7 + .../ClipboardCopyInlineCompactCode.tsx | 8 + .../ClipboardCopyInlineCompactInSentence.tsx | 36 ++++ ...dCopyInlineCompactWithAdditionalAction.tsx | 20 +++ .../examples/ClipboardCopyJSONObject.tsx | 18 ++ .../examples/ClipboardCopyReadOnly.tsx | 8 + .../ClipboardCopyReadOnlyExpanded.tsx | 9 + ...ClipboardCopyReadOnlyExpandedByDefault.tsx | 9 + 12 files changed, 157 insertions(+), 153 deletions(-) create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx create mode 100644 packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md index cef4a2c2f01..515f83e6432 100644 --- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md @@ -11,197 +11,55 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; ### Basic -```ts -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -export const ClipboardCopyBasic: React.FunctionComponent = () => ( - - This is editable - -); +```ts file="./ClipboardCopyBasic.tsx" ``` ### Read Only -```ts -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -export const ClipboardCopyReadOnly: React.FunctionComponent = () => ( - - This is read-only - -); +```ts file="./ClipboardCopyReadOnly.tsx" ``` ### Expanded -```ts -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. - -); +```ts file="./ClipboardCopyExpanded.tsx" ``` ### Read only expanded -```ts -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. - -); +```ts file="./ClipboardCopyReadOnlyExpanded.tsx" ``` ### Read only expanded by default -```ts -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. - -); +```ts file="./ClipboardCopyReadOnlyExpandedByDefault.tsx" ``` ### Expanded with array -```ts -import React from 'react'; -import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core'; - -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.' -]; - -export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => ( - - {text.join(' ')} - -); +```ts file="./ClipboardCopyExpandedWithArray.tsx" ``` ### JSON object (wrap code with pre) -```ts -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()"} - ] - } - }} `} - -); +```ts file="./ClipboardCopyJSONObject.tsx" ``` ### Inline compact -```ts -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; -export const ClipboardCopyInlineCompact: React.FunctionComponent = () => ( - - 2.3.4-2-redhat - -); +```ts file="./ClipboardCopyInlineCompact.tsx" ``` ### Inline compact code -```ts -import React from 'react'; -import { ClipboardCopy } from '@patternfly/react-core'; - -export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => ( - - 2.3.4-2-redhat - -); +```ts file="./ClipboardCopyInlineCompactCode.tsx" ``` ### Inline compact with additional action -```ts -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 - -); +```ts file="./ClipboardCopyInlineCompactWithAdditionalAction.tsx" ``` ### Inline compact in sentence -```ts -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. - -); +```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. + +);