@terraware/web-components 1.0.2 → 1.0.5

package/components/Select/styles.scss

@@ -0,0 +1,282 @@
+@import '../../style-dictionary-dist/textfield_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.select {
+  display: flex;
+  flex-flow: row wrap;
+
+  .textfield-container {
+    position: relative;
+    height: 43px;
+    width: 228px;
+
+    &--fullWidth {
+      width: 100%;
+    }
+  }
+  .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-frm-fld-label;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .textfield-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-frm-fld-help-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  textarea {
+    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-frm-fld-value;
+    padding-top: 0;
+    padding-bottom: 0;
+    &::placeholder {
+      font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+      font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+      font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+      line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+      color: $tw-clr-base-gray-300;
+    }
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .textfield-value {
+    background-color: $tw-clr-frm-fld-text-input-fill;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+    padding: $tw-spc-base-x-small;
+    border-radius: $tw-rds-frm-fld-text-input;
+    border-width: $tw-sz-frm-fld-text-input-stroke;
+    display: flex;
+
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
+    }
+
+    &:active {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
+      outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
+    }
+
+    input {
+      border: none;
+      width: 100%;
+      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-frm-fld-value;
+      background: transparent;
+      padding-top: 0;
+      padding-bottom: 0;
+      &::placeholder {
+        font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+        font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+        font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+        line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+        color: $tw-clr-base-gray-300;
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &--display {
+      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;
+      padding: 0;
+      margin: 0;
+    }
+
+    &--disabled {
+      opacity: $tw-opcty-semantic-off;
+      pointer-events: none;
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-frm-fld-value;
+    }
+
+    &--icon-left {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-frm-fld-value;
+      margin-right: $tw-spc-base-x-small;
+    }
+
+    &--error {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+      background-color: $tw-clr-frm-fld-text-input-fill-error;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+        outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+      }
+    }
+
+    &--warning {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+      background-color: $tw-clr-frm-fld-text-input-fill-warning;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+        outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+      }
+    }
+
+    &--readonly {
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--readonly input {
+      cursor: auto;
+    }
+  }
+
+  .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-frm-fld-error-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-frm-fld-error-text;
+      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;
+    }
+  }
+
+  .textfield-warning-text {
+    font-family: $tw-fnt-frm-fld-warning-text-font-family;
+    font-size: $tw-fnt-frm-fld-warning-text-font-size;
+    font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
+    line-height: $tw-fnt-frm-fld-warning-text-line-height;
+    color: $tw-clr-frm-fld-warning-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-frm-fld-warning-text;
+      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;
+    }
+  }
+
+  .textfield-label-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .options-container {
+    z-index: 3;
+    width: 100%;
+    position: absolute;
+    top: 42px;
+    list-style-type: none;
+    padding: $tw-spc-base-x-small 0;
+    background: $tw-clr-frm-fld-select-menu-fill;
+    border: 1px solid $tw-clr-frm-fld-select-menu-stroke;
+    margin: 0;
+    margin-top: $tw-spc-base-xx-small;
+    border-radius: $tw-rds-frm-fld-text-input;
+    max-height: 140px;
+    overflow: scroll;
+
+    &.fixed-menu {
+      position: fixed;
+      z-index: 11;
+    }
+
+    .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-frm-fld-select-menu-item-fill-hover;
+        color: $tw-clr-frm-fld-value;
+      }
+
+      &:active {
+        background-color: $tw-clr-frm-fld-select-menu-item-fill-active;
+        color: $tw-clr-frm-fld-value;
+      }
+
+      &--selected {
+        background-color: $tw-clr-frm-fld-select-menu-item-fill-selected;
+        color: $tw-clr-frm-fld-select-value-selected;
+      }
+
+      &--disabled {
+        opacity: $tw-opcty-semantic-off;
+      }
+    }
+  }
+
+  .scroll-block {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+}

package/components/Size.d.ts

@@ -0,0 +1,2 @@
+export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+//# sourceMappingURL=Size.d.ts.map

package/components/Size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/components/Size.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC"}

package/components/Size.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/SummaryBox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    title: string;
+    value: number | string;
+    variant?: 'default' | 'available' | 'zero' | 'full';
+    icon?: boolean;
+    onIconClick?: () => void;
+}
+export default function SummaryBox({ title, value, variant, id, icon, onIconClick }: Props): JSX.Element;
+//# sourceMappingURL=SummaryBox.d.ts.map

package/components/SummaryBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryBox.d.ts","sourceRoot":"","sources":["../../src/components/SummaryBox.tsx"],"names":[],"mappings":";AAyCA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAmB,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBnH"}

package/components/SummaryBox.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SummaryBox;
+
+var _iconsMaterial = require("@mui/icons-material");
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _react = _interopRequireDefault(require("react"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    bold: {
+      fontWeight: theme.typography.fontWeightBold,
+      whiteSpace: 'pre-line'
+    },
+    summaryDefault: {
+      position: 'relative',
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      padding: theme.spacing(2)
+    },
+    summaryAvailable: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[700],
+      padding: theme.spacing(2),
+      color: theme.palette.common.white
+    },
+    summaryZero: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.state[5],
+      padding: theme.spacing(2),
+      color: theme.palette.common.white
+    },
+    full: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      padding: theme.spacing(2),
+      height: '100%',
+      boxSizing: 'border-box'
+    },
+    infoIcon: {
+      position: 'absolute',
+      right: theme.spacing(2)
+    }
+  };
+});
+
+function SummaryBox(_ref) {
+  var title = _ref.title,
+      value = _ref.value,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      id = _ref.id,
+      icon = _ref.icon,
+      onIconClick = _ref.onIconClick;
+  var classes = useStyles();
+  var style = variant === 'default' ? classes.summaryDefault : variant === 'available' ? classes.summaryAvailable : variant === 'full' ? classes.full : classes.summaryZero;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: style,
+    id: id
+  }, icon && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    className: classes.infoIcon,
+    onClick: onIconClick
+  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Info, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p"
+  }, title), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "h6",
+    className: classes.bold
+  }, value));
+}

package/components/Textfield/Textfield.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { IconName } from '../Icon/icons';
+import './styles.scss';
+declare type TextfieldType = 'text' | 'textarea';
+declare type Handler = (id: string, value: unknown) => void;
+export interface Props {
+    onChange?: Handler;
+    label: string;
+    disabled?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    id: string;
+    className?: string;
+    helperText?: string;
+    placeholder?: string;
+    errorText?: string;
+    warningText?: string;
+    value?: string;
+    readonly?: boolean;
+    display?: boolean;
+    type: TextfieldType;
+    onKeyDown?: (key: string) => void;
+    onClickRightIcon?: () => void;
+}
+export default function TextField(props: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Textfield.d.ts.map

package/components/Textfield/Textfield.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAGvB,aAAK,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC;AAEzC,aAAK,OAAO,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4G3D"}

package/components/Textfield/Textfield.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TextField;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+var _utils = require("../../utils");
+
+function TextField(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      label = props.label,
+      disabled = props.disabled,
+      iconLeft = props.iconLeft,
+      iconRight = props.iconRight,
+      id = props.id,
+      className = props.className,
+      helperText = props.helperText,
+      placeholder = props.placeholder,
+      errorText = props.errorText,
+      warningText = props.warningText,
+      readonly = props.readonly,
+      display = props.display,
+      type = props.type,
+      onKeyDown = props.onKeyDown,
+      onClickRightIcon = props.onClickRightIcon;
+  var textfieldClass = (0, _classnames.default)({
+    'textfield-value': true,
+    'textfield-value--disabled': disabled,
+    'textfield-value--error': !!errorText,
+    'textfield-value--warning': !!warningText,
+    'textfield-value--readonly': readonly
+  });
+
+  var textfieldOnChange = function textfieldOnChange(event) {
+    var textValue = event.target.value;
+
+    if ((0, _utils.isWhitespaces)(textValue)) {
+      return;
+    }
+
+    if (onChange) {
+      onChange(id, textValue);
+    }
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(e) {
+    if (onKeyDown) {
+      onKeyDown(e.key);
+    }
+  };
+
+  var renderRightIcon = function renderRightIcon() {
+    if (iconRight === 'cancel' && !value) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("button", {
+      onClick: onClickRightIcon,
+      className: "textfield-value--icon-container"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: iconRight,
+      className: "textfield-value--icon-right"
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield ".concat(className)
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-label"
+  }, label), !display && (type === 'text' ? /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: textfieldClass
+  }, iconLeft && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: iconLeft,
+    className: "textfield-value--icon-left"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    value: value || '',
+    disabled: readonly || disabled,
+    placeholder: placeholder,
+    onChange: textfieldOnChange,
+    onKeyDown: onKeyDownHandler
+  }), iconRight ? renderRightIcon() : null) : /*#__PURE__*/_react.default.createElement("textarea", {
+    className: textfieldClass,
+    value: value,
+    disabled: readonly || disabled,
+    placeholder: placeholder,
+    onChange: textfieldOnChange
+  })), display && /*#__PURE__*/_react.default.createElement("p", {
+    className: "textfield-value--display"
+  }, value), 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)), warningText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "warning",
+    className: "textfield-warning-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-warning-text"
+  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-help-text"
+  }, helperText));
+}