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

package/components/AntSwitch/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+require("./styles.scss");
+const AntSwitch = props => {
+  const {
+    checked,
+    disabled,
+    onChange
+  } = props;
+  const onChangeHandler = (0, _react.useCallback)((event, value) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  }, [onChange]);
+  return /*#__PURE__*/_react.default.createElement(_material.Switch, {
+    className: "ant-switch",
+    checked: checked,
+    disabled: disabled,
+    onChange: onChangeHandler
+  });
+};
+var _default = exports.default = AntSwitch;

package/components/AntSwitch/styles.scss

@@ -0,0 +1,66 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.ant-switch {
+  width: 28px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+
+  .MuiSwitch-switchBase {
+    padding: 2px;
+
+    &.Mui-checked {
+      transform: translateX(12px);
+      color: #fff;
+
+      + .MuiSwitch-track {
+        opacity: 1;
+        background-color: #1890ff;
+      }
+
+      // Add dark mode override using a body class or custom data attribute
+      body.dark & + .MuiSwitch-track {
+        background-color: #177ddc;
+      }
+    }
+  }
+
+  .MuiSwitch-thumb {
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    transition: width 200ms;
+
+    // Width change on active
+    .ant-switch:active & {
+      width: 15px;
+    }
+
+    .ant-switch:active .MuiSwitch-switchBase.Mui-checked {
+      transform: translateX(9px);
+    }
+  }
+
+  .MuiSwitch-track {
+    border-radius: 8px;
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.25);
+    box-sizing: border-box;
+
+    // Dark mode override
+    body.dark & {
+      background-color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  .Mui-disabled {
+    opacity: $tw-opcty-semantic-off;
+
+    &.Mui-checked {
+      + .MuiSwitch-track {
+        opacity: $tw-opcty-semantic-off;
+      }
+    }
+  }
+}

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Autocomplete;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
+require("../Select/styles.scss");
+require("./styles.scss");
+const isEmpty = value => ['', undefined].includes(value);
+function Autocomplete(_ref) {
+  let {
+    id,
+    label,
+    options,
+    onChange,
+    selected,
+    filterOptions,
+    freeSolo,
+    disabled,
+    className,
+    hideClearIcon,
+    isEqual,
+    placeholder,
+    errorText,
+    tooltipTitle,
+    required,
+    noOptionsText,
+    loading,
+    loadingText,
+    open,
+    onOpen,
+    onClose,
+    sx,
+    renderOption
+  } = _ref;
+  const onChangeHandler = (event, value) => {
+    if (event) {
+      if (value) {
+        onChange(value);
+      } else {
+        onChange('');
+      }
+    }
+  };
+  const renderInput = params => /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "auto-complete ".concat(className),
+    sx: sx
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-label"
+  }, label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
+    placement: "top",
+    title: tooltipTitle
+  })), /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
+    variant: "outlined",
+    size: "small",
+    placeholder: placeholder,
+    className: errorText ? 'auto-complete--error' : ''
+  })), errorText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "error",
+    className: "textfield-error-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-error-text"
+  }, errorText)));
+  const optionalArgs = {};
+  if (hideClearIcon) {
+    optionalArgs.clearIcon = null;
+  }
+  if (isEqual) {
+    optionalArgs.isOptionEqualToValue = isEqual;
+  } else {
+    optionalArgs.isOptionEqualToValue = (option, value) => option === value || isEmpty(option) && isEmpty(value);
+  }
+  return /*#__PURE__*/_react.default.createElement(_material.Autocomplete, Object.assign({
+    disabled: disabled,
+    id: id,
+    options: options,
+    getOptionLabel: option => {
+      if (typeof option === 'object') {
+        var _option$label;
+        return (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : '';
+      }
+      return option !== null && option !== void 0 ? option : '';
+    },
+    onChange: onChangeHandler,
+    onInputChange: (event, value) => freeSolo && onChangeHandler(event, value),
+    value: selected,
+    filterOptions: filterOptions,
+    freeSolo: freeSolo,
+    forcePopupIcon: true,
+    renderInput: renderInput,
+    "aria-required": required,
+    noOptionsText: noOptionsText,
+    loading: loading,
+    loadingText: loadingText,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    popupIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: loading ? 'spinner' : open ? 'chevronUp' : 'chevronDown',
+      className: "auto-complete--icon-right",
+      size: "medium"
+    }),
+    classes: {
+      paper: 'auto-complete select',
+      listbox: 'options-container'
+    },
+    sx: {
+      '& .MuiAutocomplete-popupIndicator:hover': {
+        background: 'transparent'
+      },
+      '& .MuiAutocomplete-popupIndicator': {
+        background: 'transparent',
+        transform: 'none'
+      },
+      '& .MuiTouchRipple-root': {
+        display: 'none'
+      }
+    }
+  }, optionalArgs, {
+    renderOption: renderOption
+  }));
+}

package/components/Autocomplete/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');
+}
+
+.auto-complete {
+  display: flex;
+  flex-flow: row wrap;
+
+  .textfield-label {
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-txt-secondary;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .MuiInputBase-root {
+    border: 1px solid $tw-clr-brdr-secondary;
+    border-radius: $tw-spc-base-x-small;
+    position: unset;
+    padding: 0;
+  }
+
+  .Mui-disabled {
+    border-color: $tw-clr-brdr-secondary;
+    font-weight: 500;
+    opacity: $tw-opcty-semantic-off;
+    color: $tw-clr-txt;
+
+    ::placeholder {
+      color: $tw-clr-txt;
+      opacity: 1;
+    }
+  }
+
+  input {
+    padding: calc(#{$tw-spc-base-xx-small} * 2.5) calc(#{$tw-spc-base-xx-small} * 3);
+  }
+
+  & .MuiInputBase-input {
+    height: '21px';
+  }
+  & .MuiOutlinedInput-root {
+    fieldset {
+      border-color: $tw-clr-brdr-secondary;
+    }
+
+    &:hover fieldset {
+      border-color: $tw-clr-brdr-hover;
+    }
+    .Mui-focused fieldset {
+      border-color: $tw-clr-brdr-hover;
+    }
+  }
+
+  &--icon-right {
+    width: $tw-fnt-frm-fld-text-value-line-height;
+    height: $tw-fnt-frm-fld-text-value-line-height;
+    fill: $tw-clr-icn;
+    margin-left: $tw-spc-base-x-small;
+  }
+
+  &.select {
+    .options-container {
+      top: 0;
+      margin-top: $tw-spc-base-x-small;
+
+      .MuiAutocomplete-option {
+        font-family: $tw-fnt-frm-fld-select-value-font-family;
+        font-size: $tw-fnt-frm-fld-select-value-font-size;
+        font-weight: $tw-fnt-frm-fld-select-value-font-weight;
+        line-height: $tw-fnt-frm-fld-select-value-line-height;
+        padding: $tw-spc-base-x-small $tw-spc-base-small;
+        cursor: pointer;
+
+        &:hover {
+          background-color: $tw-clr-bg-selected-ghost-hover;
+          color: $tw-clr-txt;
+        }
+
+        &:active {
+          background-color: $tw-clr-bg-selected-ghost-active;
+          color: $tw-clr-txt;
+        }
+
+        &[aria-selected='true'],
+        &[aria-selected='true']:hover {
+          background-color: $tw-clr-bg-selected;
+          color: $tw-clr-txt-on-selected;
+        }
+
+        &:disabled {
+          opacity: $tw-opcty-semantic-off;
+        }
+      }
+    }
+  }
+
+  .textfield-label-container {
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .textfield-error-text {
+    font-family: $tw-fnt-frm-fld-error-text-font-family;
+    font-size: $tw-fnt-frm-fld-error-text-font-size;
+    font-weight: $tw-fnt-frm-fld-error-text-font-weight;
+    line-height: $tw-fnt-frm-fld-error-text-line-height;
+    color: $tw-clr-txt-danger;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-icn-danger;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  &--error {
+    fieldset {
+      border: none;
+    }
+    .MuiOutlinedInput-root {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
+      &:hover fieldset {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
+      }
+      &.Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
+      }
+    }
+    background-color: $tw-clr-bg-danger-tertiary;
+    border-radius: $tw-spc-base-x-small;
+    &:active {
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+    }
+
+    &:focus-within,
+    &:focus-visible {
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+      outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+    }
+  }
+}

package/components/Badge/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+const Badge = props => {
+  const theme = (0, _material.useTheme)();
+  const backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
+  const borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
+  const labelColor = props.labelColor || borderColor;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    component: "span",
+    sx: {
+      backgroundColor,
+      border: "1px solid ".concat(borderColor),
+      borderRadius: theme.spacing(1),
+      display: 'inline-block',
+      padding: theme.spacing(0.5, 1),
+      width: 'fit-content'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    color: labelColor,
+    component: "span",
+    fontSize: "14px",
+    fontWeight: 500
+  }, props.label));
+};
+var _default = exports.default = Badge;

package/components/BusySpinner/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BusySpinner;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _hexRgb = _interopRequireDefault(require("hex-rgb"));
+function BusySpinner(_ref) {
+  let {
+    withSkrim,
+    noBackground
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      backgroundColor: withSkrim ? "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGray025), {
+        alpha: 0.6,
+        format: 'css'
+      })) : 'none',
+      zIndex: 2000,
+      backgroundImage: noBackground ? 'none' : 'linear-gradient(180deg,' + "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGreen050), {
+        alpha: 0,
+        format: 'css'
+      }), " 0%,") + "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGreen050), {
+        alpha: 0.24,
+        format: 'css'
+      }), " 100%)")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing(5),
+    flexDirection: "column",
+    height: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+    sx: {
+      color: theme.palette.TwClrIcnBrand
+    }
+  })));
+}

package/components/Button/Button.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Button;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function Button(props) {
+  const {
+    onClick,
+    label,
+    type = 'productive',
+    priority = 'primary',
+    size = 'small',
+    disabled,
+    icon,
+    rightIcon,
+    processing,
+    id,
+    className,
+    style,
+    sx
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
+    id: id,
+    onClick: onClick,
+    className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(rightIcon && !processing ? 'button-with-right-icon' : '', "\n      ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
+    disabled: disabled,
+    style: style,
+    sx: [{
+      '& path': {
+        fill: 'currentColor'
+      }
+    }, ...(Array.isArray(sx) ? sx : [sx])]
+  }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "spinner",
+    size: size,
+    className: "icon-spinner"
+  }), !processing && icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: icon,
+    size: size
+  }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: rightIcon,
+    size: size,
+    className: "icon-right"
+  }));
+}

package/components/Button/button.test.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Button = _interopRequireDefault(require("./Button"));
+test('calls onClick prop when clicked', () => {
+  const handleClick = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleClick,
+    label: "Click me"
+  }));
+  _react2.fireEvent.click(_react2.screen.getByText(/click me/i));
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+test('should not call onClick prop when button is disabled', () => {
+  const handleClick = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleClick,
+    label: "Click me",
+    disabled: true
+  }));
+  _react2.fireEvent.click(_react2.screen.getByText(/click me/i));
+  expect(handleClick).toHaveBeenCalledTimes(0);
+});