From f0aa5125801038ccc1e2fe2e7492dc467bf239ea Mon Sep 17 00:00:00 2001
From: NicoTuxx <nicotuxxdev@gmail.com>
Date: Fri, 26 Jul 2024 02:34:06 +0200
Subject: [PATCH] Implements MsSummaryCard

---
 lib/components/index.ts                      |   3 +
 lib/components/ms-card/MsSummaryCard.vue     | 106 +++++++++++++++++++
 lib/components/ms-card/MsSummaryCardItem.vue |  54 ++++++++++
 lib/components/ms-card/index.ts              |   7 ++
 lib/components/ms-card/types.ts              |  18 ++++
 lib/components/ms-card/utils.ts              |  27 +++++
 lib/locales/en-US.json                       |   3 +
 lib/locales/fr-FR.json                       |   3 +
 src/locales/en-US.json                       |  18 ++++
 src/locales/fr-FR.json                       |  18 ++++
 src/views/HomePage.vue                       |  32 ++++++
 11 files changed, 289 insertions(+)
 create mode 100644 lib/components/ms-card/MsSummaryCard.vue
 create mode 100644 lib/components/ms-card/MsSummaryCardItem.vue
 create mode 100644 lib/components/ms-card/index.ts
 create mode 100644 lib/components/ms-card/types.ts
 create mode 100644 lib/components/ms-card/utils.ts

diff --git a/lib/components/index.ts b/lib/components/index.ts
index 66d8140..84899fa 100644
--- a/lib/components/index.ts
+++ b/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';
diff --git a/lib/components/ms-card/MsSummaryCard.vue b/lib/components/ms-card/MsSummaryCard.vue
new file mode 100644
index 0000000..cd5f888
--- /dev/null
+++ b/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>
diff --git a/lib/components/ms-card/MsSummaryCardItem.vue b/lib/components/ms-card/MsSummaryCardItem.vue
new file mode 100644
index 0000000..3d56b01
--- /dev/null
+++ b/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">{{ 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"
+    >
+      {{ 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>
diff --git a/lib/components/ms-card/index.ts b/lib/components/ms-card/index.ts
new file mode 100644
index 0000000..95d3096
--- /dev/null
+++ b/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 };
diff --git a/lib/components/ms-card/types.ts b/lib/components/ms-card/types.ts
new file mode 100644
index 0000000..c65a30e
--- /dev/null
+++ b/lib/components/ms-card/types.ts
@@ -0,0 +1,18 @@
+import { Translatable } from '@lib/services';
+
+interface MsSummaryCardItemData {
+  label: Translatable;
+  text: string;
+  error?: Translatable;
+  secondLine?: {
+    text: string;
+    error?: Translatable;
+  };
+}
+
+interface MsSummaryCardRowData {
+  item: MsSummaryCardItemData;
+  secondItem?: MsSummaryCardItemData;
+}
+
+export type { MsSummaryCardItemData, MsSummaryCardRowData };
diff --git a/lib/components/ms-card/utils.ts b/lib/components/ms-card/utils.ts
new file mode 100644
index 0000000..ac6ba5f
--- /dev/null
+++ b/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: string,
+  error?: Translatable,
+  secondLineText?: string,
+  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 };
diff --git a/lib/locales/en-US.json b/lib/locales/en-US.json
index 8dd1478..336e509 100644
--- a/lib/locales/en-US.json
+++ b/lib/locales/en-US.json
@@ -49,6 +49,9 @@
       "msBooleanToogle": {
         "yes": "Yes",
         "no": "No"
+      },
+      "msSummaryCard": {
+        "updateButtonLabel": "Update"
       }
     },
     "common": {
diff --git a/lib/locales/fr-FR.json b/lib/locales/fr-FR.json
index bc880cb..af32110 100644
--- a/lib/locales/fr-FR.json
+++ b/lib/locales/fr-FR.json
@@ -49,6 +49,9 @@
       "msBooleanToogle": {
         "yes": "Oui",
         "no": "Non"
+      },
+      "msSummaryCard": {
+        "updateButtonLabel": "Modifier"
       }
     },
     "common": {
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index faf3d8c..863c6a3 100644
--- a/src/locales/en-US.json
+++ b/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"
+          }
+        }
       }
     }
   }
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
index 73eb84c..643b1cd 100644
--- a/src/locales/fr-FR.json
+++ b/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"
+          }
+        }
       }
     }
   }
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 3038a0f..26e05e1 100644
--- a/src/views/HomePage.vue
+++ b/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',
+                      $msTranslate('usage.components.summaryCard.example.firstName.value'),
+                    ) as MsSummaryCardItemData,
+                    secondItem: createSummaryCardItem(
+                      'usage.components.summaryCard.example.lastName.label',
+                      $msTranslate('usage.components.summaryCard.example.lastName.value'),
+                    ) as MsSummaryCardItemData,
+                  },
+                  {
+                    item: createSummaryCardItem(
+                      'usage.components.summaryCard.example.job.label',
+                      $msTranslate('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';