@servicetitan/mpa-components 1.0.0 → 1.1.1

package/lib/components/settings/settings-section/settings-section.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-section.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,OAAO,CACH,KAAC,SAAS,kBAAC,KAAK,EAAC,eAAe,gBAC5B,KAAC,QAAQ,mCAAoB,YACrB,CACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"settings-section.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,OAAO,CACH,KAAC,SAAS,kBAAC,KAAK,EAAC,eAAe,gBAC5B,KAAC,QAAQ,2BAAoB,IACrB,CACf,CAAC;AACN,CAAC,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

@@ -1,6 +1,9 @@
 {
     "name": "@servicetitan/mpa-components",
-    "version": "1.0.0",
+    "repository": {
+        "url": "https://github.com/servicetitan/marketing"
+    },
+    "version": "1.1.1",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -27,5 +30,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "2a0735437f422320f08367221482e8df6f4c3e77"
+    "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;
+

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

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

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

@@ -0,0 +1,19 @@
+import { CampaignActions as Component } from './campaign-actions';
+
+export function CampaignActions() {
+    return (
+        <Component
+            onClickEdit={() => {}}
+            onClickStop={() => {}}
+            onClickClone={() => {}}
+            onClickArchive={() => {}}
+            onClickUnarchive={() => {}}
+        />
+    );
+}
+
+export default {
+    title: 'MRK Components/CampaignActions',
+    component: CampaignActions,
+    parameters: {},
+};

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

@@ -0,0 +1,77 @@
+import { FC } from 'react';
+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';
+
+interface CampaignActionsProps {
+    onClickEdit?(): void;
+    onClickStop?(): void;
+    onClickClone?(): void;
+    onClickArchive?(): void;
+    onClickUnarchive?(): void;
+}
+
+export const CampaignActions: FC<CampaignActionsProps> = ({
+    onClickEdit,
+    onClickStop,
+    onClickClone,
+    onClickArchive,
+    onClickUnarchive,
+}) => {
+    const stopAction = (handleClick: () => void) => (
+        <Button outline onClick={handleClick} small negative className="qa-campaign-actions-stop">
+            Stop
+        </Button>
+    );
+
+    const archiveAction = (handleClick: () => void) => (
+        <ActionButtonArchive onClick={handleClick} />
+    );
+
+    const unarchiveAction = (handleClick: () => void) => (
+        <ActionButtonUnarchive onClick={handleClick} />
+    );
+
+    return (
+        <ButtonGroup>
+            {onClickStop && (
+                <Confirm
+                    onConfirm={onClickStop}
+                    title="Confirm stop"
+                    message="Are you sure you want to stop this campaign?"
+                    negative
+                >
+                    {stopAction}
+                </Confirm>
+            )}
+            <ActionsButton>
+                {onClickClone && <ActionButtonClone onClick={onClickClone} />}
+                {onClickArchive && (
+                    <Confirm
+                        onConfirm={onClickArchive}
+                        title="Confirm archive"
+                        message="Are you sure you want to archive this campaign?"
+                        negative={false}
+                    >
+                        {archiveAction}
+                    </Confirm>
+                )}
+                {onClickUnarchive && (
+                    <Confirm
+                        onConfirm={onClickUnarchive}
+                        title="Confirm unarchive"
+                        message="Are you sure you want to unarchive this campaign?"
+                        negative={false}
+                    >
+                        {unarchiveAction}
+                    </Confirm>
+                )}
+                {onClickEdit && <ActionButtonEdit onClick={onClickEdit} />}
+            </ActionsButton>
+        </ButtonGroup>
+    );
+};

package/src/components/campaign-actions/index.ts

@@ -0,0 +1 @@
+export * from './actions-button/campaign-actions';

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/settings';
+export * from './components/campaign-actions';
 
 export * from './utils/helpers';