@servicetitan/design-system 10.7.0 → 11.0.0

package/dist/components/FilePicker/FilePicker.css

@@ -43,7 +43,7 @@
   margin-left: 8px;
 }
 .FilePicker__File__ActionIcon .a-Icon {
-  color: #9e9ea0;
+  color: #949596;
   cursor: pointer;
 }
 

package/dist/components/FilePicker/index.css

@@ -43,7 +43,7 @@
   margin-left: 8px;
 }
 .FilePicker__File__ActionIcon .a-Icon {
-  color: #9e9ea0;
+  color: #949596;
   cursor: pointer;
 }
 

package/dist/components/FilterButton/FilterButton.css

@@ -0,0 +1,46 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.FilterButton {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
+  border-radius: 500em;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
+  color: var(--colorsTextDefault, #141414);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: transparent;
+  align-self: flex-start;
+}
+.FilterButton .BodyText {
+  color: inherit;
+}
+.FilterButton.FilterButton--focus-visible:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.FilterButton .FilterButton__Icon {
+  height: 21px;
+  width: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.FilterButton .FilterButton__ExpandIcon,
+.FilterButton .FilterButton__Tag {
+  margin-left: 4px;
+}
+.FilterButton.FilterButton--active {
+  color: var(--colorsTextSecondary, #6954c0);
+  border: none;
+  background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
+  padding: calc(4px + 1px) calc(8px + 1px);
+}
+.FilterButton.FilterButton--active .FilterButton__Icon,
+.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
+  color: var(--colorsTextSecondary, #6954c0);
+}
+
+/*# sourceMappingURL=FilterButton.css.map */

package/dist/components/FilterButton/FilterButton.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FilterButton/FilterButton.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA,OCiBa;ADfb;EACA;EDUA;EACA;EACA,eEPoB;EFQpB;EACA,OAhBc;EAiBd,WE+Ga;EF9Gb;EACA;EACA;;AAEA;EAAY;;AAEZ;EACC;EACA,YAnBc;;AAsBf;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC,aEuFa;;AFpFd;EACC,OAxCY;EAyCZ;EACA,kBAzCkB;EA0ClB;;AAEA;AAAA;EAEC,OA/CW","file":"FilterButton.css"}

package/dist/components/FilterButton/FilterButton.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { IconPropsStrict } from '../Icon';
+export interface FilterButtonPropsStrict {
+    /** Additional classes */
+    className?: string;
+    /** React element to be rendered as an icon */
+    icon?: IconPropsStrict['name'];
+    /** To show expand icon */
+    expandIcon?: boolean | null;
+    /** Displays the label of the Filter Button */
+    label: string;
+    /** Displays the value of the Filter Button */
+    value?: boolean | number | string;
+    /** Calls when the Filter Button is clicked  */
+    onClick?: () => void;
+}
+export interface FilterButtonProps extends FilterButtonPropsStrict {
+    [propName: string]: any;
+}
+export declare const FilterButton: FC<FilterButtonProps>;

package/dist/components/FilterButton/FilterButton.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButton = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var useFocusVisible_1 = require("../../hooks/useFocusVisible");
+var Stack_1 = require("../Stack");
+var Icon_1 = require("../Icon");
+var BodyText_1 = require("../BodyText");
+var Tag_1 = require("../Tag");
+exports.FilterButton = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, icon = _a.icon, onClick = _a.onClick, _b = _a.expandIcon, expandIcon = _b === void 0 ? null : _b, value = _a.value, label = _a.label, rest = __rest(_a, ["className", "icon", "onClick", "expandIcon", "value", "label"]);
+    var _c = react_1.default.useState(value), IValue = _c[0], setIValue = _c[1];
+    var newRef = react_1.default.useRef(null);
+    var itemRef = ref ? ref : newRef;
+    var isFocusVisible = (0, useFocusVisible_1.useFocusVisible)(itemRef).isFocusVisible;
+    var filterButtonClassName = (0, classnames_1.default)('FilterButton', className, {
+        'FilterButton--active': IValue,
+        'FilterButton--focus-visible': isFocusVisible,
+    });
+    var onClickHandler = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    react_1.default.useEffect(function () {
+        setIValue(value);
+    }, [value]);
+    return (react_1.default.createElement("button", __assign({ className: filterButtonClassName, onClick: function () { return onClickHandler(); }, ref: itemRef, "aria-valuetext": "" + IValue, "aria-expanded": expandIcon, "aria-label": "Filter " + label, "aria-selected": !!IValue }, rest),
+        react_1.default.createElement(Stack_1.Stack, { alignItems: "center" },
+            icon && (react_1.default.createElement(Icon_1.Icon, { name: icon, size: "16px", className: "FilterButton__Icon" })),
+            !icon && label && (react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small", className: "FilterButton__Label" }, label)),
+            typeof IValue === 'string' ? (react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small" }, ": ",
+                react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small", bold: true }, IValue))) : typeof IValue === 'number' ? (react_1.default.createElement(Tag_1.Tag, { color: "info", badge: true, compact: true, className: "FilterButton__Tag" }, IValue)) : null,
+            expandIcon !== null && (react_1.default.createElement(Icon_1.Icon, { name: expandIcon
+                    ? 'keyboard_arrow_up'
+                    : 'keyboard_arrow_down', className: "FilterButton__ExpandIcon" })))));
+});
+//# sourceMappingURL=FilterButton.js.map

package/dist/components/FilterButton/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAClC,0DAAoC;AACpC,+DAA8D;AAC9D,kCAAiC;AACjC,gCAAgD;AAChD,wCAAuC;AACvC,8BAA6B;AA0BhB,QAAA,YAAY,GAA0B,eAAK,CAAC,UAAU,CAClE,UACC,EAAsE,EACtE,GAAiC;IAD/B,IAAA,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAApE,gEAAsE,CAAF;IAG9D,IAAA,KAAsB,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA1C,MAAM,QAAA,EAAE,SAAS,QAAyB,CAAC;IAElD,IAAM,MAAM,GAAG,eAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,IAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3B,IAAA,cAAc,GAAK,IAAA,iCAAe,EAAC,OAAO,CAAC,eAA7B,CAA8B;IAEpD,IAAM,qBAAqB,GAAG,IAAA,oBAAU,EAAC,cAAc,EAAE,SAAS,EAAE;QACnE,sBAAsB,EAAE,MAAM;QAC9B,6BAA6B,EAAE,cAAc;KAC7C,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG;QACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACb,CAAC,CAAC;IAEF,eAAK,CAAC,SAAS,CAAC;QACf,SAAS,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,mDACC,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,cAAM,OAAA,cAAc,EAAE,EAAhB,CAAgB,EAC/B,GAAG,EAAE,OAAO,oBACI,KAAG,MAAQ,mBACZ,UAAU,gBACb,YAAU,KAAO,mBACd,CAAC,CAAC,MAAM,IACnB,IAAI;QAER,8BAAC,aAAK,IAAC,UAAU,EAAC,QAAQ;YACxB,IAAI,IAAI,CACR,8BAAC,WAAI,IACJ,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oBAAoB,GAC7B,CACF;YACA,CAAC,IAAI,IAAI,KAAK,IAAI,CAClB,8BAAC,mBAAQ,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,qBAAqB,IAE9B,KAAK,CACI,CACX;YACA,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,8BAAC,mBAAQ,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC9B,IAAI;gBACL,8BAAC,mBAAQ,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,UACnC,MAAM,CACG,CACD,CACX,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAChC,8BAAC,SAAG,IACH,KAAK,EAAC,MAAM,EACZ,KAAK,QACL,OAAO,QACP,SAAS,EAAC,mBAAmB,IAE5B,MAAM,CACF,CACN,CAAC,CAAC,CAAC,IAAI;YACP,UAAU,KAAK,IAAI,IAAI,CACvB,8BAAC,WAAI,IACJ,IAAI,EACH,UAAU;oBACT,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,qBAAqB,EAEzB,SAAS,EAAC,0BAA0B,GACnC,CACF,CACM,CACA,CACT,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/FilterButton/index.css

@@ -0,0 +1,46 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.FilterButton {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
+  border-radius: 500em;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
+  color: var(--colorsTextDefault, #141414);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: transparent;
+  align-self: flex-start;
+}
+.FilterButton .BodyText {
+  color: inherit;
+}
+.FilterButton.FilterButton--focus-visible:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.FilterButton .FilterButton__Icon {
+  height: 21px;
+  width: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.FilterButton .FilterButton__ExpandIcon,
+.FilterButton .FilterButton__Tag {
+  margin-left: 4px;
+}
+.FilterButton.FilterButton--active {
+  color: var(--colorsTextSecondary, #6954c0);
+  border: none;
+  background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
+  padding: calc(4px + 1px) calc(8px + 1px);
+}
+.FilterButton.FilterButton--active .FilterButton__Icon,
+.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
+  color: var(--colorsTextSecondary, #6954c0);
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/components/FilterButton/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FilterButton/FilterButton.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA,OCiBa;ADfb;EACA;EDUA;EACA;EACA,eEPoB;EFQpB;EACA,OAhBc;EAiBd,WE+Ga;EF9Gb;EACA;EACA;;AAEA;EAAY;;AAEZ;EACC;EACA,YAnBc;;AAsBf;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC,aEuFa;;AFpFd;EACC,OAxCY;EAyCZ;EACA,kBAzCkB;EA0ClB;;AAEA;AAAA;EAEC,OA/CW","file":"index.css"}

package/dist/components/FilterButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButton';

package/dist/components/FilterButton/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FilterButton"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/FilterButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B"}