@servicetitan/mpa-components 1.10.0 → 1.11.0

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

@@ -0,0 +1,73 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+@action-menu-item-padding: 12px;
+@card-min-width: 330px;
+@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);
+}
+
+@media (min-width: 1120px) {
+    .grid {
+        grid-template-columns: repeat(@max-number-of-cards - 1, 1fr);
+    }
+}
+
+@media (min-width: 1620px) {
+    .grid {
+        grid-template-columns: repeat(@max-number-of-cards, 1fr);
+    }
+}
+
+.brand-card {
+    height: 200px;
+    min-width: @card-min-width;
+    max-width: @card-max-width;
+    box-sizing: border-box;
+    background: inherit !important;
+
+    :global(.CardSection) {
+        height: 150px;
+        background-color: @color-white;
+    }
+}
+
+.card-content {
+    height: 139px;
+}
+
+.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;
+}
+
+.tags {
+    height: 41px;
+    margin-bottom: 2px;
+    margin-top: auto;
+}
+
+.default-tag {
+    width: 53px;
+}
+
+.corporate-tag {
+    min-width: 86px;
+    margin-bottom: @spacing-half;
+}

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

@@ -0,0 +1,11 @@
+export const __esModule: true;
+export const brandCard: string;
+export const brandImg: string;
+export const brandImgPlaceholder: string;
+export const cardContent: string;
+export const corporateTag: string;
+export const defaultTag: string;
+export const deleteTooltip: string;
+export const grid: string;
+export const tags: string;
+

package/src/enums/brands.ts

@@ -0,0 +1,23 @@
+import { DomainValidationStatus } from '@servicetitan/marketing-services-api/dist/settings/brand.mrk.api';
+
+export interface BrandAction {
+    name: string;
+    disabled?: boolean;
+
+    tooltipMessage?: string;
+    inProgress?: boolean;
+    isConfigured?: boolean;
+    href?: string;
+    action?: () => void;
+}
+
+export interface BrandCardProps {
+    id: string;
+    actions: BrandAction | BrandAction[];
+    logo?: string;
+    name?: string;
+    isDefault: boolean;
+    email?: string;
+    domainValidationStatus?: DomainValidationStatus;
+    isShared: boolean;
+}

package/src/index.ts

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