apply entitydisplay to all the possible field & apply atomformat to c…

…ontact card
cardstack · Dec 9, 2024 · 0d5b92f · 0d5b92f
1 parent 32f285a
commit 0d5b92f
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 242 deletions.
diff --git a/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json b/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json
@@ -4,23 +4,36 @@
     "attributes": {
       "firstName": "David Paul",
       "lastName": "Jackson",
+      "position": null,
       "department": "IT",
       "primaryEmail": "[email protected]",
-      "secondaryEmail": "david@gmail.com",
+      "secondaryEmail": "david23232@gmail.com",
       "phoneMobile": {
+        "type": "office",
         "country": 1,
         "area": 415,
-        "phoneNumber": 1112222
+        "number": 123456
       },
       "phoneOffice": {
+        "type": null,
         "country": null,
         "area": null,
-        "phoneNumber": null
+        "number": null
       },
       "status": {
         "index": 1,
         "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "davidlinkedin.com"
+        },
+        {
+          "label": "X",
+          "value": "x.com"
+        }
+      ],
       "description": null,
       "thumbnailURL": "https://images.pexels.com/photos/4571943/pexels-photo-4571943.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=1"
     },

diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
@@ -45,7 +45,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       }
       .avatar-thumbnail {
         flex-shrink: 0;
-        --profile-avatar-icon-size: var(--boxel-avatar-group-icon-size, 60px);
+        --profile-avatar-icon-size: 60px;
       }
       .avatar-info {
         min-width: 0;

diff --git a/packages/experiments-realm/components/entity-display.gts b/packages/experiments-realm/components/entity-display.gts
@@ -1,7 +1,8 @@
 import GlimmerComponent from '@glimmer/component';
 interface EntityDisplayArgs {
   Args: {
-    name: string;
+    name?: string | null;
+    underline?: boolean;
   };
   Blocks: {
     thumbnail: [];
@@ -14,18 +15,27 @@ export class EntityDisplay extends GlimmerComponent<EntityDisplayArgs> {
   <template>
     <div class='row'>
       {{yield to='thumbnail'}}
-      <span class='name'>
-        {{@name}}
-      </span>
-      {{yield to='tag'}}
+
+      <div class='name-tag'>
+        <span class='name {{if @underline "underline"}}'>
+          {{@name}}
+        </span>
+        {{yield to='tag'}}
+      </div>
     </div>
     <style scoped>
       .row {
         display: inline-flex;
         align-items: center;
         gap: var(--boxel-sp-xs);
       }
-      .name {
+      .name-tag {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .name.underline {
         text-decoration: underline;
       }
     </style>

diff --git a/packages/experiments-realm/components/status-pill.gts b/packages/experiments-realm/components/status-pill.gts
@@ -26,14 +26,15 @@ export class StatusPill extends GlimmerComponent<StatusPillSignature> {
     <Pill
       class='status-pill'
       data-test-selected-type={{@label}}
-      {{! template-lint-disable no-inline-styles }}
       style={{htmlSafe (concat 'background-color: ' @iconLightColor ';')}}
     >
       <:iconLeft>
-        <this.icon
+        <div
           class='status-icon'
           style={{htmlSafe (concat 'background-color: ' @iconDarkColor ';')}}
-        />
+        >
+          <this.icon />
+        </div>
       </:iconLeft>
       <:default>
         <span class='status-label-text'>
@@ -44,6 +45,15 @@ export class StatusPill extends GlimmerComponent<StatusPillSignature> {
     <style scoped>
       .status-icon {
         border-radius: 0;
+        width: 25px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .status-icon > svg {
+        width: 16px;
+        height: 16px;
       }
       .status-pill {
         padding: 0;