Merge pull request #2084 from cardstack/polymorphic-field-example

Add example of polymorphic field to Experiments realm
cardstack · Jan 24, 2025 · 3920809 · 3920809
2 parents 12397c3 + 5550bfe
commit 3920809
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/experiments-realm/TripInfo/2d7badfc-484c-40c3-a65b-45f4513a77d6.json b/packages/experiments-realm/TripInfo/2d7badfc-484c-40c3-a65b-45f4513a77d6.json
@@ -5,7 +5,8 @@
       "traveler": {
         "name": "Marcelius Wilde",
         "nextTravelGoal": {
-          "goalTitle": "Summer '25"
+          "goalTitle": "Summer '25",
+          "progress": 0.5
         }
       },
       "description": null,
@@ -57,6 +58,18 @@
       "adoptsFrom": {
         "module": "../trip-info",
         "name": "TripInfo"
+      },
+      "fields": {
+        "traveler": {
+          "fields": {
+            "nextTravelGoal": {
+              "adoptsFrom": {
+                "module": "../trip-info",
+                "name": "TravelGoalWithProgress"
+              }
+            }
+          }
+        }
       }
     }
   }

diff --git a/packages/experiments-realm/trip-info.gts b/packages/experiments-realm/trip-info.gts
@@ -11,6 +11,7 @@ import { Component } from 'https://cardstack.com/base/card-api';
 import { CardContainer, FieldContainer } from '@cardstack/boxel-ui/components';
 import { Country } from './country';
 import MapPinIcon from '@cardstack/boxel-icons/map-pin';
+import NumberField from '../base/number';
 
 class TravelGoal extends FieldDef {
   static displayName = 'Travel Goal';
@@ -43,6 +44,36 @@ class TravelGoal extends FieldDef {
   };
 }
 
+export class TravelGoalWithProgress extends TravelGoal {
+  static displayName = 'Travel Goal With Progress';
+  @field progress = contains(NumberField);
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <CardContainer class='container'>
+        <FieldContainer @label='Goal Title (Progress)'>
+          <@fields.goalTitle />
+          (<@fields.progress />%)
+        </FieldContainer>
+        <FieldContainer @label='Country'>
+          <@fields.country />
+        </FieldContainer>
+        <FieldContainer @label='Alternate Trips'>
+          <@fields.alternateTrips />
+        </FieldContainer>
+      </CardContainer>
+      <style scoped>
+        .container {
+          padding: 20px;
+          background-color: whitesmoke;
+        }
+        .container > * + * {
+          margin-top: 20px;
+        }
+      </style>
+    </template>
+  };
+}
+
 class Traveler extends FieldDef {
   static displayName = 'Traveler';
   @field name = contains(StringField);
@@ -113,5 +144,9 @@ export class TripInfo extends CardDef {
   }
 
 
+
+
+
+
   */
 }