@newlogic-digital/ui 3.7.5 → 4.0.0

package/src/templates/{Sections/CookieConsent.latte → components/cookieconsent/CookieConsentContent.latte}

@@ -1,6 +1,6 @@
-<div class="s-text py-16 md:py-28 grid-cols-container gap-8">
-    <h2 class="ui-heading">Zásady používání cookies</h2>
-    <div class="ui-text">
+<div class="x-cookieconset-content x-content py-16 md:py-28 grid grid-cols-container gap-y-8">
+    <h2 class="x-heading">Zásady používání cookies</h2>
+    <div class="x-text">
         <p style="text-align: left;">Tyto webové stránky používají k poskytování služeb, personalizaci
             reklam a analýze návštěvnosti soubory cookies. Pokud nepovolíte využití reklamních cookies, web
             bude používat pouze cookies nezbytné k tomu, abyste se mohli pohybovat po webu a používat jeho
@@ -65,5 +65,5 @@
             </tbody>
         </table>
     </div>
-    {include '../Components/Form/CookieConsent.latte'}
+    {include 'CookieConsentForm.latte'}
 </div>

package/src/templates/components/cookieconsent/CookieConsentDialog.latte

@@ -0,0 +1,27 @@
+{var $center = true}
+
+<dialog class="x-cookieconsent-dialog x-dialog {if $center}center{/if}" data-controller="x-cookieconsent-dialog">
+    <div class="x-dialog-content">
+        <div class="mt-2 mb-4 md:mb-6">
+            {if true}
+                <div class="x-image w-40 my-4">
+                    <img src="{placeholder(160, 46)}" alt="">
+                </div>
+            {/if}
+            <div class="x-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="x-text">
+            <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
+            <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
+        </div>
+        <div class="flex items-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+            <div class="flex flex-col w-full">
+                <button class="x-button lg w-full" data-action="click->x-cookieconsent-dialog#approve">Ano, souhlasím</button>
+            </div>
+            <div class="flex w-full gap-4">
+                <a class="x-button ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="x-button ghosted lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
+            </div>
+        </div>
+    </div>
+</dialog>

package/src/templates/{Components/Form/CookieConsent.latte → components/cookieconsent/CookieConsentForm.latte}

@@ -1,6 +1,6 @@
-<form class="c-form-cookieconsent flex flex-col gap-8 mt-8" data-controller="c-form-cookieconsent" data-action="submit->c-form-cookieconsent#update:prevent" autocomplete="off">
+<form class="x-cookieconsent-form flex flex-col gap-8 mt-8" data-controller="x-cookieconsent-form" data-action="submit->x-cookieconsent-form#update:prevent" autocomplete="off">
     <div class="flex-col">
-        <div class="ui-text">
+        <div class="x-text">
             <h3 style="text-align: left;">Nastavení cookies</h3>
             <p style="text-align: left;">
                 Následujícím nastavením můžete upravit jaké soubory cookie
@@ -9,39 +9,39 @@
         </div>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Nutné cookies</h5>
             <p>
                 Tyto soubory cookies jsou nezbytně nutné pro váš pohyb po webové stránce a využívání všech funkcí, např. nastavení preferencí soukromí, přihlašování nebo vyplňování formulářů. Bez těchto cookies by nebylo možné řádně poskytovat služby požadované při používání naší stránky. Nezbytně nutné cookies nevyžadují souhlas uživatele dle příslušných právních předpisů. Můžete si také nakonfigurovat webový prohlížeč a nezbytně nutné soubory cookies zablokovat, ovšem následně se může stát, že nebudete moci používat všechny funkce stránky tak, jak byste chtěli.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="decline" checked disabled>
         </label>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Statistické soubory cookies</h5>
             <p>
                 Tyto soubory cookie nám umožňují počítat návštěvy a zdroje návštěvnosti, abychom mohli měřit a zlepšovat výkon našich stránek. Pomáhají nám zjistit, které stránky jsou nejoblíbenější a které nejméně, a vidět, jak se návštěvníci na webu pohybují, což nám pomáhá optimalizovat váš zážitek. Všechny informace, které tyto soubory cookie shromažďují, jsou agregované, a proto anonymní. Pokud tyto soubory cookie nepovolíte, nebudeme moci používat vaše údaje tímto způsobem.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="performance">
         </label>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Reklamní soubory cookies</h5>
             <p>
                 Tyto soubory cookies (zvané také cílené nebo reklamní cookies) se používají k zobrazování reklam na stránkách třetích stran, které by více odpovídaly vaší osobě a vašim zájmům. Používají se také k omezení počtu shlédnutí reklam a měření účinností reklamních kampaní.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="marketing">
         </label>
     </div>
     <div class="flex-col items-start">
-        <button class="ui-btn">Uložit předvolby</button>
+        <button class="x-button">Uložit předvolby</button>
     </div>
 </form>

package/src/templates/components/dialog/DialogBasic.latte

@@ -0,0 +1,18 @@
+<dialog class="x-dialog" data-controller="x-dialog">
+    <form class="x-dialog-content">
+        <div class="flex justify-between">
+            <h2 class="x-heading">Dialog Basic</h2>
+            <button class="x-button square ghosted accent-main" type="button" data-action="click->x-dialog#close">
+                <svg>
+                    <use href="#icon-x-mark"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="x-text py-4">
+            {foreach range(1, 44) as $i}
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
+            {/foreach}
+        </div>
+        <button class="x-button" type="button" data-action="click->x-dialog#close">Continue</button>
+    </form>
+</dialog>

package/src/templates/emails/components/Content.latte

@@ -0,0 +1,29 @@
+<tr class="x-content">
+    <td class="p-container">
+        <table class="w-full">
+            <tr>
+                <td class="x-heading pb-[24px]">
+                    Lorem ipsum
+                </td>
+            </tr>
+            <tr>
+                <td class="x-text">
+                    Hello David,<br>
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                </td>
+            </tr>
+            <tr>
+                <td class="pt-[24px]">
+                    <table class="x-button flat">
+                        <tr>
+                            <td class="x-button-content">
+                                <a href="https://www.kouzelnechaloupky.cz"><span>Button</span></a>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>
+

package/src/templates/emails/components/Footer.latte

@@ -0,0 +1,13 @@
+<tr class="x-footer">
+    <td class="p-container pt-[0px]">
+        <table class="w-full text-center">
+            <tr>
+                <td class="x-text sm">
+                    ahoj@email.cz<br>
+                    (+420) 123 456 789<br>
+                    po-pá 9:00 - 17:30
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

package/src/templates/emails/components/Header.latte

@@ -0,0 +1,8 @@
+<tr class="x-header">
+    <td class="px-container pt-container">
+        <a href="https://www.bookolosystem.com" target="_blank">
+            <img src="https://placehold.co/160x60" alt="Logo" style="width: 160px; height: 60px;">
+        </a>
+    </td>
+</tr>
+

package/src/{emails/templates.test/Layout.latte → templates/emails/layouts/default.latte}

@@ -6,7 +6,7 @@
     <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    {var $forceLightMode = false}
+    {var $forceLightMode = true}
 
     {if $forceLightMode}
         <meta name="color-scheme" content="only light">
@@ -17,19 +17,19 @@
     {/if}
 
     <style type="text/css" n:syntax="off">
-      @import '/src/emails/styles/main.css';
+      @import '/src/styles/emails/main.css';
     </style>
 </head>
 <body>
-<table class="l-main" align="center">
-    <tr>
-        <td class="p-container" align="center">
-            <table class="l-main-body w-full">
-                <block name="body" with="locals"></block>
-            </table>
-        </td>
-    </tr>
-    <include src="emails/templates.test/Sections/Footer.latte"></include>
-</table>
+    <table class="x-main w-full" align="center">
+        <tr>
+            <td class="p-[20px]" align="center">
+                <table class="x-main-body container">
+                    {include '../../utils/sections.latte', sections => $body}
+                </table>
+            </td>
+        </tr>
+        {include '../components/Footer.latte'}
+    </table>
 </body>
 </html>

package/src/templates/{Layout/Main.latte → layouts/default.latte}

@@ -2,7 +2,7 @@
 <html class="no-js" lang="en">
     <head>
         <meta charset="utf-8">
-        <title>{$page->title}</title>
+        <title>{$title}</title>
 
         <meta name="keywords" content="">
         <meta name="description" content="">
@@ -10,7 +10,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="format-detection" content="telephone=no">
         <meta name="mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-title" content="{$page->title}">
+        <meta name="apple-mobile-web-app-title" content="{$title}">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="theme-color" content="#ffffff">
 
@@ -22,25 +22,20 @@
         {/if}
 
         {if isset($preload)}
-            {foreach $preload as $url}
-                <link
-                    {if isset($url->rel)}rel="{$url->rel}"{else}rel="preload"{/if}
-                    href="{$url->href|asset}"
-                    {if isset($url->as)}as="{$url->as}"{/if}
-                    {if isset($url->type)}type="{$url->type}"{/if}
-                    {if isset($url->crossorigin)}crossorigin{/if}
-                >
-            {/foreach}
+            <link
+                n:foreach="$preload as $url"
+                href="{$url->href|asset}"
+                {if isset($url->rel)}rel="{$url->rel}"{else}rel="preload"{/if}
+                {if isset($url->as)}as="{$url->as}"{/if}
+                {if isset($url->type)}type="{$url->type}"{/if}
+                {if isset($url->crossorigin)}crossorigin{/if}
+            >
         {/if}
 
-        {foreach $assets->css->all as $url}
-            <link rel="stylesheet" href="{$url|asset}">
-        {/foreach}
+        <link n:foreach="$assets->css->all as $url" href="{$url|asset}" rel="stylesheet">
 
         {if isset($modulepreload)}
-            {foreach $modulepreload as $url}
-                <link rel="modulepreload" href="{$url|asset}">
-            {/foreach}
+            <link n:foreach="$modulepreload as $url" href="{$url|asset}" rel="modulepreload">
         {/if}
 
         <script>
@@ -54,18 +49,21 @@
         <link rel="apple-touch-icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>
+    <body data-controller="x-app invoke" data-naja-snippet-append>
+        {include '../components/(layout)/Header.latte'}
+        <main class="x-main view-transition-main">
+            {include '../utils/sections.latte', sections => $body}
+        </main>
+        {include '../components/(layout)/Footer.latte'}
 
-    <body data-controller="controller utils lib-dialog lib-ripple lib-reveal lib-toaster">
-        {include '../Layout/Header.latte'}
-            <main class="l-main swup-transition">
-                {include '../Utils/sections.latte', sections => $page->body}
-            </main>
-        {include '../Layout/Footer.latte'}
-
-        {if $layout->cookies}
-            {include '../Components/Dialog/CookieConsent.latte'}
+        {if $cookieConsent}
+            {include '../components/cookieconsent/CookieConsentDialog.latte'}
         {/if}
 
+        <ol class="x-toaster items-end">
+            {*include TEMPLATES_DIR . 'Components/(ui)/Toast.latte'*}
+        </ol>
+
         {if true} {* load only on first load in production *}
             {fetch('/src/icons.svg')|noescape}
         {/if}

package/vite.config.js

@@ -3,25 +3,6 @@ import core from '@newlogic-digital/core'
 
 export default defineConfig({
     plugins: [
-        core({
-            juice: {
-                postcss: {
-                    globalData: {
-                        files: ['./src/emails/styles/main/Base/config.css']
-                    }
-                }
-            }
-        })
-    ],
-    build: {
-        target: ['edge111', 'firefox111', 'chrome111', 'safari16'],
-        rollupOptions: {
-            output: {
-                manualChunks: {
-                    swup: ['swup'],
-                    stimulus: ['@hotwired/stimulus']
-                }
-            }
-        }
-    }
+        core()
+    ]
 })

package/src/emails/styles/main/+.css

@@ -1,3 +0,0 @@
-@import "Base/+.css";
-@import "Components/+.css";
-@import "Ui/+.css";

package/src/emails/styles/main/Base/+.css

@@ -1,2 +0,0 @@
-@import "config.css";
-@import "font.css";

package/src/emails/styles/main/Base/config.css

@@ -1,22 +0,0 @@
-:root {
-  --color-primary: 131, 205, 79;
-  --color-main: 21, 23, 26;
-  --color-body-primary: 255, 255, 255;
-  --color-body-secondary: 245, 245, 245;
-  --color-body-tertiary: 230, 230, 230;
-  --color-light: 255, 255, 255;
-}
-
-:root {
-  --color-body-primary-dark: 21, 23, 26;
-  --color-body-secondary-dark: 41, 43, 46;
-  --color-body-tertiary-dark: 61, 63, 66;
-}
-
-:root {
-  --spacing-container: 20px;
-  --spacing-container-inner: 30px;
-  --rounded: 20px;
-  --transition-background: background-color 0.2s ease;
-  --transition-color: color 0.2s ease;
-}

package/src/emails/styles/main/Components/+.css

@@ -1 +0,0 @@
-@import "Card.css";

package/src/emails/styles/main/Components/Card.css

@@ -1,12 +0,0 @@
-.c-card {
-  background-color: rgb(var(--color-body-tertiary));
-  border-radius: var(--rounded);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: rgb(var(--color-body-tertiary-dark)) !important;
-  }
-
-  & > tr > td {
-    padding: 28px 24px;
-  }
-}

package/src/emails/styles/main/Ui/+.css

@@ -1,3 +0,0 @@
-@import "Btn.css";
-@import "Heading.css";
-@import "Text.css";

package/src/emails/styles/main/Ui/Btn.css

@@ -1,78 +0,0 @@
-.ui-btn-group {
-  width: auto;
-
-  & td {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-}
-
-
-.ui-btn {
-  padding: 10px 15px;
-  background-color: rgb(var(--color-primary));
-  font-size: 12px;
-  border-radius: var(--rounded);
-  font-weight: 700;
-  transition: var(--transition-background), var(--transition-color);
-
-  &.lg {
-    padding: 20px;
-    border-radius: 999px;
-    font-size: 16px;
-  }
-
-  &, & span {
-    color: rgb(var(--color-light));
-    text-decoration: none;
-  }
-
-  & span {
-    transition: var(--transition-color);
-  }
-
-  &.ghosted {
-    background-color: transparent;
-
-    &, & span {
-      color: rgb(var(--color-primary));
-    }
-  }
-
-  &:hover {
-    background-color: rgba(var(--color-primary), 0.8) !important;
-
-    &[class*="text-main"] {
-      background-color: rgba(var(--color-main), 0.15) !important;
-    }
-  }
-}
-
-.ui-btn-table {
-  & table {
-    background-color: rgb(var(--color-primary));
-    width: auto;
-    border-radius: 999px;
-    font-weight: 700;
-    transition: var(--transition-background), var(--transition-color);
-  }
-
-  & td {
-    padding: 16px 20px;
-  }
-
-  &, & span {
-    color: rgb(var(--color-light));
-    text-decoration: none;
-  }
-
-  &:hover {
-    & table {
-      background-color: rgba(var(--color-primary), 0.8) !important;
-
-      &[class*="text-main"] {
-        background-color: rgba(var(--color-main), 0.15) !important;
-      }
-    }
-  }
-}

package/src/emails/styles/main/Ui/Heading.css

@@ -1,8 +0,0 @@
-.ui-heading {
-  font-size: 16px;
-  font-weight: 700;
-
-  &.lg {
-    font-size: 28px;
-  }
-}

package/src/emails/styles/main.css

@@ -1,92 +0,0 @@
-@import "tailwindcss/base.css";
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-@import "tailwindcss/variants.css";
-@import "main/Base/font.css";
-@import "main/Ui/+.css";
-@import "main/Components/+.css";
-
-:where([class*="border-"]) {
-  border-width: 0;
-  border-style: solid;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  width: 100%;
-}
-
-a {
-  &, img {
-    text-decoration: none;
-    color: rgb(var(--color-main));
-  }
-
-  & img {
-    font-weight: 700;
-  }
-}
-
-.l-main {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  width: 600px;
-}
-
-.l-main-body {
-  background-color: rgb(var(--color-body-secondary));
-  border-radius: var(--rounded);
-
-  & > tr {
-    &:first-child > td {
-      padding-top: var(--spacing-container-inner);
-    }
-
-    &:last-child > td {
-      padding-bottom: var(--spacing-container-inner);
-    }
-  }
-}
-
-.dark-img {
-  display: none !important;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: rgb(var(--color-body-primary-dark));
-    color: rgb(var(--color-light));
-    border-radius: var(--rounded);
-  }
-
-  a {
-    &, img {
-      color: rgb(var(--color-light)) !important;
-    }
-  }
-
-  .l-main-body {
-    background-color: rgb(var(--color-body-secondary-dark)) !important;
-  }
-
-  [class*="border-main/10"] {
-    border-color: rgba(var(--color-light), 0.15) !important;
-  }
-
-  [class*="text-main"] {
-    &, & span {
-      color: rgb(var(--color-light)) !important;
-    }
-  }
-
-  .light-img {
-    display: none !important;
-  }
-
-  .dark-img {
-    display: block !important;
-  }
-}

package/src/emails/templates.test/Sections/Footer.latte

@@ -1,22 +0,0 @@
-<tr class="s-footer">
-    <td class="p-container pt-[16px]">
-        <table class="s_body" align="center">
-            <tr>
-                <td class="px-container-inner">
-                    <table>
-                        <tr>
-                            <td class="ui-text sm pr-[160px]">
-                                Název webu<br>
-                                Adresa
-                            </td>
-                            <td class="ui-text sm">
-                                <a href="mailto:info@example.com"><span>info@example.com</span></a><br>
-                                <a href="tel:+420111222333"><span>(+420) 111 222 333</span></a>
-                            </td>
-                        </tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
-    </td>
-</tr>

package/src/emails/templates.test/Sections/Header.latte

@@ -1,37 +0,0 @@
-<tr class="s-header">
-    <td>
-        <table class="s_body" align="center">
-            <tr>
-                <td class="px-container-inner">
-                    <table>
-                        <tr>
-                            <td>
-                                <a href="https://www.bookolosystem.com" target="_blank">
-                                    <img src="https://via.placeholder.com/160x60" alt="Logo" class="light-img w-[160px] h-[60px] block">
-                                    <!--[if !mso]><! -->
-                                    <img src="https://via.placeholder.com/160x60" alt="Logo" class="dark-img w-[160px] h-[60px] block"
-                                         style="{if $forceLightMode}background-color: rgb(245,245,245);border-radius: 8px;padding: 6px{/if}">
-                                    <!--<![endif]-->
-                                </a>
-                            </td>
-                            <td class="text-right">
-                                <table class="ui-btn-group" align="right">
-                                    <tr>
-                                        <td>
-                                            <a href="#" class="ui-btn"><span>Zobrazit web</span></a>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                    </table>
-                    <table>
-                        <tr><td class="border-b border-main/10 pb-[32px]"></td></tr>
-                        <tr><td class="pb-[32px]"></td></tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
-    </td>
-</tr>
-

package/src/emails/templates.test/Sections/Text.latte

@@ -1,24 +0,0 @@
-<tr class="s-text">
-    <td>
-        <table class="s_body" align="center">
-            <tr>
-                <td class="px-container-inner">
-                    <table>
-                        <tr>
-                            <td class="ui-heading lg pb-[24px]">
-                                Lorem ipsum
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="ui-text">
-                                Hello David,<br>
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-                            </td>
-                        </tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
-    </td>
-</tr>
-

package/src/scripts/Components/+.js

@@ -1,2 +0,0 @@
-import './Drawer.js'
-import './Popover.js'