-
Notifications
You must be signed in to change notification settings - Fork 377
chore(Text): Convert examples to typescript #8016
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
tlabaj
merged 4 commits into
patternfly:main
from
XiangyuShen:chore/convert-text-examples-to-ts
Sep 21, 2022
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
packages/react-core/src/components/Text/examples/TextBody.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
| import { TextContent, Text, TextVariants } from '@patternfly/react-core'; | ||
|
|
||
| export const TextBody: React.FunctionComponent = () => ( | ||
| <TextContent> | ||
| <Text component={TextVariants.p}> | ||
| 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! | ||
| </Text> | ||
| <Text component={TextVariants.p}> | ||
| Quisque ante lacus, malesuada ac auctor vitae, congue{' '} | ||
| <Text component={TextVariants.a} href="#"> | ||
| non ante | ||
| </Text> | ||
| . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. | ||
| </Text> | ||
| <Text component={TextVariants.blockquote}> | ||
| Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet | ||
| turpis. | ||
| </Text> | ||
| <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text> | ||
| </TextContent> | ||
| ); |
17 changes: 17 additions & 0 deletions
17
packages/react-core/src/components/Text/examples/TextDescriptionList.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; | ||
|
|
||
| export const TextDescriptionList: React.FunctionComponent = () => ( | ||
| <TextContent> | ||
| <TextList component={TextListVariants.dl}> | ||
| <TextListItem component={TextListItemVariants.dt}>Web</TextListItem> | ||
| <TextListItem component={TextListItemVariants.dd}> | ||
| The part of the Internet that contains websites and web pages | ||
| </TextListItem> | ||
| <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem> | ||
| <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem> | ||
| <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem> | ||
| <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem> | ||
| </TextList> | ||
| </TextContent> | ||
| ); |
13 changes: 13 additions & 0 deletions
13
packages/react-core/src/components/Text/examples/TextHeadings.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
| import { TextContent, Text, TextVariants } from '@patternfly/react-core'; | ||
|
|
||
| export const TextHeadings: React.FunctionComponent = () => ( | ||
| <TextContent> | ||
| <Text component={TextVariants.h1}>Hello World</Text> | ||
| <Text component={TextVariants.h2}>Second level</Text> | ||
| <Text component={TextVariants.h3}>Third level</Text> | ||
| <Text component={TextVariants.h4}>Fourth level</Text> | ||
| <Text component={TextVariants.h5}>Fifth level</Text> | ||
| <Text component={TextVariants.h6}>Sixth level</Text> | ||
| </TextContent> | ||
| ); |
16 changes: 16 additions & 0 deletions
16
packages/react-core/src/components/Text/examples/TextOrderedList.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from 'react'; | ||
| import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; | ||
|
|
||
| export const TextOrderedList: React.FunctionComponent = () => ( | ||
| <TextContent> | ||
| <TextList component={TextListVariants.ol}> | ||
| <TextListItem>Donec blandit a lorem id convallis.</TextListItem> | ||
| <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem> | ||
| <TextListItem>Integer in volutpat libero.</TextListItem> | ||
| <TextListItem>Donec a diam tellus.</TextListItem> | ||
| <TextListItem>Aenean nec tortor orci.</TextListItem> | ||
| <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> | ||
| <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> | ||
| </TextList> | ||
| </TextContent> | ||
| ); |
19 changes: 19 additions & 0 deletions
19
packages/react-core/src/components/Text/examples/TextUnorderedList.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from 'react'; | ||
| import { TextContent, TextList, TextListItem } from '@patternfly/react-core'; | ||
|
|
||
| export const TextUnorderedList: React.FunctionComponent = () => ( | ||
| <TextContent> | ||
| <TextList> | ||
| <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> | ||
| <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> | ||
| <TextListItem> | ||
| Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. | ||
| <TextList> | ||
| <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> | ||
| <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> | ||
| </TextList> | ||
| </TextListItem> | ||
| <TextListItem>Ut non enim metus.</TextListItem> | ||
| </TextList> | ||
| </TextContent> | ||
| ); |
34 changes: 34 additions & 0 deletions
34
packages/react-core/src/components/Text/examples/TextVisited.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import { TextContent, Text, TextVariants } from '@patternfly/react-core'; | ||
|
|
||
| export const TextVisited: React.FunctionComponent = () => ( | ||
| <> | ||
| <TextContent> | ||
| <Text component={TextVariants.h3}>Visited link example</Text> | ||
| <Text component={TextVariants.p}> | ||
| <Text component={TextVariants.a} isVisitedLink href="#"> | ||
| Visited link | ||
| </Text> | ||
| </Text> | ||
| </TextContent> | ||
| <br /> | ||
| <TextContent isVisited> | ||
| <Text component={TextVariants.h3}>Visited content example</Text> | ||
| <Text component={TextVariants.p}> | ||
| <Text component={TextVariants.a} href="#"> | ||
| content link 1 | ||
| </Text> | ||
| </Text> | ||
| <Text component={TextVariants.p}> | ||
| <Text component={TextVariants.a} href="#"> | ||
| content link 2 | ||
| </Text> | ||
| </Text> | ||
| <Text component={TextVariants.p}> | ||
| <Text component={TextVariants.a} href="#"> | ||
| content link 3 | ||
| </Text> | ||
| </Text> | ||
| </TextContent> | ||
| </> | ||
| ); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the examples are using
TextListVariants, I would add it to the documentation so it shows up in the props table. This can be done by adding it to thepropComponentsarray on line 5 of this md file.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TextListVariantsdoes not render in the props table when added. This is likely because it is just an enum inTextList.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@XiangyuShen you are correct! We do not currently have a way to document enums.