Enhance component readability (#2008)

* Enhance component readability * remove activity mock card
cardstack · Jan 7, 2025 · 2f93df0 · 2f93df0
1 parent 3f6d2b8
commit 2f93df0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 153 deletions.
diff --git a/packages/experiments-realm/components/activity-card.gts b/packages/experiments-realm/components/activity-card.gts
@@ -1,12 +1,8 @@
 import GlimmerComponent from '@glimmer/component';
-import EntityDisplayWithThumbnail from './entity-thumbnail-display';
 
 interface ActivityCardArgs {
   Blocks: {
-    title?: [];
-    thumbnail?: [];
-    description?: [];
-    icon?: [];
+    header?: [];
     content?: [];
   };
   Element: HTMLElement;
@@ -15,34 +11,9 @@ interface ActivityCardArgs {
 export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
   <template>
     <article class='activity-card' ...attributes>
-      <header class='activity-card-header'>
-        <div class='activity-card-title-desc-group'>
-          <EntityDisplayWithThumbnail>
-            <:title>
-              <span class='activity-card-title'>
-                {{yield to='title'}}
-              </span>
-            </:title>
-            <:thumbnail>
-              <span class='activity-card-thumbnail'>
-                {{yield to='thumbnail'}}
-              </span>
-            </:thumbnail>
-          </EntityDisplayWithThumbnail>
-
-          {{#if (has-block 'description')}}
-            <p class='activity-card-description'>
-              {{yield to='description'}}
-            </p>
-          {{/if}}
-        </div>
-
-        <div class='activity-card-icon'>
-          {{#if (has-block 'icon')}}
-            {{yield to='icon'}}
-          {{/if}}
-        </div>
-      </header>
+      {{#if (has-block 'header')}}
+        {{yield to='header'}}
+      {{/if}}
 
       <hr class='activity-card-divider' />
 
@@ -56,62 +27,15 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
     <style scoped>
       .activity-card {
         background: var(--activity-card-bg, var(--boxel-light));
-        border: 1px solid var(--activity-card-border, var(--boxel-300));
-        border-radius: var(
-          --activity-card-border-radius,
-          var(--boxel-border-radius-xl)
-        );
         padding: var(--activity-card-padding, var(--boxel-sp-sm));
+        border: 1px solid var(--activity-card-border-color, transparent);
+        border-radius: var(--activity-card-border-radius, 0px);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: var(--activity-card-gap, 0);
         overflow: hidden;
         min-width: 0;
-        container-type: inline-size;
-      }
-      .activity-card-header {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--activity-card-header-gap, var(--boxel-sp-sm));
-      }
-      .activity-card-title-desc-group {
-        display: flex;
-        align-items: center;
-        gap: var(--activity-card-title-desc-group-gap, var(--boxel-sp-sm));
-      }
-      /* extend from entity-display */
-      .activity-card-thumbnail {
-        flex-shrink: 0;
-        width: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
-        height: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--entity-display-thumbnail-color, var(--boxel-600));
-      }
-      .activity-card-title {
-        font-size: var(
-          --activity-card-title-font-size,
-          var(--boxel-font-size-sm)
-        );
-        font-weight: var(--activity-card-title-font-weight, 600);
-        margin: 0;
-      }
-      .activity-card-description {
-        margin: 0;
-        font-size: var(
-          --activity-card-description-font-size,
-          var(--boxel-font-size-sm)
-        );
-        color: var(--activity-card-description-color, var(--boxel-400));
-      }
-      .activity-card-icon {
-        flex-shrink: 0;
-        width: var(--activity-card-icon-size, auto);
-        height: var(--activity-card-icon-size, auto);
       }
       .activity-card-divider {
         border-top: 1px solid
@@ -121,21 +45,6 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
       .activity-card-content {
         padding: var(--activity-card-content-padding, var(--boxel-sp-sm));
       }
-
-      @container (max-width: 447px) {
-        .activity-card-header {
-          align-items: flex-start;
-        }
-
-        .activity-card-title-desc-group {
-          flex-direction: column;
-          align-items: flex-start;
-          gap: var(--boxel-sp-xxxs);
-        }
-        .activity-card-content {
-          padding: var(--activity-card-content-padding, 0);
-        }
-      }
     </style>
   </template>
 }
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
@@ -25,13 +25,8 @@ import ContactIcon from '@cardstack/boxel-icons/contact';
 import CalendarExclamation from '@cardstack/boxel-icons/calendar-exclamation';
 import { LooseGooseyField } from '../loosey-goosey';
 import { StatusPill } from '../components/status-pill';
-import { Avatar, Pill, BoxelButton } from '@cardstack/boxel-ui/components';
-import EntityDisplayWithIcon from '../components/entity-icon-display';
-import EntityDisplayWithThumbnail from '../components/entity-thumbnail-display';
-import ActivityCard from '../components/activity-card';
+import { BoxelButton } from '@cardstack/boxel-ui/components';
 import PlusIcon from '@cardstack/boxel-icons/plus';
-import PhoneIcon from '@cardstack/boxel-icons/phone';
-import SquareUser from '@cardstack/boxel-icons/square-user';
 import CalendarTime from '@cardstack/boxel-icons/calendar-time';
 import ClockExclamation from '@cardstack/boxel-icons/clock-exclamation';
 import Clock24 from '@cardstack/boxel-icons/clock-24';
@@ -274,56 +269,7 @@ class IsolatedTemplate extends Component<typeof Account> {
             </BoxelButton>
           </:icon>
           <:content>
-            <ActivityCard>
-              <:thumbnail>
-                <PhoneIcon />
-              </:thumbnail>
-              <:title>
-                Customer Call
-              </:title>
-              <:icon>
-                <Pill class='activity-pill'>
-                  Left VoiceMail
-                </Pill>
-              </:icon>
-              <:description>
-                Discuss Q3 product roadmap
-              </:description>
-              <:content>
-                <div class='activity-card-group'>
-                  <EntityDisplayWithIcon @title='Technova'>
-                    <:icon>
-                      <SquareUser />
-                    </:icon>
-                    <:content>
-                      Technova
-                    </:content>
-                  </EntityDisplayWithIcon>
-                  <EntityDisplayWithThumbnail @title='Rep: Janus Dios'>
-                    <:thumbnail>
-                      <Avatar
-                        @thumbnailURL='https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2'
-                        class='avatar'
-                      />
-                    </:thumbnail>
-                    <:content>
-                      Sales Associate
-                    </:content>
-                  </EntityDisplayWithThumbnail>
-                  <EntityDisplayWithIcon
-                    class='activity-time'
-                    @title='May 15, 2024'
-                  >
-                    <:icon>
-                      <CalendarTime />
-                    </:icon>
-                    <:content>
-                      3:15pm
-                    </:content>
-                  </EntityDisplayWithIcon>
-                </div>
-              </:content>
-            </ActivityCard>
+            {{! remove activity mock }}
           </:content>
         </SummaryCard>
       </:activities>