Skip to content

refactor(Helper Text): Convert helper text examples to typescript #7488

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.

Sign up for GitHub

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 2 commits into from
Jun 7, 2022
Merged

refactor(Helper Text): Convert helper text examples to typescript #7488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8f6504
refactor(Helper Text): Convert helper text examples to typescript
bartoval Jun 1, 2022
352f655
refactor(HelperText): update PR comments
bartoval Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 6 additions & 153 deletions packages/react-core/src/components/HelperText/examples/HelperText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,177 +15,30 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-

### Static

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

<React.Fragment>
<HelperText>
<HelperTextItem>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success">This is success helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error">This is error helper text</HelperTextItem>
</HelperText>
</React.Fragment>;
```ts file="HelperTextStatic.tsx"
```

### Static with default icons

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';

<React.Fragment>
<HelperText>
<HelperTextItem hasIcon>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate" hasIcon>
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning" hasIcon>
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success" hasIcon>
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error" hasIcon>
This is error helper text
</HelperTextItem>
</HelperText>
</React.Fragment>;
```ts file="HelperTextStaticWithDefaultIcon.tsx"
```

### Static with custom icons

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

<React.Fragment>
<HelperText>
<HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning" icon={<ExclamationIcon />}>
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success" icon={<CheckIcon />}>
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error" icon={<TimesIcon />}>
This is error helper text
</HelperTextItem>
</HelperText>
</React.Fragment>;
```ts file="HelperTextStaticWithCustomIcon.tsx"
```

### Multiple static

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

<HelperText>
<HelperTextItem>This is default helper text</HelperTextItem>
<HelperTextItem>This is another default helper text in the same block</HelperTextItem>
<HelperTextItem>And this is more default text in the same block</HelperTextItem>
</HelperText>;
```ts file="HelperTextMultipleStatic.tsx"
```

### Dynamic

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

<React.Fragment>
<HelperText>
<HelperTextItem isDynamic>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="indeterminate">
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="warning">
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="success">
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error">
This is error helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
This is error helper text with a custom icon
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error" hasIcon={false}>
This is error helper text with no icon
</HelperTextItem>
</HelperText>
</React.Fragment>;
```ts file="HelperTextDynamic.tsx"
```

### Dynamic list

```js
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

<HelperText component="ul">
<HelperTextItem isDynamic variant="success" component="li">
Must be at least 14 characters
</HelperTextItem>
<HelperTextItem isDynamic variant="error" component="li">
Cannot contain any variation of the word "redhat"
</HelperTextItem>
<HelperTextItem isDynamic variant="success" component="li">
Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
</HelperTextItem>
</HelperText>;
```ts file="HelperTextDynamicList.tsx"
```
41 changes: 41 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

export const HelperTextDynamic: React.FunctionComponent = () => (
<React.Fragment>
<HelperText>
<HelperTextItem isDynamic>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="indeterminate">
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="warning">
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="success">
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error">
This is error helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
This is error helper text with a custom icon
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem isDynamic variant="error" hasIcon={false}>
This is error helper text with no icon
</HelperTextItem>
</HelperText>
</React.Fragment>
);
16 changes: 16 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

export const HelperTextDynamicList: React.FunctionComponent = () => (
<HelperText component="ul">
<HelperTextItem isDynamic variant="success" component="li">
Must be at least 14 characters
</HelperTextItem>
<HelperTextItem isDynamic variant="error" component="li">
Cannot contain any variation of the word "redhat"
</HelperTextItem>
<HelperTextItem isDynamic variant="success" component="li">
Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
</HelperTextItem>
</HelperText>
);
10 changes: 10 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

export const HelperTextMultipleStatic: React.FunctionComponent = () => (
<HelperText>
<HelperTextItem>This is default helper text</HelperTextItem>
<HelperTextItem>This is another default helper text in the same block</HelperTextItem>
<HelperTextItem>And this is more default text in the same block</HelperTextItem>
</HelperText>
);
22 changes: 22 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

export const HelperTextStatic: React.FunctionComponent = () => (
<React.Fragment>
<HelperText>
<HelperTextItem>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success">This is success helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error">This is error helper text</HelperTextItem>
</HelperText>
</React.Fragment>
);
35 changes: 35 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
<React.Fragment>
<HelperText>
<HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning" icon={<ExclamationIcon />}>
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success" icon={<CheckIcon />}>
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error" icon={<TimesIcon />}>
This is error helper text
</HelperTextItem>
</HelperText>
</React.Fragment>
);
30 changes: 30 additions & 0 deletions packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { HelperText, HelperTextItem } from '@patternfly/react-core';

export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
<React.Fragment>
<HelperText>
<HelperTextItem hasIcon>This is default helper text</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="indeterminate" hasIcon>
This is indeterminate helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="warning" hasIcon>
This is warning helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="success" hasIcon>
This is success helper text
</HelperTextItem>
</HelperText>
<HelperText>
<HelperTextItem variant="error" hasIcon>
This is error helper text
</HelperTextItem>
</HelperText>
</React.Fragment>
);