feat: selected calendars list

Author: supalarry

packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx

@@ -37,6 +37,21 @@ export type SelectedCalendarsClassNames = {
     title?: string;
     description?: string;
   };
+  selectedCalendarsListClassNames?: {
+    container?: string;
+    selectedCalendar: {
+      container?: string;
+      header?: {
+        container: string;
+        title?: string;
+        description?: string;
+      };
+      body?: {
+        container?: string;
+        description?: string;
+      };
+    };
+  };
   noSelectedCalendarsMessage?: string;
 };
 
@@ -92,7 +107,9 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                   calendarRedirectUrls={calendarRedirectUrls}
                   isDryRun={isDryRun}
                 />
-                <List noBorderTreatment className="p-6 pt-2">
+                <List
+                  noBorderTreatment
+                  className={classNamesObject?.selectedCalendarsListClassNames?.container || "p-6 pt-2"}>
                   {data.connectedCalendars.map((connectedCalendar) => {
                     if (!!connectedCalendar.calendars && connectedCalendar.calendars.length > 0) {
                       return (
@@ -105,7 +122,18 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                           description={
                             connectedCalendar.primary?.email ?? connectedCalendar.integration.description
                           }
-                          className="border-subtle mt-4 rounded-lg border"
+                          classNameObject={{
+                            container: cn(
+                              "border-subtle mt-4 rounded-lg border",
+                              classNamesObject?.selectedCalendarsListClassNames?.selectedCalendar?.container
+                            ),
+                            title:
+                              classNamesObject?.selectedCalendarsListClassNames?.selectedCalendar?.header
+                                ?.title,
+                            description:
+                              classNamesObject?.selectedCalendarsListClassNames?.selectedCalendar?.header
+                                ?.description,
+                          }}
                           actions={
                             <div className="flex w-32 justify-end">
                               {allowDelete && !connectedCalendar.delegationCredentialId && (
@@ -119,8 +147,20 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                               )}
                             </div>
                           }>
-                          <div className="border-subtle border-t">
-                            <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
+                          <div
+                            className={cn(
+                              "border-subtle border-t",
+                              classNamesObject?.selectedCalendarsListClassNames?.selectedCalendar?.body
+                                ?.container
+                            )}>
+                            <p
+                              className={cn(
+                                "text-subtle px-5 pt-4 text-sm",
+                                classNamesObject?.selectedCalendarsListClassNames?.selectedCalendar?.body
+                                  ?.description
+                              )}>
+                              {t("toggle_calendars_conflict")}
+                            </p>
                             <ul className="space-y-4 px-5 py-4">
                               {connectedCalendar.calendars?.map((cal) => {
                                 return (

packages/ui/components/app-list-card/AppListCard.tsx

@@ -22,6 +22,12 @@ type ShouldHighlight =
       slug?: never;
     };
 
+export type AppCardClassNames = {
+  container: string;
+  title?: string;
+  description?: string;
+};
+
 export type AppListCardProps = {
   logo?: string;
   title: string;
@@ -33,6 +39,7 @@ export type AppListCardProps = {
   children?: ReactNode;
   credentialOwner?: CredentialOwner;
   className?: string;
+  classNameObject?: AppCardClassNames;
 } & ShouldHighlight;
 
 export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) => {
@@ -48,11 +55,16 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
     children,
     credentialOwner,
     className,
+    classNameObject,
     highlight,
   } = props;
 
   return (
-    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100", className)}>
+    <div
+      className={classNames(
+        highlight && "dark:bg-muted bg-yellow-100",
+        className || classNameObject?.container
+      )}>
       <div className="flex items-start gap-x-3 px-4 py-4 sm:px-6">
         {logo ? (
           <img
@@ -63,13 +75,18 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
         ) : null}
         <div className="flex min-w-0 grow flex-col gap-y-1">
           <div className="flex items-center gap-x-2">
-            <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
+            <h3
+              className={classNames("text-emphasis truncate text-sm font-semibold", classNameObject?.title)}>
+              {title}
+            </h3>
             <div className="flex flex-shrink-0 items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
               {isTemplate && <Badge variant="red">Template</Badge>}
             </div>
           </div>
-          <ListItemText component="p" className="whitespace-normal break-words">
+          <ListItemText
+            component="p"
+            className={classNames("whitespace-normal break-words", classNameObject?.description)}>
             {description}
           </ListItemText>
           {invalidCredential && (