@servicetitan/mpa-components 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.1.0...@servicetitan/mpa-components@1.1.1) (2022-10-26)
+
+
+### Features
+
+* **email-components), feat(components), fix(date-range-select:** extracted email components, marketing campaign actions component, added storybook stories ([cf50700](https://github.com/servicetitan/marketing/commit/cf507004302573b6bbd0e4b4fe1055a787a724f5))
+* **email-components), feat(components), fix(date-range-select:** extracted email components, marketing campaign actions component, added storybook stories ([5941c5c](https://github.com/servicetitan/marketing/commit/5941c5cebb7994d98f5c888f2ed2bdc17967d29b))
+
+
+
+
+
 # [1.1.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.0.0...@servicetitan/mpa-components@1.1.0) (2022-09-07)
 
 

package/lib/components/campaign-actions/action-button/action-button-archive.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const ActionButtonArchive: FC<{
+    disabled?: boolean;
+    tooltip?: string;
+    onClick?(): void;
+}>;
+//# sourceMappingURL=action-button-archive.d.ts.map

package/lib/components/campaign-actions/action-button/action-button-archive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-archive.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-archive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,IAAI,IAAI,CAAC;CACpB,CAUA,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-archive.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from './action-button';
+export const ActionButtonArchive = props => (_jsx(ActionButton, Object.assign({}, props, { iconName: "archive", hover: "primary", tooltip: props.tooltip, qaPrefix: "qa-action-button-archive" }, { children: "Archive" })));
+//# sourceMappingURL=action-button-archive.js.map

package/lib/components/campaign-actions/action-button/action-button-archive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-archive.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-archive.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAI3B,KAAK,CAAC,EAAE,CAAC,CACV,KAAC,YAAY,oBACL,KAAK,IACT,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAC,0BAA0B,6BAGxB,CAClB,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-clone.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const ActionButtonClone: FC<{
+    disabled?: boolean;
+    onClick?(): void;
+}>;
+//# sourceMappingURL=action-button-clone.d.ts.map

package/lib/components/campaign-actions/action-button/action-button-clone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-clone.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-clone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,IAAI,IAAI,CAAA;CAAE,CAS1E,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-clone.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from './action-button';
+export const ActionButtonClone = props => (_jsx(ActionButton, Object.assign({}, props, { iconName: "control_point_duplicate", hover: "primary", qaPrefix: "qa-action-button-clone" }, { children: "Clone" })));
+//# sourceMappingURL=action-button-clone.js.map

package/lib/components/campaign-actions/action-button/action-button-clone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-clone.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-clone.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAiD,KAAK,CAAC,EAAE,CAAC,CACpF,KAAC,YAAY,oBACL,KAAK,IACT,QAAQ,EAAC,yBAAyB,EAClC,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,wBAAwB,2BAGtB,CAClB,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-edit.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const ActionButtonEdit: FC<{
+    disabled?: boolean;
+    tooltip?: string;
+    onClick?(): void;
+}>;
+//# sourceMappingURL=action-button-edit.d.ts.map

package/lib/components/campaign-actions/action-button/action-button-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-edit.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-edit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,IAAI,IAAI,CAAC;CACpB,CAUA,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-edit.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from './action-button';
+export const ActionButtonEdit = props => (_jsx(ActionButton, Object.assign({}, props, { iconName: "edit", hover: "primary", qaPrefix: "qa-action-button-edit", tooltip: props.tooltip }, { children: "Edit" })));
+//# sourceMappingURL=action-button-edit.js.map

package/lib/components/campaign-actions/action-button/action-button-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-edit.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-edit.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAIxB,KAAK,CAAC,EAAE,CAAC,CACV,KAAC,YAAY,oBACL,KAAK,IACT,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uBAAuB,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,0BAGX,CAClB,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-unarchive.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const ActionButtonUnarchive: FC<{
+    disabled?: boolean;
+    onClick?(): void;
+}>;
+//# sourceMappingURL=action-button-unarchive.d.ts.map

package/lib/components/campaign-actions/action-button/action-button-unarchive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-unarchive.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-unarchive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,IAAI,IAAI,CAAA;CAAE,CAS9E,CAAC"}

package/lib/components/campaign-actions/action-button/action-button-unarchive.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from './action-button';
+export const ActionButtonUnarchive = props => (_jsx(ActionButton, Object.assign({}, props, { iconName: "unarchive", hover: "primary", qaPrefix: "qa-action-button-unarchive" }, { children: "Unarchive" })));
+//# sourceMappingURL=action-button-unarchive.js.map

package/lib/components/campaign-actions/action-button/action-button-unarchive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button-unarchive.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button-unarchive.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAAiD,KAAK,CAAC,EAAE,CAAC,CACxF,KAAC,YAAY,oBACL,KAAK,IACT,QAAQ,EAAC,WAAW,EACpB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,4BAA4B,+BAG1B,CAClB,CAAC"}

package/lib/components/campaign-actions/action-button/action-button.d.ts

@@ -0,0 +1,14 @@
+import { IconNameType } from '@servicetitan/design-system';
+import { ReactNode, FC } from 'react';
+export interface ActionButtonProps {
+    children: ReactNode;
+    iconName?: IconNameType;
+    hover?: 'primary' | 'negative' | 'none';
+    disabled?: boolean;
+    tooltip?: string;
+    qaPrefix?: string;
+    active?: boolean;
+    onClick?(): void;
+}
+export declare const ActionButton: FC<ActionButtonProps>;
+//# sourceMappingURL=action-button.d.ts.map

package/lib/components/campaign-actions/action-button/action-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,YAAY,EAGf,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,EAAE,EAAU,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,IAAI,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuD9C,CAAC"}

package/lib/components/campaign-actions/action-button/action-button.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, BodyText, Tooltip, useFocusVisible, } from '@servicetitan/design-system';
+import classnames from 'classnames';
+import { useRef } from 'react';
+import * as Styles from './action-button.module.less';
+export const ActionButton = ({ active, children, disabled, iconName, onClick, qaPrefix, tooltip, }) => {
+    const buttonRef = useRef(null);
+    const { blurFunction, focusFunction, isFocusVisible } = useFocusVisible(buttonRef);
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
+    const getButton = () => {
+        const classes = classnames(Styles.actionButton, qaPrefix, {
+            [Styles.primary]: !disabled,
+            [Styles.focusVisible]: isFocusVisible,
+        });
+        return (_jsxs("button", Object.assign({ type: "button", ref: buttonRef, className: classes, onClick: handleClick, disabled: disabled, onFocus: focusFunction, onBlur: blurFunction }, { children: [iconName && _jsx(Icon, { name: iconName, size: "20px", className: "m-r-1" }), _jsx(BodyText, Object.assign({ className: `${qaPrefix}-text ${active ? 'c-blue-500' : 'c-neutral-100'}` }, { children: children }))] })));
+    };
+    if (!tooltip) {
+        return getButton();
+    }
+    return (_jsx(Tooltip, Object.assign({ text: tooltip, direction: "l", el: "div", className: `${qaPrefix}-tooltip` }, { children: getButton() })));
+};
+//# sourceMappingURL=action-button.js.map

package/lib/components/campaign-actions/action-button/action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/action-button/action-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,QAAQ,EAER,OAAO,EACP,eAAe,GAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAatD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAChD,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,GACV,EAAE,EAAE;IACD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAEnF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,QAAQ,EAAE;YACV,OAAO;SACV;QAED,IAAI,OAAO,EAAE;YACT,OAAO,EAAE,CAAC;SACb;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,QAAQ,EAAE;YACtD,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,QAAQ;YAC3B,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,cAAc;SACxC,CAAC,CAAC;QAEH,OAAO,CACH,gCACI,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,iBAEnB,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,GAAG,EACnE,KAAC,QAAQ,kBAAC,SAAS,EAAE,GAAG,QAAQ,SAAS,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,gBAC7E,QAAQ,IACF,KACN,CACZ,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,SAAS,EAAE,CAAC;KACtB;IAED,OAAO,CACH,KAAC,OAAO,kBAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,gBAC1E,SAAS,EAAE,IACN,CACb,CAAC;AACN,CAAC,CAAC"}

package/lib/components/campaign-actions/action-button/action-button.module.less

@@ -0,0 +1,17 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.action-button {
+    padding: @spacing-1 @spacing-2;
+    box-sizing: border-box;
+    border: none;
+    background-color: transparent;
+    width: 210px;
+    display: flex;
+    align-items: center;
+
+    &.primary:hover,
+    &.primary.focus-visible:focus {
+        background-color: @color-blue-100;
+        border-radius: @border-radius-1;
+    }
+}

package/lib/components/campaign-actions/actions-button/actions-button.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from 'react';
+export declare const ActionsButton: FC<{
+    children: ReactNode;
+}>;
+//# sourceMappingURL=actions-button.d.ts.map

package/lib/components/campaign-actions/actions-button/actions-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-button.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/actions-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAInE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACvB,CAoEA,CAAC"}

package/lib/components/campaign-actions/actions-button/actions-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card, Popover, Icon } from '@servicetitan/design-system';
+import { useState, useRef, useEffect } from 'react';
+import * as Styles from './actions-button.module.less';
+export const ActionsButton = ({ children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapElem = useRef(null);
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (!wrapElem.current) {
+                return;
+            }
+            const isClickedInside = wrapElem.current.contains(event.target);
+            if (!isClickedInside) {
+                close();
+            }
+        };
+        window.addEventListener('click', handleClick);
+        return () => {
+            window.removeEventListener('click', handleClick);
+        };
+    }, []);
+    const toggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const close = () => {
+        setIsOpen(false);
+    };
+    return (_jsx("div", Object.assign({ ref: wrapElem, className: "qa-actions-button d-ib", onClick: e => {
+            e.stopPropagation();
+        } }, { children: _jsx(Popover, Object.assign({ className: Styles.popover, width: "xs", open: isOpen, direction: "bl", trigger: _jsx(Card, Object.assign({ raised: true, sharp: true, padding: "none", active: isOpen, onClick: toggle, className: "qa-actions-button-menu-button" }, { children: _jsx(Card.Section, Object.assign({ className: "p-half-i" }, { children: _jsx(Icon, { name: "more_vert", size: "22px", className: isOpen ? 'c-blue-400' : '' }) })) })) }, { children: children })) })));
+};
+//# sourceMappingURL=actions-button.js.map

package/lib/components/campaign-actions/actions-button/actions-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-button.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/actions-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAErB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;gBACnB,OAAO;aACV;YAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;YAExE,IAAI,CAAC,eAAe,EAAE;gBAClB,KAAK,EAAE,CAAC;aACX;QACL,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,GAAG,EAAE;QAChB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE;QACf,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACH,4BACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,CAAC,CAAC,EAAE;YACT,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,gBAED,KAAC,OAAO,kBACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,KAAK,EAAC,IAAI,EACV,IAAI,EAAE,MAAM,EACZ,SAAS,EAAC,IAAI,EACd,OAAO,EACH,KAAC,IAAI,kBACD,MAAM,QACN,KAAK,QACL,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,+BAA+B,gBAEzC,KAAC,IAAI,CAAC,OAAO,kBAAC,SAAS,EAAC,UAAU,gBAC9B,KAAC,IAAI,IACD,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,GACvC,IACS,IACZ,gBAGV,QAAQ,IACH,IACR,CACT,CAAC;AACN,CAAC,CAAC"}

package/lib/components/campaign-actions/actions-button/actions-button.module.less

@@ -0,0 +1,10 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.popover {
+    padding: @spacing-0;
+
+    :global(.Popover__content) {
+        padding: @spacing-half @spacing-0;
+        overflow: visible;
+    }
+}

package/lib/components/campaign-actions/actions-button/campaign-actions.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface CampaignActionsProps {
+    onClickEdit?(): void;
+    onClickStop?(): void;
+    onClickClone?(): void;
+    onClickArchive?(): void;
+    onClickUnarchive?(): void;
+}
+export declare const CampaignActions: FC<CampaignActionsProps>;
+export {};
+//# sourceMappingURL=campaign-actions.d.ts.map

package/lib/components/campaign-actions/actions-button/campaign-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"campaign-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/campaign-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAS3B,UAAU,oBAAoB;IAC1B,WAAW,CAAC,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,IAAI,IAAI,CAAC;IACrB,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB,gBAAgB,CAAC,IAAI,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}

package/lib/components/campaign-actions/actions-button/campaign-actions.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { Confirm } from '@servicetitan/confirm';
+import { ActionButtonArchive } from '../action-button/action-button-archive';
+import { ActionButtonUnarchive } from '../action-button/action-button-unarchive';
+import { ActionsButton } from './actions-button';
+import { ActionButtonClone } from '../action-button/action-button-clone';
+import { ActionButtonEdit } from '../action-button/action-button-edit';
+export const CampaignActions = ({ onClickEdit, onClickStop, onClickClone, onClickArchive, onClickUnarchive, }) => {
+    const stopAction = (handleClick) => (_jsx(Button, Object.assign({ outline: true, onClick: handleClick, small: true, negative: true, className: "qa-campaign-actions-stop" }, { children: "Stop" })));
+    const archiveAction = (handleClick) => (_jsx(ActionButtonArchive, { onClick: handleClick }));
+    const unarchiveAction = (handleClick) => (_jsx(ActionButtonUnarchive, { onClick: handleClick }));
+    return (_jsxs(ButtonGroup, { children: [onClickStop && (_jsx(Confirm, Object.assign({ onConfirm: onClickStop, title: "Confirm stop", message: "Are you sure you want to stop this campaign?", negative: true }, { children: stopAction }))), _jsxs(ActionsButton, { children: [onClickClone && _jsx(ActionButtonClone, { onClick: onClickClone }), onClickArchive && (_jsx(Confirm, Object.assign({ onConfirm: onClickArchive, title: "Confirm archive", message: "Are you sure you want to archive this campaign?", negative: false }, { children: archiveAction }))), onClickUnarchive && (_jsx(Confirm, Object.assign({ onConfirm: onClickUnarchive, title: "Confirm unarchive", message: "Are you sure you want to unarchive this campaign?", negative: false }, { children: unarchiveAction }))), onClickEdit && _jsx(ActionButtonEdit, { onClick: onClickEdit })] })] }));
+};
+//# sourceMappingURL=campaign-actions.js.map

package/lib/components/campaign-actions/actions-button/campaign-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"campaign-actions.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/campaign-actions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAUvE,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACtD,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,gBAAgB,GACnB,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,CAAC,WAAuB,EAAE,EAAE,CAAC,CAC5C,KAAC,MAAM,kBAAC,OAAO,QAAC,OAAO,EAAE,WAAW,EAAE,KAAK,QAAC,QAAQ,QAAC,SAAS,EAAC,0BAA0B,0BAEhF,CACZ,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,WAAuB,EAAE,EAAE,CAAC,CAC/C,KAAC,mBAAmB,IAAC,OAAO,EAAE,WAAW,GAAI,CAChD,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,WAAuB,EAAE,EAAE,CAAC,CACjD,KAAC,qBAAqB,IAAC,OAAO,EAAE,WAAW,GAAI,CAClD,CAAC;IAEF,OAAO,CACH,MAAC,WAAW,eACP,WAAW,IAAI,CACZ,KAAC,OAAO,kBACJ,SAAS,EAAE,WAAW,EACtB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,8CAA8C,EACtD,QAAQ,sBAEP,UAAU,IACL,CACb,EACD,MAAC,aAAa,eACT,YAAY,IAAI,KAAC,iBAAiB,IAAC,OAAO,EAAE,YAAY,GAAI,EAC5D,cAAc,IAAI,CACf,KAAC,OAAO,kBACJ,SAAS,EAAE,cAAc,EACzB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAC,iDAAiD,EACzD,QAAQ,EAAE,KAAK,gBAEd,aAAa,IACR,CACb,EACA,gBAAgB,IAAI,CACjB,KAAC,OAAO,kBACJ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,mDAAmD,EAC3D,QAAQ,EAAE,KAAK,gBAEd,eAAe,IACV,CACb,EACA,WAAW,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,WAAW,GAAI,IAC9C,IACN,CACjB,CAAC;AACN,CAAC,CAAC"}

package/lib/components/campaign-actions/actions-button/campaign-actions.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function CampaignActions(): JSX.Element;
+declare const _default: {
+    title: string;
+    component: typeof CampaignActions;
+    parameters: {};
+};
+export default _default;
+//# sourceMappingURL=campaign-actions.stories.d.ts.map

package/lib/components/campaign-actions/actions-button/campaign-actions.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"campaign-actions.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/campaign-actions.stories.tsx"],"names":[],"mappings":";AAEA,wBAAgB,eAAe,gBAU9B;;;;;;AAED,wBAIE"}

package/lib/components/campaign-actions/actions-button/campaign-actions.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CampaignActions as Component } from './campaign-actions';
+export function CampaignActions() {
+    return (_jsx(Component, { onClickEdit: () => { }, onClickStop: () => { }, onClickClone: () => { }, onClickArchive: () => { }, onClickUnarchive: () => { } }));
+}
+export default {
+    title: 'MRK Components/CampaignActions',
+    component: CampaignActions,
+    parameters: {},
+};
+//# sourceMappingURL=campaign-actions.stories.js.map

package/lib/components/campaign-actions/actions-button/campaign-actions.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"campaign-actions.stories.js","sourceRoot":"","sources":["../../../../src/components/campaign-actions/actions-button/campaign-actions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAElE,MAAM,UAAU,eAAe;IAC3B,OAAO,CACH,KAAC,SAAS,IACN,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC,EACrB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC,EACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC,EACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC,EACxB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC,GAC5B,CACL,CAAC;AACN,CAAC;AAED,eAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC"}

package/lib/components/campaign-actions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './actions-button/campaign-actions';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/campaign-actions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/campaign-actions/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/components/campaign-actions/index.js

@@ -0,0 +1,2 @@
+export * from './actions-button/campaign-actions';
+//# sourceMappingURL=index.js.map

package/lib/components/campaign-actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/campaign-actions/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/settings';
+export * from './components/campaign-actions';
 export * from './utils/helpers';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,iBAAiB,CAAC"}

package/lib/index.js

@@ -1,3 +1,4 @@
 export * from './components/settings';
+export * from './components/campaign-actions';
 export * from './utils/helpers';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -30,5 +30,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "fe51b9242d24bebd47ad01b5e771add90201b200"
+    "gitHead": "2ac514219fc62a114bd05bd5bbc64c211963ceab"
 }

package/src/components/campaign-actions/action-button/action-button-archive.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ActionButton } from './action-button';
+
+export const ActionButtonArchive: FC<{
+    disabled?: boolean;
+    tooltip?: string;
+    onClick?(): void;
+}> = props => (
+    <ActionButton
+        {...props}
+        iconName="archive"
+        hover="primary"
+        tooltip={props.tooltip}
+        qaPrefix="qa-action-button-archive"
+    >
+        Archive
+    </ActionButton>
+);

package/src/components/campaign-actions/action-button/action-button-clone.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ActionButton } from './action-button';
+
+export const ActionButtonClone: FC<{ disabled?: boolean; onClick?(): void }> = props => (
+    <ActionButton
+        {...props}
+        iconName="control_point_duplicate"
+        hover="primary"
+        qaPrefix="qa-action-button-clone"
+    >
+        Clone
+    </ActionButton>
+);

package/src/components/campaign-actions/action-button/action-button-edit.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ActionButton } from './action-button';
+
+export const ActionButtonEdit: FC<{
+    disabled?: boolean;
+    tooltip?: string;
+    onClick?(): void;
+}> = props => (
+    <ActionButton
+        {...props}
+        iconName="edit"
+        hover="primary"
+        qaPrefix="qa-action-button-edit"
+        tooltip={props.tooltip}
+    >
+        Edit
+    </ActionButton>
+);

package/src/components/campaign-actions/action-button/action-button-unarchive.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ActionButton } from './action-button';
+
+export const ActionButtonUnarchive: FC<{ disabled?: boolean; onClick?(): void }> = props => (
+    <ActionButton
+        {...props}
+        iconName="unarchive"
+        hover="primary"
+        qaPrefix="qa-action-button-unarchive"
+    >
+        Unarchive
+    </ActionButton>
+);

package/src/components/campaign-actions/action-button/action-button.module.less

@@ -0,0 +1,17 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.action-button {
+    padding: @spacing-1 @spacing-2;
+    box-sizing: border-box;
+    border: none;
+    background-color: transparent;
+    width: 210px;
+    display: flex;
+    align-items: center;
+
+    &.primary:hover,
+    &.primary.focus-visible:focus {
+        background-color: @color-blue-100;
+        border-radius: @border-radius-1;
+    }
+}

package/src/components/campaign-actions/action-button/action-button.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const actionButton: string;
+export const primary: string;
+export const focusVisible: string;
+

package/src/components/campaign-actions/action-button/action-button.tsx

@@ -0,0 +1,78 @@
+import {
+    Icon,
+    BodyText,
+    IconNameType,
+    Tooltip,
+    useFocusVisible,
+} from '@servicetitan/design-system';
+import classnames from 'classnames';
+import { ReactNode, FC, useRef } from 'react';
+import * as Styles from './action-button.module.less';
+
+export interface ActionButtonProps {
+    children: ReactNode;
+    iconName?: IconNameType;
+    hover?: 'primary' | 'negative' | 'none';
+    disabled?: boolean;
+    tooltip?: string;
+    qaPrefix?: string;
+    active?: boolean;
+    onClick?(): void;
+}
+
+export const ActionButton: FC<ActionButtonProps> = ({
+    active,
+    children,
+    disabled,
+    iconName,
+    onClick,
+    qaPrefix,
+    tooltip,
+}) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { blurFunction, focusFunction, isFocusVisible } = useFocusVisible(buttonRef);
+
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+
+        if (onClick) {
+            onClick();
+        }
+    };
+
+    const getButton = () => {
+        const classes = classnames(Styles.actionButton, qaPrefix, {
+            [Styles.primary]: !disabled,
+            [Styles.focusVisible]: isFocusVisible,
+        });
+
+        return (
+            <button
+                type="button"
+                ref={buttonRef}
+                className={classes}
+                onClick={handleClick}
+                disabled={disabled}
+                onFocus={focusFunction}
+                onBlur={blurFunction}
+            >
+                {iconName && <Icon name={iconName} size="20px" className="m-r-1" />}
+                <BodyText className={`${qaPrefix}-text ${active ? 'c-blue-500' : 'c-neutral-100'}`}>
+                    {children}
+                </BodyText>
+            </button>
+        );
+    };
+
+    if (!tooltip) {
+        return getButton();
+    }
+
+    return (
+        <Tooltip text={tooltip} direction="l" el="div" className={`${qaPrefix}-tooltip`}>
+            {getButton()}
+        </Tooltip>
+    );
+};

package/src/components/campaign-actions/actions-button/actions-button.module.less

@@ -0,0 +1,10 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.popover {
+    padding: @spacing-0;
+
+    :global(.Popover__content) {
+        padding: @spacing-half @spacing-0;
+        overflow: visible;
+    }
+}

package/src/components/campaign-actions/actions-button/actions-button.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const popover: string;
+