[My Account] Add UI Support for Multiple Email Addresses and Mobile Numbers per User

.changeset/real-carpets-press.md

@@ -0,0 +1,7 @@
+---
+"@wso2is/myaccount": patch
+"@wso2is/core": patch
+"@wso2is/i18n": patch
+---
+
+Add multi-valued email, mobile support to my account

apps/myaccount/package.json

@@ -50,6 +50,7 @@
         "@wso2is/theme": "^2.0.87",
         "@wso2is/validation": "^2.0.6",
         "axios": "^0.19.2",
+        "framer-motion": "^11.1.9",
         "history": "^4.9.0",
         "i18next": "^21.9.1",
         "i18next-browser-languagedetector": "^6.1.5",

apps/myaccount/src/components/profile/profile.scss

@@ -0,0 +1,160 @@
+.profile-form {
+    .multi-input-box {
+        width: 100%;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .oxygen-accordion {
+        .oxygen-accordion-summary {
+            display: flex;
+            padding: 0px 24px 0px 8px;
+            flex-wrap: nowrap;
+            align-items: center; 
+            gap: 4px;
+            border-radius: 8px;
+
+            .accordion-label {
+                margin: 0 0 0 8px;
+                flex-shrink: 0;
+                padding-right: 12px;
+                min-width: 30ch;
+
+                &.mobile-label {
+                    min-width: 20ch; 
+                }
+            }
+
+            .verified-icon, .primary-icon {
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        .oxygen-accordion-details {
+            border-radius: 8px;
+
+            .multi-value-table {
+                .multi-value-table-data-row {
+                    &:last-child td, &:last-child th {
+                        border: none;
+                    }
+                }
+
+                .table-c1 {
+                    display: flex;
+                    flex-wrap: nowrap;
+                    align-items: center;
+
+                    .c1-value{
+                        margin-bottom: 0;
+                        flex-shrink: 0;
+                        padding-right: 12px;
+                        min-width: 30ch;
+
+                        &.mobile-label {
+                            min-width: 20ch; 
+                        }
+                    }
+
+                    .verified-icon, .primary-icon {
+                        align-items: center;
+                    }
+                }
+
+                .table-c2 {
+                    display: flex;
+                    flex-wrap: nowrap;
+                    align-items: center;
+                    justify-content: flex-end;
+                    gap: 4px;
+                }
+            }
+        }
+
+        .MuiAccordionDetails-root {
+            padding: 0px;
+        }
+
+        .MuiAccordionSummary-root {
+            min-height: 48px;
+        }
+    }
+
+    .mv-cancel-btn {
+        margin-top: 1em;
+    }
+
+    .multi-attribute-dropdown {
+        width: 100%;
+    }
+}
+
+.MuiMenuItem-root:hover {
+    background-color: transparent !important;
+}
+
+.MuiMenuItem-root.Mui-selected, .MuiMenuItem-root.Mui-selected:hover {
+    background-color: transparent !important; 
+}
+
+.dropdown-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    .dropdown-label {
+        display: flex;
+        align-items: center;
+        padding-right: 8px;
+        margin: 0 !important;
+        min-width: 30ch;
+
+        &.mobile-label {
+            min-width: 20ch; 
+        }
+    }
+
+    .verified-icon, .primary-icon {
+        align-items: center;
+    }
+}
+
+.vertical-align-center {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: 100%;
+}
+
+.resend-button {
+    cursor: pointer;
+    max-width: none !important;
+    position: static !important;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+}
+
+.mobile-verification-content{
+    display: flex;
+    align-items: center;
+
+    .animated-message {
+        height: 250px;
+        padding: 12px;
+    }
+
+    .inside-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .modal-input, .button-group {
+            padding: 12px 0;
+        }
+    }
+}