From ac0ccc84afc928841fd9d43250c061de4ae6fa22 Mon Sep 17 00:00:00 2001
From: Abel Toledano <atoledano@tuenti.com>
Date: Mon, 12 May 2025 12:48:08 +0200
Subject: [PATCH] chore(mistica-css): add boxed example in mistica-css html

---
 .prettierignore         |   1 +
 examples/css/index.html | 199 +++++++++++++++++++++++++++++++---------
 package.json            |   4 +-
 3 files changed, 160 insertions(+), 44 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index ac8fa1fdb4..11d193cdf2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,6 +6,7 @@ dist-es/
 public/
 storybook-static/
 .vercel/
+.yarn/
 CHANGELOG.md
 reports
 
diff --git a/examples/css/index.html b/examples/css/index.html
index a4cb3031b3..84edfadbe6 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -73,6 +73,12 @@ <h3 class="mistica-text-title2">TextLink</h3>
                     this is a <a class="mistica-text-link" href="#" disabled>disabled text link</a> too.
                 </p>
 
+                <h3 class="mistica-text-title2">Boxed</h3>
+                <div class="mistica-boxed" style="padding: 16px">
+                    <h2 class="mistica-text-title2">Title</h2>
+                    <p class="mistica-text-1">Some text</p>
+                </div>
+
                 <h3 class="mistica-text-title2">Tag</h3>
                 <div>
                     <div class="mistica-tag-promo">Promo</div>
@@ -438,11 +444,25 @@ <h3 class="mistica-text-title2">Cards</h3>
                 <h4 class="mistica-text-title1">MediaCard / DataCard / SnapCard</h4>
                 <div class="cards-group">
                     <section class="mistica-card">
-                        <div class="mistica-card__asset-floating" style="border-radius: 50%; height:40px; width: 40px; background: var(--mistica-color-tagBackgroundActive)"> 
+                        <div
+                            class="mistica-card__asset-floating"
+                            style="
+                                border-radius: 50%;
+                                height: 40px;
+                                width: 40px;
+                                background: var(--mistica-color-tagBackgroundActive);
+                            "
+                        >
                             <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
-                                <path 
-                                    fill="var(--mistica-color-tagTextActive)" 
-                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"></path><path fill="var(--mistica-color-tagTextActive)" d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"></path></svg>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"
+                                ></path>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"
+                                ></path>
+                            </svg>
                         </div>
                         <img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
                         <div class="mistica-tag-promo">Headline</div>
@@ -468,8 +488,13 @@ <h2 class="mistica-card__title">Title</h2>
                         </div>
                     </section>
                     <section class="mistica-card">
-                        <div class="mistica-card__asset" style="border-radius: 50%; height:40px; width: 40px;">
-                            <image src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg" />                      
+                        <div
+                            class="mistica-card__asset"
+                            style="border-radius: 50%; height: 40px; width: 40px"
+                        >
+                            <image
+                                src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg"
+                            />
                         </div>
                         <div class="mistica-tag-promo">Headline</div>
                         <h2 class="mistica-card__pretitle">Pretitle</h2>
@@ -495,7 +520,7 @@ <h2 class="mistica-card__title">Title</h2>
                     </section>
                     <section class="mistica-snap-card">
                         <div class="mistica-card__asset">
-                            <image src="https://picsum.photos/250/100" />                      
+                            <image src="https://picsum.photos/250/100" />
                         </div>
                         <h2 class="mistica-card__title">Title</h2>
                         <p class="mistica-card__subtitle">Subtitle</p>
@@ -646,106 +671,196 @@ <h2 class="mistica-card__title">Title</h2>
                     </div>
                 </div>
 
-                <h3 class="mistica-text-title2">Grid Layout</h3>              
+                <h3 class="mistica-text-title2">Grid Layout</h3>
                 <h4 class="mistica-text-title1">6 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                   
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
                 <h4 class="mistica-text-title1">5 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">  
-                    <div class="mistica-col-1"></div>            
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-5">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>            
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">4 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">      
-                    <div class="mistica-col-1"></div>        
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>         
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">8 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-8">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                </section>               
+                </section>
                 <h4 class="mistica-text-title1">3 + 9</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-3">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-9">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
             </div>
         </div>
         <script type="module" src="/main.js"></script>
     </body>
 
-    <svg style="display: none;">
+    <svg style="display: none">
         <symbol id="mistica-grid-svg">
-          <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
-          <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
+            <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
+            <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
         </symbol>
     </svg>
 </html>
diff --git a/package.json b/package.json
index 7825327e05..a3ab39e1c3 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
         "test": "jest --config jest.unit.config.js",
         "test-acceptance": "test-acceptance",
         "test-ssr": "test-acceptance --config jest.ssr.config.js",
-        "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\"",
+        "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\" \"**/*.css\" \"**/*.html\"",
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
@@ -176,7 +176,7 @@
         "*.css"
     ],
     "lint-staged": {
-        "*.{js,css,md,yml,yaml,ts,tsx,d.ts,json}": "prettier --write"
+        "*.{js,css,md,yml,yaml,ts,tsx,d.ts,json,html}": "prettier --write"
     },
     "release": {
         "plugins": [