@newlogic-digital/ui 3.5.0 → 3.7.5

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://ui.newlogic.cz/" target="_blank" rel="noopener noreferrer">
-    <img width="180" src="https://ui.newlogic.cz/favicons/android-chrome-192x192.png" alt="Logo">
+    <img width="180" src="https://ui.newlogic.cz/favicons/favicon.svg" alt="Logo">
   </a>
 </p>
 <p align="center">
@@ -18,6 +18,16 @@ Lightweight, modern and modular CSS framework with the best principles
 - ✨️ Progressive
 - ⚡️ Fast
 
+## Příprava projektu pro implementaci
+1. nainstalovat node - `npm i`
+2. nainstalovat cms - `newlogic init cms`
+3. vytvořit si db na devlogic.cz a nastavit v `config/local.neon`
+4. spustit `docker compose up` a `vite`
+5. spustit `make prepare`
+6. spustit `make phinx-seed`
+7. nastavit `FTP_SERVER`, `DB_USERNAME` a `DB_PASSWORD` a vytvořit prostor na devlogic.cz
+8. commitnout změny a pushnout
+
 Newlogic UI is component framework with easy syntax for backend integration. Modern approach of CSS properties, enriched with utility classes from TailwindCSS and powered by Winduum.
 
 Javascript implementation is only **28 kB** and mainly intended for use on backend rendered websites and applications with PHP framework Nette

package/package.json

@@ -1,40 +1,48 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.5.0",
+  "version": "3.7.5",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
   "scripts": {
-    "postinstall": "rm -rf node_modules/typed-query-selector",
-    "dev": "vite",
+    "postinstall": "rm -rf node_modules/typed-query-selector && ncu",
+    "dev": "npm run cleanup && vite",
+    "dev-emails": "npm run cleanup && vite --mode emails",
     "preview": "vite preview",
-    "build": "vite build --mode development",
-    "build-production": "vite build",
+    "build": "npm run cleanup && vite build --mode development",
+    "build-production": "npm run cleanup && vite build",
     "build-emails": "vite build --mode emails",
+    "cleanup": "git clean -qdfX public -e \\!userfiles",
     "eslint": "eslint 'src/scripts/**/*.js'",
     "eslint-fix": "eslint 'src/scripts/**/*.js' --fix",
     "stylelint": "stylelint 'src/styles/**/*.css'",
-    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix"
+    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix",
+    "npm-update": "ncu -u && npm update",
+    "npm-sort": "npm r -S example && npm r -D example"
   },
   "dependencies": {
-    "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "^3.2.1",
-    "winduum": "^0.3.0",
-    "swup": "^3.1.1",
-    "naja": "^2.5.0",
-    "tippy.js": "^6.3.7",
-    "air-datepicker": "^3.3.5",
-    "css-has-pseudo": "^6.0.0"
+    "@floating-ui/dom": "^1.6.12",
+    "@hotwired/stimulus": "^3.2.2",
+    "@newlogic-digital/cookieconsent-js": "^1.0.0",
+    "@newlogic-digital/utils-js": "^1.1.1",
+    "@simonwep/pickr": "^1.9.1",
+    "air-datepicker": "^3.5.3",
+    "eslint": "^9.15.0",
+    "naja": "^3.2.1",
+    "neostandard": "^0.11.8",
+    "stylelint-config-standard": "^36.0.1",
+    "swup": "^4.8.1",
+    "winduum": "^1.2.4"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^2.0.1",
-    "@types/grecaptcha": "^3.0.4",
-    "eslint-config-standard": "^17.1.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-stylistic": "^0.4.3",
-    "postcss-custom-selectors": "^7.1.4"
+    "@newlogic-digital/core": "^2.1.2",
+    "@stylistic/stylelint-config": "^2.0.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@types/grecaptcha": "^3.0.9",
+    "npm-check-updates": "^17.1.11",
+    "vite": "^5.4.11"
   },
   "files": [
     "src"
@@ -43,8 +51,7 @@
     "./src/*": "./src/*"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=9.0.0"
+    "node": "^18.0.0 || >=20.0.0"
   },
   "repository": {
     "type": "git",

package/src/data/main.json

@@ -1,15 +1,29 @@
 {
+  "baseUrl": "https://localhost:5173",
   "lang": "en",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
     "https://fonts.googleapis.com"
   ],
+  "preload": [
+    {
+      "href": "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block",
+      "rel": "preload stylesheet",
+      "as": "style",
+      "crossorigin": true
+    },
+    {
+      "href": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2",
+      "as": "font",
+      "type": "font/woff2",
+      "crossorigin": true
+    }
+  ],
   "assets": {
     "css": {
       "all": [
-        "/src/styles/main.css",
-        "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block"
+        "/src/styles/main.css"
       ]
     },
     "js": {
@@ -17,7 +31,7 @@
     }
   },
   "layout": {
-    "cookies": false,
+    "cookies": true,
     "nav": [
       {
         "name": "Home",
@@ -34,11 +48,12 @@
     ]
   },
   "media": {
-    "min-1280": "(min-width: 1280px)",
-    "min-960": "(min-width: 960px)",
-    "min-768": "(min-width: 768px)",
-    "max-400": "(max-width: 767px)",
-    "min-320": "(min-width: 320px)"
+    "min-xl": "(min-width: 1216px)",
+    "max-lg": "(max-width: 959px)",
+    "min-lg": "(min-width: 960px)",
+    "min-md": "(min-width: 768px)",
+    "max-md": "(max-width: 767px)",
+    "min-xs": "(min-width: 360px)"
   },
   "lazy": {
     "1x1": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",

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

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

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

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

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

@@ -0,0 +1,22 @@
+: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

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

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

@@ -0,0 +1,12 @@
+.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

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

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

@@ -0,0 +1,78 @@
+.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

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

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

@@ -0,0 +1,12 @@
+.ui-text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  mso-line-height-rule: exactly;
+
+  &.sm {
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}

package/src/emails/styles/main.css

@@ -0,0 +1,92 @@
+@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/Layout.latte

@@ -5,19 +5,31 @@
     <title>Email Template</title>
     <!--[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}
+
+    {if $forceLightMode}
+        <meta name="color-scheme" content="only light">
+        <meta name="supported-color-schemes" content="only light">
+    {else}
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+    {/if}
+
     <style type="text/css" n:syntax="off">
-      @import '/src/emails/styles/email.css';
+      @import '/src/emails/styles/main.css';
     </style>
 </head>
 <body>
-<table class="elm_container_wrapper">
+<table class="l-main" align="center">
     <tr>
-        <td>
-            <table class="elm_container">
+        <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>
 </body>
 </html>

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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,24 @@
+<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/icons.svg

@@ -1,38 +1,38 @@
 <svg class="hidden">
-    <svg id="icon-chevron-left" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <symbol id="icon-chevron-left" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
-    </svg>
-    <svg id="icon-chevron-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-chevron-right" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-    </svg>
-    <svg id="icon-angle-down" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
-        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
-    </svg>
-    <svg id="icon-angle-up" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
-        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
-    </svg>
-    <svg id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-exclamation-circle" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <svg id="icon-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 18L18 6M6 6l12 12" />
-    </svg>
-    <svg id="icon-menu" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-    </svg>
-    <svg id="icon-moon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-x-mark" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </symbol>
+    <symbol id="icon-bars-3" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </symbol>
+    <symbol id="icon-moon" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-    </svg>
-    <svg id="icon-sun" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-sun" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-    </svg>
-    <svg id="icon-at-symbol" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-at-symbol" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
-    </svg>
-    <svg id="icon-calendar" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-calendar" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-    </svg>
-    <svg id="icon-clock" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </symbol>
+    <symbol id="icon-clock" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
+    </symbol>
+    <symbol id="icon-angle-down-solid" viewBox="0 0 24 24">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
+    </symbol>
+    <symbol id="icon-angle-up-solid" viewBox="0 0 24 24">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
+    </symbol>
 </svg>

package/src/scripts/Components/+.js

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