Merge branch 'develop' into sf/improve-index-and-show-partners-pages-…

…design

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+## Description
+_Provide a detailed description of the purpose of the changes included in this pull request. Optionally, include background information, relevant screenshots, and any other context that helps explain the work._
+
+## Related Issues
+_If applicable, specify the main parts of the application that will be impacted by this pull request._
+
+## Steps to reproduce or test
+_Describe the steps that you did to reproduce this._

assets/css/components/avatar.css

@@ -21,23 +21,23 @@
 /* Avatar - sizes */
 
 .atomic-avatar--xs {
-  @apply h-8 w-8 text-xs;
+  @apply size-8 text-xs;
 }
 
 .atomic-avatar--sm {
-  @apply h-12 w-12 text-lg;
+  @apply size-12 text-lg;
 }
 
 .atomic-avatar--md {
-  @apply h-16 w-16 text-lg;
+  @apply size-16 text-lg;
 }
 
 .atomic-avatar--lg {
-  @apply h-20 w-20 text-4xl;
+  @apply size-20 text-4xl;
 }
 
 .atomic-avatar--xl {
-  @apply h-24 w-24 text-4xl;
+  @apply size-24 text-4xl;
 }
 
 /* Avatar - colors */
@@ -94,4 +94,10 @@
 
 .atomic-avatar--src {
   @apply bg-transparent;
+}
+
+/* Avatar Group */
+
+.atomic-avatar-grouped {
+  @apply ring-1 ring-white;
 }

assets/css/components/button.css

@@ -159,19 +159,19 @@
 }
 
 .atomic-button__icon--xs {
-  @apply w-3 h-3;
+  @apply !size-3
 }
 .atomic-button__icon--sm {
-  @apply w-4 h-4;
+  @apply !size-4
 }
 .atomic-button__icon--md {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--lg {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--xl {
-  @apply w-6 h-6;
+  @apply !size-6
 }
 
 /* Buttons - with full width */
@@ -185,96 +185,6 @@
   @apply flex items-center gap-2 whitespace-nowrap;
 }
 
-/* Icon Button */
-
-.atomic-icon-button {
-  @apply inline-block p-2 rounded-full;
-}
-
-/* Icon Buttons - colors */
-
-.atomic-icon-button--primary {
-  @apply text-primary-600 dark:text-primary-500;
-}
-.atomic-icon-button--secondary {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-.atomic-icon-button--gray {
-  @apply text-gray-600 dark:text-gray-500;
-}
-.atomic-icon-button--info {
-  @apply text-info-600 dark:text-info-500;
-}
-.atomic-icon-button--success {
-  @apply text-success-600 dark:text-success-500;
-}
-.atomic-icon-button--warning {
-  @apply text-warning-600 dark:text-warning-500;
-}
-.atomic-icon-button--danger {
-  @apply text-danger-600 dark:text-danger-500;
-}
-
-/* Icon Buttons - background colors */
-
-.atomic-icon-button-bg--primary {
-  @apply hover:bg-primary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--secondary {
-  @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--gray {
-  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--info {
-  @apply hover:bg-info-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--success {
-  @apply hover:bg-success-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--warning {
-  @apply hover:bg-warning-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--danger {
-  @apply hover:bg-danger-50 dark:hover:bg-gray-800;
-}
-
-/* Icon Button - sizes */
-
-.atomic-icon-button--xs {
-  @apply w-9 h-9;
-}
-.atomic-icon-button--sm {
-  @apply w-10 h-10;
-}
-.atomic-icon-button--md {
-  @apply w-11 h-11;
-}
-.atomic-icon-button--lg {
-  @apply w-12 h-12;
-}
-.atomic-icon-button--xl {
-  @apply w-14 h-14;
-}
-
-/* Icon Button - spinner */
-
-.atomic-icon-button-spinner--xs {
-  @apply w-5 h-5;
-}
-.atomic-icon-button-spinner--sm {
-  @apply w-6 h-6;
-}
-.atomic-icon-button-spinner--md {
-  @apply w-7 h-7;
-}
-.atomic-icon-button-spinner--lg {
-  @apply w-8 h-8;
-}
-.atomic-icon-button-spinner--xl {
-  @apply w-10 h-10;
-}
-
 /* Button - disabled */
 
 .atomic-button--disabled {

assets/js/app.js

@@ -24,28 +24,15 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar"
-import { QrScanner } from "./qr_reading.js";
-import { InitSorting } from "./sorting.js";
-import { StickyScroll } from "./sticky_scroll.js";
+import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
 
 let Hooks = {
   QrScanner: QrScanner,
   InitSorting: InitSorting,
-  StickyScroll: StickyScroll
+  StickyScroll: StickyScroll,
+  ScrollToTop: ScrollToTop
 };
 
-Hooks.ScrollToTop = {
-  mounted() {
-    this.el.addEventListener("click", e => {
-      e.preventDefault()
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    })
-  }
-}
-
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },

assets/js/hooks/index.js

@@ -0,0 +1,4 @@
+export { QrScanner } from "./qr_reading.js";
+export { InitSorting } from "./sorting.js";
+export { StickyScroll } from "./sticky_scroll.js";
+export { ScrollToTop } from "./scroll_to_top.js";

assets/js/qr_reading.js → assets/js/hooks/qr_reading.js

@@ -1,4 +1,4 @@
-import { Html5Qrcode, Html5QrcodeSupportedFormats } from "../vendor/html5-qrcode.js"
+import { Html5Qrcode, Html5QrcodeSupportedFormats } from "../../vendor/html5-qrcode.js"
 
 function parseURL(url) {
   try {

assets/js/hooks/scroll_to_top.js

@@ -0,0 +1,11 @@
+export const ScrollToTop = {
+    mounted() {
+      this.el.addEventListener("click", e => {
+        e.preventDefault()
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      })
+    }
+}

assets/js/sorting.js → assets/js/hooks/sorting.js

@@ -1,4 +1,4 @@
-import Sortable from "../vendor/sortable.js"
+import Sortable from "../../vendor/sortable.js"
 
 export const InitSorting = {
   mounted() {

assets/js/sticky_scroll.js → assets/js/hooks/sticky_scroll.js

@@ -2,6 +2,7 @@ export const StickyScroll = {
     mounted() {
         window.addEventListener("scroll",() => {
             const panel = document.getElementById("scroll-panel");
+            if(panel == null) { window.removeEventListener("scroll", this); return; }
             if(window.innerHeight > panel.offsetHeight) return;
             panel.style.top = -Math.min(Math.max(window.scrollY, 0), panel.offsetHeight - window.innerHeight) + "px";
           });

assets/tailwind.config.js

@@ -1,6 +1,9 @@
 const colors = require("tailwindcss/colors");
 const plugin = require('tailwindcss/plugin');
 
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   darkMode: 'selector',
   content: [
@@ -25,23 +28,23 @@ module.exports = {
       },
       keyframes: {
         wave: {
-            '0%': { transform: 'rotate(0.0deg)' },
-            '15%': { transform: 'rotate(14.0deg)' },
-            '30%': { transform: 'rotate(-8.0deg)' },
-            '40%': { transform: 'rotate(14.0deg)' },
-            '50%': { transform: 'rotate(-4.0deg)' },
-            '60%': { transform: 'rotate(10.0deg)' },
-            '70%': { transform: 'rotate(0.0deg)' },
-            '100%': { transform: 'rotate(0.0deg)' },
+          '0%': { transform: 'rotate(0.0deg)' },
+          '15%': { transform: 'rotate(14.0deg)' },
+          '30%': { transform: 'rotate(-8.0deg)' },
+          '40%': { transform: 'rotate(14.0deg)' },
+          '50%': { transform: 'rotate(-4.0deg)' },
+          '60%': { transform: 'rotate(10.0deg)' },
+          '70%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
         },
         progress: {
-            '0%': { width: '0%' },
-            '100%': { width: '100%' },
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
         }
       },
       animation: {
-          wave: 'wave 1.5s infinite',
-          progress: 'progress 5s linear 1'
+        wave: 'wave 1.5s infinite',
+        progress: 'progress 5s linear 1'
       },
       backgroundSize: {
         '75': '75%'
@@ -50,9 +53,92 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+
+    // Embeds Heroicons (https://heroicons.com) into app.css bundle
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, { values })
+    }),
+
+    // Embeds Tabler icons (https://tablericons.com) into app.css bundle
+    plugin(function ({ matchComponents, theme }) {
+      let iconsDir = path.join(__dirname, "../deps/tabler_icons/icons")
+      let values = {}
+      let icons = [
+        ["", "/outline"],
+        ["-filled", "/filled"],
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+        })
+      })
+      matchComponents({
+        "tabler": ({ name, fullPath }) => {
+          let content = fs.readFileSync(fullPath).toString()
+            .replace(/\r?\n|\r/g, "")
+            .replace(/width="[^"]*"/, "")
+            .replace(/height="[^"]*"/, "");
+
+          return {
+            [`--tabler-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--tabler-${name})`,
+            "mask": `var(--tabler-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": theme("spacing.5"),
+            "height": theme("spacing.5")
+          }
+        }
+      }, { values })
+    })
   ]
 }

config/dev.exs

@@ -61,7 +61,7 @@ config :atomic, AtomicWeb.Endpoint,
     patterns: [
       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
-      ~r"lib/atomic_web/(live|views)/.*(ex)$",
+      ~r"lib/atomic_web/(live|views|components)/.*(ex)$",
       ~r"lib/atomic_web/templates/.*(eex)$",
       ~r"storybook/.*(exs)$"
     ]