@terraware/web-components 2.1.0 → 2.1.1

package/components/Pill/index.d.ts

@@ -0,0 +1,11 @@
+import './styles.scss';
+type PillProps<IdType> = {
+    id: IdType;
+    label: string;
+    value: string;
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export default function Pill<IdType>({ id, label, value, onRemove, className }: PillProps<IdType>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/components/Pill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAc9G"}

package/components/Pill/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pill;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+function Pill(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      value = _ref.value,
+      onRemove = _ref.onRemove,
+      className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pill ".concat(className !== null && className !== void 0 ? className : '')
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "label"
+  }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "value"
+  }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: function onClick() {
+      return onRemove(id);
+    },
+    className: "iconContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon"
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "spacer"
+  }));
+}

package/components/Pill/styles.scss

@@ -0,0 +1,48 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.pill {
+  font-family: $tw-fnt-base-font-family;
+  background: $tw-clr-bg-tertiary;
+  padding: $tw-spc-base-xx-small $tw-spc-base-xx-small $tw-spc-base-xx-small 12px;
+  display: flex;
+  border-radius: 13px;
+  align-items: center;
+  margin-right: $tw-spc-base-x-small;
+  margin-bottom: $tw-spc-base-x-small;
+
+  .label {
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .value {
+    padding-left: $tw-spc-base-xx-small;
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .icon {
+    fill: $tw-clr-icn;
+    width: 12px;
+    height: 12px;
+    margin: 0 $tw-spc-base-xx-small;
+  }
+
+  .iconContainer {
+    padding: 0;
+  }
+
+  .spacer {
+    width: $tw-spc-base-x-small;
+    height: 12px;
+  }
+}

package/components/PillList/index.d.ts

@@ -0,0 +1,14 @@
+export type PillListItem<IdType> = {
+    id: IdType;
+    label: string;
+    value: string;
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export type PillListProps<IdType> = {
+    data: PillListItem<IdType>[];
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export default function PillList<IdType>(props: PillListProps<IdType>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/PillList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAiBlF"}

package/components/PillList/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PillList;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pill = _interopRequireDefault(require("../Pill"));
+
+var _material = require("@mui/material");
+
+function PillList(props) {
+  var data = props.data,
+      onRemove = props.onRemove,
+      className = props.className;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexWrap: "wrap"
+  }, data.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_Pill.default, {
+      key: index,
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      onRemove: item.onRemove || onRemove,
+      className: item.className || className
+    });
+  }));
+}

package/index.d.ts

@@ -14,6 +14,8 @@ import NavFooter from './components/Navbar/NavFooter';
 import NavItem from './components/Navbar/NavItem';
 import NavSection from './components/Navbar/NavSection';
 import Note from './components/Note';
+import Pill from './components/Pill';
+import PillList from './components/PillList';
 import ProgressCircle from './components/ProgressCircle/ProgressCircle';
 import RadioButton from './components/RadioButton';
 import Select from './components/Select/Select';
@@ -28,9 +30,10 @@ import { EnhancedTableDetailsRow, RendererProps, TableColumnType } from './compo
 import * as Svg from './components/svg';
 import Message from './components/Message/Message';
 import theme from './theme';
+export type { PillListItem } from './components/PillList';
 export type { IconName } from './components/Icon/icons/';
 export type { Size } from './components/Size';
 export type { DropdownItem } from './components/Dropdown';
 export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowType, SortOrder };
-export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, NavFooter, NavItem, NavSection, Navbar, Note, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
+export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, NavFooter, NavItem, NavSection, Navbar, Note, Pill, PillList, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}

package/index.js

@@ -107,6 +107,18 @@ Object.defineProperty(exports, "Note", {
     return _Note.default;
   }
 });
+Object.defineProperty(exports, "Pill", {
+  enumerable: true,
+  get: function get() {
+    return _Pill.default;
+  }
+});
+Object.defineProperty(exports, "PillList", {
+  enumerable: true,
+  get: function get() {
+    return _PillList.default;
+  }
+});
 Object.defineProperty(exports, "ProgressCircle", {
   enumerable: true,
   get: function get() {
@@ -231,6 +243,10 @@ var _NavSection = _interopRequireDefault(require("./components/Navbar/NavSection
 
 var _Note = _interopRequireDefault(require("./components/Note"));
 
+var _Pill = _interopRequireDefault(require("./components/Pill"));
+
+var _PillList = _interopRequireDefault(require("./components/PillList"));
+
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle/ProgressCircle"));
 
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));

package/package.json

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

package/stories/PillList.stories.d.ts

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react';
+import PillList, { PillListProps } from '../components/PillList';
+declare const _default: {
+    title: string;
+    component: typeof PillList;
+};
+export default _default;
+export declare const Default: Story<PillListProps<number>>;
+//# sourceMappingURL=PillList.stories.d.ts.map

package/stories/PillList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillList.stories.d.ts","sourceRoot":"","sources":["../../src/stories/PillList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,QAAQ,EAAE,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;;;AAEjE,wBAGE;AAMF,eAAO,MAAM,OAAO,8BAAoB,CAAC"}