Implements MsSummaryCard

lib/components/index.ts

@@ -47,3 +47,6 @@ export * from '@lib/components/ms-progress-bar';
 
 // ** ms-textarea ** //
 export * from '@lib/components/ms-textarea';
+
+// ** ms-card ** //
+export * from '@lib/components/ms-card';

lib/components/ms-card/MsSummaryCard.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="ms-summary-card">
+    <h2 class="ms-summary-card-title title-h3">{{ $msTranslate(title) }}</h2>
+    <template
+      v-for="(row, index) in rows"
+      :key="`ms-summary-card-row${index}`"
+    >
+      <div
+        class="ms-summary-card-row"
+        v-if="row.secondItem"
+      >
+        <ms-summary-card-item
+          :label="row.item.label"
+          :text="row.item.text"
+          :error="row.item.error"
+          :second-line="row.item.secondLine"
+        />
+        <ms-summary-card-item
+          :label="row.secondItem.label"
+          :text="row.secondItem.text"
+          :error="row.secondItem.error"
+          :second-line="row.secondItem.secondLine"
+        />
+      </div>
+      <ms-summary-card-item
+        v-else
+        :label="row.item.label"
+        :text="row.item.text"
+        :error="row.item.error"
+        :second-line="row.item.secondLine"
+      />
+    </template>
+
+    <ion-button
+      class="update-button"
+      fill="clear"
+      @click="$emit('update')"
+    >
+      <ion-icon
+        :icon="pencil"
+        class="update-button__icon"
+      />
+      {{ $msTranslate(buttonLabel) }}
+    </ion-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonIcon } from '@ionic/vue';
+import { MsSummaryCardRowData } from '@lib/components/ms-card/types';
+import MsSummaryCardItem from '@lib/components/ms-card/MsSummaryCardItem.vue';
+import { pencil } from 'ionicons/icons';
+import { Translatable } from '@lib/services';
+
+withDefaults(
+  defineProps<{
+    title: Translatable;
+    buttonLabel?: Translatable;
+    rows: MsSummaryCardRowData[];
+  }>(),
+  {
+    buttonLabel: 'lib.components.msSummaryCard.updateButtonLabel',
+  },
+);
+
+defineEmits<{
+  (e: 'update'): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.ms-summary-card {
+  h2 {
+    margin: 0;
+    padding: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  background: var(--parsec-color-light-secondary-background);
+  border: 1px solid var(--parsec-color-light-secondary-disabled);
+  border-radius: var(--parsec-radius-8);
+  gap: 1rem;
+  width: 100%;
+  position: relative;
+  padding: 1.5rem;
+
+  &-title {
+    color: var(--parsec-color-light-secondary-text);
+  }
+
+  &-row {
+    display: flex;
+  }
+
+  .update-button {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+
+    &__icon {
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

lib/components/ms-card/MsSummaryCardItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ms-summary-card-item">
+    <p class="ms-summary-card-item__label form-label">{{ $msTranslate(label) }}</p>
+    <p class="ms-summary-card-item__text subtitles-normal">{{ $msTranslate(text) }}</p>
+    <p
+      v-show="error"
+      class="form-error body"
+    >
+      {{ $msTranslate(error) }}
+    </p>
+    <div
+      v-if="secondLine"
+      class="ms-summary-card-item__text subtitles-normal"
+    >
+      {{ $msTranslate(secondLine.text) }}
+      <p
+        v-show="secondLine.error"
+        class="form-error body"
+      >
+        {{ $msTranslate(secondLine.error) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MsSummaryCardItemData } from '@lib/components/ms-card/types';
+
+defineProps<MsSummaryCardItemData>();
+</script>
+
+<style scoped lang="scss">
+.ms-summary-card-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.5rem;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__label {
+    color: var(--parsec-color-light-secondary-soft-grey);
+  }
+
+  &__text {
+    color: var(--parsec-color-light-primary-text);
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+</style>

lib/components/ms-card/index.ts

@@ -0,0 +1,7 @@
+import MsSummaryCard from '@lib/components/ms-card/MsSummaryCard.vue';
+import MsSummaryCardItem from '@lib/components/ms-card/MsSummaryCardItem.vue';
+
+export * from '@lib/components/ms-card/types';
+export * from '@lib/components/ms-card/utils';
+
+export { MsSummaryCard, MsSummaryCardItem };

lib/components/ms-card/types.ts

@@ -0,0 +1,18 @@
+import { Translatable } from '@lib/services';
+
+interface MsSummaryCardItemData {
+  label: Translatable;
+  text: Translatable;
+  error?: Translatable;
+  secondLine?: {
+    text: Translatable;
+    error?: Translatable;
+  };
+}
+
+interface MsSummaryCardRowData {
+  item: MsSummaryCardItemData;
+  secondItem?: MsSummaryCardItemData;
+}
+
+export type { MsSummaryCardItemData, MsSummaryCardRowData };

lib/components/ms-card/utils.ts

@@ -0,0 +1,27 @@
+import { MsSummaryCardItemData } from '@lib/components/ms-card/types';
+import { Translatable } from '@lib/services';
+
+function createSummaryCardItem(
+  label: Translatable,
+  text: Translatable,
+  error?: Translatable,
+  secondLineText?: Translatable,
+  secondLineError?: Translatable,
+): MsSummaryCardItemData | undefined {
+  if (!text) return;
+  const item: MsSummaryCardItemData = {
+    label,
+    text,
+    error,
+  };
+
+  if (secondLineText) {
+    item.secondLine = {
+      text: secondLineText,
+      error: secondLineError,
+    };
+  }
+  return item;
+}
+
+export { createSummaryCardItem };

lib/locales/en-US.json

@@ -49,6 +49,9 @@
       "msBooleanToogle": {
         "yes": "Yes",
         "no": "No"
+      },
+      "msSummaryCard": {
+        "updateButtonLabel": "Update"
       }
     },
     "common": {
@@ -76,6 +79,7 @@
         "confirmButtonLabel": "Close"
       },
       "translation": {
+        "asIs": "{value}",
         "date": {
           "asIs": "{date}"
         },

lib/locales/fr-FR.json

@@ -49,6 +49,9 @@
       "msBooleanToogle": {
         "yes": "Oui",
         "no": "Non"
+      },
+      "msSummaryCard": {
+        "updateButtonLabel": "Modifier"
       }
     },
     "common": {
@@ -76,6 +79,7 @@
         "confirmButtonLabel": "Fermer"
       },
       "translation": {
+        "asIs": "{value}",
         "date": {
           "asIs": "{date}"
         },

lib/services/translation.ts

@@ -162,11 +162,16 @@ function getLocale(): any {
   return i18n.global.locale.value;
 }
 
+function valueAsTranslatable(value: any): Translatable {
+  return { key: 'lib.services.translation.asIs', data: { value } };
+}
+
 export const I18n = {
   translate,
   formatDate,
   changeLocale,
   getLocale,
   init,
   getPreferredLocale,
+  valueAsTranslatable,
 };

src/locales/en-US.json

@@ -190,6 +190,24 @@
       },
       "codeValidation": {
         "title": "Code validation"
+      },
+      "summaryCard": {
+        "title": "Summary card",
+        "example": {
+          "title": "Your profile",
+          "firstName": {
+            "label": "First name",
+            "value": "Jon"
+          },
+          "lastName": {
+            "label": "Last name",
+            "value": "Snow"
+          },
+          "job": {
+            "label": "Job",
+            "value": "Night's Watch Lord Commander"
+          }
+        }
       }
     }
   }

src/locales/fr-FR.json

@@ -190,6 +190,24 @@
       },
       "codeValidation": {
         "title": "Validation de code"
+      },
+      "summaryCard": {
+        "title": "Summary card",
+        "example": {
+          "title": "Vos informations",
+          "firstName": {
+            "label": "Prénom",
+            "value": "Jean"
+          },
+          "lastName": {
+            "label": "Nom",
+            "value": "Neige"
+          },
+          "job": {
+            "label": "Emploi",
+            "value": "Lord Commandant de la Garde de Nuit"
+          }
+        }
       }
     }
   }

src/views/HomePage.vue

@@ -362,6 +362,35 @@
             </div>
           </div>
         </ion-item-divider>
+        <ion-item-divider class="example-divider">
+          <ion-label class="title-h2">{{ $msTranslate('usage.components.summaryCard.title') }}</ion-label>
+          <div class="example-divider-content">
+            <div class="example-data">
+              <ms-summary-card
+                title="usage.components.summaryCard.example.title"
+                :rows="[
+                  {
+                    item: createSummaryCardItem(
+                      'usage.components.summaryCard.example.firstName.label',
+                      'usage.components.summaryCard.example.firstName.value',
+                    ) as MsSummaryCardItemData,
+                    secondItem: createSummaryCardItem(
+                      'usage.components.summaryCard.example.lastName.label',
+                      'usage.components.summaryCard.example.lastName.value',
+                    ) as MsSummaryCardItemData,
+                  },
+                  {
+                    item: createSummaryCardItem(
+                      'usage.components.summaryCard.example.job.label',
+                      'usage.components.summaryCard.example.job.value',
+                    ) as MsSummaryCardItemData,
+                  },
+                ]"
+                @update="console.log('update')"
+              />
+            </div>
+          </div>
+        </ion-item-divider>
       </div>
     </ion-content>
   </ion-page>
@@ -423,6 +452,9 @@ import {
   MsStripeCardDetails,
   MsDropdownChangeEvent,
   MsProgressBar,
+  MsSummaryCard,
+  createSummaryCardItem,
+  MsSummaryCardItemData,
 } from '@lib/components';
 import { DateTime } from 'luxon';
 import { inject, ref, Ref, onMounted } from 'vue';