@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/Navbar/NavItem.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavItem;
+var _react = _interopRequireWildcard(require("react"));
+var _theme = _interopRequireDefault(require("../../theme"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function NavItem(props) {
+  const {
+    label,
+    icon,
+    iconColor,
+    children: childrenProps,
+    disabled,
+    selected,
+    onClick,
+    id,
+    isFooter,
+    href
+  } = props;
+  const children = href ? null : childrenProps;
+  const hasChildrenSelected = (0, _react.useCallback)(() => {
+    if (children && children.props && children.props.children) {
+      const subChildren = children.props.children;
+      if (Array.isArray(subChildren)) {
+        return subChildren.some(subChild => subChild.props && subChild.props.selected);
+      }
+      return subChildren.props && subChildren.props.selected;
+    }
+    return false;
+  }, [children]);
+  _react.default.useEffect(() => {
+    if (hasChildrenSelected()) {
+      setOpen(true);
+    }
+  }, [children, hasChildrenSelected, selected]);
+  const [open, setOpen] = _react.default.useState(hasChildrenSelected());
+  const onClickHandler = () => {
+    if (!disabled) {
+      setOpen(!open || hasChildrenSelected());
+      if (onClick) {
+        onClick(!open);
+      }
+    }
+  };
+  const customLabel = typeof label !== 'string';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        nav-item \n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(hasChildrenSelected() ? 'nav-item--children-selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n        ").concat(children ? 'nav-item--has-children' : '', "\n      ")
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "\n          ".concat(customLabel ? 'nav-item-custom-content' : 'nav-item-content', "\n          ").concat(disabled ? 'nav-item--disabled' : '', "\n        "),
+    onClick: onClickHandler,
+    id: id
+  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: icon,
+    className: "nav-item--icon",
+    fillColor: iconColor !== null && iconColor !== void 0 ? iconColor : _theme.default.palette.TwClrIcnSecondary
+  }), !href && /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-item--label"
+  }, label), href && /*#__PURE__*/_react.default.createElement("a", {
+    className: "nav-item--label nav-item--anchor",
+    href: href,
+    rel: "noopener noreferrer",
+    target: "_external"
+  }, label), children && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: open ? 'chevronUp' : 'chevronDown',
+    className: "nav-item--arrow"
+  })), children && open && children);
+}

package/components/Navbar/NavSection.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavSection;
+var _react = _interopRequireDefault(require("react"));
+require("./styles.scss");
+function NavSection(props) {
+  const {
+    title,
+    separator = true
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-section"
+  }, separator && /*#__PURE__*/_react.default.createElement("div", {
+    className: "divider"
+  }), title && /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-section--title ".concat(separator ? '' : 'no-separator')
+  }, title));
+}

package/components/Navbar/Navbar.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Navbar;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function Navbar(props) {
+  const {
+    children,
+    setShowNavBar,
+    backgroundTransparent
+  } = props;
+  const {
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'navbar' + (backgroundTransparent ? ' transparent' : '')
+  }, !isDesktop && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
+    onClick: () => setShowNavBar(false),
+    sx: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    size: "medium",
+    style: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginRight: '16px',
+      marginBottom: '8px'
+    }
+  }))), children);
+}

package/components/Navbar/SubNavbar.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SubNavbar;
+var _react = _interopRequireDefault(require("react"));
+require("./styles.scss");
+function SubNavbar(props) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "subnavbar"
+  }, children);
+}

package/components/Navbar/styles.scss

@@ -0,0 +1,155 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.navbar {
+  height: 100%;
+  position: fixed;
+  z-index: 1101;
+  width: $tw-sz-nvgtn-side-nav-width;
+  display: flex;
+  flex-direction: column;
+  padding-left: $tw-sz-base-small;
+  padding-right: $tw-sz-base-small;
+  padding-top: $tw-sz-base-small;
+
+  &.transparent {
+    background-color: transparent !important;
+    background-image: unset !important;
+    mix-blend-mode: multiply;
+  }
+
+  .nav-section {
+    padding: $tw-spc-base-x-small $tw-spc-base-small;
+    .divider {
+      border-top: 1px solid $tw-clr-brdr-tertiary;
+    }
+
+    &--title {
+      font-family: $tw-fnt-nvgtn-side-nav-section-title-font-family;
+      font-size: $tw-fnt-nvgtn-side-nav-section-title-font-size;
+      font-weight: $tw-fnt-nvgtn-side-nav-section-title-font-weight;
+      line-height: $tw-fnt-nvgtn-side-nav-section-title-line-height;
+      text-transform: $tw-fnt-nvgtn-side-nav-section-title-text-transform;
+      color: $tw-clr-txt;
+      display: block;
+      margin-top: $tw-spc-base-small;
+
+      &.no-separator {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .nav-item-custom-content {
+    border: none;
+    background: none;
+  }
+
+  .nav-item {
+    font-family: $tw-fnt-nvgtn-side-nav-item-label-font-family;
+    font-size: $tw-fnt-nvgtn-side-nav-item-label-font-size;
+    font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
+    line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
+    color: $tw-clr-txt;
+    border-radius: 16px;
+    mix-blend-mode: multiply;
+
+    .nav-item--disabled {
+      opacity: 0.5;
+    }
+
+    .nav-item-content {
+      border-radius: 16px;
+      padding: 12px 16px;
+      display: flex;
+      width: 100%;
+      font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
+
+      .nav-item--anchor {
+        text-decoration: none;
+        color: $tw-clr-txt;
+      }
+
+      .nav-item--label {
+        flex: 1 1 auto;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &--has-children {
+      > .nav-item-content:hover {
+        background-color: $tw-clr-bg-ghost-hover;
+      }
+      > .nav-item-content:active {
+        background-color: $tw-clr-bg-ghost-active;
+      }
+      &.nav-item--children-selected > .nav-item-content:hover {
+        background-color: transparent;
+      }
+      &.nav-item--children-selected > .nav-item-content:ative {
+        background-color: transparent;
+      }
+    }
+
+    &:not(.nav-item--has-children) {
+      &:hover {
+        background-color: $tw-clr-bg-ghost-hover;
+      }
+      &.nav-item--selected,
+      &.nav-item--selected:hover {
+        background-color: $tw-clr-bg-ghost-active;
+      }
+    }
+
+    button {
+      background: none;
+      border: none;
+      color: $tw-clr-txt;
+      font-family: 'Inter';
+      padding-right: $tw-spc-base-small;
+      padding-left: 16px;
+    }
+
+    &--icon {
+      margin-right: $tw-spc-base-x-small;
+      line-height: $tw-sz-icon-small;
+      height: $tw-sz-icon-small;
+      min-width: $tw-sz-icon-small;
+      width: $tw-sz-icon-small;
+    }
+
+    &--arrow {
+      height: $tw-sz-icon-small;
+      width: $tw-sz-icon-small;
+      margin-left: $tw-spc-base-x-small;
+
+      path {
+        fill: $tw-clr-icn-secondary;
+      }
+    }
+
+    .subnavbar .nav-item {
+      padding-left: $tw-spc-base-small;
+      padding-right: $tw-spc-base-small;
+
+      &-content {
+        padding-left: $tw-spc-base-medium;
+      }
+    }
+  }
+
+  .nav-footer {
+    margin-top: auto;
+    margin-bottom: 32px;
+  }
+}

package/components/Note.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Note;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function Note(_ref) {
+  let {
+    children
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      marginBottom: theme.spacing(3),
+      padding: theme.spacing(2)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p"
+  }, children));
+}

package/components/PageForm/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PageForm;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
+var _FormBottomBar = _interopRequireDefault(require("../FormBottomBar"));
+function PageForm(props) {
+  const {
+    children,
+    className,
+    hideEdit,
+    onSave,
+    style,
+    ...bottomBarProps
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const {
+    isMobile
+  } = (0, _useDeviceInfo.default)();
+  const [processing, setProcessing] = (0, _react.useState)(false);
+  const handleSave = async () => {
+    setProcessing(true);
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await onSave(); // <-- we want all onSaves to be async
+    setProcessing(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, processing && /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
+    withSkrim: true
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: className,
+    paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
+    style: style
+  }, children), !hideEdit && /*#__PURE__*/_react.default.createElement(_FormBottomBar.default, Object.assign({
+    onSave: handleSave
+  }, bottomBarProps)));
+}

package/components/PhotoChooser/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PhotoChooser;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _ErrorBox = _interopRequireDefault(require("../ErrorBox/ErrorBox"));
+var _FileChooser = _interopRequireDefault(require("../FileChooser"));
+function PhotoChooser(props) {
+  const {
+    title,
+    description,
+    onPhotosChanged,
+    multipleSelection,
+    error,
+    selectedFile,
+    uploadText,
+    uploadMobileDescription,
+    uploadDescription,
+    photoSelectedText,
+    chooseFileText,
+    replaceFileText,
+    maxPhotos
+  } = props;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const [files, setFiles] = (0, _react.useState)([]);
+  const [filesData, setFilesData] = (0, _react.useState)([]);
+  const divRef = (0, _react.useRef)(null);
+  const theme = (0, _material.useTheme)();
+  const removeFileAtIndex = index => {
+    const filesList = [...files];
+    filesList.splice(index, 1);
+    setFiles(filesList);
+  };
+  const onChoosingFiles = () => {
+    var _divRef$current;
+    (_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.focus();
+  };
+  (0, _react.useEffect)(() => {
+    const filesDataList = files.map(file => URL.createObjectURL(file));
+    setFilesData(filesDataList);
+    onPhotosChanged(files);
+    return () => {
+      // we need to clean this up to avoid a memory leak
+      filesDataList.forEach(fileData => URL.revokeObjectURL(fileData));
+    };
+  }, [files]);
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    ref: divRef,
+    tabIndex: 0,
+    sx: {
+      backgroundColor: theme.palette.TwClrBg,
+      borderRadius: theme.spacing(4),
+      padding: theme.spacing(3)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, null, title && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: 20,
+    fontWeight: 600
+  }, title), description && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: 14,
+    fontWeight: 400,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(2)
+  }, Array.isArray(description) ? description.map((txt, i) => /*#__PURE__*/_react.default.createElement("div", {
+    key: i
+  }, txt)) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
+    title: error.title,
+    text: error.text,
+    sx: {
+      width: 'auto',
+      marginBottom: theme.spacing(2),
+      '&.mobile': {
+        width: 'auto'
+      }
+    }
+  }), filesData.length > 0 && multipleSelection && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginBottom: theme.spacing(2)
+  }, filesData.map((fileData, index) => {
+    var _files$index;
+    return /*#__PURE__*/_react.default.createElement(_material.Box, {
+      key: index,
+      position: "relative",
+      height: 122,
+      width: 122,
+      marginRight: isMobile ? theme.spacing(2) : theme.spacing(3),
+      marginTop: theme.spacing(1),
+      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      icon: "iconTrashCan",
+      onClick: () => removeFileAtIndex(index),
+      size: "small",
+      style: {
+        position: 'absolute',
+        top: -10,
+        right: -10,
+        backgroundColor: theme.palette.TwClrBgDanger
+      }
+    }), /*#__PURE__*/_react.default.createElement("img", {
+      height: "120px",
+      src: fileData,
+      alt: (_files$index = files[index]) === null || _files$index === void 0 ? void 0 : _files$index.name,
+      style: {
+        margin: 'auto auto',
+        objectFit: 'contain',
+        display: 'flex',
+        maxWidth: '120px',
+        maxHeight: '120px'
+      }
+    }));
+  }))), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
+    acceptFileType: "image/jpeg,image/png",
+    chooseFileText: chooseFileText,
+    files: files,
+    fileSelectedText: photoSelectedText,
+    iconName: "blobbyGrayIconImage",
+    maxFiles: maxPhotos,
+    multipleSelection: multipleSelection,
+    onChoosingFiles: onChoosingFiles,
+    replaceFileText: replaceFileText,
+    selectedFile: selectedFile,
+    setFiles: setFiles,
+    uploadDescription: uploadDescription,
+    uploadMobileDescription: uploadMobileDescription,
+    uploadText: uploadText
+  }));
+}

package/components/Pill/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pill;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function Pill(props) {
+  const {
+    id,
+    label,
+    value,
+    onClick,
+    onRemove,
+    className
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pill ".concat(className !== null && className !== void 0 ? className : ''),
+    onClick: ev => {
+      ev.stopPropagation();
+      if (onClick) {
+        onClick(id);
+      }
+    }
+  }, label && /*#__PURE__*/_react.default.createElement("p", {
+    className: "label"
+  }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "value".concat(label ? '' : ' value--no-label')
+  }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: ev => {
+      ev.stopPropagation();
+      onRemove(id);
+    },
+    className: "iconContainer",
+    "aria-label": "remove"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon"
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "spacer"
+  }));
+}

package/components/Pill/styles.scss

@@ -0,0 +1,50 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.pill {
+  font-family: $tw-fnt-base-font-family;
+  background: $tw-clr-bg-tertiary;
+  padding: $tw-spc-base-xx-small $tw-spc-base-xx-small $tw-spc-base-xx-small 12px;
+  display: flex;
+  border-radius: 13px;
+  align-items: center;
+
+  .label {
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .value {
+    padding-left: $tw-spc-base-xx-small;
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 600;
+    margin: 0;
+
+    &--no-label {
+      padding-left: 0;
+    }
+  }
+
+  .icon {
+    fill: $tw-clr-icn;
+    width: 12px;
+    height: 12px;
+    margin: 0 $tw-spc-base-xx-small;
+  }
+
+  .iconContainer {
+    padding: 0;
+  }
+
+  .spacer {
+    width: $tw-spc-base-x-small;
+    height: 12px;
+  }
+}

package/components/PillList/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PillList;
+var _react = _interopRequireDefault(require("react"));
+var _Pill = _interopRequireDefault(require("../Pill"));
+require("./styles.scss");
+function PillList(props) {
+  const {
+    data,
+    onClick,
+    onRemove,
+    className
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pill-list"
+  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_Pill.default, {
+    key: index,
+    id: item.id,
+    label: item.label,
+    value: item.value,
+    onClick: item.onClick || onClick,
+    onRemove: item.onRemove || onRemove,
+    className: item.className || className
+  })));
+}

package/components/PillList/styles.scss

@@ -0,0 +1,12 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.pill-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $tw-spc-base-x-small;
+}