@finsemble/finsemble-ui 6.3.2 → 6.5.0-beta.2

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

@@ -0,0 +1,99 @@
+.accordion {
+	width: 100%;
+}
+
+.accordion-cb {
+	display: none;
+}
+
+.accordion.medium > button {
+	font-size: 1.2em;
+}
+
+.accordion.small .finsemble-icon-caret {
+	font-size: 0.8em;
+}
+
+.accordion button {
+	width: 100%;
+	display: flex;
+	justify-content: left;
+	padding: 0.5em 0;
+}
+
+.accordion button:hover {
+	background: #373b43;
+}
+
+.accordion > .accordion-summary {
+	margin: 0.5em 24px;
+	margin-top: 0px;
+}
+
+.accordion > .accordion-content {
+	margin: 0.5em 22px;
+	padding-bottom: 0px;
+	margin-bottom: 0px;
+}
+
+.accordion > button .accordion-caret {
+	transform: rotate(-90deg) translate(0.1em);
+	flex-basis: 1.5em;
+}
+
+.accordion input:checked + button .accordion-caret {
+	transform: rotate(0) translate(0, 0.2em);
+}
+
+.accordion input:not(:checked) ~ .accordion-content {
+	display: none;
+}
+
+input:checked ~ .accordion-content {
+	display: block;
+}
+
+/** Animations */
+.accordion.enter-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotateIcon;
+}
+
+.accordion.exit-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotateIcon;
+	animation-direction: reverse;
+}
+
+.accordion.enter-active > .accordion-content {
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: openContent;
+}
+
+.accordion.exit-active > .accordion-content {
+	display: block !important;
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: openContent;
+	animation-direction: reverse;
+	max-height: 0;
+}
+
+@keyframes rotateIcon {
+	from {
+		transform: rotate(-90deg) translate(0.1em);
+	}
+	to {
+		transform: rotate(0) translate(0, 0.2em);
+	}
+}
+
+@keyframes openContent {
+	from {
+		max-height: 1px;
+	}
+	to {
+		max-height: 2000px;
+	}
+}

package/react/components/common/css/application-edit-page.css

@@ -6,7 +6,6 @@
 	right: 0px;
 	width: 100%;
 	height: 100%;
-	background-color: #171a20;
 }
 
 .app-edit-actions {
@@ -21,6 +20,11 @@
 	justify-content: space-between;
 }
 
+.app-edit-app-name {
+	margin: 0.9em 2em;
+	margin-left: 20px;
+}
+
 .app-edit-fieldset {
 	border: 0px;
 	padding: 0px;
@@ -42,16 +46,26 @@
 	opacity: 75%;
 }
 
+.app-edit-type-field {
+	padding-right: 1.5em;
+	flex-grow: 1;
+	max-width: 25rem;
+}
+
 .app-edit-field {
 	display: flex;
 	align-items: center;
-	margin: 0.9em 3em;
+	margin-top: 0.9em;
+	margin-bottom: 0.9em;
+	margin-left: 0px;
+	margin-right: 3em;
 }
 
 .app-edit-field > label {
 	width: 10em;
 	flex-grow: 0;
 	opacity: 75%;
+	margin-right: 1em;
 }
 
 .app-edit-field .emperorSelectContainer,
@@ -115,3 +129,196 @@ span.unit {
 	justify-content: center;
 	align-items: center;
 }
+
+.quick-add-app {
+	width: 500px;
+	margin-top: 12px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	border-width: 1px;
+	border-style: dashed;
+	border-color: #42a5ba;
+	border-radius: 2px;
+}
+
+.app-icon {
+	max-width: 16px;
+	max-height: 16px;
+	margin-right: 8px;
+}
+
+.accordion-edit-block td {
+	padding-bottom: 12px;
+}
+
+.accordion-edit-block .complex-menu-checkbox-wrapper {
+	margin-top: 0px;
+}
+
+.app-edit-range {
+	-webkit-appearance: none;
+	margin: 10px 10px 10px 0px;
+	width: 140px;
+}
+
+.app-edit-range::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 1px;
+	cursor: pointer;
+	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+	background: #979797;
+	border-radius: 25px;
+	border: 0px solid #000101;
+}
+.app-edit-range::-webkit-slider-thumb {
+	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+	border: 0px solid #000000;
+	height: 10px;
+	width: 10px;
+	border-radius: 10px;
+	background: #d8d8d8;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -5px;
+}
+
+.position-entry .finsemble-dropdown__btn {
+	width: 80px;
+}
+.position-entry .finsemble-dropdown__btn i {
+	position: absolute;
+	right: 0px;
+	margin-right: 2px;
+}
+
+.accordion.medium > .accordion-content {
+	margin-left: 0px;
+}
+
+.accordion-summary {
+	color: #aaaaaa;
+}
+
+.accordion-content > .app-edit-field {
+	margin-left: 0px;
+}
+
+.accordion-edit-block .label-col {
+	width: 135px;
+}
+.accordion-edit-block .content-col {
+	width: 350px;
+}
+
+.accordion-edit-block td {
+	text-align: left;
+	color: #aaaaaa;
+}
+
+.app-edit-field,
+.app-size-field label {
+	color: #aaaaaa;
+}
+
+.accordion-edit-block input[type="range"] {
+	width: 241px;
+}
+
+.accordion-edit-block input[type="text"],
+.inputTable input[type="text"] {
+	color: #f5f6f7;
+}
+
+.accordion-edit-block .complex-menu-checkbox-wrapper,
+.pull-left .complex-menu-checkbox-wrapper {
+	margin-left: 0px;
+}
+.inputTable th {
+	text-align: left;
+}
+.inputTable th .tooltip {
+	margin-left: 15px;
+	height: 15px;
+	width: 15px;
+}
+.inputTable .finsemble-icon-times {
+	color: #999999;
+}
+.inputTable [type="text"] {
+	width: 135px;
+	margin-right: 13px;
+}
+
+.accordion-edit-block td[rowspan] {
+	vertical-align: top;
+	padding-top: 1px;
+}
+
+.accordion.small .label {
+	margin-left: 10px;
+}
+
+.always-present.accordion-edit-block textarea,
+.always-present.accordion-edit-block input[type="text"] {
+	width: 100%;
+}
+
+.always-present {
+	margin-left: 20px;
+}
+
+.app-edit legend {
+	margin-left: 20px;
+}
+
+.app-edit-app-name {
+	color: #ffffff;
+}
+
+table.accordion-edit-block {
+	width: 515px;
+}
+
+.inputTable th,
+.inputTable td {
+	padding-left: 0px;
+}
+
+.accordion-edit-block .finsemble-dropdown__btn-options {
+	text-align: left;
+}
+
+.accordion-edit-block label:first-of-type input[type="radio"] {
+	margin-left: 0px;
+}
+
+a,
+a:visited {
+	color: white;
+}
+
+.accordion-edit-block td .finsemble-icon {
+	margin-right: 3px;
+}
+
+.quick-add-path .file-input-value {
+	white-space: nowrap;
+	width: 150px;
+	margin-left: 9px;
+}
+
+.quick-add-path #app-path {
+	width: 350px;
+	overflow: hidden;
+	display: inline-block;
+
+	/* Weird hack to get the ellipsis to show up at the front of the text (https://davidwalsh.name/css-ellipsis-left) */
+	text-overflow: ellipsis;
+	direction: rtl;
+	text-align: left;
+}
+
+.quick-add-path .file-input-container {
+	padding-bottom: 10px;
+	padding-top: 5px;
+}

package/react/components/common/css/application-list.css

@@ -9,6 +9,7 @@
 	padding: 0.7em;
 	font-weight: bold;
 	border-radius: 1.45em;
+	cursor: pointer;
 }
 
 .app-list-row {
@@ -20,6 +21,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	cursor: pointer;
 }
 
 .app-list-row div {
@@ -45,3 +47,7 @@
 	margin-top: 1.2em;
 	text-align: center;
 }
+
+.app-list-empty.no-dropzone {
+	border-style: solid;
+}

package/react/components/common/css/button.css

@@ -68,7 +68,7 @@ button {
 
 .button-container-primary button {
 	border-radius: 2em;
-	background-color: #373b43;
+	background-color: #171a20;
 	padding: 1.2em 1.1em 1.2em 1em;
 	display: flex;
 	height: 1em;
@@ -80,12 +80,12 @@ button {
 }
 
 .button-container-primary button:hover {
-	background-color: #3d4455;
+	background-color: #acb2c0;
 }
 
 .button-container-primary button[disabled] {
 	color: #acb2c0;
-	background-color: #3d4455;
+	background-color: #acb2c0;
 	cursor: default;
 }
 
@@ -102,7 +102,7 @@ button {
 
 .button-container-secondary button[disabled] {
 	color: #000000b3;
-	background-color: #3d4455;
+	background-color: #acb2c0;
 	cursor: default;
 }
 
@@ -118,7 +118,7 @@ button {
 	align-items: center;
 	padding-top: 0.5em;
 	margin: 0.5em 0.5em;
-	background-color: #373b43;
+	background-color: #171a20;
 	border-radius: 0.5em;
 	font-size: 1.1em;
 	transition: all 0.25s;
@@ -142,8 +142,10 @@ button {
 /* Danger */
 
 .button-container-danger button {
-	background-color: #f26666;
-	color: #000;
+	background-color: transparent;
+	color: #f26666;
+	border-radius: 5px;
+	border: solid 1px #f26666;
 }
 
 .button-container-danger button:hover {

package/react/components/common/css/checkbox.css

@@ -0,0 +1,30 @@
+.complex-menu-checkbox-wrapper {
+	display: flex;
+	align-items: center;
+	margin-top: 8px;
+	margin-left: 12px;
+}
+
+.complex-menu-checkbox {
+	border-radius: 2px;
+	width: 14px;
+	height: 14px;
+	margin-right: 8px;
+	border: 1px solid var(--core-primary-4);
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.complex-menu-checkbox-label {
+	display: inline-block;
+}
+
+.complex-menu-checkbox.checked {
+	border: 1px solid var(--accent-primary);
+	font-size: 12px;
+}
+
+.complex-menu-checkbox.checked .finsemble-icon {
+	color: var(--accent-primary);
+}

package/react/components/common/css/file-input.css

@@ -47,3 +47,19 @@ input[type="file"] {
 .file-input-error {
 	color: #f26666;
 }
+
+.file-input-container .button-container-primary button {
+	background-color: var(--core-primary-4);
+}
+
+.file-input-container .button-container-primary button:disabled {
+	color: #aaaaaa;
+}
+
+.file-input-value-input {
+	color: #f5f6f7;
+}
+
+.file-input-value-input.invalid {
+	border-bottom: 2px solid #f26666;
+}

package/react/components/common/css/header.css

@@ -4,9 +4,7 @@
 }
 
 .view-header .button-container-icon button {
-	font-size: 1.8rem;
-	position: relative;
-	top: 5px;
+	font-size: 2.15rem;
 }
 
 .view-title {
@@ -30,14 +28,3 @@
 .view-title button {
 	margin-right: 0.9rem;
 }
-
-.view-title::after {
-	content: " ";
-	display: block;
-	position: absolute;
-	top: 100%;
-	width: 100%;
-	height: 0.15rem;
-	margin-top: 0.5rem;
-	background-color: #42a5ba;
-}

package/react/components/common/css/preload-edit-page.css

@@ -0,0 +1,37 @@
+.preload-edit-table {
+	width: 515px;
+}
+
+.preload-edit-table td,
+.preload-edit-table th {
+	padding-bottom: 17px;
+}
+
+.preload-edit-table th {
+	width: 130px;
+	text-align: left;
+	font-weight: normal;
+	vertical-align: bottom;
+}
+
+th.table-header__top-label {
+	vertical-align: top;
+}
+
+.preload-edit-table .edit-field > input[type="text"] {
+	width: 100%;
+}
+
+.preload-edit-table .emperorSelectContainer {
+	width: 100%;
+}
+
+.preload-edit-table .load-option {
+	margin-bottom: 10px;
+}
+
+.preload-edit-actions {
+	display: flex;
+	justify-content: space-between;
+	margin: 0.65em 3em 0.65em 0;
+}

package/react/components/common/css/styles.css

@@ -10,7 +10,6 @@ html {
 
 p {
 	opacity: 75%;
-	margin-left: 1em;
 	line-height: 1.7em;
 }
 

package/react/components/common/css/tab.css

@@ -31,7 +31,7 @@
 }
 
 [role="tab"][aria-selected="true"] {
-	border-bottom: solid 3px #42a5ba;
+	border-bottom: solid 3px #902e57;
 	margin-bottom: -3px;
 }
 

package/react/components/common/stories/Accordion.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { AccordionProps } from "../Accordion";
+import { Story } from "@storybook/react/types-6-0";
+import "../../../assets/css/finsemble.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<AccordionProps>;
+};
+export default _default;
+export declare const BasicAccordion: Story<AccordionProps>;
+export declare const BasicAccordionWithSummary: Story<AccordionProps>;
+export declare const BasicAccordionMedium: Story<AccordionProps>;
+export declare const BasicAccordionOpen: Story<AccordionProps>;
+export declare const NestedAccordion: Story<AccordionProps>;

package/react/components/common/stories/Accordion.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Accordion } from "../Accordion";
+import "../../../assets/css/finsemble.css";
+export default {
+    title: "common/Accordion",
+    component: Accordion,
+};
+const BasicTemplate = (args) => (React.createElement(Accordion, Object.assign({}, args), "Accordion Content"));
+const NestedTemplate = (args) => (React.createElement(Accordion, Object.assign({}, args),
+    React.createElement(Accordion, { id: "accordion-2", label: "Nested Accordion", summary: "Summary 1" }, "Nested Accordion Content"),
+    React.createElement(Accordion, { id: "accordion-3", label: "Nested Accordion 2" }, "Nested Accordion 2 Content")));
+export const BasicAccordion = BasicTemplate.bind({});
+BasicAccordion.args = {
+    id: "accordion-1",
+    label: "Accordion Label",
+};
+export const BasicAccordionWithSummary = BasicTemplate.bind({});
+BasicAccordionWithSummary.args = {
+    id: "accordion-1",
+    label: "Accordion Label",
+    summary: "A summary of what the accordion contains",
+};
+export const BasicAccordionMedium = BasicTemplate.bind({});
+BasicAccordionMedium.args = {
+    id: "accordion-1",
+    label: "Accordion Label",
+    size: "medium",
+};
+export const BasicAccordionOpen = BasicTemplate.bind({});
+BasicAccordionOpen.args = {
+    id: "accordion-1",
+    label: "Accordion Label",
+    startOpen: true,
+};
+export const NestedAccordion = NestedTemplate.bind({});
+NestedAccordion.args = {
+    id: "accordion-1",
+    label: "Accordion Label",
+    summary: "Accordion Summary",
+    size: "medium",
+};
+//# sourceMappingURL=Accordion.stories.js.map

package/react/components/common/stories/Accordion.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/Accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAkB,MAAM,cAAc,CAAC;AAGzD,OAAO,mCAAmC,CAAC;AAE3C,eAAe;IACd,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE,CAAC,CACtE,oBAAC,SAAS,oBAAK,IAAI,uBAA+B,CAClD,CAAC;AAEF,MAAM,cAAc,GAA0B,CAAC,IAAoB,EAAE,EAAE,CAAC,CACvE,oBAAC,SAAS,oBAAK,IAAI;IAClB,oBAAC,SAAS,IAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAC,WAAW,+BAE5D;IACZ,oBAAC,SAAS,IAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,oBAAoB,iCAE1C,CACD,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,cAAc,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,yBAAyB,CAAC,IAAI,GAAG;IAChC,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,0CAA0C;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,oBAAoB,CAAC,IAAI,GAAG;IAC3B,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,QAAQ;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,kBAAkB,CAAC,IAAI,GAAG;IACzB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,eAAe,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,mBAAmB;IAC5B,IAAI,EAAE,QAAQ;CACd,CAAC","sourcesContent":["import React from \"react\";\nimport { Accordion, AccordionProps } from \"../Accordion\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../../assets/css/finsemble.css\";\n\nexport default {\n\ttitle: \"common/Accordion\",\n\tcomponent: Accordion,\n};\n\nconst BasicTemplate: Story<AccordionProps> = (args: AccordionProps) => (\n\t<Accordion {...args}>Accordion Content</Accordion>\n);\n\nconst NestedTemplate: Story<AccordionProps> = (args: AccordionProps) => (\n\t<Accordion {...args}>\n\t\t<Accordion id=\"accordion-2\" label=\"Nested Accordion\" summary=\"Summary 1\">\n\t\t\tNested Accordion Content\n\t\t</Accordion>\n\t\t<Accordion id=\"accordion-3\" label=\"Nested Accordion 2\">\n\t\t\tNested Accordion 2 Content\n\t\t</Accordion>\n\t</Accordion>\n);\n\nexport const BasicAccordion = BasicTemplate.bind({});\nBasicAccordion.args = {\n\tid: \"accordion-1\",\n\tlabel: \"Accordion Label\",\n};\n\nexport const BasicAccordionWithSummary = BasicTemplate.bind({});\nBasicAccordionWithSummary.args = {\n\tid: \"accordion-1\",\n\tlabel: \"Accordion Label\",\n\tsummary: \"A summary of what the accordion contains\",\n};\n\nexport const BasicAccordionMedium = BasicTemplate.bind({});\nBasicAccordionMedium.args = {\n\tid: \"accordion-1\",\n\tlabel: \"Accordion Label\",\n\tsize: \"medium\",\n};\n\nexport const BasicAccordionOpen = BasicTemplate.bind({});\nBasicAccordionOpen.args = {\n\tid: \"accordion-1\",\n\tlabel: \"Accordion Label\",\n\tstartOpen: true,\n};\n\nexport const NestedAccordion = NestedTemplate.bind({});\nNestedAccordion.args = {\n\tid: \"accordion-1\",\n\tlabel: \"Accordion Label\",\n\tsummary: \"Accordion Summary\",\n\tsize: \"medium\",\n};\n"]}

package/react/components/common/stories/DropdownButton.stories.d.ts

@@ -20,3 +20,14 @@ export declare const defaultDropdownButton: import("@storybook/react").Story<{
     caretLocation: string;
     classNames: string;
 }>;
+export declare const defaultDropdownButtonWithDefault: import("@storybook/react").Story<{
+    buttonLabel: string;
+    buttonOptions: {
+        optionLabel: string;
+    }[];
+    caretLocation: string;
+    classNames: string;
+    defaultSelection: {
+        optionLabel: string;
+    };
+}>;

package/react/components/common/stories/DropdownButton.stories.js

@@ -26,4 +26,16 @@ defaultDropdownButton.decorators = [
     (Story) => (React.createElement("div", { style: { width: 150 } },
         React.createElement(Story, null))),
 ];
+const options = [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }];
+export const defaultDropdownButtonWithDefault = createStory(DefaultDropdownButton, {
+    buttonLabel: "Label",
+    buttonOptions: [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }],
+    caretLocation: "right",
+    classNames: "push-right",
+    defaultSelection: options[1],
+});
+defaultDropdownButton.decorators = [
+    (Story) => (React.createElement("div", { style: { width: 150 } },
+        React.createElement(Story, null))),
+];
 //# sourceMappingURL=DropdownButton.stories.js.map

package/react/components/common/stories/DropdownButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/DropdownButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,qBAAqB,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAe;IACd,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,cAAc,EAAE;IACzD,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;CAC/F,CAAC,CAAC;AACH,cAAc,CAAC,UAAU,GAAG;IAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,qBAAqB,EAAE;IACvE,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC/F,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;CACxB,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC","sourcesContent":["import DropdownButton from \"../DropdownButton\";\nimport DefaultDropdownButton from \"../../shared/DefaultDropdownButton\";\nimport { createStory } from \"../helpers\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport React from \"react\";\n\nexport default {\n\ttitle: \"Common/DropdownButton\",\n\tcomponent: DropdownButton,\n};\n\nexport const dropdownButton = createStory(DropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ buttonLabel: \"Alpha\" }, { buttonLabel: \"Bravo\" }, { buttonLabel: \"Charlie\" }],\n});\ndropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 80 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\nexport const defaultDropdownButton = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }],\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n});\ndefaultDropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n"]}
+{"version":3,"file":"DropdownButton.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/DropdownButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,qBAAqB,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAe;IACd,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,cAAc,EAAE;IACzD,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;CAC/F,CAAC,CAAC;AACH,cAAc,CAAC,UAAU,GAAG;IAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,qBAAqB,EAAE;IACvE,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC/F,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;CACxB,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AAEjG,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC,qBAAqB,EAAE;IAClF,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC/F,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;IACxB,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;CAC5B,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC","sourcesContent":["import DropdownButton from \"../DropdownButton\";\nimport DefaultDropdownButton from \"../../shared/DefaultDropdownButton\";\nimport { createStory } from \"../helpers\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport React from \"react\";\n\nexport default {\n\ttitle: \"Common/DropdownButton\",\n\tcomponent: DropdownButton,\n};\n\nexport const dropdownButton = createStory(DropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ buttonLabel: \"Alpha\" }, { buttonLabel: \"Bravo\" }, { buttonLabel: \"Charlie\" }],\n});\ndropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 80 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\nexport const defaultDropdownButton = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }],\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n});\ndefaultDropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nconst options = [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }];\n\nexport const defaultDropdownButtonWithDefault = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }],\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n\tdefaultSelection: options[1],\n});\ndefaultDropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n"]}

package/react/components/common/stories/FileInput.stories.d.ts

@@ -4,10 +4,11 @@ import "../../../assets/css/finsemble.css";
 import "../css/styles.css";
 declare const _default: {
     title: string;
-    component: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, }: FileInputProps) => JSX.Element;
+    component: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, disabled, }: FileInputProps) => JSX.Element;
 };
 export default _default;
 export declare const EmptyField: import("@storybook/react").Story<FileInputProps>;
+export declare const Disabled: import("@storybook/react").Story<FileInputProps>;
 export declare const PreFilledField: import("@storybook/react").Story<FileInputProps>;
 export declare const PreFilledInvalidField: import("@storybook/react").Story<FileInputProps>;
 export declare const anyField: import("@storybook/react").Story<FileInputProps>;

package/react/components/common/stories/FileInput.stories.js

@@ -11,6 +11,12 @@ export const EmptyField = createStory(FileInput, {
     acceptTypes: ["image/png"],
     uploadFunction,
 });
+export const Disabled = createStory(FileInput, {
+    value: "",
+    acceptTypes: ["image/png"],
+    uploadFunction,
+    disabled: true,
+});
 export const PreFilledField = createStory(FileInput, {
     acceptTypes: ["image/png"],
     value: "ThisIsATest.png",