Subway Nav Component: Added ability to set individual nodes to any Fluent UI icon and color based on user input

SubwayNav/README.md

@@ -17,8 +17,9 @@ The control accepts the following properties:
 - **Items** - The action items to render
   - **ItemKey** - The key to use to indicate which item/step is selected. The keys must be unique.
   - **ItemLabel** - Label for the step
-  - **ItemState** - Specifying the state of the step. Here is the list of State available. Current|NotStarted|Completed|Unsaved|ViewedNotCompleted|Error|CurrentWithSubSteps|Skipped|WizardComplete
-
+  - **ItemState** - Specifying the state of the step. Here is the list of State available. Current|NotStarted|Completed|Unsaved|ViewedNotCompleted|Error|CurrentWithSubSteps|Skipped|WizardComplete|Custom
+  - **ItemIcon** - Will not do anything if ItemState isn't set to Custom. If ItemState is set to Custom, you can input the string value of any FluentUI Icon and it will show up. If the ItemIcon name is invalid, blank or doesn't match any FluentUI Icon's, then it will be set to same Icon as when ItemState is equal to Current. 
+  - **ItemColor** - Will not do anything if ItemState isn't set to Custom. If ItemState is set to Custom, you can input most hexadecimal color codes and that will change the color of the Icon. If the input to this column is invalid, it will default to black. If the input to this column is blank, it will be set to the same color as when ItemState is equal to Current. 
 - **SubwayNav state** - To mark the overall state of SubwayNav to Complete or Error.
 
 ### Style Properties
@@ -142,3 +143,17 @@ Set(varThemeBlueJSON,"{""palette"":{
 ```
 
 The Theme JSON string is passed to the component property, whilst the varTheme can be used to style other standard components such as buttons using the individual colors.
+
+
+
+### Example using Custom Item State
+
+Example of input collection value for Items property
+
+```PowerFx
+Table({ItemKey:"1",ItemLabel:"Step 1",ItemState:"Current"},
+{ItemKey:"2",ItemLabel:"Step 2",ItemState:"Custom", ItemIcon:"Admin",ItemColor: "teal"},
+{ItemKey:"3",ItemLabel:"Step 3",ItemState:"Custom",ItemIcon:"AddTo",ItemColor: "#EE82EE"})
+```
+
+You can use either the names of colors or the colors hexadecimal value. However, color hexadecimal value is recommended. If the color name isn't basic, it most likely won't work. 

SubwayNav/SubwayNav/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="PowerCAT" constructor="SubwayNav" version="1.0.25" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
+  <control namespace="PowerCAT" constructor="SubwayNav" version="1.0.26" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
     <!-- Style Properties -->
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
@@ -24,6 +24,8 @@
       <property-set name="ItemState" display-name-key="Item State" of-type="SingleLine.Text" usage="bound" required="true" />
       <property-set name="ItemDisabled" display-name-key="Item Disabled" of-type="TwoOptions" usage="bound" required="false" />
       <property-set name="ItemVisuallyDisabled" display-name-key="Item Visually Disabled" of-type="TwoOptions" usage="bound" required="false" />
+      <property-set name="ItemIcon" display-name-key="Item Icon" of-type="SingleLine.Text" usage="bound" required="false" />
+	    <property-set name="ItemColor" display-name-key="Item Color" of-type="SingleLine.Text" usage="bound" required="false" />
     </data-set>
     <property name="Steps" display-name-key="Steps" of-type="Object" usage="output"/>
     <property name="StepsSchema" display-name-key="StepsSchema" of-type="SingleLine.Text" usage="bound" hidden="true"/>
@@ -37,4 +39,4 @@
       <platform-library name="Fluent" version="8.29.0" />
     </resources>
   </control>
-</manifest>
+</manifest>

SubwayNav/SubwayNav/ManifestConstants.ts

@@ -8,6 +8,8 @@ export const enum ItemColumns {
     State = 'ItemState',
     Disabled = 'ItemDisabled',
     VisuallyDisabled = 'ItemVisuallyDisabled',
+    ItemIcon = 'ItemIcon',
+    ItemColor = 'ItemColor',
     ParentKey = 'ParentItemKey',
 }
 

SubwayNav/SubwayNav/__mocks__/mock-datasets.ts

@@ -29,9 +29,7 @@ export class MockDataSet implements ComponentFramework.PropertyTypes.DataSet {
     linking: ComponentFramework.PropertyHelper.DataSetApi.Linking;
     loading: boolean;
     paging: ComponentFramework.PropertyHelper.DataSetApi.Paging;
-    records: {
-        [id: string]: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-    };
+    records: { [id: string]: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord };
     sortedRecordIds: string[];
     sorting: ComponentFramework.PropertyHelper.DataSetApi.SortStatus[];
     clearSelectedRecordIds = jest.fn();

SubwayNav/SubwayNav/_test_/__snapshots__/datasetmapping.test.ts.snap

@@ -14,6 +14,8 @@ Array [
     },
     "disabled": undefined,
     "id": "1",
+    "itemColor": undefined,
+    "itemIcon": undefined,
     "key": "Item 1",
     "label": "item1",
     "parentId": undefined,
@@ -32,6 +34,8 @@ Array [
     },
     "disabled": undefined,
     "id": "2",
+    "itemColor": undefined,
+    "itemIcon": undefined,
     "key": "Item 2",
     "label": "item2",
     "parentId": undefined,
@@ -50,6 +54,8 @@ Array [
     },
     "disabled": undefined,
     "id": "3",
+    "itemColor": undefined,
+    "itemIcon": undefined,
     "key": "Item 3",
     "label": "item3",
     "parentId": undefined,
@@ -68,6 +74,8 @@ Array [
     },
     "disabled": undefined,
     "id": "4",
+    "itemColor": undefined,
+    "itemIcon": undefined,
     "key": "Item 4",
     "label": "item4",
     "parentId": undefined,
@@ -79,15 +87,17 @@ Array [
       "getNamedReference": [MockFunction],
       "id": "5",
       "values": Object {
-        "ItemKey": "Item 4",
-        "ItemLabel": "item4",
+        "ItemKey": "Item 5",
+        "ItemLabel": "item5",
         "ItemState": "Error",
       },
     },
     "disabled": undefined,
     "id": "5",
-    "key": "Item 4",
-    "label": "item4",
+    "itemColor": undefined,
+    "itemIcon": undefined,
+    "key": "Item 5",
+    "label": "item5",
     "parentId": undefined,
     "state": "Error",
     "visuallyDisabled": undefined,
@@ -97,15 +107,17 @@ Array [
       "getNamedReference": [MockFunction],
       "id": "6",
       "values": Object {
-        "ItemKey": "Item 4",
-        "ItemLabel": "item4",
+        "ItemKey": "Item 6",
+        "ItemLabel": "item6",
         "ItemState": "Skipped",
       },
     },
     "disabled": undefined,
     "id": "6",
-    "key": "Item 4",
-    "label": "item4",
+    "itemColor": undefined,
+    "itemIcon": undefined,
+    "key": "Item 6",
+    "label": "item6",
     "parentId": undefined,
     "state": "Skipped",
     "visuallyDisabled": undefined,
@@ -115,18 +127,64 @@ Array [
       "getNamedReference": [MockFunction],
       "id": "7",
       "values": Object {
-        "ItemKey": "Item 4",
-        "ItemLabel": "item4",
+        "ItemKey": "Item 7",
+        "ItemLabel": "item7",
         "ItemState": "Unsaved",
       },
     },
     "disabled": undefined,
     "id": "7",
-    "key": "Item 4",
-    "label": "item4",
+    "itemColor": undefined,
+    "itemIcon": undefined,
+    "key": "Item 7",
+    "label": "item7",
     "parentId": undefined,
     "state": "Unsaved",
     "visuallyDisabled": undefined,
   },
+  Object {
+    "data": MockEntityRecord {
+      "getNamedReference": [MockFunction],
+      "id": "8",
+      "values": Object {
+        "ItemColor": "#C8A2C8",
+        "ItemIcon": "AddFriend",
+        "ItemKey": "Item 8",
+        "ItemLabel": "item8",
+        "ItemState": "Custom",
+      },
+    },
+    "disabled": undefined,
+    "id": "8",
+    "itemColor": "#C8A2C8",
+    "itemIcon": "AddFriend",
+    "key": "Item 8",
+    "label": "item8",
+    "parentId": undefined,
+    "state": "Custom",
+    "visuallyDisabled": undefined,
+  },
+  Object {
+    "data": MockEntityRecord {
+      "getNamedReference": [MockFunction],
+      "id": "9",
+      "values": Object {
+        "ItemColor": "#EE82EE",
+        "ItemIcon": "AddTo",
+        "ItemKey": "Item 9",
+        "ItemLabel": "item8",
+        "ItemState": "Custom",
+      },
+    },
+    "disabled": undefined,
+    "id": "9",
+    "itemColor": "#EE82EE",
+    "itemIcon": "AddTo",
+    "key": "Item 9",
+    "label": "item8",
+    "parentId": undefined,
+    "state": "Custom",
+    "visuallyDisabled": undefined,
+  },
 ]
 `;

SubwayNav/SubwayNav/_test_/__snapshots__/subwaynav-lifecycle.test.ts.snap

@@ -20,6 +20,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "1",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 1",
         "label": "item1",
         "parentId": undefined,
@@ -38,6 +40,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "2",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 2",
         "label": "item2",
         "parentId": undefined,
@@ -56,6 +60,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "3",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 3",
         "label": "item3",
         "parentId": undefined,
@@ -74,6 +80,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "4",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 4",
         "label": "item4",
         "parentId": undefined,
@@ -92,6 +100,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "5",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 4",
         "label": "item4",
         "parentId": undefined,
@@ -110,6 +120,8 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "6",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 4",
         "label": "item4",
         "parentId": undefined,
@@ -128,12 +140,58 @@ exports[`SubwayNav renders 1`] = `
         },
         "disabled": undefined,
         "id": "7",
+        "itemColor": undefined,
+        "itemIcon": undefined,
         "key": "Item 4",
         "label": "item4",
         "parentId": undefined,
         "state": "Unsaved",
         "visuallyDisabled": undefined,
       },
+      Object {
+        "data": MockEntityRecord {
+          "getNamedReference": [MockFunction],
+          "id": "8",
+          "values": Object {
+            "ItemColor": "#C8A2C8",
+            "ItemIcon": "AddFriend",
+            "ItemKey": "Item 8",
+            "ItemLabel": "item8",
+            "ItemState": "Custom",
+          },
+        },
+        "disabled": undefined,
+        "id": "8",
+        "itemColor": "#C8A2C8",
+        "itemIcon": "AddFriend",
+        "key": "Item 8",
+        "label": "item8",
+        "parentId": undefined,
+        "state": "Custom",
+        "visuallyDisabled": undefined,
+      },
+      Object {
+        "data": MockEntityRecord {
+          "getNamedReference": [MockFunction],
+          "id": "9",
+          "values": Object {
+            "ItemColor": "#EE82EE",
+            "ItemIcon": "AddTo",
+            "ItemKey": "Item 9",
+            "ItemLabel": "item8",
+            "ItemState": "Custom",
+          },
+        },
+        "disabled": undefined,
+        "id": "9",
+        "itemColor": "#EE82EE",
+        "itemIcon": "AddTo",
+        "key": "Item 9",
+        "label": "item8",
+        "parentId": undefined,
+        "state": "Custom",
+        "visuallyDisabled": undefined,
+      },
     ]
   }
   onSelected={[Function]}
@@ -155,27 +213,35 @@ exports[`SubwayNav renders dummy items when no items configured 1`] = `
     Array [
       Object {
         "id": "1",
+        "itemColor": "",
+        "itemIcon": "",
         "key": "1",
         "label": "Node 1",
         "parentId": undefined,
         "state": "Current",
       },
       Object {
         "id": "2",
+        "itemColor": "",
+        "itemIcon": "",
         "key": "2",
         "label": "Node 2",
         "parentId": undefined,
         "state": "Not Started",
       },
       Object {
         "id": "3",
+        "itemColor": "",
+        "itemIcon": "",
         "key": "3",
         "label": "Node 3",
         "parentId": undefined,
         "state": "Not Started",
       },
       Object {
         "id": "4",
+        "itemColor": "",
+        "itemIcon": "",
         "key": "4",
         "label": "Node 4",
         "parentId": undefined,