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

package/components/Button/styles.scss

@@ -0,0 +1,453 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.button {
+  border: 0;
+  border-style: solid;
+  position: relative;
+  margin: 5px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: $tw-opcty-semantic-off;
+  }
+
+  .tw-icon {
+    vertical-align: top;
+  }
+
+  &--small {
+    min-height: $tw-sz-btn-small-height;
+    font-size: $tw-fnt-btn-label-small-font-size;
+    font-weight: $tw-fnt-btn-label-small-font-weight;
+    font-family: $tw-fnt-btn-label-small-font-family;
+    line-height: $tw-fnt-btn-label-small-line-height;
+    min-width: $tw-sz-btn-small-min-width;
+    padding: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2)
+      calc(#{$tw-sz-btn-small-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-small-height} / 2);
+
+    .tw-icon--small {
+      height: $tw-fnt-btn-label-small-line-height;
+      width: $tw-fnt-btn-label-small-line-height;
+      margin-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
+
+      &.icon-spinner {
+        margin-right: 0;
+      }
+    }
+    .icon-right {
+      height: $tw-fnt-btn-label-small-line-height;
+      width: $tw-fnt-btn-label-small-line-height;
+      margin-left: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
+      margin-right: 0;
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
+      );
+    }
+    &.button-with-right-icon {
+      padding-right: calc(
+        (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
+      padding-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
+      .tw-icon--small {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--medium {
+    min-height: $tw-sz-btn-medium-height;
+    font-size: $tw-fnt-btn-label-medium-font-size;
+    font-weight: $tw-fnt-btn-label-medium-font-weight;
+    font-family: $tw-fnt-btn-label-medium-font-family;
+    line-height: $tw-fnt-btn-label-medium-line-height;
+    min-width: $tw-sz-btn-medium-min-width;
+    padding: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2)
+      calc(#{$tw-sz-btn-medium-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-medium-height} / 2);
+
+    .tw-icon--medium {
+      height: $tw-fnt-btn-label-medium-line-height;
+      width: $tw-fnt-btn-label-medium-line-height;
+      margin-right: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
+
+      &.icon-spinner {
+        margin-right: 0;
+      }
+    }
+    .icon-right {
+      height: $tw-fnt-btn-label-medium-line-height;
+      width: $tw-fnt-btn-label-medium-line-height;
+      margin-left: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
+      margin-right: 0;
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-medium-height} / 2) -
+          (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
+      );
+    }
+    &.button-with-right-icon {
+      padding-right: calc(
+        (#{$tw-sz-btn-medium-height} / 2) -
+          (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 8px;
+      padding-right: 8px;
+      .tw-icon--medium {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--large {
+    min-height: $tw-sz-btn-large-height;
+    font-size: $tw-fnt-btn-label-large-font-size;
+    font-weight: $tw-fnt-btn-label-large-font-weight;
+    font-family: $tw-fnt-btn-label-large-font-family;
+    line-height: $tw-fnt-btn-label-large-line-height;
+    min-width: $tw-sz-btn-large-min-width;
+    padding: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2)
+      calc(#{$tw-sz-btn-large-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-large-height} / 2);
+
+    .tw-icon--large {
+      height: $tw-fnt-btn-label-large-line-height;
+      width: $tw-fnt-btn-label-large-line-height;
+      margin-right: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
+
+      &.icon-spinner {
+        margin-right: 0;
+      }
+    }
+    .icon-right {
+      height: $tw-fnt-btn-label-large-line-height;
+      width: $tw-fnt-btn-label-large-line-height;
+      margin-left: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
+      margin-right: 0;
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
+      );
+    }
+    &.button-with-right-icon {
+      padding-right: calc(
+        (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 10px;
+      padding-right: 10px;
+      .tw-icon--large {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--xlarge {
+    min-height: $tw-sz-btn-x-large-height;
+    font-size: $tw-fnt-btn-label-x-large-font-size;
+    font-weight: $tw-fnt-btn-label-x-large-font-weight;
+    font-family: $tw-fnt-btn-label-x-large-font-family;
+    line-height: $tw-fnt-btn-label-x-large-line-height;
+    min-width: $tw-sz-btn-x-large-min-width;
+    padding: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2)
+      calc(#{$tw-sz-btn-x-large-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-x-large-height} / 2);
+
+    .tw-icon--xlarge {
+      height: $tw-fnt-btn-label-x-large-line-height;
+      width: $tw-fnt-btn-label-x-large-line-height;
+      margin-right: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
+
+      &.icon-spinner {
+        margin-right: 0;
+      }
+    }
+    .icon-right {
+      height: $tw-fnt-btn-label-x-large-line-height;
+      width: $tw-fnt-btn-label-x-large-line-height;
+      margin-left: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
+      margin-right: 0;
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-x-large-height} / 2) -
+          (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
+      );
+    }
+    &.button-with-right-icon {
+      padding-right: calc(
+        (#{$tw-sz-btn-x-large-height} / 2) -
+          (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 12px;
+      padding-right: 12px;
+      .tw-icon--xlarge {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.button-no-label {
+    min-width: auto;
+  }
+}
+
+.productive-primary {
+  background-color: $tw-clr-bg-brand;
+  color: $tw-clr-txt-on-brand;
+
+  svg {
+    fill: $tw-clr-icn-on-brand;
+  }
+
+  &:hover {
+    background: $tw-clr-bg-brand-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-brand-active;
+  }
+}
+
+.productive-secondary {
+  background-color: $tw-clr-bg-brand-ghost;
+  color: $tw-clr-txt-brand;
+  svg {
+    fill: $tw-clr-icn-brand;
+  }
+
+  border: $tw-sz-btn-stroke solid $tw-clr-brdr-brand;
+  &:hover {
+    background-color: $tw-clr-bg-brand-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-brand-ghost-active;
+  }
+}
+
+.productive-ghost {
+  background-color: $tw-clr-bg-brand-ghost;
+  color: $tw-clr-txt-brand;
+
+  svg {
+    fill: $tw-clr-icn-on-brand;
+  }
+
+  &:hover {
+    background: $tw-clr-bg-brand-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-brand-ghost-active;
+  }
+}
+
+.passive-primary {
+  background-color: $tw-clr-bg-tertiary;
+  color: $tw-clr-txt;
+  svg {
+    fill: $tw-clr-icn;
+  }
+  &:hover {
+    background: $tw-clr-bg-tertiary-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-tertiary-active;
+  }
+}
+
+.passive-secondary {
+  background-color: $tw-clr-bg-ghost;
+  color: $tw-clr-brdr-secondary;
+  svg {
+    fill: $tw-clr-brdr-secondary;
+  }
+  border: $tw-sz-btn-stroke solid $tw-clr-brdr-secondary;
+  &:hover {
+    background-color: $tw-clr-bg-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-ghost-active;
+  }
+}
+
+.passive-ghost {
+  background-color: $tw-clr-bg-ghost;
+  color: $tw-clr-txt;
+  svg {
+    fill: $tw-clr-icn;
+  }
+  &:hover {
+    background-color: $tw-clr-bg-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-ghost-active;
+  }
+}
+
+.destructive-primary {
+  background-color: $tw-clr-bg-danger;
+  color: $tw-clr-txt-on-danger;
+  svg {
+    fill: $tw-clr-icn-on-danger;
+  }
+  &:hover {
+    background: $tw-clr-bg-danger-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-danger-active;
+  }
+}
+
+.destructive-secondary {
+  background-color: $tw-clr-bg-danger-ghost;
+  color: $tw-clr-txt-danger;
+  svg {
+    fill: $tw-clr-icn-danger;
+  }
+  border: $tw-sz-btn-stroke solid $tw-clr-brdr-danger;
+  &:hover {
+    background-color: $tw-clr-bg-danger-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-danger-ghost-active;
+  }
+}
+
+.destructive-ghost {
+  background-color: $tw-clr-bg-danger-ghost;
+  color: $tw-clr-txt-danger;
+  svg {
+    fill: $tw-clr-icn-danger;
+  }
+  &:hover {
+    background-color: $tw-clr-bg-danger-ghost-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-bg-danger-ghost-active;
+  }
+}
+
+.productive-secondary,
+.passive-secondary,
+.destructive-secondary {
+  &--small {
+    padding: calc(
+        (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-small-height} / 2) - #{$tw-sz-btn-stroke} - ((((
+                    #{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}
+                  ) / 2)))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 4px;
+      padding-right: 4px;
+      .tw-icon--small {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--medium {
+    padding: calc(
+        (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-medium-height} / 2) - #{$tw-sz-btn-stroke} - ((((
+                    #{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}
+                  ) / 2)))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 6px;
+      padding-right: 6px;
+      .tw-icon--medium {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--large {
+    padding: calc(
+        (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((
+                    #{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}
+                  ) / 2)))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 8px;
+      padding-right: 8px;
+      .tw-icon--large {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--xlarge {
+    padding: calc(
+        (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-x-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((
+                    #{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}
+                  ) / 2)))
+      );
+    }
+    &.button-no-label.button-with-icon {
+      padding-left: 10px;
+      padding-right: 10px;
+      .tw-icon--xlarge {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/components/Checkbox.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxStyle = void 0;
+exports.default = Checkbox;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+const CheckboxStyle = theme => ({
+  padding: theme.spacing(0, 1, 0, 0),
+  '& .MuiSvgIcon-root': {
+    fill: theme.palette.TwClrBrdrSecondary
+  },
+  '&:hover > .MuiSvgIcon-root': {
+    fill: theme.palette.TwClrBrdrHover
+  },
+  '&.Mui-checked > .MuiSvgIcon-root': {
+    fill: theme.palette.TwClrBgSelected,
+    color: theme.palette.TwClrBgSelected
+  },
+  '&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
+    fill: theme.palette.TwClrBgSelected,
+    color: theme.palette.TwClrBgSelected
+  },
+  '&:focus > .MuiSvgIcon-root': {
+    border: "2px solid ".concat(theme.palette.TwClrBgSelected)
+  },
+  '&.Mui-disabled': {
+    opacity: 0.5
+  }
+});
+exports.CheckboxStyle = CheckboxStyle;
+function Checkbox(props) {
+  var _props$value;
+  const theme = (0, _material.useTheme)();
+  const onChange = (event, checked) => {
+    if (props.indeterminate) {
+      props.onChange(true);
+      return;
+    }
+    props.onChange(checked);
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    id: props.id,
+    onChange: onChange,
+    label: props.label,
+    disabled: props.disabled,
+    control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+      disabled: props.disabled,
+      disableRipple: true,
+      id: 'check-' + props.id,
+      indeterminate: props.indeterminate,
+      checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false,
+      size: "medium",
+      sx: [CheckboxStyle(theme), ...(Array.isArray(props.sx) ? props.sx : [props.sx])]
+    }),
+    className: props.className,
+    sx: {
+      alignItems: 'flex-start',
+      color: theme.palette.TwClrTxt,
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      fontWeight: 500,
+      lineHeight: '24px',
+      margin: theme.spacing(1, 0, 0, 0)
+    }
+  });
+}

package/components/Confirm/index.js

@@ -0,0 +1,94 @@
+"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 = Confirm;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
+/**
+ * A generic confirm modal built on top of DialogBox.
+ * Most properties are optional with default values.
+ * Required properties are commented as such.
+ */
+
+function Confirm(_ref) {
+  let {
+    confirmButtonDisabled,
+    confirmButtonIcon,
+    confirmButtonId,
+    confirmButtonPriority,
+    confirmButtonText,
+    confirmButtonType,
+    closeButtonId,
+    closeButtonText,
+    message,
+    onClose,
+    onConfirm,
+    open,
+    size,
+    textStyle,
+    title
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const middleButtons = (0, _react.useMemo)(() => {
+    const buttons = [/*#__PURE__*/_react.default.createElement(_Button.default, {
+      disabled: confirmButtonDisabled,
+      icon: confirmButtonIcon,
+      id: confirmButtonId || 'confirm-submit',
+      key: "button-2",
+      label: confirmButtonText,
+      onClick: onConfirm,
+      priority: confirmButtonPriority || 'primary',
+      type: confirmButtonType || 'productive'
+    })];
+    if (onClose && closeButtonText) {
+      buttons.unshift( /*#__PURE__*/_react.default.createElement(_Button.default, {
+        id: closeButtonId || 'confirm-close',
+        key: "button-1",
+        label: closeButtonText,
+        onClick: onClose,
+        priority: "secondary",
+        type: "passive"
+      }));
+    }
+    return buttons;
+  }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
+  const content = (0, _react.useMemo)(() => {
+    const text = (str, key) => {
+      return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        color: theme.palette.TwClrTxt,
+        fontSize: "16px",
+        fontWeight: 400,
+        key: key,
+        lineHeight: "24px",
+        textAlign: "center",
+        sx: {
+          marginBottom: theme.spacing(1),
+          '&:last-child': {
+            marginBottom: 0
+          },
+          ...(textStyle || {})
+        }
+      }, str);
+    };
+    if (typeof message === 'string') {
+      return text(message);
+    } else if (Array.isArray(message)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map((str, i) => text(str, "".concat(str, "_").concat(i))));
+    } else {
+      return message;
+    }
+  }, [message, textStyle, theme]);
+  return /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+    onClose: onClose,
+    open: open !== null && open !== void 0 ? open : true,
+    title: title,
+    size: size || 'medium',
+    middleButtons: middleButtons
+  }, content);
+}