refactor: 💡 Migrate SQFormGuidedWorkflow to TS

BREAKING CHANGE: 🧨 SQFormGuidedWorkflow prop 'actionButton' renamed to 'actions'. Removed
props 'isPanelExpanded' and 'expandPanel'

✅ Closes: #567

README.md

@@ -40,6 +40,44 @@ For **BREAKING CHANGES** Type a brief description of the breaking change when as
 ## Breaking Changes
 
 ### Version `[Typescript Version]`
+
+#### SQFormGuidedWorkflow changes
+ - Removed TaskModule properties: `isPanelExpanded` and `expandPanel`
+
+
+ - In SQForm v`[Typescript Version]` `actionButton` was renamed to `actions` as part of the taskModule definitions. Functionality remains the same.
+
+```jsx
+// ⛔️ Example
+const taskModules = [
+  { ... },
+  { ... },
+  {
+    ...
+    scriptedTextProps: {
+      text: `Stuff about policy cancellation documents`,
+      title: 'Agent Script',
+      actionButton: <TextButton tooltip="View">View Doc</TextButton>, // This prop was renamed
+    },
+  }
+]
+
+// ✅ Example
+const taskModules = [
+  { ... },
+  { ... },
+  {
+    ...
+    scriptedTextProps: {
+      text: `Stuff about policy cancellation documents`,
+      title: 'Agent Script',
+      actions: <TextButton tooltip="View">View Doc</TextButton>, // This prop was renamed
+    },
+  }
+]
+```
+
+#### SQForm no longer allows `boolean`s as dropdown options
 In SQForm v`[Typescript Version]` support for `boolean` valued dropdown options was removed. Material-UI and HTML Select components do not support options with `boolean`s as values and causes type conflicts with our own library. Therefore, if you're upgrading this version and you using `boolean` values options you'll need to take care to update those. Below is our recommended changes.
 
 ```js

src/components/SQFormGuidedWorkflow/AdditionalInformationSection.js → src/components/SQFormGuidedWorkflow/AdditionalInformationSection.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import {Section, SectionBody} from 'scplus-shared-components';
-import {AdditionalInformationPropTypes} from './PropTypes';
 import Header from './Header';
+import type {AdditionalInformationProps} from './Types';
 
 function AdditionalInformationSection({
-  actionButton,
+  actions,
   title,
   infoText,
   warningText,
   errorText,
   successText,
   isFailedState,
   Elements,
-}) {
+}: AdditionalInformationProps): React.ReactElement {
   return (
     <Section>
       <Header
-        actionButton={actionButton}
+        actions={actions}
         title={title}
         infoText={infoText}
         warningText={warningText}
@@ -29,6 +29,4 @@ function AdditionalInformationSection({
   );
 }
 
-AdditionalInformationSection.propTypes = AdditionalInformationPropTypes;
-
 export default AdditionalInformationSection;

src/components/SQFormGuidedWorkflow/AgentScript.js → src/components/SQFormGuidedWorkflow/AgentScript.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import {Section, SectionBody, ScriptedText} from 'scplus-shared-components';
 import Header from './Header';
-import {AgentScriptPropTypes} from './PropTypes';
+import type {AgentScriptProps} from './Types';
 
 function AgentScript({
-  actionButton,
+  actions,
   title,
   infoText,
   warningText,
   errorText,
   successText,
   isFailedState,
   text,
-}) {
+}: AgentScriptProps): React.ReactElement {
   return (
     <Section>
       <Header
-        actionButton={actionButton}
+        actions={actions}
         title={title}
         infoText={infoText}
         warningText={warningText}
@@ -31,6 +31,4 @@ function AgentScript({
   );
 }
 
-AgentScript.propTypes = AgentScriptPropTypes;
-
 export default AgentScript;

src/components/SQFormGuidedWorkflow/Header.js → src/components/SQFormGuidedWorkflow/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {useFormikContext} from 'formik';
 import {SectionHeader} from 'scplus-shared-components';
-import {HeaderPropTypes} from './PropTypes';
+import type {HeaderProps} from './Types';
 
 const helperTextType = {
   info: 'info',
@@ -11,14 +11,14 @@ const helperTextType = {
 };
 
 function Header({
-  actionButton,
+  actions,
   title,
   infoText,
   warningText,
   errorText,
   successText,
   isFailedState = false,
-}) {
+}: HeaderProps): React.ReactElement {
   const {isValid, touched} = useFormikContext();
   const isFormTouched = Object.keys(touched).length;
 
@@ -53,7 +53,7 @@ function Header({
   };
 
   const getInformativeHeadingText = () => {
-    if (!shouldRenderInformativeHeading) {
+    if (!shouldRenderInformativeHeading || !informativeHeadingType) {
       return;
     }
 
@@ -66,11 +66,9 @@ function Header({
       informativeHeading={getInformativeHeadingText()}
       type={informativeHeadingType}
     >
-      {actionButton}
+      {actions}
     </SectionHeader>
   );
 }
 
-Header.propTypes = HeaderPropTypes;
-
 export default Header;

src/components/SQFormGuidedWorkflow/OutcomeForm.js → src/components/SQFormGuidedWorkflow/OutcomeForm.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import {Grid} from '@material-ui/core';
 import {Section, SectionBody} from 'scplus-shared-components';
 import Header from './Header';
-import {OutcomePropTypes} from './PropTypes';
+import type {OutcomeProps} from './Types';
 
 function OutcomeForm({
-  actionButton,
+  actions,
   FormElements,
   title,
   infoText,
@@ -14,11 +14,11 @@ function OutcomeForm({
   successText,
   isFailedState,
   muiGridProps = {},
-}) {
+}: OutcomeProps): React.ReactElement {
   return (
     <Section>
       <Header
-        actionButton={actionButton}
+        actions={actions}
         title={title}
         infoText={infoText}
         warningText={warningText}
@@ -35,6 +35,4 @@ function OutcomeForm({
   );
 }
 
-OutcomeForm.propTypes = OutcomePropTypes;
-
 export default OutcomeForm;

src/components/SQFormGuidedWorkflow/README.md

@@ -14,6 +14,9 @@ This section covers how to properly setup the configuration object array for the
 
 - [The Task Module Props](https://www.loom.com/share/ca6de9ff9cfc4faba4d500e8c244c5d9)
   > After recording this video I made a code change that added another prop to the task modules props, `isFailedState` -[The `isFailedState` Task Module Prop](https://www.loom.com/share/5a636e9ca7884bcf9697b00ba7f09da2)
+  > Changes were made that removed the following props: `isPanelExpanded` and `expandPanel`. See the Breaking Changes section of the project README for more information.
+  > The `actionButton` prop was renamed to `actions`. Functionality remains the same. See the Breaking Changes section of the project README for more information.
+
 
 ### Scripted Text Section