From 28e4a7c117428efb51976a02a3c90340833c6e75 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 3 Jun 2022 11:52:41 -0400 Subject: [PATCH 1/4] convert expandable examples to TS --- .../examples/ExpandableSection.md | 194 +----------------- .../examples/ExpandableSectionBasic.tsx | 16 ++ .../ExpandableSectionCustomToggleContent.tsx | 29 +++ .../examples/ExpandableSectionDetached.tsx | 26 +++ .../examples/ExpandableSectionDisclosure.tsx | 22 ++ .../examples/ExpandableSectionIndented.tsx | 21 ++ .../ExpandableSectionUncontrolled.tsx | 8 + ...leSectionUncontrolledDynamicToggleText.tsx | 8 + 8 files changed, 137 insertions(+), 187 deletions(-) create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx create mode 100644 packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md index 878bd9f3eba..48da64fd04a 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md @@ -11,217 +11,37 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle ### Basic -```js -import React from 'react'; -import { ExpandableSection } from '@patternfly/react-core'; - -class SimpleExpandableSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - } - - render() { - const { isExpanded } = this.state; - return ( - - This content is visible only when the component is expanded. - - ); - } -} +```ts file="ExpandableSectionBasic.tsx" ``` ### Uncontrolled -```js -import React from 'react'; -import { ExpandableSection } from '@patternfly/react-core'; - - - This content is visible only when the component is expanded. -; +```ts file="ExpandableSectionUncontrolled.tsx" ``` ### Uncontrolled with dynamic toggle text -```js -import React from 'react'; -import { ExpandableSection } from '@patternfly/react-core'; - - - This content is visible only when the component is expanded. -; +```ts file="ExpandableSectionDynamicToggleText.tsx" ``` ### Detached -```js -import React from 'react'; -import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; - -class DetachedExpandableSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - } - - render() { - const { isExpanded } = this.state; - const contentId = 'detached-toggle-content'; - return ( - - - - This content is visible only when the component is expanded. - - - - - {isExpanded ? 'Show less' : 'Show more'} - - - - ); - } -} +```ts file="ExpandableSectionDetached.tsx" ``` ### Disclosure variation -```js -import React from 'react'; -import { ExpandableSection } from '@patternfly/react-core'; - -class DisclosureExpandableSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - } - - render() { - const { isExpanded } = this.state; - return ( - - This content is visible only when the component is expanded. - - ); - } -} +```ts file="ExpandableSectionDisclosure.tsx" ``` ### Indented -```js -import React from 'react'; -import { ExpandableSection } from '@patternfly/react-core'; - -class SimpleExpandableSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - } - - render() { - const { isExpanded } = this.state; - return ( - - This content is visible only when the component is expanded. - - ); - } -} +```ts file="ExpandableSectionIndented.tsx" ``` ### With custom toggle content By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button. -```js -import React from "react"; -import { ExpandableSection, Badge } from "@patternfly/react-core"; -import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon"; - -class CustomExpandableSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.onToggle = (isExpanded) => { - this.setState({ - isExpanded - }); - }; - } - - render() { - const { isExpanded } = this.state; - return ( - - You can also use icons - - or badges - 4 - ! - - } - onToggle={this.onToggle} - isExpanded={isExpanded} - > - This content is visible only when the component is expanded. - - ); - } -} +```ts file="ExpandableSectionCustomToggleContent.tsx" ``` diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx new file mode 100644 index 00000000000..92df496258b --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { ExpandableSection } from '@patternfly/react-core'; + +export const ExpandableSectionBasic: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + return ( + + This content is visible only when the component is expanded. + + ); +}; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx new file mode 100644 index 00000000000..0951c2f2ce2 --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { ExpandableSection, Badge } from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; + +export const CustomExpandableSection: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + return ( + + You can also use icons + + or badges + 4 + ! + + } + onToggle={onToggle} + isExpanded={isExpanded} + > + This content is visible only when the component is expanded. + + ); +}; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx new file mode 100644 index 00000000000..178d62ce82d --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; + +export const ExpandableSectionDetached: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + const contentId = 'detached-toggle-content'; + return ( + + + + This content is visible only when the component is expanded. + + + + + {isExpanded ? 'Show less' : 'Show more'} + + + + ); +}; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx new file mode 100644 index 00000000000..3e040c133d5 --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { ExpandableSection } from '@patternfly/react-core'; + +export const ExpandableSectionDisclosure: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + return ( + + This content is visible only when the component is expanded. + + ); +}; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx new file mode 100644 index 00000000000..49b73de7f1a --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { ExpandableSection } from '@patternfly/react-core'; + +export const ExpandableSectionIndented: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + return ( + + This content is visible only when the component is expanded. + + ); +}; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx new file mode 100644 index 00000000000..627940fc6d6 --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ExpandableSection } from '@patternfly/react-core'; + +export const ExpandableSectionUncontrolled: React.FunctionComponent = () => ( + + This content is visible only when the component is expanded. + +); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx new file mode 100644 index 00000000000..0883285a878 --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ExpandableSection } from '@patternfly/react-core'; + +export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => ( + + This content is visible only when the component is expanded. + +); From 209def4bdf4bb0d6e5a9b71fbf0bfe20434ff6b6 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 3 Jun 2022 11:54:24 -0400 Subject: [PATCH 2/4] fix naming --- ...ctionCustomToggleContent.tsx => ExpandableSectionCustom.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename packages/react-core/src/components/ExpandableSection/examples/{ExpandableSectionCustomToggleContent.tsx => ExpandableSectionCustom.tsx} (92%) diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx similarity index 92% rename from packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx rename to packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx index 0951c2f2ce2..772b8133e3e 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggleContent.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ExpandableSection, Badge } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -export const CustomExpandableSection: React.FunctionComponent = () => { +export const ExpandableSectionCustom: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const onToggle = (isExpanded: boolean) => { From e3e7fc5fc6cac28bef62a0b28116acafbe3c519b Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 3 Jun 2022 11:57:51 -0400 Subject: [PATCH 3/4] fix filenames --- .../ExpandableSection/examples/ExpandableSection.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md index 48da64fd04a..9774304122a 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md @@ -21,7 +21,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle ### Uncontrolled with dynamic toggle text -```ts file="ExpandableSectionDynamicToggleText.tsx" +```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx" ``` ### Detached @@ -43,5 +43,5 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button. -```ts file="ExpandableSectionCustomToggleContent.tsx" +```ts file="ExpandableSectionCustom.tsx" ``` From cb86d50876e7cae65344aadea17422674b8076ce Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 8 Jun 2022 14:56:10 -0400 Subject: [PATCH 4/4] rename demo --- .../components/ExpandableSection/examples/ExpandableSection.md | 2 +- ...dableSectionCustom.tsx => ExpandableSectionCustomToggle.tsx} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/react-core/src/components/ExpandableSection/examples/{ExpandableSectionCustom.tsx => ExpandableSectionCustomToggle.tsx} (90%) diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md index 9774304122a..3869db9680d 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md @@ -43,5 +43,5 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button. -```ts file="ExpandableSectionCustom.tsx" +```ts file="ExpandableSectionCustomToggle.tsx" ``` diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx similarity index 90% rename from packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx rename to packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx index 772b8133e3e..7601ae3944c 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustom.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ExpandableSection, Badge } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -export const ExpandableSectionCustom: React.FunctionComponent = () => { +export const ExpandableSectionCustomToggle: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const onToggle = (isExpanded: boolean) => {