@terraware/web-components 3.5.4 → 3.5.5

package/components/Map/MapDrawer.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import './styles.scss';
+type MapDrawerSize = 'small' | 'medium';
+export type MapDrawerProp = {
+    children?: ReactNode;
+    onClose?: () => void;
+    open: boolean;
+    size: MapDrawerSize;
+    style?: CSSProperties;
+    title: string;
+};
+declare const MapDrawer: (props: MapDrawerProp) => import("react/jsx-runtime").JSX.Element | null;
+export default MapDrawer;
+//# sourceMappingURL=MapDrawer.d.ts.map

package/components/Map/MapDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapDrawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,eAAe,CAAC;AAGvB,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,aAAa,mDAwBtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Map/MapDrawer.js

@@ -0,0 +1,44 @@
+"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");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+var _utils = require("../../utils");
+const MapDrawer = props => {
+  const {
+    children,
+    onClose,
+    open,
+    size,
+    style,
+    title
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const {
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  return open ? /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "map-drawer map-drawer".concat(isDesktop ? "--".concat(size) : '--mobile'),
+    border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "map-drawer--header"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: onClose,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon-close"
+  }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: 'map-drawer--body'
+  }, children)) : null;
+};
+var _default = exports.default = MapDrawer;

package/components/Map/MapLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegend.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapLegend.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CAAC,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,gBAAiB,cAAc,KAAG,WAyNhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MapLegend.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapLegend.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CAAC,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,gBAAiB,cAAc,KAAG,WAgOhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Map/MapLegend.js

@@ -1,11 +1,12 @@
 "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 = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _utils = require("../../utils");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
@@ -19,6 +20,13 @@ const MapLegend = _ref => {
     isMobile,
     isDesktop
   } = (0, _utils.useDeviceInfo)();
+  const borderRadius = (0, _react.useMemo)(() => {
+    if (isDesktop) {
+      return '0 8px 8px 0'; // right-side
+    } else {
+      return '0 0 8px 8px'; // bottom-side
+    }
+  }, [isDesktop]);
   const legendComponents = legends.map((legend, index) => {
     const isFirst = index === 0;
     const isLast = index === legends.length - 1;
@@ -161,13 +169,12 @@ const MapLegend = _ref => {
     display: "flex",
     justifyItems: "flex-start",
     border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
-    borderRadius: "8px",
+    borderRadius: borderRadius,
     padding: theme.spacing(2, 1),
     flexDirection: 'column',
-    maxWidth: isDesktop ? '184px' : '100%',
-    width: isDesktop ? 'auto' : '100%',
-    marginRight: 2,
-    marginTop: isDesktop ? 0 : 2
+    maxWidth: isDesktop ? '184px' : 'fill',
+    width: isDesktop ? 'auto' : 'fill',
+    margin: 0
   }, legendComponents);
 };
 var _default = exports.default = MapLegend;

package/components/Map/styles.scss

@@ -0,0 +1,64 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.map-drawer {
+  display: flex;
+  flex-direction: column;
+  background: $tw-clr-base-white;
+
+  &--mobile {
+    display: none;
+  }
+
+  &--small {
+    min-width: 280px;
+    width: 280px;
+  }
+  &--medium {
+    min-width: 420px;
+    width: 420px;
+  }
+
+  &--header {
+    padding: $tw-spc-base-x-small $tw-spc-base-xx-small;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      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;
+      text-align: center;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin: 0 $tw-spc-base-xx-small;
+      width: 100%;
+    }
+
+    .icon-close {
+      fill: $tw-clr-icn-secondary;
+      height: $tw-sz-base-medium;
+      width: $tw-sz-base-medium;
+    }
+  }
+
+  &--body {
+    background: $tw-clr-base-white;
+    padding: $tw-spc-base-small $tw-spc-base-x-small;
+    text-align: start;
+    overflow: auto;
+    white-space: pre-wrap;
+  }
+
+  &--message {
+    font-family: $tw-fnt-dlg-bx-message-font-family;
+    font-size: $tw-fnt-dlg-bx-message-font-size;
+    font-weight: $tw-fnt-dlg-bx-message-font-weight;
+    line-height: $tw-fnt-dlg-bx-message-line-height;
+    color: $tw-clr-txt;
+    width: 100%;
+    text-align: start;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/MapDrawer.stories.d.ts

@@ -0,0 +1,8 @@
+import { MapDrawerProp } from '../components/Map/MapDrawer';
+declare const _default: {
+    title: string;
+    component: (props: MapDrawerProp) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MapDrawerProp>;
+//# sourceMappingURL=MapDrawer.stories.d.ts.map

package/stories/MapDrawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDrawer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapDrawer.stories.tsx"],"names":[],"mappings":"AAKA,OAAkB,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;;;;;AAGvE,wBAGE;AAuEF,eAAO,MAAM,OAAO,sGAAoB,CAAC"}

package/stories/MapLegend.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegend.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapLegend.stories.tsx"],"names":[],"mappings":";AAEA,OAAkB,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAC;;;;;AAKxF,wBAGE;AAuKF,eAAO,MAAM,OAAO,uGAAoB,CAAC"}
+{"version":3,"file":"MapLegend.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapLegend.stories.tsx"],"names":[],"mappings":";AAEA,OAAkB,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAC;;;;;AAKxF,wBAGE;AAkLF,eAAO,MAAM,OAAO,uGAAoB,CAAC"}