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

package/components/Message/Message.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Message;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function Message(props) {
+  const {
+    type,
+    priority,
+    title,
+    body,
+    actionText,
+    actionHandler,
+    pageButtons,
+    showCloseButton,
+    onClose
+  } = props;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message tw-message--".concat(type, " tw-message--").concat(priority, " ").concat(isMobile ? 'tw-message--mobile' : '')
+  }, type === 'toast' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--left-side"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: priority,
+    className: "left-side--icon"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--main-content"
+  }, type === 'page' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: priority,
+    className: "main-content--icon"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--main-body"
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--title-container"
+  }, /*#__PURE__*/_react.default.createElement("h4", null, title)), typeof body === 'string' ? /*#__PURE__*/_react.default.createElement("p", null, body) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--actions-container"
+  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map((pageButton, index) => {
+    const pageButtonWithKey = {
+      ...pageButton,
+      key: "page-button-".concat(index),
+      props: {
+        ...pageButton.props,
+        size: pageButton.props.size || 'medium'
+      }
+    };
+    return pageButtonWithKey;
+  })) : null)), type === 'toast' && actionText ? /*#__PURE__*/_react.default.createElement("button", {
+    onClick: actionHandler,
+    className: "tw-message--action-text"
+  }, actionText) : showCloseButton ? /*#__PURE__*/_react.default.createElement("button", {
+    onClick: onClose,
+    className: "icon-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "page-message--close-icon"
+  })) : null));
+}

package/components/Message/styles.scss

@@ -0,0 +1,202 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.tw-message {
+  &.tw-message--page {
+    width: 100%;
+    &.tw-message--container {
+      margin: $tw-spc-base-small 0;
+    }
+    &.tw-message--title-container {
+      display: flex;
+    }
+  }
+
+  border-radius: $tw-sz-base-small;
+  display: flex;
+  width: 480px;
+
+  &.tw-message--mobile {
+    width: 100%;
+  }
+
+  &.tw-message--toast {
+    box-shadow: 0 $tw-sz-base-x-small $tw-sz-base-small 0 rgba($tw-clr-base-gray-800, $tw-opcty-base-020);
+  }
+
+  &--container {
+    margin: $tw-spc-base-small;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &--title-container {
+    h4 {
+      font-family: $tw-fnt-mssg-title-font-family;
+      font-size: $tw-fnt-mssg-title-font-size;
+      font-weight: $tw-fnt-mssg-title-font-weight;
+      line-height: $tw-fnt-mssg-title-line-height;
+      color: $tw-clr-txt;
+      padding: 0;
+      margin: 0 0 $tw-spc-base-x-small;
+    }
+  }
+
+  &--main-content {
+    display: flex;
+    width: 100%;
+
+    p {
+      font-family: $tw-fnt-mssg-body-font-family;
+      font-size: $tw-fnt-mssg-body-font-size;
+      font-weight: $tw-fnt-mssg-body-font-weight;
+      line-height: $tw-fnt-mssg-body-line-height;
+      color: $tw-clr-txt;
+      padding: 0;
+      margin: 0;
+    }
+
+    .main-content--icon {
+      width: $tw-sz-base-medium;
+      height: $tw-sz-base-medium;
+      margin-right: $tw-spc-base-small;
+    }
+  }
+
+  &--main-body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--actions-container {
+    align-self: end;
+
+    button:first-child {
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  &--action-text {
+    font-family: $tw-fnt-mssg-body-font-family;
+    font-size: $tw-fnt-mssg-body-font-size;
+    font-weight: $tw-fnt-mssg-body-font-weight;
+    line-height: $tw-fnt-mssg-body-line-height;
+    color: $tw-clr-txt-brand;
+    margin-left: $tw-spc-base-x-small;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    height: fit-content;
+  }
+
+  &--left-side {
+    border-radius: ($tw-sz-base-small - 1) 0 0 ($tw-sz-base-small - 1);
+    padding: $tw-spc-base-small $tw-spc-base-small 0 $tw-spc-base-small;
+    .left-side--icon {
+      fill: $tw-clr-icn-inverse;
+      width: $tw-sz-base-medium;
+      height: $tw-sz-base-medium;
+    }
+  }
+
+  .toast-message--close-icon {
+    margin-left: $tw-spc-base-x-small;
+    fill: $tw-clr-icn-secondary;
+    width: $tw-sz-base-medium;
+    height: $tw-sz-base-medium;
+  }
+
+  .page-message--close-icon {
+    margin-left: $tw-spc-base-x-small;
+    fill: $tw-clr-icn-secondary;
+    width: $tw-sz-base-medium;
+    height: $tw-sz-base-medium;
+  }
+
+  .icon-container {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    height: fit-content;
+  }
+
+  &--info {
+    border: 1px solid $tw-clr-brdr-info;
+    background-color: $tw-clr-bg-info-tertiary;
+
+    &.tw-message--page {
+      border: 1px solid $tw-clr-brdr-info;
+      .main-content--icon {
+        fill: $tw-clr-icn-info;
+      }
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-bg-info;
+    }
+    .left-side--icon {
+      fill: $tw-clr-icn-on-info;
+    }
+  }
+
+  &--critical {
+    border: 1px solid $tw-clr-brdr-danger;
+    background-color: $tw-clr-bg-danger-tertiary;
+
+    &.tw-message--page {
+      border: 1px solid $tw-clr-brdr-danger;
+
+      .main-content--icon {
+        fill: $tw-clr-icn-danger;
+      }
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-bg-danger;
+    }
+    .left-side--icon {
+      fill: $tw-clr-icn-on-danger;
+    }
+  }
+
+  &--warning {
+    border: 1px solid $tw-clr-brdr-warning;
+    background-color: $tw-clr-bg-warning-tertiary;
+
+    &.tw-message--page {
+      border: 1px solid $tw-clr-brdr-warning;
+
+      .main-content--icon {
+        fill: $tw-clr-icn-warning;
+      }
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-bg-warning;
+    }
+    .left-side--icon {
+      fill: $tw-clr-icn-on-warning;
+    }
+  }
+
+  &--success {
+    border: 1px solid $tw-clr-brdr-success;
+    background-color: $tw-clr-bg-success-tertiary;
+
+    &.tw-message--page {
+      border: 1px solid $tw-clr-brdr-success;
+
+      .main-content--icon {
+        fill: $tw-clr-icn-success;
+      }
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-bg-success;
+    }
+    .left-side--icon {
+      fill: $tw-clr-icn-on-success;
+    }
+  }
+}

package/components/MultiSelect/MultiSelect.test.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _ = _interopRequireDefault(require("."));
+test('show options when placeholder is clicked', () => {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, {
+    onAdd: () => undefined,
+    onRemove: () => undefined,
+    options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
+    valueRenderer: v => v,
+    selectedOptions: [],
+    placeHolder: "Select..."
+  }));
+
+  // we should find the placeholder text
+  const placeHolder = _react2.screen.getByText('Select...');
+  expect(placeHolder).toBeInTheDocument();
+
+  // we should not find the options yet
+  expect(_react2.screen.queryByText('foo')).not.toBeInTheDocument();
+  expect(_react2.screen.queryByText('bar')).not.toBeInTheDocument();
+  expect(_react2.screen.queryByText('baz')).not.toBeInTheDocument();
+
+  // click the placeholder
+  _react2.fireEvent.click(placeHolder);
+
+  // now the options should be visible
+  expect(_react2.screen.queryByText('foo')).toBeInTheDocument();
+  expect(_react2.screen.queryByText('bar')).toBeInTheDocument();
+  expect(_react2.screen.queryByText('baz')).toBeInTheDocument();
+});
+test('clicking an option calls the onAdd handler', () => {
+  const handleAdd = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, {
+    onAdd: handleAdd,
+    onRemove: () => undefined,
+    options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
+    valueRenderer: v => v,
+    selectedOptions: [],
+    placeHolder: "Select..."
+  }));
+
+  // click the dropdown chevron
+  const dropdown = _react2.screen.getByLabelText('show-options');
+  _react2.fireEvent.click(dropdown);
+
+  // click one of the options
+  const option = _react2.screen.getByText('bar');
+  _react2.fireEvent.click(option);
+
+  // addHandler should have been called with id 2
+  expect(handleAdd).toBeCalledWith(2);
+});
+test('clicking the pill remove button calls the onRemove handler', () => {
+  const handleRemove = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, {
+    onAdd: () => undefined,
+    onRemove: handleRemove,
+    options: new Map([[1, 'foo']]),
+    valueRenderer: v => v,
+    selectedOptions: [1]
+  }));
+
+  // find a pill with the 'foo' text
+  expect(_react2.screen.queryByText('foo')).toBeInTheDocument();
+
+  // click the remove button
+  const removeButton = _react2.screen.getByLabelText('remove');
+  _react2.fireEvent.click(removeButton);
+
+  // handleRemove should have been called with id 1
+  expect(handleRemove).toBeCalledWith(1);
+});

package/components/MultiSelect/index.js

@@ -0,0 +1,120 @@
+"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 = MultiSelect;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
+var _PillList = _interopRequireDefault(require("../PillList"));
+require("./styles.scss");
+function MultiSelect(props) {
+  const {
+    className,
+    disabled,
+    fullWidth,
+    helperText,
+    errorText,
+    id,
+    label,
+    missingValuePlaceholder,
+    onAdd,
+    onRemove,
+    onPillClick,
+    options,
+    optionsVisible,
+    pillListClassName,
+    placeHolder,
+    selectedOptions,
+    sx,
+    tooltipTitle,
+    valueRenderer
+  } = props;
+  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
+  const toggleOptions = () => {
+    setOpenedOptions(isOpen => !isOpen && !disabled);
+    if (props.onFocus) {
+      props.onFocus();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (optionsVisible !== undefined) {
+      setOpenedOptions(optionsVisible);
+    }
+  }, [optionsVisible]);
+  const onBlurHandler = event => {
+    // In Chrome > 126, the onBlur event will fire even if you are clicking _within_ the focused element
+    // If this is the case, we do not actually want to blur
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
+    setOpenedOptions(false);
+    if (props.onBlur) {
+      props.onBlur();
+    }
+  };
+  const unselectedOptions = Array.from(options.keys()).filter(key => !selectedOptions.includes(key));
+  const valuesPillData = selectedOptions.map(item => {
+    const value = options.get(item);
+    return {
+      id: item,
+      value: value ? valueRenderer(value) : missingValuePlaceholder || ''
+    };
+  }).filter(data => data.value);
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "multi-select ".concat(className),
+    sx: sx
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "multi-select__label"
+  }, label, " ", tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
+    title: tooltipTitle
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__container ".concat(fullWidth ? 'multi-select__container--fullWidth' : ''),
+    onBlur: onBlurHandler,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: "multi-select__values".concat(disabled ? '--disabled' : '').concat(openedOptions ? ' open' : '').concat(errorText ? ' error' : ''),
+    onClick: toggleOptions
+  }, selectedOptions.length > 0 ? /*#__PURE__*/_react.default.createElement(_PillList.default, {
+    data: valuesPillData,
+    onRemove: onRemove,
+    onClick: onPillClick,
+    className: pillListClassName
+  }) : /*#__PURE__*/_react.default.createElement("p", {
+    className: "multi-select__placeholder-text"
+  }, placeHolder), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'multi-select__values__icon-button',
+    "aria-label": "show-options"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: openedOptions ? 'chevronUp' : 'chevronDown',
+    className: "multi-select__values__icon-right".concat(disabled ? '--disabled' : '')
+  }))), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__options-container"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: 'multi-select__options'
+  }, unselectedOptions.map((optionKey, index) => {
+    const optionValue = options.get(optionKey);
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index,
+      className: "select-value",
+      onClick: () => onAdd(optionKey)
+    }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
+  })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "multi-select__help-text"
+  }, helperText), errorText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__error"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "error",
+    className: "multi-select__error-icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "multi-select__error-text"
+  }, errorText)));
+}

package/components/MultiSelect/styles.scss

@@ -0,0 +1,180 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.multi-select {
+  display: flex;
+  flex-direction: column;
+
+  .multi-select__container {
+    position: relative;
+    width: 228px;
+    cursor: pointer;
+
+    &--fullWidth {
+      position: relative;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  .multi-select__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%;
+  }
+
+  .multi-select__error {
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+
+    &-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;
+    }
+  }
+
+  .multi-select__help-text {
+    font-family: $tw-fnt-frm-fld-help-text-font-family;
+    font-size: $tw-fnt-frm-fld-help-text-font-size;
+    font-weight: $tw-fnt-frm-fld-help-text-font-weight;
+    line-height: $tw-fnt-frm-fld-help-text-line-height;
+    color: $tw-clr-txt-secondary;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .multi-select__placeholder-text {
+    font-family: $tw-fnt-frm-fld-text-value-font-family;
+    font-size: $tw-fnt-frm-fld-text-value-font-size;
+    font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+    line-height: $tw-fnt-frm-fld-text-value-line-height;
+    color: $tw-clr-txt-tertiary;
+    margin: 0;
+  }
+
+  .multi-select__values {
+    background-color: $tw-clr-bg;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+    padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+    border-radius: $tw-sz-base-x-small;
+    border-width: $tw-sz-frm-fld-text-input-stroke;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
+    }
+
+    &.open {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+      outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+    }
+
+    &.error {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
+    }
+
+    &--disabled {
+      background-color: $tw-clr-bg;
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-tertiary;
+      padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+      border-radius: $tw-sz-base-x-small;
+      border-width: $tw-sz-frm-fld-text-input-stroke;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    &__icon-button {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      padding: 0;
+    }
+
+    &__icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn;
+      flex-shrink: 0;
+
+      &--disabled {
+        width: $tw-fnt-frm-fld-text-value-line-height;
+        height: $tw-fnt-frm-fld-text-value-line-height;
+        fill: $tw-clr-icn-secondary;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .multi-select__options-container {
+    position: relative;
+    height: 0;
+    width: 100%;
+
+    .multi-select__options {
+      z-index: 3;
+      width: calc(100% - 2px);
+      position: absolute;
+      top: 0px;
+      list-style-type: none;
+      padding: $tw-spc-base-x-small 0;
+      background: $tw-clr-bg;
+      border: 1px solid $tw-clr-brdr-secondary;
+      margin: $tw-spc-base-xx-small 0 0;
+      border-radius: $tw-sz-base-x-small;
+      max-height: 140px;
+      overflow-y: auto;
+
+      .select-value {
+        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;
+        }
+
+        &--disabled {
+          opacity: $tw-opcty-semantic-off;
+        }
+      }
+    }
+  }
+}

package/components/Navbar/NavFooter.js

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