@servicetitan/mpa-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@2.0.0...@servicetitan/mpa-components@2.1.0) (2025-04-17)
+
+**Note:** Version bump only for package @servicetitan/mpa-components
+
+
+
+
+
 # [2.0.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.11.0...@servicetitan/mpa-components@2.0.0) (2025-04-10)
 
 **Note:** Version bump only for package @servicetitan/mpa-components

package/lib/components/brands/brand-card/actions-button-section.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { BrandAction } from '../../../utils/interfaces';
 export declare const ActionsButtonSection: FC<{
     actions: BrandAction | BrandAction[];

package/lib/components/brands/brand-card/actions-button-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-button-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAMrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;CACxC,CAmDA,CAAC"}
+{"version":3,"file":"actions-button-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;CACxC,CA+BA,CAAC"}

package/lib/components/brands/brand-card/actions-button-section.js

@@ -1,18 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useHistory } from 'react-router-dom';
-import { ActionMenu, BodyText, Button, Icon } from '@servicetitan/design-system';
+import { Menu } from '@servicetitan/anvil2';
 import { SingleActionButtonSection } from './single-action-button';
 export const ActionsButtonSection = ({ actions }) => {
-    const [isOpen, setOpen] = useState(false);
     const history = useHistory();
     if (!Array.isArray(actions)) {
         return _jsx(SingleActionButtonSection, { action: actions });
     }
-    const trigger = (_jsxs(Button, { outline: true, size: "small", onClick: () => setOpen(true), className: "qa-brand-card-actions-trigger", children: ["Actions ", _jsx(Icon, { name: "keyboard_arrow_down", size: 16 })] }));
-    return (_jsx(ActionMenu, { trigger: trigger, open: isOpen, onClickOutside: () => setOpen(false), direction: "bl", className: "qa-brand-card-action-menu", children: actions.map(action => {
+    return (_jsx(Menu, { label: "Actions", className: "qa-brand-card-action-menu", size: "small", children: actions.map(action => {
             const actionClick = () => {
-                setOpen(false);
                 if (action.action) {
                     action.action();
                 }
@@ -20,7 +16,7 @@ export const ActionsButtonSection = ({ actions }) => {
                     history.push(action.href);
                 }
             };
-            return (_jsx(ActionMenu.Item, { disabled: action.disabled, onClick: actionClick, className: "qa-brand-card-action-menu-item", children: _jsx(BodyText, { subdued: action.disabled, children: action.name }) }, action.name));
+            return (_jsx(Menu.Item, { disabled: action.disabled, onClick: actionClick, className: "qa-brand-card-action-menu-item", label: action.name }, action.name));
         }) }));
 };
 //# sourceMappingURL=actions-button-section.js.map

package/lib/components/brands/brand-card/actions-button-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions-button-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAC,yBAAyB,IAAC,MAAM,EAAE,OAAO,GAAI,CAAC;IAC1D,CAAC;IAED,MAAM,OAAO,GAAG,CACZ,MAAC,MAAM,IACH,OAAO,QACP,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,SAAS,EAAC,+BAA+B,yBAEjC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAE,EAAE,GAAI,IAChD,CACZ,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EACpC,SAAS,EAAC,IAAI,EACd,SAAS,EAAC,2BAA2B,YAEpC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAClB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;oBAChB,MAAM,CAAC,MAAM,EAAE,CAAC;gBACpB,CAAC;gBACD,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;oBACd,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC,CAAC;YAEF,OAAO,CACH,KAAC,UAAU,CAAC,IAAI,IACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAEzB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,gCAAgC,YAE1C,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,YAAG,MAAM,CAAC,IAAI,GAAY,IAJvD,MAAM,CAAC,IAAI,CAKF,CACrB,CAAC;QACN,CAAC,CAAC,GACO,CAChB,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"actions-button-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAC,yBAAyB,IAAC,MAAM,EAAE,OAAO,GAAI,CAAC;IAC1D,CAAC;IAED,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAC,OAAO,YACnE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAClB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;oBAChB,MAAM,CAAC,MAAM,EAAE,CAAC;gBACpB,CAAC;gBACD,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;oBACd,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC,CAAC;YAEF,OAAO,CACH,KAAC,IAAI,CAAC,IAAI,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAEzB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,MAAM,CAAC,IAAI,IAHb,MAAM,CAAC,IAAI,CAIlB,CACL,CAAC;QACN,CAAC,CAAC,GACC,CACV,CAAC;AACN,CAAC,CAAC"}

package/lib/components/brands/brand-card/brand-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brand-card.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAS3D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAuCxC,CAAC"}
+{"version":3,"file":"brand-card.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAQ3D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA+CxC,CAAC"}

package/lib/components/brands/brand-card/brand-card.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Flex, Card } from '@servicetitan/anvil2';
-import { NameAndMailSection } from './name-and-mail-section';
+import { Flex, Card, Avatar } from '@servicetitan/anvil2';
 import { ActionsButtonSection } from './actions-button-section';
-import { CardTags } from './cart-tags';
-import { BrandLogo } from './brand-logo';
+import { InfoSection } from './info-section';
 import * as Styles from '../styles.module.less';
 const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
 export const BrandCard = ({ actions, email, isDefault, isShared, logo, name, hasError, }) => {
     const nameToShow = name || BRAND_NAME_PLACEHOLDER;
     return (_jsx(Card, { className: classNames({
             [Styles.cardWithError]: hasError,
-        }, Styles.brandCard, 'qa-brand-card'), padding: "large", children: _jsxs(Flex, { className: Styles.cardContent, justifyContent: "space-between", direction: "column", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", className: "qa-brand-card-left-section", children: [_jsx(BrandLogo, { logo: logo, alt: nameToShow }), _jsx(ActionsButtonSection, { actions: actions })] }), _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(NameAndMailSection, { name: name, nameToShow: nameToShow, email: email }), _jsx(CardTags, { isDefault: isDefault, isShared: isShared })] })] }) }));
+        }, Styles.brandCard, 'qa-brand-card'), padding: "large", children: _jsxs(Flex, { className: Styles.cardContent, justifyContent: "space-between", direction: "column", gap: "6", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", className: "qa-brand-card-left-section", children: [_jsx(Avatar, { image: logo, name: nameToShow, size: "large" }), _jsx(ActionsButtonSection, { actions: actions })] }), _jsx(InfoSection, { name: name, nameToShow: nameToShow, email: email, isDefault: isDefault, isShared: isShared })] }) }));
 };
 //# sourceMappingURL=brand-card.js.map

package/lib/components/brands/brand-card/brand-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand-card.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,IAAI,IAAI,sBAAsB,CAAC;IAElD,OAAO,CACH,KAAC,IAAI,IACD,SAAS,EAAE,UAAU,CACjB;YACI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ;SACnC,EACD,MAAM,CAAC,SAAS,EAChB,eAAe,CAClB,EACD,OAAO,EAAC,OAAO,YAEf,MAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,QAAQ,aAClF,MAAC,IAAI,IACD,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,YAAY,EACvB,SAAS,EAAC,4BAA4B,aAEtC,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,GAAI,EAC1C,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,GAAI,IACvC,EAEP,MAAC,IAAI,IAAC,cAAc,EAAC,eAAe,aAChC,KAAC,kBAAkB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,EACxE,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACnD,IACJ,GACJ,CACV,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"brand-card.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,IAAI,IAAI,sBAAsB,CAAC;IAElD,OAAO,CACH,KAAC,IAAI,IACD,SAAS,EAAE,UAAU,CACjB;YACI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ;SACnC,EACD,MAAM,CAAC,SAAS,EAChB,eAAe,CAClB,EACD,OAAO,EAAC,OAAO,YAEf,MAAC,IAAI,IACD,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,aAEP,MAAC,IAAI,IACD,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,YAAY,EACvB,SAAS,EAAC,4BAA4B,aAEtC,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,GAAG,EACtD,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,GAAI,IACvC,EAEP,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GACpB,IACC,GACJ,CACV,CAAC;AACN,CAAC,CAAC"}

package/lib/components/brands/brand-card/info-section.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+interface InfoSectionProps {
+    nameToShow: string;
+    name?: string;
+    email?: string;
+    isDefault?: boolean;
+    isShared?: boolean;
+}
+export declare const InfoSection: FC<InfoSectionProps>;
+export {};
+//# sourceMappingURL=info-section.d.ts.map

package/lib/components/brands/brand-card/info-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/info-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,UAAU,gBAAgB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmB5C,CAAC"}

package/lib/components/brands/brand-card/info-section.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Flex, Text } from '@servicetitan/anvil2';
+export const InfoSection = ({ nameToShow, email, isDefault, isShared }) => (_jsx(Flex, { direction: "column", gap: "4", children: _jsxs(Flex, { direction: "column", gap: "1", children: [_jsxs(Flex, { gap: "2", alignItems: "center", children: [_jsx(Text, { className: "t-truncate-i m-0", title: nameToShow, variant: "headline", el: "h3", children: nameToShow }), _jsxs(Flex, { gap: "1", children: [isDefault && _jsx(Chip, { label: "Default" }), isShared && _jsx(Chip, { color: "#b5deff", label: "Corporate HQ" })] })] }), email && (_jsx(Text, { subdued: true, title: email, className: "t-truncate-i", children: email }))] }) }));
+//# sourceMappingURL=info-section.js.map

package/lib/components/brands/brand-card/info-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/info-section.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAUxD,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7F,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,YAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aAC5B,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,YAC3E,UAAU,GACR,EACP,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,aACR,SAAS,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,GAAG,EACrC,QAAQ,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,GAAG,IACvD,IACJ,EACN,KAAK,IAAI,CACN,KAAC,IAAI,IAAC,OAAO,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,cAAc,YAC/C,KAAK,GACH,CACV,IACE,GACJ,CACV,CAAC"}

package/lib/components/brands/styles.module.less

@@ -5,10 +5,6 @@
 @card-max-width: 700px;
 @max-number-of-cards: 3;
 
-.delete-tooltip {
-    min-width: 327px;
-}
-
 .grid {
     grid-template-columns: repeat(auto-fill, minmax(@card-min-width, 1fr));
     max-width: calc(@card-max-width * @max-number-of-cards + @spacing-3 * 2);
@@ -27,7 +23,6 @@
 }
 
 .brand-card {
-    height: 200px;
     min-width: @card-min-width;
     max-width: @card-max-width;
 }
@@ -36,24 +31,6 @@
     width: 100%;
 }
 
-.card-left-section-texts {
-    min-width: 0;
-}
-
-.brand-img {
-    width: @spacing-6;
-    height: @spacing-6;
-    min-width: @spacing-6;
-    min-height: @spacing-6;
-    border-radius: @border-radius-circular;
-    border: solid 1px @color-neutral-60;
-}
-
-.brand-img-placeholder {
-    .brand-img();
-    background-color: @color-neutral-60;
-}
-
 .card-with-error {
     border-color: @color-red-500;
 }

package/package.json

@@ -3,7 +3,7 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -34,5 +34,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "45fb622e2875d33d9db1a15935ec8cb327bb5326"
+    "gitHead": "fc10244696665b2bc7e58fc2404e314da0013ad2"
 }

package/src/components/brands/brand-card/actions-button-section.tsx

@@ -1,7 +1,7 @@
-import { FC, useState } from 'react';
+import type { FC } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionMenu, BodyText, Button, Icon } from '@servicetitan/design-system';
+import { Menu } from '@servicetitan/anvil2';
 
 import { SingleActionButtonSection } from './single-action-button';
 import { BrandAction } from '../../../utils/interfaces';
@@ -9,35 +9,16 @@ import { BrandAction } from '../../../utils/interfaces';
 export const ActionsButtonSection: FC<{
     actions: BrandAction | BrandAction[];
 }> = ({ actions }) => {
-    const [isOpen, setOpen] = useState(false);
     const history = useHistory();
 
     if (!Array.isArray(actions)) {
         return <SingleActionButtonSection action={actions} />;
     }
 
-    const trigger = (
-        <Button
-            outline
-            size="small"
-            onClick={() => setOpen(true)}
-            className="qa-brand-card-actions-trigger"
-        >
-            Actions <Icon name="keyboard_arrow_down" size={16} />
-        </Button>
-    );
-
     return (
-        <ActionMenu
-            trigger={trigger}
-            open={isOpen}
-            onClickOutside={() => setOpen(false)}
-            direction="bl"
-            className="qa-brand-card-action-menu"
-        >
+        <Menu label="Actions" className="qa-brand-card-action-menu" size="small">
             {actions.map(action => {
                 const actionClick = () => {
-                    setOpen(false);
                     if (action.action) {
                         action.action();
                     }
@@ -47,16 +28,15 @@ export const ActionsButtonSection: FC<{
                 };
 
                 return (
-                    <ActionMenu.Item
+                    <Menu.Item
                         disabled={action.disabled}
                         key={action.name}
                         onClick={actionClick}
                         className="qa-brand-card-action-menu-item"
-                    >
-                        <BodyText subdued={action.disabled}>{action.name}</BodyText>
-                    </ActionMenu.Item>
+                        label={action.name}
+                    />
                 );
             })}
-        </ActionMenu>
+        </Menu>
     );
 };

package/src/components/brands/brand-card/brand-card.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
 import classNames from 'classnames';
 
-import { Flex, Card } from '@servicetitan/anvil2';
+import { Flex, Card, Avatar } from '@servicetitan/anvil2';
 
-import { NameAndMailSection } from './name-and-mail-section';
 import { BrandCardProps } from '../../../utils/interfaces';
 import { ActionsButtonSection } from './actions-button-section';
-import { CardTags } from './cart-tags';
-import { BrandLogo } from './brand-logo';
+import { InfoSection } from './info-section';
 
 import * as Styles from '../styles.module.less';
 
@@ -35,20 +33,28 @@ export const BrandCard: FC<BrandCardProps> = ({
             )}
             padding="large"
         >
-            <Flex className={Styles.cardContent} justifyContent="space-between" direction="column">
+            <Flex
+                className={Styles.cardContent}
+                justifyContent="space-between"
+                direction="column"
+                gap="6"
+            >
                 <Flex
                     justifyContent="space-between"
                     alignItems="flex-start"
                     className="qa-brand-card-left-section"
                 >
-                    <BrandLogo logo={logo} alt={nameToShow} />
+                    <Avatar image={logo} name={nameToShow} size="large" />
                     <ActionsButtonSection actions={actions} />
                 </Flex>
 
-                <Flex justifyContent="space-between">
-                    <NameAndMailSection name={name} nameToShow={nameToShow} email={email} />
-                    <CardTags isDefault={isDefault} isShared={isShared} />
-                </Flex>
+                <InfoSection
+                    name={name}
+                    nameToShow={nameToShow}
+                    email={email}
+                    isDefault={isDefault}
+                    isShared={isShared}
+                />
             </Flex>
         </Card>
     );

package/src/components/brands/brand-card/info-section.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import { Chip, Flex, Text } from '@servicetitan/anvil2';
+
+interface InfoSectionProps {
+    nameToShow: string;
+    name?: string;
+    email?: string;
+    isDefault?: boolean;
+    isShared?: boolean;
+}
+
+export const InfoSection: FC<InfoSectionProps> = ({ nameToShow, email, isDefault, isShared }) => (
+    <Flex direction="column" gap="4">
+        <Flex direction="column" gap="1">
+            <Flex gap="2" alignItems="center">
+                <Text className="t-truncate-i m-0" title={nameToShow} variant="headline" el="h3">
+                    {nameToShow}
+                </Text>
+                <Flex gap="1">
+                    {isDefault && <Chip label="Default" />}
+                    {isShared && <Chip color="#b5deff" label="Corporate HQ" />}
+                </Flex>
+            </Flex>
+            {email && (
+                <Text subdued title={email} className="t-truncate-i">
+                    {email}
+                </Text>
+            )}
+        </Flex>
+    </Flex>
+);

package/src/components/brands/styles.module.less

@@ -5,10 +5,6 @@
 @card-max-width: 700px;
 @max-number-of-cards: 3;
 
-.delete-tooltip {
-    min-width: 327px;
-}
-
 .grid {
     grid-template-columns: repeat(auto-fill, minmax(@card-min-width, 1fr));
     max-width: calc(@card-max-width * @max-number-of-cards + @spacing-3 * 2);
@@ -27,7 +23,6 @@
 }
 
 .brand-card {
-    height: 200px;
     min-width: @card-min-width;
     max-width: @card-max-width;
 }
@@ -36,24 +31,6 @@
     width: 100%;
 }
 
-.card-left-section-texts {
-    min-width: 0;
-}
-
-.brand-img {
-    width: @spacing-6;
-    height: @spacing-6;
-    min-width: @spacing-6;
-    min-height: @spacing-6;
-    border-radius: @border-radius-circular;
-    border: solid 1px @color-neutral-60;
-}
-
-.brand-img-placeholder {
-    .brand-img();
-    background-color: @color-neutral-60;
-}
-
 .card-with-error {
     border-color: @color-red-500;
 }

package/src/components/brands/styles.module.less.d.ts

@@ -1,10 +1,6 @@
 export const __esModule: true;
 export const brandCard: string;
-export const brandImg: string;
-export const brandImgPlaceholder: string;
 export const cardContent: string;
-export const cardLeftSectionTexts: string;
 export const cardWithError: string;
-export const deleteTooltip: string;
 export const grid: string;