Introduce percentage field

packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json

@@ -25,6 +25,7 @@
         "alice@email.com",
         "dan@email.com"
       ],
+      "percentage": 100.159393,
       "contactLink": {
         "label": "Email",
         "value": "alice@email.com"

packages/experiments-realm/experiments_fields_preview.gts

@@ -5,6 +5,7 @@ import { PhoneField } from './phone';
 import { UrlField } from './url';
 import { WebsiteField } from './website';
 import { Address as AddressField } from './address';
+import { PercentageField } from './percentage';
 import {
   CardDef,
   field,
@@ -27,6 +28,7 @@ export class ExperimentsFieldsPreview extends CardDef {
   @field email = contains(EmailField);
   @field emails = containsMany(EmailField);
   @field phone = contains(PhoneField);
+  @field percentage = contains(PercentageField);
   @field contactLink = contains(ContactLinkField);
   @field contactLinks = containsMany(ContactLinkField);
   @field featuredImage = contains(FeaturedImageField);

packages/experiments-realm/percentage.gts

@@ -0,0 +1,43 @@
+import { Component } from 'https://cardstack.com/base/card-api';
+import NumberField from 'https://cardstack.com/base/number';
+
+import PercentageIcon from '@cardstack/boxel-icons/square-percentage';
+
+const nearestDecimal = (num: number, decimalPlaces: number) => {
+  // https://stackoverflow.com/questions/11832914/how-to-round-to-at-most-2-decimal-places-if-necessary
+  const factorOfTen = Math.pow(10, decimalPlaces);
+  return Math.round(num * factorOfTen + Number.EPSILON) / factorOfTen;
+};
+
+const displayPercentage = (num: number) => {
+  return `${nearestDecimal(num, 2)}%`;
+};
+
+export class PercentageField extends NumberField {
+  static icon = PercentageIcon;
+  static displayName = 'Percentage';
+
+  static isolated = class Isolated extends Component<typeof PercentageField> {
+    <template>
+      {{#if @model}}
+        {{displayPercentage @model}}
+      {{/if}}
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof PercentageField> {
+    <template>
+      {{#if @model}}
+        {{displayPercentage @model}}
+      {{/if}}
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof PercentageField> {
+    <template>
+      {{#if @model}}
+        {{displayPercentage @model}}
+      {{/if}}
+    </template>
+  };
+}