From a8f65040c338de6b6a2552680a0a3c0aef7c3520 Mon Sep 17 00:00:00 2001 From: valerio bartolini Date: Wed, 1 Jun 2022 07:51:02 +0200 Subject: [PATCH 1/2] refactor(Helper Text): Convert helper text examples to typescript --- .../HelperText/examples/HelperDynamic.tsx | 41 +++++ .../HelperText/examples/HelperDynamicList.tsx | 16 ++ .../examples/HelperMultipleStatic.tsx | 10 ++ .../HelperText/examples/HelperStatic.tsx | 22 +++ .../examples/HelperStaticWithCustomIcon.tsx | 35 ++++ .../examples/HelperStaticWithDefaultIcon.tsx | 30 ++++ .../HelperText/examples/HelperText.md | 159 +----------------- 7 files changed, 160 insertions(+), 153 deletions(-) create mode 100644 packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx create mode 100644 packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx create mode 100644 packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx create mode 100644 packages/react-core/src/components/HelperText/examples/HelperStatic.tsx create mode 100644 packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx create mode 100644 packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx diff --git a/packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx b/packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx new file mode 100644 index 00000000000..8302e634aa8 --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx @@ -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 Dynamic: React.FunctionComponent = () => ( + + + This is default helper text + + + + This is indeterminate helper text + + + + + This is warning helper text + + + + + This is success helper text + + + + + This is error helper text + + + + }> + This is error helper text with a custom icon + + + + + This is error helper text with no icon + + + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx b/packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx new file mode 100644 index 00000000000..7f2a858ec1c --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { HelperText, HelperTextItem } from '@patternfly/react-core'; + +export const DynamicList: React.FunctionComponent = () => ( + + + Must be at least 14 characters + + + Cannot contain any variation of the word "redhat" + + + Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols + + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx new file mode 100644 index 00000000000..e04210e6317 --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { HelperText, HelperTextItem } from '@patternfly/react-core'; + +export const MultipleStatic: React.FunctionComponent = () => ( + + This is default helper text + This is another default helper text in the same block + And this is more default text in the same block + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperStatic.tsx new file mode 100644 index 00000000000..c734e541e4e --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperStatic.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { HelperText, HelperTextItem } from '@patternfly/react-core'; + +export const Static: React.FunctionComponent = () => ( + + + This is default helper text + + + This is indeterminate helper text + + + This is warning helper text + + + This is success helper text + + + This is error helper text + + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx new file mode 100644 index 00000000000..741868533dc --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx @@ -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 StaticWithCustomIcon: React.FunctionComponent = () => ( + + + }>This is default helper text + + + }> + This is indeterminate helper text + + + + }> + This is warning helper text + + + + }> + This is success helper text + + + + }> + This is error helper text + + + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx new file mode 100644 index 00000000000..da91271d318 --- /dev/null +++ b/packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { HelperText, HelperTextItem } from '@patternfly/react-core'; + +export const StaticWithDefaultIcon: React.FunctionComponent = () => ( + + + This is default helper text + + + + This is indeterminate helper text + + + + + This is warning helper text + + + + + This is success helper text + + + + + This is error helper text + + + +); diff --git a/packages/react-core/src/components/HelperText/examples/HelperText.md b/packages/react-core/src/components/HelperText/examples/HelperText.md index 4c4331a2d46..2efb6f0b962 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperText.md +++ b/packages/react-core/src/components/HelperText/examples/HelperText.md @@ -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'; - - - - This is default helper text - - - This is indeterminate helper text - - - This is warning helper text - - - This is success helper text - - - This is error helper text - -; +```ts file="HelperStatic.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'; - - - - This is default helper text - - - - This is indeterminate helper text - - - - - This is warning helper text - - - - - This is success helper text - - - - - This is error helper text - - -; +```ts file="HelperStaticWithDefaultIcon.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'; - - - - }>This is default helper text - - - }> - This is indeterminate helper text - - - - }> - This is warning helper text - - - - }> - This is success helper text - - - - }> - This is error helper text - - -; +```ts file="HelperStaticWithCustomIcon.tsx" ``` ### Multiple static -```js -import React from 'react'; -import { HelperText, HelperTextItem } from '@patternfly/react-core'; - - - This is default helper text - This is another default helper text in the same block - And this is more default text in the same block -; +```ts file="HelperMultipleStatic.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'; - - - - This is default helper text - - - - This is indeterminate helper text - - - - - This is warning helper text - - - - - This is success helper text - - - - - This is error helper text - - - - }> - This is error helper text with a custom icon - - - - - This is error helper text with no icon - - -; +```ts file="HelperDynamic.tsx" ``` ### Dynamic list -```js -import React from 'react'; -import { HelperText, HelperTextItem } from '@patternfly/react-core'; - - - - Must be at least 14 characters - - - Cannot contain any variation of the word "redhat" - - - Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols - -; +```ts file="HelperDynamicList.tsx" ``` From 352f6550e1b6c791114a9e857bce2120529e88e9 Mon Sep 17 00:00:00 2001 From: valerio bartolini Date: Wed, 1 Jun 2022 22:07:41 +0200 Subject: [PATCH 2/2] refactor(HelperText): update PR comments --- .../src/components/HelperText/examples/HelperText.md | 12 ++++++------ .../{HelperDynamic.tsx => HelperTextDynamic.tsx} | 2 +- ...lperDynamicList.tsx => HelperTextDynamicList.tsx} | 2 +- ...ltipleStatic.tsx => HelperTextMultipleStatic.tsx} | 2 +- .../{HelperStatic.tsx => HelperTextStatic.tsx} | 2 +- ...omIcon.tsx => HelperTextStaticWithCustomIcon.tsx} | 2 +- ...tIcon.tsx => HelperTextStaticWithDefaultIcon.tsx} | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) rename packages/react-core/src/components/HelperText/examples/{HelperDynamic.tsx => HelperTextDynamic.tsx} (95%) rename packages/react-core/src/components/HelperText/examples/{HelperDynamicList.tsx => HelperTextDynamicList.tsx} (89%) rename packages/react-core/src/components/HelperText/examples/{HelperMultipleStatic.tsx => HelperTextMultipleStatic.tsx} (83%) rename packages/react-core/src/components/HelperText/examples/{HelperStatic.tsx => HelperTextStatic.tsx} (91%) rename packages/react-core/src/components/HelperText/examples/{HelperStaticWithCustomIcon.tsx => HelperTextStaticWithCustomIcon.tsx} (94%) rename packages/react-core/src/components/HelperText/examples/{HelperStaticWithDefaultIcon.tsx => HelperTextStaticWithDefaultIcon.tsx} (91%) diff --git a/packages/react-core/src/components/HelperText/examples/HelperText.md b/packages/react-core/src/components/HelperText/examples/HelperText.md index 2efb6f0b962..e0b9b165d1c 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperText.md +++ b/packages/react-core/src/components/HelperText/examples/HelperText.md @@ -15,30 +15,30 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation- ### Static -```ts file="HelperStatic.tsx" +```ts file="HelperTextStatic.tsx" ``` ### Static with default icons -```ts file="HelperStaticWithDefaultIcon.tsx" +```ts file="HelperTextStaticWithDefaultIcon.tsx" ``` ### Static with custom icons -```ts file="HelperStaticWithCustomIcon.tsx" +```ts file="HelperTextStaticWithCustomIcon.tsx" ``` ### Multiple static -```ts file="HelperMultipleStatic.tsx" +```ts file="HelperTextMultipleStatic.tsx" ``` ### Dynamic -```ts file="HelperDynamic.tsx" +```ts file="HelperTextDynamic.tsx" ``` ### Dynamic list -```ts file="HelperDynamicList.tsx" +```ts file="HelperTextDynamicList.tsx" ``` diff --git a/packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx similarity index 95% rename from packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx index 8302e634aa8..23791753dce 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperDynamic.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { HelperText, HelperTextItem } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const Dynamic: React.FunctionComponent = () => ( +export const HelperTextDynamic: React.FunctionComponent = () => ( This is default helper text diff --git a/packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx similarity index 89% rename from packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx index 7f2a858ec1c..adf3941c412 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperDynamicList.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { HelperText, HelperTextItem } from '@patternfly/react-core'; -export const DynamicList: React.FunctionComponent = () => ( +export const HelperTextDynamicList: React.FunctionComponent = () => ( Must be at least 14 characters diff --git a/packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx similarity index 83% rename from packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx index e04210e6317..e9f8e07c5c2 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperMultipleStatic.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { HelperText, HelperTextItem } from '@patternfly/react-core'; -export const MultipleStatic: React.FunctionComponent = () => ( +export const HelperTextMultipleStatic: React.FunctionComponent = () => ( This is default helper text This is another default helper text in the same block diff --git a/packages/react-core/src/components/HelperText/examples/HelperStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx similarity index 91% rename from packages/react-core/src/components/HelperText/examples/HelperStatic.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx index c734e541e4e..f7b68670707 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperStatic.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { HelperText, HelperTextItem } from '@patternfly/react-core'; -export const Static: React.FunctionComponent = () => ( +export const HelperTextStatic: React.FunctionComponent = () => ( This is default helper text diff --git a/packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx similarity index 94% rename from packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx index 741868533dc..3e93d8646de 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperStaticWithCustomIcon.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx @@ -6,7 +6,7 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation- import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const StaticWithCustomIcon: React.FunctionComponent = () => ( +export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => ( }>This is default helper text diff --git a/packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx similarity index 91% rename from packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx rename to packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx index da91271d318..da1b3a6a731 100644 --- a/packages/react-core/src/components/HelperText/examples/HelperStaticWithDefaultIcon.tsx +++ b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { HelperText, HelperTextItem } from '@patternfly/react-core'; -export const StaticWithDefaultIcon: React.FunctionComponent = () => ( +export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => ( This is default helper text