From 20b0433bb33e98d40e7273da27c73d01a34af909 Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Mon, 19 Sep 2022 20:57:42 -0400 Subject: [PATCH 1/4] chore(Text): Convert examples to typescript --- .../src/components/Text/examples/BodyText.tsx | 22 +++ .../Text/examples/DescriptionListText.tsx | 15 ++ .../components/Text/examples/HeadingsText.tsx | 11 ++ .../Text/examples/OrderedListText.tsx | 14 ++ .../src/components/Text/examples/Text.md | 181 +----------------- .../Text/examples/UnorderedListText.tsx | 17 ++ .../components/Text/examples/VisitedText.tsx | 32 ++++ 7 files changed, 117 insertions(+), 175 deletions(-) create mode 100644 packages/react-core/src/components/Text/examples/BodyText.tsx create mode 100644 packages/react-core/src/components/Text/examples/DescriptionListText.tsx create mode 100644 packages/react-core/src/components/Text/examples/HeadingsText.tsx create mode 100644 packages/react-core/src/components/Text/examples/OrderedListText.tsx create mode 100644 packages/react-core/src/components/Text/examples/UnorderedListText.tsx create mode 100644 packages/react-core/src/components/Text/examples/VisitedText.tsx diff --git a/packages/react-core/src/components/Text/examples/BodyText.tsx b/packages/react-core/src/components/Text/examples/BodyText.tsx new file mode 100644 index 00000000000..d267bc2970b --- /dev/null +++ b/packages/react-core/src/components/Text/examples/BodyText.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { TextContent, Text, TextVariants } from '@patternfly/react-core'; + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc + varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, + interdum mattis neque. Sub works as well! + + + Quisque ante lacus, malesuada ac auctor vitae, congue{' '} + + non ante + + . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. + + + Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet + turpis. + + Sometimes you need small text to display things like date created +; diff --git a/packages/react-core/src/components/Text/examples/DescriptionListText.tsx b/packages/react-core/src/components/Text/examples/DescriptionListText.tsx new file mode 100644 index 00000000000..8a3ef8990e1 --- /dev/null +++ b/packages/react-core/src/components/Text/examples/DescriptionListText.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; + + + + Web + + The part of the Internet that contains websites and web pages + + HTML + A markup language for creating web pages + CSS + A technology to make HTML look better + +; diff --git a/packages/react-core/src/components/Text/examples/HeadingsText.tsx b/packages/react-core/src/components/Text/examples/HeadingsText.tsx new file mode 100644 index 00000000000..65481350ee8 --- /dev/null +++ b/packages/react-core/src/components/Text/examples/HeadingsText.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { TextContent, Text, TextVariants } from '@patternfly/react-core'; + + + Hello World + Second level + Third level + Fourth level + Fifth level + Sixth level +; diff --git a/packages/react-core/src/components/Text/examples/OrderedListText.tsx b/packages/react-core/src/components/Text/examples/OrderedListText.tsx new file mode 100644 index 00000000000..ec25e2bc0ff --- /dev/null +++ b/packages/react-core/src/components/Text/examples/OrderedListText.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; + + + + Donec blandit a lorem id convallis. + Cras gravida arcu at diam gravida gravida. + Integer in volutpat libero. + Donec a diam tellus. + Aenean nec tortor orci. + Quisque aliquam cursus urna, non bibendum massa viverra eget. + Vivamus maximus ultricies pulvinar. + +; diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index d8b8b0acdaa..243e3ecc169 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -9,201 +9,32 @@ propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] ### Headings -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants, - TextList, - TextListVariants, - TextListItem, - TextListItemVariants -} from '@patternfly/react-core'; - - - Hello World - Second level - Third level - Fourth level - Fifth level - Sixth level -; +```ts file="./HeadingsText.tsx" ``` ### Body -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants, - TextList, - TextListVariants, - TextListItem, - TextListItemVariants -} from '@patternfly/react-core'; - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc - varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, - interdum mattis neque. Sub works as well! - - - Quisque ante lacus, malesuada ac auctor vitae, congue{' '} - - non ante - - . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. - - - Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet - turpis. - - Sometimes you need small text to display things like date created -; +```ts file="./BodyText.tsx" ``` Text components such as Text, TextList, TextListItem need to be placed within a TextContent ### Unordered list -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants, - TextList, - TextListVariants, - TextListItem, - TextListItemVariants -} from '@patternfly/react-core'; - - - - In fermentum leo eu lectus mollis, quis dictum mi aliquet. - Morbi eu nulla lobortis, lobortis est in, fringilla felis. - - Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - - In fermentum leo eu lectus mollis, quis dictum mi aliquet. - Morbi eu nulla lobortis, lobortis est in, fringilla felis. - - - Ut non enim metus. - -; +```ts file="./UnorderedListText.tsx" ``` ### Ordered list -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants, - TextList, - TextListVariants, - TextListItem, - TextListItemVariants -} from '@patternfly/react-core'; - - - - Donec blandit a lorem id convallis. - Cras gravida arcu at diam gravida gravida. - Integer in volutpat libero. - Donec a diam tellus. - Aenean nec tortor orci. - Quisque aliquam cursus urna, non bibendum massa viverra eget. - Vivamus maximus ultricies pulvinar. - -; +```ts file="./OrderedListText.tsx" ``` ### Description list -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants, - TextList, - TextListVariants, - TextListItem, - TextListItemVariants -} from '@patternfly/react-core'; - - - - Web - - The part of the Internet that contains websites and web pages - - HTML - A markup language for creating web pages - CSS - A technology to make HTML look better - -; +```ts file="./DescriptionListText.tsx" ``` ### Visited -```js -import React from 'react'; -import { - TextContent, - Text, - TextVariants -} from '@patternfly/react-core'; - -TextVisited = () => { - return ( - <> - - Visited link example - - - Visited link - - - -
- - Visited content example - - - content link 1 - - - - - content link 2 - - - - - content link 3 - - - - - ); - -}; +```ts file="./VisitedText.tsx" ``` diff --git a/packages/react-core/src/components/Text/examples/UnorderedListText.tsx b/packages/react-core/src/components/Text/examples/UnorderedListText.tsx new file mode 100644 index 00000000000..71459c6d240 --- /dev/null +++ b/packages/react-core/src/components/Text/examples/UnorderedListText.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { TextContent, TextList, TextListItem } from '@patternfly/react-core'; + + + + In fermentum leo eu lectus mollis, quis dictum mi aliquet. + Morbi eu nulla lobortis, lobortis est in, fringilla felis. + + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + + In fermentum leo eu lectus mollis, quis dictum mi aliquet. + Morbi eu nulla lobortis, lobortis est in, fringilla felis. + + + Ut non enim metus. + +; diff --git a/packages/react-core/src/components/Text/examples/VisitedText.tsx b/packages/react-core/src/components/Text/examples/VisitedText.tsx new file mode 100644 index 00000000000..b4ce7b6f969 --- /dev/null +++ b/packages/react-core/src/components/Text/examples/VisitedText.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { TextContent, Text, TextVariants } from '@patternfly/react-core'; + +<> + + Visited link example + + + Visited link + + + +
+ + Visited content example + + + content link 1 + + + + + ß content link 2 + + + + + content link 3 + + + +; From 86815d9b76e252cf409265aac5a1c58836e2c671 Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Tue, 20 Sep 2022 14:14:02 -0400 Subject: [PATCH 2/4] Refactor example names for consistency --- .../react-core/src/components/Text/examples/Text.md | 12 ++++++------ .../Text/examples/{BodyText.tsx => TextBody.tsx} | 0 ...scriptionListText.tsx => TextDescriptionList.tsx} | 0 .../examples/{HeadingsText.tsx => TextHeadings.tsx} | 0 .../{OrderedListText.tsx => TextOrderedList.tsx} | 0 .../{UnorderedListText.tsx => TextUnorderedList.tsx} | 0 .../examples/{VisitedText.tsx => TextVisited.tsx} | 0 7 files changed, 6 insertions(+), 6 deletions(-) rename packages/react-core/src/components/Text/examples/{BodyText.tsx => TextBody.tsx} (100%) rename packages/react-core/src/components/Text/examples/{DescriptionListText.tsx => TextDescriptionList.tsx} (100%) rename packages/react-core/src/components/Text/examples/{HeadingsText.tsx => TextHeadings.tsx} (100%) rename packages/react-core/src/components/Text/examples/{OrderedListText.tsx => TextOrderedList.tsx} (100%) rename packages/react-core/src/components/Text/examples/{UnorderedListText.tsx => TextUnorderedList.tsx} (100%) rename packages/react-core/src/components/Text/examples/{VisitedText.tsx => TextVisited.tsx} (100%) diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index 243e3ecc169..ec085e306b7 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -9,32 +9,32 @@ propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] ### Headings -```ts file="./HeadingsText.tsx" +```ts file="./TextHeadings.tsx" ``` ### Body -```ts file="./BodyText.tsx" +```ts file="./TextBody.tsx" ``` Text components such as Text, TextList, TextListItem need to be placed within a TextContent ### Unordered list -```ts file="./UnorderedListText.tsx" +```ts file="./TextUnorderedList.tsx" ``` ### Ordered list -```ts file="./OrderedListText.tsx" +```ts file="./TextOrderedList.tsx" ``` ### Description list -```ts file="./DescriptionListText.tsx" +```ts file="./TextDescriptionList.tsx" ``` ### Visited -```ts file="./VisitedText.tsx" +```ts file="./TextVisited.tsx" ``` diff --git a/packages/react-core/src/components/Text/examples/BodyText.tsx b/packages/react-core/src/components/Text/examples/TextBody.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/BodyText.tsx rename to packages/react-core/src/components/Text/examples/TextBody.tsx diff --git a/packages/react-core/src/components/Text/examples/DescriptionListText.tsx b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/DescriptionListText.tsx rename to packages/react-core/src/components/Text/examples/TextDescriptionList.tsx diff --git a/packages/react-core/src/components/Text/examples/HeadingsText.tsx b/packages/react-core/src/components/Text/examples/TextHeadings.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/HeadingsText.tsx rename to packages/react-core/src/components/Text/examples/TextHeadings.tsx diff --git a/packages/react-core/src/components/Text/examples/OrderedListText.tsx b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/OrderedListText.tsx rename to packages/react-core/src/components/Text/examples/TextOrderedList.tsx diff --git a/packages/react-core/src/components/Text/examples/UnorderedListText.tsx b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/UnorderedListText.tsx rename to packages/react-core/src/components/Text/examples/TextUnorderedList.tsx diff --git a/packages/react-core/src/components/Text/examples/VisitedText.tsx b/packages/react-core/src/components/Text/examples/TextVisited.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/VisitedText.tsx rename to packages/react-core/src/components/Text/examples/TextVisited.tsx From c4c5e8ac2206faeb095e1cbcaba39afc8893e356 Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Tue, 20 Sep 2022 14:20:26 -0400 Subject: [PATCH 3/4] Fix export as component --- .../components/Text/examples/TextVisited.tsx | 52 ++++++++++--------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/packages/react-core/src/components/Text/examples/TextVisited.tsx b/packages/react-core/src/components/Text/examples/TextVisited.tsx index b4ce7b6f969..80ef36f002a 100644 --- a/packages/react-core/src/components/Text/examples/TextVisited.tsx +++ b/packages/react-core/src/components/Text/examples/TextVisited.tsx @@ -1,32 +1,34 @@ import React from 'react'; import { TextContent, Text, TextVariants } from '@patternfly/react-core'; -<> - - Visited link example - - - Visited link +export const TextVisited: React.FunctionComponent = () => ( + <> + + Visited link example + + + Visited link + - - -
- - Visited content example - - - content link 1 + +
+ + Visited content example + + + content link 1 + - - - - ß content link 2 + + + content link 2 + - - - - content link 3 + + + content link 3 + - - -; + + +); From 0e10e3704cb6b842fd6cca4a4e9e69daac2e3226 Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Tue, 20 Sep 2022 15:28:10 -0400 Subject: [PATCH 4/4] Add export as component to all Text examples --- .../src/components/Text/examples/TextBody.tsx | 38 ++++++++++--------- .../Text/examples/TextDescriptionList.tsx | 26 +++++++------ .../components/Text/examples/TextHeadings.tsx | 18 +++++---- .../Text/examples/TextOrderedList.tsx | 24 ++++++------ .../Text/examples/TextUnorderedList.tsx | 30 ++++++++------- 5 files changed, 73 insertions(+), 63 deletions(-) diff --git a/packages/react-core/src/components/Text/examples/TextBody.tsx b/packages/react-core/src/components/Text/examples/TextBody.tsx index d267bc2970b..ea72f431c62 100644 --- a/packages/react-core/src/components/Text/examples/TextBody.tsx +++ b/packages/react-core/src/components/Text/examples/TextBody.tsx @@ -1,22 +1,24 @@ import React from 'react'; import { TextContent, Text, TextVariants } from '@patternfly/react-core'; - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc - varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, - interdum mattis neque. Sub works as well! - - - Quisque ante lacus, malesuada ac auctor vitae, congue{' '} - - non ante +export const TextBody: React.FunctionComponent = () => ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla + nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel + erat vel, interdum mattis neque. Sub works as well! - . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. - - - Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet - turpis. - - Sometimes you need small text to display things like date created -; + + Quisque ante lacus, malesuada ac auctor vitae, congue{' '} + + non ante + + . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. + + + Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet + turpis. + + Sometimes you need small text to display things like date created + +); diff --git a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx index 8a3ef8990e1..454d6b7a5a2 100644 --- a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx +++ b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx @@ -1,15 +1,17 @@ import React from 'react'; import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; - - - Web - - The part of the Internet that contains websites and web pages - - HTML - A markup language for creating web pages - CSS - A technology to make HTML look better - -; +export const TextDescriptionList: React.FunctionComponent = () => ( + + + Web + + The part of the Internet that contains websites and web pages + + HTML + A markup language for creating web pages + CSS + A technology to make HTML look better + + +); diff --git a/packages/react-core/src/components/Text/examples/TextHeadings.tsx b/packages/react-core/src/components/Text/examples/TextHeadings.tsx index 65481350ee8..bd104a9e9b1 100644 --- a/packages/react-core/src/components/Text/examples/TextHeadings.tsx +++ b/packages/react-core/src/components/Text/examples/TextHeadings.tsx @@ -1,11 +1,13 @@ import React from 'react'; import { TextContent, Text, TextVariants } from '@patternfly/react-core'; - - Hello World - Second level - Third level - Fourth level - Fifth level - Sixth level -; +export const TextHeadings: React.FunctionComponent = () => ( + + Hello World + Second level + Third level + Fourth level + Fifth level + Sixth level + +); diff --git a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx index ec25e2bc0ff..7c92b5a1c71 100644 --- a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx +++ b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx @@ -1,14 +1,16 @@ import React from 'react'; import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; - - - Donec blandit a lorem id convallis. - Cras gravida arcu at diam gravida gravida. - Integer in volutpat libero. - Donec a diam tellus. - Aenean nec tortor orci. - Quisque aliquam cursus urna, non bibendum massa viverra eget. - Vivamus maximus ultricies pulvinar. - -; +export const TextOrderedList: React.FunctionComponent = () => ( + + + Donec blandit a lorem id convallis. + Cras gravida arcu at diam gravida gravida. + Integer in volutpat libero. + Donec a diam tellus. + Aenean nec tortor orci. + Quisque aliquam cursus urna, non bibendum massa viverra eget. + Vivamus maximus ultricies pulvinar. + + +); diff --git a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx index 71459c6d240..4ce3dda71b9 100644 --- a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx +++ b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx @@ -1,17 +1,19 @@ import React from 'react'; import { TextContent, TextList, TextListItem } from '@patternfly/react-core'; - - - In fermentum leo eu lectus mollis, quis dictum mi aliquet. - Morbi eu nulla lobortis, lobortis est in, fringilla felis. - - Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - - In fermentum leo eu lectus mollis, quis dictum mi aliquet. - Morbi eu nulla lobortis, lobortis est in, fringilla felis. - - - Ut non enim metus. - -; +export const TextUnorderedList: React.FunctionComponent = () => ( + + + In fermentum leo eu lectus mollis, quis dictum mi aliquet. + Morbi eu nulla lobortis, lobortis est in, fringilla felis. + + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + + In fermentum leo eu lectus mollis, quis dictum mi aliquet. + Morbi eu nulla lobortis, lobortis est in, fringilla felis. + + + Ut non enim metus. + + +);