@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/common/tests/InputTable.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/common/tests/InputTable.spec.js

@@ -0,0 +1,166 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic, StartingData } from "../stories/InputTable.stories";
+describe("<InputTable/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("string table headers display correctly", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("th").at(0).text(), "First header").to.equal("Letter");
+        expect(wrapper.find("th").at(1).text(), "Second header").to.equal("Number");
+    });
+    it("JSX table headers display correctly", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("th").at(0).text()).to.include("Contexts");
+        expect(wrapper.find("th .tooltip-content").exists()).to.be.true;
+    });
+    it("providing 2 column headers creates a table with 2 columns of input fields", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").at(1).find("td input").length).to.equal(2);
+    });
+    it("providing 3 column headers creates a table with 3 columns", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("tr").at(1).find("td").length).to.equal(3);
+    });
+    it("when a component has startingData, that data is displayed, plus an extra row", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").length).to.equal(4);
+        expect(wrapper.find("tr").at(1).find("td input").at(0).props().value).to.equal("A");
+        expect(wrapper.find("tr").at(1).find("td input").at(1).props().value).to.equal("1");
+        expect(wrapper.find("tr").at(2).find("td input").at(0).props().value).to.equal("B");
+        expect(wrapper.find("tr").at(2).find("td input").at(1).props().value).to.equal("2");
+        expect(wrapper.find("tr").at(3).find("td input").at(0).props().value).to.equal("");
+        expect(wrapper.find("tr").at(3).find("td input").at(1).props().value).to.equal("");
+    });
+    it("when a component has no startingData, the table shows only 1 empty row", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("tr").length).to.equal(2);
+        expect(wrapper.find("tr").at(1).find("td input").at(0).props().value).to.equal("");
+        expect(wrapper.find("tr").at(1).find("td input").at(1).props().value).to.equal("");
+    });
+    it("show no X on the last row of a single-row table", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("tr").length).to.equal(2);
+        expect(wrapper.find("tr").at(1).find("td button").exists()).to.be.false;
+    });
+    it("show X's on all but the last row of a multi-row table", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").length).to.equal(4);
+        expect(wrapper.find("tr").at(1).find("td button").exists()).to.be.true;
+        expect(wrapper.find("tr").at(2).find("td button").exists()).to.be.true;
+        expect(wrapper.find("tr").at(3).find("td button").exists()).to.be.false;
+    });
+    it("Typing in the last row causes a new row to be created", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").length).to.equal(4);
+        expect(wrapper.find("input").length).to.equal(6);
+        wrapper
+            .find("tr")
+            .at(3)
+            .find("input")
+            .at(0)
+            .simulate("change", {
+            target: {
+                value: "New text",
+            },
+        });
+        expect(wrapper.find("tr").length).to.equal(5);
+        expect(wrapper.find("input").length).to.equal(8);
+    });
+    it("Clicking X on the first row deletes it", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").length).to.equal(4);
+        expect(wrapper.find("input").at(0).props().value).to.equal("A");
+        expect(wrapper.find("input").at(2).props().value).to.equal("B");
+        wrapper.find("button").at(0).simulate("click");
+        expect(wrapper.find("tr").length).to.equal(3);
+        expect(wrapper.find("input").at(0).props().value).to.equal("B");
+        expect(wrapper.find("input").at(2).props().value).to.equal("");
+    });
+    it("Clicking X on a middle row deletes it", () => {
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(wrapper.find("tr").length).to.equal(4);
+        expect(wrapper.find("input").at(0).props().value).to.equal("A");
+        expect(wrapper.find("input").at(2).props().value).to.equal("B");
+        expect(wrapper.find("input").at(4).props().value).to.equal("");
+        wrapper.find("button").at(1).simulate("click");
+        expect(wrapper.find("tr").length).to.equal(3);
+        expect(wrapper.find("input").at(0).props().value).to.equal("A");
+        expect(wrapper.find("input").at(2).props().value).to.equal("");
+    });
+    it("onUpdate is called after an input causes a new row to be added", () => {
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["B", "2"],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(1)).to.be.null;
+        wrapper
+            .find("input")
+            .at(4)
+            .simulate("change", {
+            target: {
+                value: "New text",
+            },
+        });
+        expect(buttonSpy.getCall(1).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["B", "2"],
+            ["New text", ""],
+        ]);
+        expect(buttonSpy.getCall(2).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["B", "2"],
+            ["New text", ""],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(3)).to.be.null;
+    });
+    it("onUpdate is called after an input is edited", () => {
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["B", "2"],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(1)).to.be.null;
+        wrapper
+            .find("input")
+            .at(0)
+            .simulate("change", {
+            target: {
+                value: "New text",
+            },
+        });
+        expect(buttonSpy.getCall(1).args[0]).to.deep.equal([
+            ["New text", "1"],
+            ["B", "2"],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(2)).to.be.null;
+    });
+    it("onUpdate is called after a row is deleted", () => {
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
+        const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
+        expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["B", "2"],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(1)).to.be.null;
+        wrapper.find("button").at(1).simulate("click");
+        expect(buttonSpy.getCall(1).args[0]).to.deep.equal([
+            ["A", "1"],
+            ["", ""],
+        ]);
+        expect(buttonSpy.getCall(2)).to.be.null;
+    });
+});
+//# sourceMappingURL=InputTable.spec.js.map

package/react/components/common/tests/InputTable.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTable.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/InputTable.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { Basic, StartingData } from \"../stories/InputTable.stories\";\nimport { InputTableProps } from \"../InputTable\";\n\ndescribe(\"<InputTable/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"string table headers display correctly\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"th\").at(0).text(), \"First header\").to.equal(\"Letter\");\n\t\texpect(wrapper.find(\"th\").at(1).text(), \"Second header\").to.equal(\"Number\");\n\t});\n\tit(\"JSX table headers display correctly\", () => {\n\t\tconst wrapper = mount(<Basic {...(Basic.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"th\").at(0).text()).to.include(\"Contexts\");\n\t\texpect(wrapper.find(\"th .tooltip-content\").exists()).to.be.true;\n\t});\n\tit(\"providing 2 column headers creates a table with 2 columns of input fields\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td input\").length).to.equal(2);\n\t});\n\tit(\"providing 3 column headers creates a table with 3 columns\", () => {\n\t\tconst wrapper = mount(<Basic {...(Basic.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td\").length).to.equal(3);\n\t});\n\tit(\"when a component has startingData, that data is displayed, plus an extra row\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(4);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td input\").at(0).props().value).to.equal(\"A\");\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td input\").at(1).props().value).to.equal(\"1\");\n\t\texpect(wrapper.find(\"tr\").at(2).find(\"td input\").at(0).props().value).to.equal(\"B\");\n\t\texpect(wrapper.find(\"tr\").at(2).find(\"td input\").at(1).props().value).to.equal(\"2\");\n\t\texpect(wrapper.find(\"tr\").at(3).find(\"td input\").at(0).props().value).to.equal(\"\");\n\t\texpect(wrapper.find(\"tr\").at(3).find(\"td input\").at(1).props().value).to.equal(\"\");\n\t});\n\tit(\"when a component has no startingData, the table shows only 1 empty row\", () => {\n\t\tconst wrapper = mount(<Basic {...(Basic.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(2);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td input\").at(0).props().value).to.equal(\"\");\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td input\").at(1).props().value).to.equal(\"\");\n\t});\n\tit(\"show no X on the last row of a single-row table\", () => {\n\t\tconst wrapper = mount(<Basic {...(Basic.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(2);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td button\").exists()).to.be.false;\n\t});\n\tit(\"show X's on all but the last row of a multi-row table\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(4);\n\t\texpect(wrapper.find(\"tr\").at(1).find(\"td button\").exists()).to.be.true;\n\t\texpect(wrapper.find(\"tr\").at(2).find(\"td button\").exists()).to.be.true;\n\t\texpect(wrapper.find(\"tr\").at(3).find(\"td button\").exists()).to.be.false;\n\t});\n\tit(\"Typing in the last row causes a new row to be created\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(4);\n\t\texpect(wrapper.find(\"input\").length).to.equal(6);\n\t\twrapper\n\t\t\t.find(\"tr\")\n\t\t\t.at(3)\n\t\t\t.find(\"input\")\n\t\t\t.at(0)\n\t\t\t.simulate(\"change\", {\n\t\t\t\ttarget: {\n\t\t\t\t\tvalue: \"New text\",\n\t\t\t\t},\n\t\t\t});\n\t\texpect(wrapper.find(\"tr\").length).to.equal(5);\n\t\texpect(wrapper.find(\"input\").length).to.equal(8);\n\t});\n\tit(\"Clicking X on the first row deletes it\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(4);\n\t\texpect(wrapper.find(\"input\").at(0).props().value).to.equal(\"A\");\n\t\texpect(wrapper.find(\"input\").at(2).props().value).to.equal(\"B\");\n\n\t\twrapper.find(\"button\").at(0).simulate(\"click\");\n\t\texpect(wrapper.find(\"tr\").length).to.equal(3);\n\t\texpect(wrapper.find(\"input\").at(0).props().value).to.equal(\"B\");\n\t\texpect(wrapper.find(\"input\").at(2).props().value).to.equal(\"\");\n\t});\n\tit(\"Clicking X on a middle row deletes it\", () => {\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\t\texpect(wrapper.find(\"tr\").length).to.equal(4);\n\t\texpect(wrapper.find(\"input\").at(0).props().value).to.equal(\"A\");\n\t\texpect(wrapper.find(\"input\").at(2).props().value).to.equal(\"B\");\n\t\texpect(wrapper.find(\"input\").at(4).props().value).to.equal(\"\");\n\n\t\twrapper.find(\"button\").at(1).simulate(\"click\");\n\t\texpect(wrapper.find(\"tr\").length).to.equal(3);\n\t\texpect(wrapper.find(\"input\").at(0).props().value).to.equal(\"A\");\n\t\texpect(wrapper.find(\"input\").at(2).props().value).to.equal(\"\");\n\t});\n\tit(\"onUpdate is called after an input causes a new row to be added\", () => {\n\t\tconst buttonSpy = sinon.spy(StartingData.args as InputTableProps, \"setData\");\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\n\t\texpect(buttonSpy.getCall(0).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(1)).to.be.null;\n\n\t\twrapper\n\t\t\t.find(\"input\")\n\t\t\t.at(4)\n\t\t\t.simulate(\"change\", {\n\t\t\t\ttarget: {\n\t\t\t\t\tvalue: \"New text\",\n\t\t\t\t},\n\t\t\t});\n\n\t\texpect(buttonSpy.getCall(1).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"New text\", \"\"],\n\t\t]);\n\n\t\texpect(buttonSpy.getCall(2).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"New text\", \"\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(3)).to.be.null;\n\t});\n\tit(\"onUpdate is called after an input is edited\", () => {\n\t\tconst buttonSpy = sinon.spy(StartingData.args as InputTableProps, \"setData\");\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\n\t\texpect(buttonSpy.getCall(0).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(1)).to.be.null;\n\n\t\twrapper\n\t\t\t.find(\"input\")\n\t\t\t.at(0)\n\t\t\t.simulate(\"change\", {\n\t\t\t\ttarget: {\n\t\t\t\t\tvalue: \"New text\",\n\t\t\t\t},\n\t\t\t});\n\n\t\texpect(buttonSpy.getCall(1).args[0]).to.deep.equal([\n\t\t\t[\"New text\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(2)).to.be.null;\n\t});\n\tit(\"onUpdate is called after a row is deleted\", () => {\n\t\tconst buttonSpy = sinon.spy(StartingData.args as InputTableProps, \"setData\");\n\t\tconst wrapper = mount(<StartingData {...(StartingData.args as InputTableProps)} />);\n\n\t\texpect(buttonSpy.getCall(0).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"B\", \"2\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(1)).to.be.null;\n\n\t\twrapper.find(\"button\").at(1).simulate(\"click\");\n\n\t\texpect(buttonSpy.getCall(1).args[0]).to.deep.equal([\n\t\t\t[\"A\", \"1\"],\n\t\t\t[\"\", \"\"],\n\t\t]);\n\t\texpect(buttonSpy.getCall(2)).to.be.null;\n\t});\n});\n"]}

package/react/components/common/tests/Tab.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/common/tests/Tab.spec.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { Plain, AutoFocus } from "../stories/Tab.stories";
+describe("<Tab/>", () => {
+    it("should change tab panels with the tab 'Number' is chosen", () => {
+        const wrapper = mount(React.createElement(Plain, Object.assign({}, Plain.args)));
+        wrapper.find("[role='tab']").at(1).simulate("click");
+        expect(wrapper.find(".visible div[data-label='Number']").exists()).to.be.true;
+        expect(wrapper.find(".visible div[data-label='Letter']").exists()).to.be.false;
+    });
+    it("should change tab panels with the tab 'Letter' is chosen", () => {
+        const wrapper = mount(React.createElement(Plain, Object.assign({}, Plain.args)));
+        wrapper.find("[role='tab']").at(0).simulate("click");
+        expect(wrapper.find(".visible div[data-label='Number']").exists()).to.be.false;
+        expect(wrapper.find(".visible div[data-label='Letter']").exists()).to.be.true;
+    });
+    it("should display autofocused tab panels when autofocus is provided", () => {
+        const wrapper = mount(React.createElement(AutoFocus, Object.assign({}, AutoFocus.args)));
+        expect(wrapper.find(".visible div[data-label='Number']").exists()).to.be.true;
+        expect(wrapper.find(".visible div[data-label='Letter']").exists()).to.be.false;
+    });
+});
+//# sourceMappingURL=Tab.spec.js.map

package/react/components/common/tests/Tab.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/Tab.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,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG1D,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QACnE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAAiB,EAAI,CAAC,CAAC;QAC/D,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC9E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAChF,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QACnE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAAiB,EAAI,CAAC,CAAC;QAC/D,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC/E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/E,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;QAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAM,SAAS,CAAC,IAAiB,EAAI,CAAC,CAAC;QACvE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC9E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAChF,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 { Plain, AutoFocus } from \"../stories/Tab.stories\";\nimport { TabProps } from \"../Tab\";\n\ndescribe(\"<Tab/>\", () => {\n\tit(\"should change tab panels with the tab 'Number' is chosen\", () => {\n\t\tconst wrapper = mount(<Plain {...(Plain.args as TabProps)} />);\n\t\twrapper.find(\"[role='tab']\").at(1).simulate(\"click\");\n\t\texpect(wrapper.find(\".visible div[data-label='Number']\").exists()).to.be.true;\n\t\texpect(wrapper.find(\".visible div[data-label='Letter']\").exists()).to.be.false;\n\t});\n\tit(\"should change tab panels with the tab 'Letter' is chosen\", () => {\n\t\tconst wrapper = mount(<Plain {...(Plain.args as TabProps)} />);\n\t\twrapper.find(\"[role='tab']\").at(0).simulate(\"click\");\n\t\texpect(wrapper.find(\".visible div[data-label='Number']\").exists()).to.be.false;\n\t\texpect(wrapper.find(\".visible div[data-label='Letter']\").exists()).to.be.true;\n\t});\n\tit(\"should display autofocused tab panels when autofocus is provided\", () => {\n\t\tconst wrapper = mount(<AutoFocus {...(AutoFocus.args as TabProps)} />);\n\t\texpect(wrapper.find(\".visible div[data-label='Number']\").exists()).to.be.true;\n\t\texpect(wrapper.find(\".visible div[data-label='Letter']\").exists()).to.be.false;\n\t});\n});\n"]}

package/react/components/common/tests/TimeSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/common/tests/TimeSelect.spec.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it, afterEach } from "mocha";
+import { expect } from "chai";
+import DefaultDropdownButton from "../../shared/DefaultDropdownButton";
+import { Default, Disabled } from "../stories/TimeSelect.stories";
+// For running accessibility scans
+import { accessibilityAssessor } from "../../sdd/tests/a11y_helper";
+// For testing user interactions (like click events):
+import sinon from "sinon";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+describe("<TimeSelect/>", () => {
+    // Used to clear after each interactive test using sinon
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("Should set the time from a prop", async () => {
+        const wrapper = mount(React.createElement(Default, Object.assign({}, Default.args)));
+        const labels = wrapper.find(".finsemble-dropdown__btn-label");
+        expect(labels.at(0).text(), "Correct hour value").to.equal("10");
+        expect(labels.at(1).text(), "Correct min value").to.equal("15");
+        expect(labels.at(2).text(), "Correct PM value").to.equal("PM");
+    });
+    it("Should set the time from a prop", async () => {
+        const wrapper = mount(React.createElement(Default, { initialTime: { hour: 3, minute: 30 } }));
+        const labels = wrapper.find(".finsemble-dropdown__btn-label");
+        expect(labels.at(0).text(), "Correct hour value").to.equal("3");
+        expect(labels.at(1).text(), "Correct min value").to.equal("30");
+        expect(labels.at(2).text(), "Correct PM value").to.equal("AM");
+    });
+    it("Should de disabled", () => {
+        const wrapper = mount(React.createElement(Disabled, Object.assign({}, Disabled.args)));
+        expect(wrapper.find(DefaultDropdownButton).at(0).props().enabled).to.be.false;
+        expect(wrapper.find(DefaultDropdownButton).at(1).props().enabled).to.be.false;
+        expect(wrapper.find(DefaultDropdownButton).at(2).props().enabled).to.be.false;
+    });
+    it("Should use a className", () => {
+        const wrapper = mount(React.createElement(Default, { className: "custom-class-name" }));
+        expect(wrapper.find(".custom-class-name").exists(), "Has the custom class name").to.be.true;
+    });
+    it("Should set the correct hour", () => {
+        var _a;
+        const change = sinon.spy();
+        const wrapper = mount(React.createElement(Default, { onChange: change, initialTime: (_a = Default.args) === null || _a === void 0 ? void 0 : _a.initialTime }));
+        wrapper.find(".finsemble-dropdown__btn").at(0).simulate("click");
+        wrapper.find(".finsemble-dropdown__btn-option").at(8).simulate("click");
+        expect(change.calledWith({ hour: 21, minute: 15, meridiem: "PM" }), "Has changed, function should be called").to.be
+            .true;
+    });
+    it("Should set the correct minute", () => {
+        var _a;
+        const change = sinon.spy();
+        const wrapper = mount(React.createElement(Default, { onChange: change, initialTime: (_a = Default.args) === null || _a === void 0 ? void 0 : _a.initialTime }));
+        wrapper.find(".finsemble-dropdown__btn").at(1).simulate("click");
+        wrapper.find(".finsemble-dropdown__btn-option").at(0).simulate("click");
+        expect(change.calledWith({ hour: 22, minute: 0, meridiem: "PM" }), "Has changed, function should be called").to.be
+            .true;
+    });
+    it("Should set the correct hour from meridiem", () => {
+        var _a;
+        const change = sinon.spy();
+        const wrapper = mount(React.createElement(Default, { onChange: change, initialTime: (_a = Default.args) === null || _a === void 0 ? void 0 : _a.initialTime }));
+        wrapper.find(".finsemble-dropdown__btn").at(2).simulate("click");
+        wrapper.find(".finsemble-dropdown__btn-option").at(0).simulate("click");
+        expect(change.calledWith({ hour: 10, minute: 15, meridiem: "AM" }), "Has changed, function should be called").to.be
+            .true;
+    });
+    it("should pass accessibility scans", async () => {
+        const wrapper = mount(React.createElement(Default, Object.assign({}, Default.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+});
+//# sourceMappingURL=TimeSelect.spec.js.map

package/react/components/common/tests/TimeSelect.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelect.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/TimeSelect.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it, afterEach } from \"mocha\";\nimport { expect } from \"chai\";\nimport { TimeSelectProps } from \"../TimeSelect\";\nimport DefaultDropdownButton from \"../../shared/DefaultDropdownButton\";\nimport { Default, Disabled } from \"../stories/TimeSelect.stories\";\n\n// For running accessibility scans\nimport { accessibilityAssessor } from \"../../sdd/tests/a11y_helper\";\n\n// For testing user interactions (like click events):\nimport sinon from \"sinon\";\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\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<TimeSelect/>\", () => {\n\t// Used to clear after each interactive test using sinon\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"Should set the time from a prop\", async () => {\n\t\tconst wrapper = mount(<Default {...(Default.args as TimeSelectProps)} />);\n\n\t\tconst labels = wrapper.find(\".finsemble-dropdown__btn-label\");\n\n\t\texpect(labels.at(0).text(), \"Correct hour value\").to.equal(\"10\");\n\t\texpect(labels.at(1).text(), \"Correct min value\").to.equal(\"15\");\n\t\texpect(labels.at(2).text(), \"Correct PM value\").to.equal(\"PM\");\n\t});\n\n\tit(\"Should set the time from a prop\", async () => {\n\t\tconst wrapper = mount(<Default initialTime={{ hour: 3, minute: 30 }} />);\n\n\t\tconst labels = wrapper.find(\".finsemble-dropdown__btn-label\");\n\n\t\texpect(labels.at(0).text(), \"Correct hour value\").to.equal(\"3\");\n\t\texpect(labels.at(1).text(), \"Correct min value\").to.equal(\"30\");\n\t\texpect(labels.at(2).text(), \"Correct PM value\").to.equal(\"AM\");\n\t});\n\n\tit(\"Should de disabled\", () => {\n\t\tconst wrapper = mount(<Disabled {...(Disabled.args as TimeSelectProps)} />);\n\t\texpect(wrapper.find(DefaultDropdownButton).at(0).props().enabled).to.be.false;\n\t\texpect(wrapper.find(DefaultDropdownButton).at(1).props().enabled).to.be.false;\n\t\texpect(wrapper.find(DefaultDropdownButton).at(2).props().enabled).to.be.false;\n\t});\n\n\tit(\"Should use a className\", () => {\n\t\tconst wrapper = mount(<Default className=\"custom-class-name\" />);\n\t\texpect(wrapper.find(\".custom-class-name\").exists(), \"Has the custom class name\").to.be.true;\n\t});\n\n\tit(\"Should set the correct hour\", () => {\n\t\tconst change = sinon.spy();\n\t\tconst wrapper = mount(<Default onChange={change} initialTime={Default.args?.initialTime} />);\n\t\twrapper.find(\".finsemble-dropdown__btn\").at(0).simulate(\"click\");\n\t\twrapper.find(\".finsemble-dropdown__btn-option\").at(8).simulate(\"click\");\n\t\texpect(change.calledWith({ hour: 21, minute: 15, meridiem: \"PM\" }), \"Has changed, function should be called\").to.be\n\t\t\t.true;\n\t});\n\n\tit(\"Should set the correct minute\", () => {\n\t\tconst change = sinon.spy();\n\t\tconst wrapper = mount(<Default onChange={change} initialTime={Default.args?.initialTime} />);\n\t\twrapper.find(\".finsemble-dropdown__btn\").at(1).simulate(\"click\");\n\t\twrapper.find(\".finsemble-dropdown__btn-option\").at(0).simulate(\"click\");\n\t\texpect(change.calledWith({ hour: 22, minute: 0, meridiem: \"PM\" }), \"Has changed, function should be called\").to.be\n\t\t\t.true;\n\t});\n\n\tit(\"Should set the correct hour from meridiem\", () => {\n\t\tconst change = sinon.spy();\n\t\tconst wrapper = mount(<Default onChange={change} initialTime={Default.args?.initialTime} />);\n\t\twrapper.find(\".finsemble-dropdown__btn\").at(2).simulate(\"click\");\n\t\twrapper.find(\".finsemble-dropdown__btn-option\").at(0).simulate(\"click\");\n\t\texpect(change.calledWith({ hour: 10, minute: 15, meridiem: \"AM\" }), \"Has changed, function should be called\").to.be\n\t\t\t.true;\n\t});\n\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<Default {...(Default.args as TimeSelectProps)} />);\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n});\n"]}

package/react/components/common/tests/Tooltip.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/common/tests/Tooltip.spec.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { Plain, Info, Error } from "../stories/Tooltip.stories";
+describe("<Tooltip/>", () => {
+    it("should display a help icon", () => {
+        const wrapper = mount(React.createElement(Plain, Object.assign({}, Plain.args)));
+        expect(wrapper.exists(".tooltip-icon")).to.be.true;
+    });
+    it("should display/hide sample text in a popup when moused over/off", () => {
+        const wrapper = mount(React.createElement(Plain, Object.assign({}, Plain.args)));
+        wrapper.find(".tooltip").first().simulate("mouseover");
+        expect(wrapper.find(".tooltip-content").is(".visible")).to.be.true;
+        wrapper.find(".tooltip").first().simulate("mouseleave");
+        expect(wrapper.find(".tooltip-content").is(".visible")).to.be.false;
+    });
+    it("should display/hide sample text in a popup when focused/blurred", () => {
+        const wrapper = mount(React.createElement(Plain, Object.assign({}, Plain.args)));
+        wrapper.find(".tooltip").first().simulate("focus");
+        expect(wrapper.find(".tooltip-content").is(".visible")).to.be.true;
+        wrapper.find(".tooltip").first().simulate("blur");
+        expect(wrapper.find(".tooltip-content").is(".visible")).to.be.false;
+    });
+    it("should display an error icon when type is error", () => {
+        const wrapper = mount(React.createElement(Error, Object.assign({}, Error.args)));
+        expect(wrapper.find(".tooltip-icon").is(".tooltip-icon-error")).to.be.true;
+    });
+    it("should display an info icon when type is info", () => {
+        const wrapper = mount(React.createElement(Info, Object.assign({}, Info.args)));
+        expect(wrapper.find(".tooltip-icon").is(".tooltip-icon-info")).to.be.true;
+    });
+    // CANNOT DETECT *ACCURATE* CSS POSITIONING WITH ENZYME
+    /*
+    it("should display a tooltip to the left when position is left", () => {
+        const wrapper = mount(<Left {...(Left.args as TooltipProps)} />);
+        wrapper.find(".tooltip").first().simulate("focus");
+        const iconNode = wrapper.find(".tooltip-icon").at(0).getDOMNode();
+        const iconLeftPx = window.getComputedStyle(iconNode).getPropertyValue("left");
+        const iconLeftNum = Number(iconLeftPx.replace("px", ""));
+        const contentNode = wrapper.find(".tooltip-content").at(0).getDOMNode();
+        const contentLeftPx = window.getComputedStyle(contentNode).getPropertyValue("left");
+        const contentLeftNum = Number(contentLeftPx.replace("px", ""));
+        
+        // Both contentLeftnum and iconLeftNum are 0
+        expect(contentLeftNum).to.be.lessThan(iconLeftNum);
+    });
+    */
+});
+//# sourceMappingURL=Tooltip.spec.js.map

package/react/components/common/tests/Tooltip.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.spec.js","sourceRoot":"","sources":["../../../../src/components/common/tests/Tooltip.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { Plain, Info, Error } from \"../stories/Tooltip.stories\";\nimport { TooltipProps } from \"../Tooltip\";\n\ndescribe(\"<Tooltip/>\", () => {\n\tit(\"should display a help icon\", () => {\n\t\tconst wrapper = mount(<Plain {...(Plain.args as TooltipProps)} />);\n\t\texpect(wrapper.exists(\".tooltip-icon\")).to.be.true;\n\t});\n\n\tit(\"should display/hide sample text in a popup when moused over/off\", () => {\n\t\tconst wrapper = mount(<Plain {...(Plain.args as TooltipProps)} />);\n\t\twrapper.find(\".tooltip\").first().simulate(\"mouseover\");\n\t\texpect(wrapper.find(\".tooltip-content\").is(\".visible\")).to.be.true;\n\t\twrapper.find(\".tooltip\").first().simulate(\"mouseleave\");\n\t\texpect(wrapper.find(\".tooltip-content\").is(\".visible\")).to.be.false;\n\t});\n\n\tit(\"should display/hide sample text in a popup when focused/blurred\", () => {\n\t\tconst wrapper = mount(<Plain {...(Plain.args as TooltipProps)} />);\n\t\twrapper.find(\".tooltip\").first().simulate(\"focus\");\n\t\texpect(wrapper.find(\".tooltip-content\").is(\".visible\")).to.be.true;\n\t\twrapper.find(\".tooltip\").first().simulate(\"blur\");\n\t\texpect(wrapper.find(\".tooltip-content\").is(\".visible\")).to.be.false;\n\t});\n\n\tit(\"should display an error icon when type is error\", () => {\n\t\tconst wrapper = mount(<Error {...(Error.args as TooltipProps)} />);\n\t\texpect(wrapper.find(\".tooltip-icon\").is(\".tooltip-icon-error\")).to.be.true;\n\t});\n\n\tit(\"should display an info icon when type is info\", () => {\n\t\tconst wrapper = mount(<Info {...(Info.args as TooltipProps)} />);\n\t\texpect(wrapper.find(\".tooltip-icon\").is(\".tooltip-icon-info\")).to.be.true;\n\t});\n\n\t// CANNOT DETECT *ACCURATE* CSS POSITIONING WITH ENZYME\n\t/*\n    it(\"should display a tooltip to the left when position is left\", () => {\n        const wrapper = mount(<Left {...(Left.args as TooltipProps)} />);\n        wrapper.find(\".tooltip\").first().simulate(\"focus\");\n        const iconNode = wrapper.find(\".tooltip-icon\").at(0).getDOMNode();\n        const iconLeftPx = window.getComputedStyle(iconNode).getPropertyValue(\"left\");\n        const iconLeftNum = Number(iconLeftPx.replace(\"px\", \"\"));\n        const contentNode = wrapper.find(\".tooltip-content\").at(0).getDOMNode();\n        const contentLeftPx = window.getComputedStyle(contentNode).getPropertyValue(\"left\");\n        const contentLeftNum = Number(contentLeftPx.replace(\"px\", \"\"));\n        \n        // Both contentLeftnum and iconLeftNum are 0\n        expect(contentLeftNum).to.be.lessThan(iconLeftNum);\n    });\n    */\n});\n"]}

package/react/components/favorites/FavoriteMaker.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Favorite } from "../../types/favoriteTypes";
+declare type FavoriteMakerProps = Favorite & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Creates a clickable "favorite" that coordinates with the toolbar's pinned <FavoritesShell>.
+ * @param {string} [className] - An optional CSS className to append.
+ * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.
+ * @param {string} [category] - "Workspace" | "Application". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.
+ * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.
+ * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.
+ */
+export declare const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps>;
+export {};

package/react/components/favorites/FavoriteMaker.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useFavorites } from "../../hooks/useFavorites";
+/**
+ * Creates a clickable "favorite" that coordinates with the toolbar's pinned <FavoritesShell>.
+ * @param {string} [className] - An optional CSS className to append.
+ * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.
+ * @param {string} [category] - "Workspace" | "Application". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.
+ * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.
+ * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.
+ */
+export const FavoriteMaker = ({ id, category, icon, name, children, className = "", style, }) => {
+    const { isFavorited, addFavorite, removeFavorite } = useFavorites();
+    // If no icon is specified then default to an avatar based on initials
+    const definitiveIcon = icon !== null && icon !== void 0 ? icon : {
+        imageType: "initials",
+        name: name,
+        category: category,
+    };
+    const toggleFavorite = (e) => {
+        definitiveIcon;
+        e.preventDefault();
+        e.stopPropagation();
+        if (isFavorited(id)) {
+            removeFavorite(id);
+        }
+        else {
+            addFavorite({
+                id,
+                category,
+                name,
+                icon: definitiveIcon,
+            });
+        }
+    };
+    const active = isFavorited(id) ? "favorited" : "not-favorited";
+    const classes = `favorite-maker ${active} ${className}`;
+    const title = isFavorited(id) ? "Unfavorite" : "Favorite";
+    return (React.createElement("div", { role: "button", tabIndex: 0, onClick: toggleFavorite, className: classes, style: style, title: title }, children || React.createElement("i", { className: "ff-favorite" })));
+};
+//# sourceMappingURL=FavoriteMaker.js.map

package/react/components/favorites/FavoriteMaker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpE,sEAAsE;IACtE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACrG,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/**\n * Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" | \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div role=\"button\" tabIndex={0} onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children || <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/favorites/FavoritesShell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "../../assets/css/favorites.css";
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
+export declare const FavoritesShell: () => JSX.Element;

package/react/components/favorites/FavoritesShell.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { useFavoritesShell } from "../../hooks/useFavoritesShell";
+import "../../assets/css/favorites.css";
+import { Icon } from "../icon/Icon";
+import { FinsembleDnDContext, AllowableDnDAxis } from "../legacyControls/FinsembleDnDContext";
+import { FinsembleDraggable } from "../legacyControls/FinsembleDraggable";
+/*
+ *  The component that loads and renders all the favorited items.
+ */
+const FavoritesComponent = () => {
+    const { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();
+    // When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.
+    // This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.
+    const reorder = ({ oldIndex, newIndex }) => {
+        setFavoritesOrder({ oldIndex, newIndex });
+    };
+    // Delete a favorite item from the toolbar
+    const triggerRemoveFavorite = (event, id) => {
+        event.stopPropagation();
+        removeFavorite(id);
+    };
+    const nameLengthCheckPoint = (name) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);
+    const favoriteElements = favorites.map(({ id, name, icon, category }, index) => (React.createElement(FinsembleDraggable, { draggableId: id, index: index, key: id, wrapperClass: "finsemble-toolbar-button", onClick: () => triggerFavorite(id, category), onKeydown: (e) => {
+            if (e.key === "Delete") {
+                triggerRemoveFavorite(e, id);
+            }
+        } },
+        React.createElement(Icon, Object.assign({ category: category }, icon)),
+        React.createElement("div", { className: "finsemble-toolbar-button-label", title: name }, nameLengthCheckPoint(name)),
+        React.createElement("i", { title: "Unfavorite", onClick: (event) => triggerRemoveFavorite(event, id), id: "toolbar-delete", className: "ff-close-3" }))));
+    return (React.createElement(FinsembleDnDContext, { onDragEnd: reorder, className: "finsemble-toolbar-section rearrange-region", id: "favoritesContainer", allowHorizontalScroll: true, axis: AllowableDnDAxis.x }, favoriteElements));
+};
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
+export const FavoritesShell = () => (
+// When user scrolls to one end of the favorite list, the corresponding variable will be set to "false" so that the scrolling indicator will grey out
+React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
+    React.createElement(FavoritesComponent, null)));
+//# sourceMappingURL=FavoritesShell.js.map

package/react/components/favorites/FavoritesShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesShell.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E;;GAEG;AACH,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE9F,mIAAmI;IACnI,mIAAmI;IACnI,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA0C,EAAE,EAAE;QAClF,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,0CAA0C;IAC1C,MAAM,qBAAqB,GAAG,CAC7B,KAAuE,EACvE,EAAU,EACT,EAAE;QACH,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,cAAc,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/E,oBAAC,kBAAkB,IAClB,WAAW,EAAE,EAAE,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,CAAC,EAC5C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACvB,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;aAC7B;QACF,CAAC;QAED,oBAAC,IAAI,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,EAAI;QACtC,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,IACzD,oBAAoB,CAAC,IAAI,CAAC,CACtB;QACN,2BACC,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,EACpD,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,YAAY,GAClB,CACe,CACrB,CAAC,CAAC;IACH,OAAO,CACN,oBAAC,mBAAmB,IACnB,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,4CAA4C,EACtD,EAAE,EAAC,oBAAoB,EACvB,qBAAqB,EAAE,IAAI,EAC3B,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAEvB,gBAAgB,CACI,CACtB,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AACnC,qJAAqJ;AAErJ,6BAAK,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,WAAW;IACxD,oBAAC,kBAAkB,OAAG,CACjB,CACN,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavoritesShell } from \"../../hooks/useFavoritesShell\";\nimport \"../../assets/css/favorites.css\";\nimport { Icon } from \"../icon/Icon\";\nimport { FinsembleDnDContext, AllowableDnDAxis } from \"../legacyControls/FinsembleDnDContext\";\nimport { FinsembleDraggable } from \"../legacyControls/FinsembleDraggable\";\n\n/*\n *  The component that loads and renders all the favorited items.\n */\nconst FavoritesComponent = () => {\n\tconst { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();\n\n\t// When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.\n\t// This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.\n\tconst reorder = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {\n\t\tsetFavoritesOrder({ oldIndex, newIndex });\n\t};\n\n\t// Delete a favorite item from the toolbar\n\tconst triggerRemoveFavorite = (\n\t\tevent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n\t\tid: string\n\t) => {\n\t\tevent.stopPropagation();\n\t\tremoveFavorite(id);\n\t};\n\n\tconst nameLengthCheckPoint = (name: string) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);\n\n\tconst favoriteElements = favorites.map(({ id, name, icon, category }, index) => (\n\t\t<FinsembleDraggable\n\t\t\tdraggableId={id}\n\t\t\tindex={index}\n\t\t\tkey={id}\n\t\t\twrapperClass=\"finsemble-toolbar-button\"\n\t\t\tonClick={() => triggerFavorite(id, category)}\n\t\t\tonKeydown={(e) => {\n\t\t\t\tif (e.key === \"Delete\") {\n\t\t\t\t\ttriggerRemoveFavorite(e, id);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<Icon category={category} {...icon} />\n\t\t\t<div className=\"finsemble-toolbar-button-label\" title={name}>\n\t\t\t\t{nameLengthCheckPoint(name)}\n\t\t\t</div>\n\t\t\t<i\n\t\t\t\ttitle=\"Unfavorite\"\n\t\t\t\tonClick={(event) => triggerRemoveFavorite(event, id)}\n\t\t\t\tid=\"toolbar-delete\"\n\t\t\t\tclassName=\"ff-close-3\"\n\t\t\t></i>\n\t\t</FinsembleDraggable>\n\t));\n\treturn (\n\t\t<FinsembleDnDContext\n\t\t\tonDragEnd={reorder}\n\t\t\tclassName=\"finsemble-toolbar-section rearrange-region\"\n\t\t\tid=\"favoritesContainer\"\n\t\t\tallowHorizontalScroll={true}\n\t\t\taxis={AllowableDnDAxis.x}\n\t\t>\n\t\t\t{favoriteElements}\n\t\t</FinsembleDnDContext>\n\t);\n};\n\n/**\n * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user\n * to launch, reorder, or delete a favorited item.\n */\nexport const FavoritesShell = () => (\n\t// When user scrolls to one end of the favorite list, the corresponding variable will be set to \"false\" so that the scrolling indicator will grey out\n\n\t<div className=\"finsemble-toolbar-section\" id=\"fav-shell\">\n\t\t<FavoritesComponent />\n\t</div>\n);\n"]}

package/react/components/favorites/FavoritesShell.spec.d.ts

@@ -0,0 +1 @@
+export {};