From a803aa8974e13767215f44cf1f06da175fb6e032 Mon Sep 17 00:00:00 2001
From: Jessica Mendes <jessica.mendes@outsystems.com>
Date: Fri, 21 Jun 2024 17:22:23 +0100
Subject: [PATCH] add dear developer page for list

---
 .../test/dear-designer-button/index.html      |   1 -
 .../test/dear-designer-list/index.html        | 364 ++++++++++++++++++
 2 files changed, 364 insertions(+), 1 deletion(-)
 create mode 100644 core/src/theme-ionic/test/dear-designer-list/index.html
diff --git a/core/src/theme-ionic/test/dear-designer-button/index.html b/core/src/theme-ionic/test/dear-designer-button/index.html
index a22b76e9bb..af705338ff 100644
--- a/core/src/theme-ionic/test/dear-designer-button/index.html
+++ b/core/src/theme-ionic/test/dear-designer-button/index.html
@@ -269,7 +269,6 @@
             <ion-col size="1"></ion-col>
           </ion-row>
 
-        
         </ion-grid>
        
        
diff --git a/core/src/theme-ionic/test/dear-designer-list/index.html b/core/src/theme-ionic/test/dear-designer-list/index.html
new file mode 100644
index 0000000000..8912c2ea37
--- /dev/null
+++ b/core/src/theme-ionic/test/dear-designer-list/index.html
@@ -0,0 +1,364 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+    <head>
+    <meta charset="UTF-8" />
+    <title>Ionic Theme</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    /> 
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-grid>
+              <ion-row>
+                <ion-col></ion-col>
+                <ion-col size="10">
+                  <h5 class="roboto">Dear Designer</h5>
+                  <h1 style="font-weight: 700" class="roboto">List</h1>      
+                </ion-col>
+                <ion-col></ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="10">
+              <ion-card shape="rectangular" class="preview">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                      <ion-button shape="rectangular" slot="end">Button</ion-button>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                      <ion-button shape="rectangular" slot="end">Button</ion-button>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                      <ion-button shape="rectangular" slot="end">Button</ion-button>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+          <ion-row>
+
+          <ion-col></ion-col>
+            <ion-col size="10">
+              <h2 class="title">Inset List</h2>
+              <ion-text class="subtitle">Specifies if the list has margins around. By default, False.</ion-text>
+              
+            </ion-col>
+            <ion-col></ion-col>
+
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              True
+            </ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              False
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list inset="true" style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="10">
+              <h2 class="title">Shape</h2>
+              <ion-text class="subtitle">The list can have 3 shapes. The default is Round.</ion-text>
+              
+            </ion-col>
+            <ion-col></ion-col>
+
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              Round
+            </ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              Soft
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list inset="true" style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list inset="true" shape="soft" style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="1"></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              Rectangular
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="1"></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list inset="true" shape="rectangular" style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+
+        
+        </ion-grid>
+       
+       
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-app>
+
+    <style>
+      
+    </style>
+  </body>
+</html>
+
+
+<style>
+
+  .roboto{
+    font-family: 'Roboto';
+  }
+  ion-header ion-toolbar{
+    --background:#105CEF;
+    color: white;
+    --padding-top:30px;
+    --padding-bottom:30px;
+  }
+
+  ion-toolbar h1{
+    margin-top:0px;
+    font-size:55px;
+  }
+
+  ion-card.preview{
+    margin-top: 50px;
+    --background:#FAFAFA;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 350px;
+    border:0px;
+  }
+
+  ion-card.preview2{
+    --background:#FAFAFA;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 350px;
+    border:0px;
+  }
+
+  .center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  h2.title{
+    font-family: "roboto";
+    margin-top: 50px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #2D4665;
+  }
+
+  ion-text,ion-avatar{
+    font-family: "Inter";
+  }
+
+  .subtitle{
+    font-family: "roboto";
+    margin-top: 10px;
+    float: left;
+    width: 100%;
+    margin-bottom: 15px;
+    line-height: 150%;
+    font-size: 16px;
+  }
+
+  .margin-left-10{
+    margin-left:10px;
+  }
+
+  .info-tag{
+    pointer-events:none;
+  }
+</style>
\ No newline at end of file
