#17 Add Save Layout UI Component

vuu-ui/packages/vuu-popups/src/dialog/Dialog.css

@@ -14,7 +14,6 @@
 
   --saltToolbar-background: transparent;
   --saltToolbar-height: calc(var(--salt-size-base) + 5px);
-  border-bottom: solid 1px var(--salt-container-primary-borderColor);
 }
 
 .vuuDialog-header > .Responsive-inner {
@@ -25,4 +24,16 @@
   right: 2px;
 }
 
-
+.dialogHeader {
+  display: flex;
+  padding-bottom: 0px;
+  padding-top: 16px;
+  padding-left: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  color: var(--light-text-primary, #15171B);
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-size: 16px;
+  font-weight: 600;
+}

vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import { Scrim } from "@salt-ds/lab";
-import { Button, Text } from "@salt-ds/core";
+import { Button, Text, TextProps } from "@salt-ds/core";
 import cx from "classnames";
 import { HTMLAttributes, useCallback, useRef, useState } from "react";
 import { Portal } from "../portal";
@@ -11,6 +11,7 @@ const classBase = "vuuDialog";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
   isOpen?: boolean;
   onClose?: () => void;
+  hideCloseButton?: boolean;
 }
 
 export const Dialog = ({
@@ -19,6 +20,7 @@ export const Dialog = ({
   isOpen = false,
   onClose,
   title,
+  hideCloseButton = false,
   ...props
 }: DialogProps) => {
   const root = useRef<HTMLDivElement>(null);
@@ -46,16 +48,20 @@ export const Dialog = ({
 
   return (
     <Portal onRender={handleRender} x={posX} y={posY}>
-      <Scrim className={`${classBase}-scrim`} open={isOpen}>
+      <Scrim className={`${classBase}-scrim`} open={isOpen} autoFocusRef={root}>
         <div {...props} className={cx(classBase, className)} ref={root}>
           <div className={cx("vuuToolbarProxy", `${classBase}-header`)}>
-            <Text>{title}</Text>
-            <Button
-              key="close"
-              onClick={close}
-              data-align="end"
-              data-icon="close"
-            />
+            <Text className="dialogHeader">
+              {title}
+            </Text>
+            {!hideCloseButton && (
+              <Button
+                key="close"
+                onClick={close}
+                data-align="end"
+                data-icon="close"
+              />
+            )}
           </div>
           {children}
         </div>

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css

@@ -1,5 +1,111 @@
-.vuuSaveLayoutPanel {
-    background-color: aqua;
-    height: 400px;
-    width: 600px;
+* {
+  --salt-selectable-foreground-hover: #6d18bdc3;
+  --salt-selectable-foreground-selected: #6D18BD;
+  --salt-selectable-borderColor-selected: #6D18BD;
+  --saltInputLegacy-fontFamily: Nunito Sans;
+  --salt-text-fontFamily: Nunito Sans;
+  --saltInputLegacy-fontSize: 12px;
+  --salt-text-label-fontSize: 10px;
+  --saltFormFieldLegacy-label-paddingLeft: 0;
+  font-family: Nunito Sans;
+}
+
+.saveLayoutPanel-panelContainer {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.saveLayoutPanel-panelContent {
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+}
+
+.saveLayoutPanel-formContainer {
+  display: flex;
+  width: 217px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.saveLayoutPanel-settingsGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px;
+  width: 100%;
+  line-height: 16px;
+}
+
+.saveLayoutPanel-screenshotContainer {
+  display: flex;
+  width: 304px;
+  height: 208px;
+  padding: 11px 15.5px;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #E8E8E8;
+  background: var(--dark-text-primary, #FFF);
+}
+
+.saveLayoutPanel-screenshot {
+  /* Uncomment once screenshot functionality is implemented */
+  /* background: url(<path-to-image>), lightgray 50% / cover no-repeat; */
+  width: 273px;
+  height: 186px;
+  flex-shrink: 0;
+}
+
+.saveLayoutPanel-buttonsContainer {
+  display: flex;
+  padding-top: 8px;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.saveLayoutPanel-cancelButton,
+.saveLayoutPanel-saveButton {
+  display: flex;
+  height: fit-content;
+  padding: 4px 8px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 6px;
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 133.333%;
+  letter-spacing: 0.48px;
+  text-transform: uppercase;
+}
+
+.saveLayoutPanel-cancelButton {
+  color: var(--actionable-primary-foreground-default, #606477);
+  background: var(--actionable-primary-background-default, #FFF);
+}
+
+.saveLayoutPanel-saveButton {
+  background: #6D18BD;
+  border-color: #6D18BD;
+  color: white;
+}
+
+.saveLayoutPanel-saveButton.saltButton:disabled {
+  background: #6D18BD;
+  border-color: #6D18BD;
+  color: white;
+  opacity: 0.3;
+}
+
+.saveLayoutPanel-saveButton.saltButton:hover {
+  background: #F37880;
+  border-color: #F37880;
+  color: white;
 }

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx

@@ -1,5 +1,124 @@
+import { ChangeEvent, useState } from "react";
+import { Input, Button, FormField, FormFieldLabel } from "@salt-ds/core";
+import { ComboBox, Checkbox, RadioButton } from "@finos/vuu-ui-controls";
+
 import "./SaveLayoutPanel.css";
-export const SaveLayoutPanel = () => {
-  const classBase = "vuuSaveLayoutPanel";
-  return <div className={classBase}>save layout</div>;
+
+const classBase = "saveLayoutPanel";
+
+const groups = [
+  "Group 1",
+  "Group 2",
+  "Group 3",
+  "Group 4",
+  "Group 5"
+];
+
+const checkboxValues = [
+  "Value 1",
+  "Value 2",
+  "Value 3"
+];
+
+const radioValues = [
+  "Value 1",
+  "Value 2",
+  "Value 3"
+] as const;
+
+type RadioValue = typeof radioValues[number];
+
+type SaveLayoutPanelProps = {
+  onCancel: () => void,
+  onSave: (layoutName: string, group: string, checkValues: string[], radioValue: string) => void
+};
+
+export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
+  const { onCancel, onSave } = props;
+
+  const [layoutName, setLayoutName] = useState<string>("");
+  const [group, setGroup] = useState<string>("");
+  const [checkValues, setCheckValues] = useState<string[]>([]);
+  const [radioValue, setRadioValue] = useState<RadioValue>(radioValues[0]);
+
+  return (
+    <div className={`${classBase}-panelContainer`}>
+      <div className={`${classBase}-panelContent`}>
+        <div className={`${classBase}-formContainer`}>
+          <FormField>
+            <FormFieldLabel>Group</FormFieldLabel>
+            <ComboBox
+              ListProps={{
+                style: {
+                  zIndex: 10000,
+                  border: "1px solid #777C94",
+                  borderRadius: 10,
+                  boxSizing: "border-box"
+                }
+              }}
+              source={groups}
+              allowFreeText={true}
+              InputProps={{
+                inputProps: {
+                  placeholder: "Select Group or Enter New Name",
+                  onChange: (event: ChangeEvent<HTMLInputElement>) => setGroup(event.target.value),
+                },
+              }}
+              width={120}
+              onSelectionChange={(_, value) => setGroup(value || "")}
+            />
+          </FormField>
+          <FormField>
+            <FormFieldLabel>Layout Name</FormFieldLabel>
+            <Input
+              inputProps={{ placeholder: "Enter Layout Name" }}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => setLayoutName(event.target.value)}
+              value={layoutName}
+            />
+          </FormField>
+          <FormField>
+            <FormFieldLabel>Some Layout Setting</FormFieldLabel>
+            <div className={`${classBase}-settingsGroup`}>
+              {checkboxValues.map((value, i) =>
+                <Checkbox
+                  key={i}
+                  onToggle={() => setCheckValues((prev) => prev.includes(value) ? prev.filter(entry => entry !== value) : [...prev, value])}
+                  checked={checkValues.includes(value)}
+                  label={value}
+                />
+              )}
+            </div>
+          </FormField>
+          <FormField>
+            <FormFieldLabel>Some Layout Setting</FormFieldLabel>
+            <div className={`${classBase}-settingsGroup`}>
+              {radioValues.map((value, i) =>
+                <RadioButton
+                  key={i}
+                  onClick={() => setRadioValue(value)}
+                  checked={radioValue === value}
+                  label={value}
+                  groupName="radioGroup"
+                />
+              )}
+            </div>
+          </FormField>
+        </div>
+        <div className={`${classBase}-screenshotContainer`}>
+          <div className={`${classBase}-screenshot`} />
+        </div>
+      </div>
+      <div className={`${classBase}-buttonsContainer`}>
+        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          className={`${classBase}-saveButton`}
+          onClick={() => onSave(layoutName, group, checkValues, radioValue)}
+          disabled={layoutName === "" || group === ""}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
 };

vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx

@@ -12,6 +12,7 @@ import {
 import { DropdownBase, DropdownBaseProps } from "../dropdown";
 import { List, ListProps } from "../list";
 import { useCombobox } from "./useCombobox";
+import { ChevronIcon } from "../list/ChevronIcon";
 
 export interface ComboBoxProps<
   Item = string,
@@ -156,6 +157,12 @@ export const ComboBox = forwardRef(function Combobox<
           disabled={disabled}
           // ref={useForkRef(setInputRef, setHookInputRef)}
           {...controlProps}
+          endAdornment={
+            <ChevronIcon
+              direction={isOpen ? "up" : "down"}
+              onClick={() => { onOpenChange(!isOpen) }}
+            />
+          }
         />
 
         <List<Item, Selection>

vuu-ui/packages/vuu-ui-controls/src/index.ts

@@ -6,3 +6,4 @@ export * from "./editable-label";
 export * from "./list";
 export * from "./tabstrip";
 export * from "./tree";
+export * from "./inputs";

vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css

@@ -0,0 +1,11 @@
+.vuuCheckbox {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  gap: 6px;
+  color: var(--light-text-primary, #15171B);
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+}