npm - @finsemble/finsemble-ui - Versions diffs - 6.6.0-beta.2 → 6.6.0-beta.3 - Mend

@finsemble/finsemble-ui 6.6.0-beta.2 → 6.6.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ // There is no typedef file for this module. A blank typedef file is necessary to avoid this compiler error: https://github.com/microsoft/TypeScript/issues/27956

package/package.json CHANGED Viewed

@@ -1,9 +1,10 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "6.6.0-beta.2",
+  "version": "6.6.0-beta.3",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
+    "index.d.ts",
     "react"
   ],
   "scripts": {
@@ -26,7 +27,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@finsemble/finsemble-api": "6.6.0-beta.2",
+    "@finsemble/finsemble-api": "6.6.0-beta.3",
     "@q42/floating-focus-a11y": "^1.3.3",
     "@reduxjs/toolkit": "^1.5.0",
     "@svgr/webpack": "^5.5.0",
@@ -34,7 +35,7 @@
     "@types/chai": "4.3.0",
     "@types/lodash": "4.14.178",
     "@types/mime-types": "^2.1.0",
-    "@types/mocha": "9.0.0",
+    "@types/mocha": "9.1.0",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-input-autosize": "2.2.1",

package/react/actions/smartDesktopDesignerActions.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { UnionOf } from "unionize";
-import { AuthenticationProvider, MenuType, PreloadType, ProjectError, ProjectSaveData } from "../types/smartDesktopDesignerTypes";
+import { AuthenticationProvider, MenuType, PreloadMap, PreloadType, ProjectError, ProjectSaveData } from "../types/smartDesktopDesignerTypes";
 import { services, FEA } from "@finsemble/finsemble-api";
 export declare const SmartDesktopDesignerActions: import("unionize").Unionized<{
     change_view: string;
@@ -9,7 +9,7 @@ export declare const SmartDesktopDesignerActions: import("unionize").Unionized<{
     update_app: services.Interop.types.AppDefinition;
     delete_app: string;
     update_menus: MenuType;
-    update_preloads: PreloadType[];
+    update_preloads: PreloadMap;
     set_current_preload: PreloadType | null;
     set_deploy_info: FEA.DeployInfo | null;
     set_publish_error: string | null;
@@ -29,7 +29,7 @@ export declare const SmartDesktopDesignerActions: import("unionize").Unionized<{
     update_app: services.Interop.types.AppDefinition;
     delete_app: string;
     update_menus: MenuType;
-    update_preloads: PreloadType[];
+    update_preloads: PreloadMap;
     set_current_preload: PreloadType | null;
     set_deploy_info: FEA.DeployInfo | null;
     set_publish_error: string | null;

package/react/actions/smartDesktopDesignerActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"smartDesktopDesignerActions.js","sourceRoot":"","sources":["../../src/actions/smartDesktopDesignerActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW,MAAM,UAAU,CAAC;~~AAcrD~~,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAClD;IACC,WAAW,EAAE,MAAM,EAAU;IAC7B,WAAW,EAAE,MAAM,EAAmB;IACtC,OAAO,EAAE,MAAM,EAAiB;IAChC,kBAAkB,EAAE,MAAM,EAAiB;IAC3C,UAAU,EAAE,MAAM,EAAiB;IACnC,UAAU,EAAE,MAAM,EAAU;IAC5B,YAAY,EAAE,MAAM,EAAY;IAChC,eAAe,EAAE,MAAM,~~EAAiB~~;~~IACxC~~,mBAAmB,EAAE,MAAM,EAAsB;IACjD,eAAe,EAAE,MAAM,EAAqB;IAC5C,iBAAiB,EAAE,MAAM,EAAiB;IAC1C,iBAAiB,EAAE,MAAM,EAAW;IACpC,gBAAgB,EAAE,MAAM,EAAmB;IAC3C,sBAAsB,EAAE,MAAM,EAAW;IACzC,oBAAoB,EAAE,MAAM,EAA0B;IACtD,oBAAoB,EAAE,MAAM,EAAU;IACtC,iBAAiB,EAAE,MAAM,EAAgB;IACzC,oBAAoB,EAAE,MAAM,EAAgB;IAC5C,4BAA4B,EAAE,MAAM,EAAW;CAC/C,EACD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CACjC,CAAC","sourcesContent":["import { unionize, ofType, UnionOf } from \"unionize\";\nimport {\n\tAuthenticationProvider,\n\tMenuType,\n\tPreloadType,\n\tProjectError,\n\tProjectSaveData,\n} from \"../types/smartDesktopDesignerTypes\";\n\nimport { services, FEA } from \"@finsemble/finsemble-api\";\n\ntype AppDefinition = services.Interop.types.AppDefinition;\ntype DeployInfo = FEA.DeployInfo;\n\nexport const SmartDesktopDesignerActions = unionize(\n\t{\n\t\tchange_view: ofType<string>(),\n\t\tupdate_apps: ofType<AppDefinition[]>(),\n\t\tnew_app: ofType<string \| null>(),\n\t\tset_current_app_id: ofType<string \| null>(),\n\t\tupdate_app: ofType<AppDefinition>(),\n\t\tdelete_app: ofType<string>(),\n\t\tupdate_menus: ofType<MenuType>(),\n\t\tupdate_preloads: ofType<~~PreloadType[]~~>(),\n\t\tset_current_preload: ofType<PreloadType \| null>(),\n\t\tset_deploy_info: ofType<DeployInfo \| null>(),\n\t\tset_publish_error: ofType<string \| null>(),\n\t\tset_is_publishing: ofType<boolean>(),\n\t\tset_project_info: ofType<ProjectSaveData>(),\n\t\tset_is_getting_started: ofType<boolean>(),\n\t\tupdate_auth_provider: ofType<AuthenticationProvider>(),\n\t\tenable_auth_provider: ofType<string>(),\n\t\tset_project_error: ofType<ProjectError>(),\n\t\tdelete_project_error: ofType<ProjectError>(),\n\t\tset_reviewing_project_errors: ofType<boolean>(),\n\t},\n\t{ tag: \"type\", value: \"payload\" }\n);\n\nexport type SmartDesktopDesignerActionsTypes = UnionOf<typeof SmartDesktopDesignerActions>;\n"]}
1	+ {"version":3,"file":"smartDesktopDesignerActions.js","sourceRoot":"","sources":["../../src/actions/smartDesktopDesignerActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW,MAAM,UAAU,CAAC;AAerD,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAClD;IACC,WAAW,EAAE,MAAM,EAAU;IAC7B,WAAW,EAAE,MAAM,EAAmB;IACtC,OAAO,EAAE,MAAM,EAAiB;IAChC,kBAAkB,EAAE,MAAM,EAAiB;IAC3C,UAAU,EAAE,MAAM,EAAiB;IACnC,UAAU,EAAE,MAAM,EAAU;IAC5B,YAAY,EAAE,MAAM,EAAY;IAChC,eAAe,EAAE,MAAM,EAAc;IACrC,mBAAmB,EAAE,MAAM,EAAsB;IACjD,eAAe,EAAE,MAAM,EAAqB;IAC5C,iBAAiB,EAAE,MAAM,EAAiB;IAC1C,iBAAiB,EAAE,MAAM,EAAW;IACpC,gBAAgB,EAAE,MAAM,EAAmB;IAC3C,sBAAsB,EAAE,MAAM,EAAW;IACzC,oBAAoB,EAAE,MAAM,EAA0B;IACtD,oBAAoB,EAAE,MAAM,EAAU;IACtC,iBAAiB,EAAE,MAAM,EAAgB;IACzC,oBAAoB,EAAE,MAAM,EAAgB;IAC5C,4BAA4B,EAAE,MAAM,EAAW;CAC/C,EACD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CACjC,CAAC","sourcesContent":["import { unionize, ofType, UnionOf } from \"unionize\";\nimport {\n\tAuthenticationProvider,\n\tMenuType,\n\tPreloadMap,\n\tPreloadType,\n\tProjectError,\n\tProjectSaveData,\n} from \"../types/smartDesktopDesignerTypes\";\n\nimport { services, FEA } from \"@finsemble/finsemble-api\";\n\ntype AppDefinition = services.Interop.types.AppDefinition;\ntype DeployInfo = FEA.DeployInfo;\n\nexport const SmartDesktopDesignerActions = unionize(\n\t{\n\t\tchange_view: ofType<string>(),\n\t\tupdate_apps: ofType<AppDefinition[]>(),\n\t\tnew_app: ofType<string \| null>(),\n\t\tset_current_app_id: ofType<string \| null>(),\n\t\tupdate_app: ofType<AppDefinition>(),\n\t\tdelete_app: ofType<string>(),\n\t\tupdate_menus: ofType<MenuType>(),\n\t\tupdate_preloads: ofType<PreloadMap>(),\n\t\tset_current_preload: ofType<PreloadType \| null>(),\n\t\tset_deploy_info: ofType<DeployInfo \| null>(),\n\t\tset_publish_error: ofType<string \| null>(),\n\t\tset_is_publishing: ofType<boolean>(),\n\t\tset_project_info: ofType<ProjectSaveData>(),\n\t\tset_is_getting_started: ofType<boolean>(),\n\t\tupdate_auth_provider: ofType<AuthenticationProvider>(),\n\t\tenable_auth_provider: ofType<string>(),\n\t\tset_project_error: ofType<ProjectError>(),\n\t\tdelete_project_error: ofType<ProjectError>(),\n\t\tset_reviewing_project_errors: ofType<boolean>(),\n\t},\n\t{ tag: \"type\", value: \"payload\" }\n);\n\nexport type SmartDesktopDesignerActionsTypes = UnionOf<typeof SmartDesktopDesignerActions>;\n"]}

package/react/assets/css/toolbar.css CHANGED Viewed

@@ -239,10 +239,6 @@ img.pinned-icon {
 	padding-top: 4px;
 }
-.ff-caret-down {
-	margin-top: 14px;
-}
 .finsemble-toolbar-drag-handle > svg {
 	width: 23px;
 	margin-top: -7px;

package/react/assets/css/userPreferences.css CHANGED Viewed

@@ -371,10 +371,39 @@ img {
 	margin-top: 0.5em;
 }
-.scheduled-restart-select-label {
-	margin-top: 0.45em;
-	margin-left: 4em;
-	margin-right: 0.5em;
+.close-toggle-container {
+	display: flex;
+	vertical-align: middle;
+	margin-bottom: 10px;
+}
+.close-toggle-container .complex-menu-checkbox-wrapper {
+	margin-top: 0;
+	width: 90px;
+	margin-right: 15px;
+}
+.time-selectors {
+	margin-left: 9em;
+}
+.daily-select {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+}
+.daily-select-label {
+	display: inline-block;
+	padding-right: 10px;
+}
+.daily-select-dropdown {
+	width: 100px;
+}
+.daily-select.disabled {
+	color: var(--content-nav-highlighter);
 }
 .disabled-restart {
@@ -537,8 +566,8 @@ option:focus {
 	width: 20%;
 }
-.indent-15px {
+.general-row {
 	display: flex;
 	margin-top: 8px;
-	margin-left: 15px;
+	margin-left: 10px;
 }

package/react/components/common/DropdownButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;~~AAS9E~~,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}
1	+ {"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAa9E,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/*\n @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}

package/react/components/common/FinsembleToggle.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ import "./css/toggle.css";
 export interface FinsembleToggleProps {
     label?: string;
     checked: boolean;
+    textToggle?: [onLabel: string, offLabel: string];
     onChange: (selected: boolean) => void;
+    enabled?: boolean;
 }
-export declare const FinsembleToggle: ({ checked, onChange, label }: FinsembleToggleProps) => JSX.Element;
+export declare const FinsembleToggle: ({ checked, onChange, label, enabled, textToggle }: FinsembleToggleProps) => JSX.Element;

package/react/components/common/FinsembleToggle.js CHANGED Viewed

@@ -1,19 +1,27 @@
 import React, { useEffect, useState } from "react";
 import "./css/toggle.css";
 import { FinsembleIcon } from "./FinsembleIcon";
-export const FinsembleToggle = ({ checked, onChange, label }) => {
+export const FinsembleToggle = ({ checked, onChange, label, enabled = true, textToggle }) => {
     const [selected, setSelected] = useState(checked);
     function doSetSelected(newValue) {
         onChange(newValue);
         setSelected(newValue);
     }
+    const [yesLabel, noLabel] = textToggle !== null && textToggle !== void 0 ? textToggle : [];
     useEffect(() => {
         setSelected(checked);
     }, [checked]);
-    return (React.createElement("span", { className: ["finsembleToggle", selected ? "finsembleToggle-on" : "finsembleToggle-off"].join(" ") },
-        React.createElement(FinsembleIcon, { className: "finsembleToggle-icon", icon: selected ? "toggle-on" : "toggle-off" }),
+    return (React.createElement("span", { className: [
+            "finsembleToggle",
+            selected ? "finsembleToggle-on" : "finsembleToggle-off",
+            !enabled ? "disabled" : "",
+        ].join(" ") },
+        !textToggle && React.createElement(FinsembleIcon, { className: "finsembleToggle-icon", icon: selected ? "toggle-on" : "toggle-off" }),
+        textToggle && (React.createElement("span", { className: "toggle-text-label-wrapper" },
+            React.createElement("span", { className: "toggle-text-label toggle-text-label_on" }, yesLabel),
+            React.createElement("span", { className: "toggle-text-label toggle-text-label_off" }, noLabel))),
         React.createElement("input", Object.assign({ type: "checkbox", onChange: (e) => {
                 doSetSelected(e.target.checked);
-            }, checked: selected }, (label ? { "aria-label": label } : "")))));
+            }, checked: selected, disabled: !enabled }, (label ? { "aria-label": label } : "")))));
 };
 //# sourceMappingURL=FinsembleToggle.js.map

package/react/components/common/FinsembleToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;~~AAQhD~~,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAwB,EAAE,EAAE;~~IACrF~~,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;~~IAED~~,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,~~8BAAM~~,SAAS,EAAE,~~CAAC,~~iBAAiB,~~EAAE,~~QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;~~QACtG~~,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,~~GAAkB~~;~~QAC7G~~,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,~~IACb~~,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\tonChange: (selected: boolean) => void;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span ~~className~~={[\"finsembleToggle\", ~~selected~~ ? \"finsembleToggle-on\" : \"finsembleToggle-off\"].join(\" \")}>\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"}~~></FinsembleIcon~~>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}
1	+ {"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,EAAwB,EAAE,EAAE;IACjH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BACC,SAAS,EAAE;YACV,iBAAiB;YACjB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACvD,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC;QAEV,CAAC,UAAU,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;QAC9G,UAAU,IAAI,CACd,8BAAM,SAAS,EAAC,2BAA2B;YAC1C,8BAAM,SAAS,EAAE,wCAAwC,IAAG,QAAQ,CAAQ;YAC5E,8BAAM,SAAS,EAAE,yCAAyC,IAAG,OAAO,CAAQ,CACtE,CACP;QACD,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,OAAO,IACd,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\ttextToggle?: [onLabel: string, offLabel: string];\n\tonChange: (selected: boolean) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label, enabled = true, textToggle }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\tconst [yesLabel, noLabel] = textToggle ?? [];\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\n\t\t\t\t\"finsembleToggle\",\n\t\t\t\tselected ? \"finsembleToggle-on\" : \"finsembleToggle-off\",\n\t\t\t\t!enabled ? \"disabled\" : \"\",\n\t\t\t].join(\" \")}\n\t\t>\n\t\t\t{!textToggle && <FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"} />}\n\t\t\t{textToggle && (\n\t\t\t\t<span className=\"toggle-text-label-wrapper\">\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_on\"}>{yesLabel}</span>\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_off\"}>{noLabel}</span>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\tdisabled={!enabled}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}

package/react/components/common/TimeSelect.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import React from "react";
+import "./css/time-select.css";
+export interface TimeSelectProps {
+    label?: string;
+    initialTime?: TimeSelectTime;
+    onChange?: (time: TimeSelectTime) => void;
+    enabled?: boolean;
+    className?: string;
+    minuteInterval?: number;
+}
+export declare type TimeSelectTime = {
+    hour: number;
+    minute: number;
+    meridiem?: string;
+};
+export declare const TimeSelect: React.FunctionComponent<TimeSelectProps>;

package/react/components/common/TimeSelect.js ADDED Viewed

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+import "./css/time-select.css";
+import DefaultDropdownButton from "../shared/DefaultDropdownButton";
+const DEFAULT_VALUE = {
+    hour: 4,
+    minute: 0,
+    meridiem: "AM",
+};
+export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onChange, className = "", minuteInterval = 15, }) => {
+    const [changed, setChanged] = useState(false);
+    const [time, setTime] = useState(initialTime !== null && initialTime !== void 0 ? initialTime : DEFAULT_VALUE);
+    let wrapClasses = `time-select ${className}`;
+    if (!enabled) {
+        wrapClasses = `${wrapClasses} disabled-time-select`;
+    }
+    let HOURS = [];
+    for (let i = 1; i < 13; i++) {
+        HOURS.push(i);
+    }
+    let MINUTES = ["00"];
+    for (let i = 1; i < 60; i++) {
+        if (i % minuteInterval == 0) {
+            MINUTES.push(i);
+        }
+    }
+    const setHour = (e) => {
+        let hour = Number(e);
+        if (hour < 12 && time.meridiem === "PM") {
+            hour = hour + 12;
+        }
+        else if (hour > 12 && time.meridiem === "AM") {
+            hour = hour - 12;
+        }
+        else if (time.meridiem === "AM" && hour === 12) {
+            hour = 0;
+        }
+        setTime(Object.assign(Object.assign({}, time), { hour }));
+    };
+    const setMinute = (e) => {
+        const minute = Number(e);
+        time.minute = minute;
+        setTime(Object.assign(Object.assign({}, time), { minute }));
+    };
+    const setMeridiem = (e) => {
+        const meridiem = e;
+        setTime(Object.assign(Object.assign({}, time), { meridiem }));
+    };
+    const correctMeridiem = () => {
+        if (!time.meridiem) {
+            let localMeridiem = "AM";
+            if (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {
+                localMeridiem = "PM";
+            }
+            setMeridiem(localMeridiem);
+        }
+    };
+    useEffect(() => {
+        setHour(time.hour);
+    }, [time.meridiem]);
+    useEffect(() => {
+        correctMeridiem();
+        if (enabled && onChange && changed) {
+            onChange(time);
+        }
+    }, [time.hour, time.minute]);
+    const hourOptions = HOURS.map((hour) => {
+        return {
+            optionLabel: hour,
+            optionValue: hour,
+            clickHandler: () => {
+                setChanged(true);
+                setHour(hour);
+            },
+        };
+    });
+    const minuteOptions = MINUTES.map((minute) => {
+        return {
+            optionLabel: minute,
+            optionValue: minute,
+            clickHandler: () => {
+                setChanged(true);
+                setMinute(minute);
+            },
+        };
+    });
+    const getDisplayHour = () => {
+        if (time.meridiem === "AM" && time.hour === 0) {
+            return 12;
+        }
+        else if (time.meridiem === "PM" && time.hour > 12) {
+            return time.hour - 12;
+        }
+        else {
+            return time.hour;
+        }
+    };
+    return (React.createElement("div", { className: wrapClasses, style: { display: "flex" } },
+        React.createElement("span", { className: "time-select-label" }, label),
+        React.createElement("div", { className: "row-section", style: { width: "10px", marginRight: "40px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, defaultSelection: {
+                    optionLabel: getDisplayHour().toString(),
+                    optionValue: getDisplayHour(),
+                    clickHandler: () => {
+                        setHour(getDisplayHour());
+                    },
+                }, enabled: enabled })),
+        React.createElement("div", { className: "row-section", style: { marginLeft: 30, marginRight: 10, marginTop: 5 } }, "\u00A0:\u00A0"),
+        React.createElement("div", { style: { width: "10px", marginRight: "65px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, defaultSelection: {
+                    optionLabel: (time.minute === 0 ? "00" : time.minute),
+                    optionValue: time.minute,
+                    clickHandler: () => {
+                        setMinute(time.minute);
+                    },
+                }, enabled: enabled })),
+        "\u00A0",
+        React.createElement("div", { className: "row-section", style: { width: "10px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: [
+                    {
+                        optionLabel: "AM",
+                        optionValue: "AM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("AM");
+                        },
+                    },
+                    {
+                        optionLabel: "PM",
+                        optionValue: "PM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("PM");
+                        },
+                    },
+                ], defaultSelection: {
+                    optionLabel: time.meridiem,
+                    optionValue: time.meridiem,
+                    clickHandler: () => {
+                        setHour(time.meridiem);
+                    },
+                }, enabled: enabled }))));
+};
+//# sourceMappingURL=TimeSelect.js.map

package/react/components/common/TimeSelect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../src/components/common/TimeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/time-select.css\";\nimport DefaultDropdownButton from \"../shared/DefaultDropdownButton\";\n\nexport interface TimeSelectProps {\n\tlabel?: string;\n\tinitialTime?: TimeSelectTime;\n\tonChange?: (time: TimeSelectTime) => void;\n\tenabled?: boolean;\n\tclassName?: string;\n\tminuteInterval?: number;\n}\n\nexport type TimeSelectTime = {\n\thour: number;\n\tminute: number;\n\tmeridiem?: string;\n};\n\nconst DEFAULT_VALUE: TimeSelectTime = {\n\thour: 4,\n\tminute: 0,\n\tmeridiem: \"AM\",\n};\n\nexport const TimeSelect: React.FunctionComponent<TimeSelectProps> = ({\n\tinitialTime,\n\tenabled = true,\n\tlabel = \"Time:\",\n\tonChange,\n\tclassName = \"\",\n\tminuteInterval = 15,\n}) => {\n\t/**\n\t * Prevents change event from triggering on initial setup\n\t */\n\tconst [changed, setChanged] = useState<boolean>(false);\n\tconst [time, setTime] = useState<TimeSelectTime>(initialTime ?? DEFAULT_VALUE);\n\n\tlet wrapClasses = `time-select ${className}`;\n\tif (!enabled) {\n\t\twrapClasses = `${wrapClasses} disabled-time-select`;\n\t}\n\n\t// Create an array 1-12.\n\tlet HOURS: Array<number> = [];\n\tfor (let i = 1; i < 13; i++) {\n\t\tHOURS.push(i);\n\t}\n\n\tlet MINUTES: any = [\"00\"];\n\tfor (let i = 1; i < 60; i++) {\n\t\tif (i % minuteInterval == 0) {\n\t\t\tMINUTES.push(i);\n\t\t}\n\t}\n\n\t/**\n\t * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.\n\t * e.g., 8PM (20) => 8AM (8).\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setHour = (e: any) => {\n\t\tlet hour = Number(e);\n\t\tif (hour < 12 && time.meridiem === \"PM\") {\n\t\t\thour = hour + 12;\n\t\t} else if (hour > 12 && time.meridiem === \"AM\") {\n\t\t\thour = hour - 12;\n\t\t} else if (time.meridiem === \"AM\" && hour === 12) {\n\t\t\thour = 0;\n\t\t}\n\n\t\tsetTime({ ...time, hour });\n\t};\n\n\t/**\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setMinute = (e: any) => {\n\t\tconst minute = Number(e);\n\t\ttime.minute = minute;\n\t\tsetTime({ ...time, minute });\n\t};\n\n\t/**\n\t * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook\n\t * @param {event} e\n\t */\n\tconst setMeridiem = (e: any) => {\n\t\tconst meridiem = e;\n\t\tsetTime({ ...time, meridiem });\n\t};\n\n\tconst correctMeridiem = () => {\n\t\tif (!time.meridiem) {\n\t\t\tlet localMeridiem = \"AM\";\n\t\t\tif (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {\n\t\t\t\tlocalMeridiem = \"PM\";\n\t\t\t}\n\t\t\tsetMeridiem(localMeridiem);\n\t\t}\n\t};\n\n\t/**\n\t * The meridiem has changed, update the hour\n\t */\n\tuseEffect(() => {\n\t\tsetHour(time.hour);\n\t}, [time.meridiem]);\n\n\t/**\n\t * Call on change when the hour and minute values have changed\n\t */\n\tuseEffect(() => {\n\t\tcorrectMeridiem();\n\t\tif (enabled && onChange && changed) {\n\t\t\tonChange(time);\n\t\t}\n\t}, [time.hour, time.minute]);\n\n\tconst hourOptions: Array<any> = HOURS.map((hour: number) => {\n\t\treturn {\n\t\t\toptionLabel: hour,\n\t\t\toptionValue: hour,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetHour(hour);\n\t\t\t},\n\t\t};\n\t});\n\tconst minuteOptions: Array<any> = MINUTES.map((minute: any) => {\n\t\treturn {\n\t\t\toptionLabel: minute,\n\t\t\toptionValue: minute,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetMinute(minute);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst getDisplayHour = () => {\n\t\tif (time.meridiem === \"AM\" && time.hour === 0) {\n\t\t\treturn 12;\n\t\t} else if (time.meridiem === \"PM\" && time.hour > 12) {\n\t\t\treturn time.hour - 12;\n\t\t} else {\n\t\t\treturn time.hour;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={wrapClasses} style={{ display: \"flex\" }}>\n\t\t\t<span className=\"time-select-label\">{label}</span>\n\t\t\t{/* HOURS */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\", marginRight: \"40px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={hourOptions}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayHour().toString(),\n\t\t\t\t\t\toptionValue: getDisplayHour(),\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(getDisplayHour());\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"row-section\" style={{ marginLeft: 30, marginRight: 10, marginTop: 5 }}>\n\t\t\t\t : \n\t\t\t</div>\n\t\t\t{/* MINUTES */}\n\t\t\t<div style={{ width: \"10px\", marginRight: \"65px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={minuteOptions}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: (time.minute === 0 ? \"00\" : time.minute) as string,\n\t\t\t\t\t\toptionValue: time.minute,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetMinute(time.minute);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t \n\t\t\t{/* MERIDIEM */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"AM\",\n\t\t\t\t\t\t\toptionValue: \"AM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"AM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"PM\",\n\t\t\t\t\t\t\toptionValue: \"PM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"PM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: time.meridiem as string,\n\t\t\t\t\t\toptionValue: time.meridiem,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(time.meridiem);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/css/accordion.css CHANGED Viewed

@@ -26,14 +26,12 @@
 }
 .accordion > .accordion-summary {
-	margin: 0.5em 24px;
-	margin-top: 0px;
+	margin: 0 24px 0.5em;
 }
 .accordion > .accordion-content {
-	margin: 0.5em 22px;
-	padding-bottom: 0px;
-	margin-bottom: 0px;
+	margin: 0.5em 22px 0;
+	padding-bottom: 0;
 }
 .accordion > button .accordion-caret {

package/react/components/common/css/time-select.css ADDED Viewed

@@ -0,0 +1,8 @@
+.time-select-label {
+	margin-top: 0.45em;
+	margin-right: 0.5em;
+}
+.disabled-time-select {
+	color: var(--content-nav-highlighter) !important;
+}

package/react/components/common/css/toggle.css CHANGED Viewed

@@ -5,14 +5,46 @@
 }
 .finsembleToggle input[type="checkbox"] {
-	margin: 0px;
+	margin: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 1;
 	position: absolute;
-	top: 0px;
-	left: 0px;
+	top: 0;
+	left: 0;
 	opacity: 0;
+	cursor: pointer;
+}
+.finsembleToggle.disabled input[type="checkbox"] {
+	cursor: default;
+}
+.toggle-text-label-wrapper {
+	display: flex;
+	width: 100%;
+}
+.toggle-text-label {
+	background: #22262f;
+	padding: 2px 10px;
+	border-radius: 2px;
+}
+.finsembleToggle-on .toggle-text-label_on {
+	background-color: #0a8cf4;
+}
+.finsembleToggle-off .toggle-text-label_off {
+	background-color: #0a8cf4;
+}
+.finsembleToggle-on:hover .toggle-text-label_off {
+	background-color: #3d4455;
+}
+.finsembleToggle-off:hover .toggle-text-label_on {
+	background-color: #3d4455;
 }
 .finsembleToggle-off .finsembleToggle-icon {
@@ -27,6 +59,10 @@
 	color: #087ddb;
 }
+.finsembleToggle.disabled {
+	filter: grayscale(10%) brightness(65%);
+}
 .finsembleToggle .finsembleToggle-icon {
 	font-size: 1.7rem;
 }

package/react/components/common/stories/FinsembleToggle.stories.d.ts CHANGED Viewed

@@ -5,8 +5,10 @@ import "../css/styles.css";
 import { Story } from "@storybook/react/types-6-0";
 declare const _default: {
     title: string;
-    component: ({ checked, onChange, label }: FinsembleToggleProps) => JSX.Element;
+    component: ({ checked, onChange, label, enabled, textToggle }: FinsembleToggleProps) => JSX.Element;
 };
 export default _default;
 export declare const Unchecked: Story<FinsembleToggleProps>;
 export declare const Checked: Story<FinsembleToggleProps>;
+export declare const Disabled: Story<FinsembleToggleProps>;
+export declare const TextLabels: Story<FinsembleToggleProps>;

package/react/components/common/stories/FinsembleToggle.stories.js CHANGED Viewed

@@ -20,4 +20,16 @@ Checked.args = {
     onChange: action("Selected values"),
     label: "Pre-checked test",
 };
+export const Disabled = Template.bind({});
+Disabled.args = {
+    enabled: false,
+    label: "Pre-checked test",
+};
+export const TextLabels = Template.bind({});
+TextLabels.args = {
+    checked: true,
+    onChange: action("Selected values"),
+    label: "Pre-checked test",
+    textToggle: ["Daily", "Weekly"],
+};
 //# sourceMappingURL=FinsembleToggle.stories.js.map

package/react/components/common/stories/FinsembleToggle.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleToggle.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/FinsembleToggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACd,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,eAAe;CAC1B,CAAC;AAEF,MAAM,QAAQ,GAAgC,CAAC,IAA0B,EAAE,EAAE,CAAC,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAC;AAE5G,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,MAAM,CAAC,iBAAiB,CAAC;IACnC,KAAK,EAAE,MAAM;CACb,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM,CAAC,iBAAiB,CAAC;IACnC,KAAK,EAAE,kBAAkB;CACzB,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleToggle, FinsembleToggleProps } from \"../FinsembleToggle\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\n\nexport default {\n\ttitle: \"Common/FinsembleToggle\",\n\tcomponent: FinsembleToggle,\n};\n\nconst Template: Story<FinsembleToggleProps> = (args: FinsembleToggleProps) => <FinsembleToggle {...args} />;\n\nexport const Unchecked = Template.bind({});\nUnchecked.args = {\n\tchecked: false,\n\tonChange: action(\"Selected values\"),\n\tlabel: \"Test\",\n};\nexport const Checked = Template.bind({});\nChecked.args = {\n\tchecked: true,\n\tonChange: action(\"Selected values\"),\n\tlabel: \"Pre-checked test\",\n};\n"]}
1	+ {"version":3,"file":"FinsembleToggle.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/FinsembleToggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACd,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,eAAe;CAC1B,CAAC;AAEF,MAAM,QAAQ,GAAgC,CAAC,IAA0B,EAAE,EAAE,CAAC,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAC;AAE5G,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,MAAM,CAAC,iBAAiB,CAAC;IACnC,KAAK,EAAE,MAAM;CACb,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM,CAAC,iBAAiB,CAAC;IACnC,KAAK,EAAE,kBAAkB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,kBAAkB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM,CAAC,iBAAiB,CAAC;IACnC,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;CAC/B,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleToggle, FinsembleToggleProps } from \"../FinsembleToggle\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\n\nexport default {\n\ttitle: \"Common/FinsembleToggle\",\n\tcomponent: FinsembleToggle,\n};\n\nconst Template: Story<FinsembleToggleProps> = (args: FinsembleToggleProps) => <FinsembleToggle {...args} />;\n\nexport const Unchecked = Template.bind({});\nUnchecked.args = {\n\tchecked: false,\n\tonChange: action(\"Selected values\"),\n\tlabel: \"Test\",\n};\nexport const Checked = Template.bind({});\nChecked.args = {\n\tchecked: true,\n\tonChange: action(\"Selected values\"),\n\tlabel: \"Pre-checked test\",\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n\tenabled: false,\n\tlabel: \"Pre-checked test\",\n};\n\nexport const TextLabels = Template.bind({});\nTextLabels.args = {\n\tchecked: true,\n\tonChange: action(\"Selected values\"),\n\tlabel: \"Pre-checked test\",\n\ttextToggle: [\"Daily\", \"Weekly\"],\n};\n"]}

package/react/components/common/stories/TimeSelect.stories.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from "react";
+import { TimeSelectProps } from "../TimeSelect";
+import { Story } from "@storybook/react/types-6-0";
+import "../../../assets/css/finsemble.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<TimeSelectProps>;
+};
+export default _default;
+export declare const Default: Story<TimeSelectProps>;
+export declare const Disabled: Story<TimeSelectProps>;

package/react/components/common/stories/TimeSelect.stories.js ADDED Viewed

@@ -0,0 +1,20 @@
+import React from "react";
+import { TimeSelect } from "../TimeSelect";
+import "../../../assets/css/finsemble.css";
+export default {
+    title: "Common/TimeSelect",
+    component: TimeSelect,
+};
+const Template = (args) => React.createElement(TimeSelect, Object.assign({}, args));
+export const Default = Template.bind({});
+Default.args = {
+    initialTime: {
+        hour: 22,
+        minute: 15,
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    enabled: false,
+};
+//# sourceMappingURL=TimeSelect.stories.js.map

package/react/components/common/stories/TimeSelect.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeSelect.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/TimeSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAC;AAE5D,OAAO,mCAAmC,CAAC;AAE3C,eAAe;IACd,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,QAAQ,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,IAAI,EAAI,CAAC;AAE7F,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACd,WAAW,EAAE;QACZ,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,EAAE;KACV;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,KAAK;CACd,CAAC","sourcesContent":["import React from \"react\";\nimport { TimeSelect, TimeSelectProps } from \"../TimeSelect\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport \"../../../assets/css/finsemble.css\";\n\nexport default {\n\ttitle: \"Common/TimeSelect\",\n\tcomponent: TimeSelect,\n};\n\nconst Template: Story<TimeSelectProps> = (args: TimeSelectProps) => <TimeSelect {...args} />;\n\nexport const Default = Template.bind({});\nDefault.args = {\n\tinitialTime: {\n\t\thour: 22,\n\t\tminute: 15,\n\t},\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n\tenabled: false,\n};\n"]}

package/react/components/common/tests/FinsembleToggle.spec.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 import { describe, it } from "mocha";
 import { expect } from "chai";
 import sinon from "sinon";
-import { Checked, Unchecked } from "../stories/FinsembleToggle.stories";
+import { Checked, Unchecked, TextLabels } from "../stories/FinsembleToggle.stories";
 import { accessibilityAssessor } from "../../sdd/tests/a11y_helper";
 import addons, { mockChannel } from "@storybook/addons";
 import { waitTime } from "../../sdd/sdd_helpers";
@@ -24,5 +24,10 @@ describe("<FinsembleToggle/>", () => {
         wrapper.update();
         expect(wrapper.find("input[type='checkbox']").at(0).prop("checked")).to.be.true;
     });
+    it("should display checked labels", async () => {
+        const wrapper = mount(React.createElement(TextLabels, Object.assign({}, TextLabels.args)));
+        expect(wrapper.find(".toggle-text-label").at(0).text()).to.equal("Daily");
+        expect(wrapper.find(".toggle-text-label").at(1).text()).to.equal("Weekly");
+    });
 });
 //# sourceMappingURL=FinsembleToggle.spec.js.map

package/react/components/common/tests/FinsembleToggle.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleToggle.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/FinsembleToggle.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;~~AACxE~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAM,SAAS,CAAC,IAA6B,EAAI,CAAC,CAAC;QAEnF,MAAM,CAAC,MAAM,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;;QACxF,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAM,SAAS,CAAC,IAA6B,EAAI,CAAC,CAAC;QAEnF,MAAM,QAAQ,CAAC,EAAE,CAAC,CAAC;QAEnB,OAAO,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAA,OAAO,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC,CAAC;QAErD,OAAO,CAAC,MAAM,EAAE,CAAC;QAEjB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACjF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { FinsembleToggleProps } from \"../FinsembleToggle\";\nimport { Checked, Unchecked } from \"../stories/FinsembleToggle.stories\";\nimport { accessibilityAssessor } from \"../../sdd/tests/a11y_helper\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\nimport { waitTime } from \"../../sdd/sdd_helpers\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<FinsembleToggle/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<Unchecked {...(Unchecked.args as FinsembleToggleProps)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"should be checked items if checked prop is updated after initial render\", async () => {\n\t\tconst wrapper = mount(<Unchecked {...(Unchecked.args as FinsembleToggleProps)} />);\n\n\t\tawait waitTime(10);\n\n\t\twrapper.setProps({ checked: Checked.args?.checked });\n\n\t\twrapper.update();\n\n\t\texpect(wrapper.find(\"input[type='checkbox']\").at(0).prop(\"checked\")).to.be.true;\n\t});\n});\n"]}
1	+ {"version":3,"file":"FinsembleToggle.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/FinsembleToggle.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAM,SAAS,CAAC,IAA6B,EAAI,CAAC,CAAC;QAEnF,MAAM,CAAC,MAAM,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;;QACxF,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAM,SAAS,CAAC,IAA6B,EAAI,CAAC,CAAC;QAEnF,MAAM,QAAQ,CAAC,EAAE,CAAC,CAAC;QAEnB,OAAO,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAA,OAAO,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC,CAAC;QAErD,OAAO,CAAC,MAAM,EAAE,CAAC;QAEjB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,UAAU,oBAAM,UAAU,CAAC,IAA6B,EAAI,CAAC,CAAC;QACrF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { FinsembleToggleProps } from \"../FinsembleToggle\";\nimport { Checked, Unchecked, TextLabels } from \"../stories/FinsembleToggle.stories\";\nimport { accessibilityAssessor } from \"../../sdd/tests/a11y_helper\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\nimport { waitTime } from \"../../sdd/sdd_helpers\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<FinsembleToggle/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<Unchecked {...(Unchecked.args as FinsembleToggleProps)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"should be checked items if checked prop is updated after initial render\", async () => {\n\t\tconst wrapper = mount(<Unchecked {...(Unchecked.args as FinsembleToggleProps)} />);\n\n\t\tawait waitTime(10);\n\n\t\twrapper.setProps({ checked: Checked.args?.checked });\n\n\t\twrapper.update();\n\n\t\texpect(wrapper.find(\"input[type='checkbox']\").at(0).prop(\"checked\")).to.be.true;\n\t});\n\n\tit(\"should display checked labels\", async () => {\n\t\tconst wrapper = mount(<TextLabels {...(TextLabels.args as FinsembleToggleProps)} />);\n\t\texpect(wrapper.find(\".toggle-text-label\").at(0).text()).to.equal(\"Daily\");\n\t\texpect(wrapper.find(\".toggle-text-label\").at(1).text()).to.equal(\"Weekly\");\n\t});\n});\n"]}

package/react/components/{sdd/tests/Preloads.spec.d.ts → common/tests/TimeSelect.spec.d.ts} RENAMED Viewed

File without changes