Merge branch 'develop' into nm/calendar

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/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,55 @@ 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})
+    })
   ]
 }

lib/atomic/schema.ex

@@ -2,16 +2,16 @@ defmodule Atomic.Schema do
   @moduledoc """
   The application Schema for all the modules, providing Ecto.UUIDs as default id.
   """
-  alias Atomic.Time
+  use Gettext, backend: AtomicWeb.Gettext
 
-  import AtomicWeb.Gettext
+  alias Atomic.Time
 
   defmacro __using__(_) do
     quote do
       use Ecto.Schema
       use Waffle.Ecto.Schema
+      use Gettext, backend: AtomicWeb.Gettext
 
-      import AtomicWeb.Gettext
       import Ecto.Changeset
       import Ecto.Query
 

lib/atomic_web.ex

@@ -20,9 +20,10 @@ defmodule AtomicWeb do
   def controller do
     quote do
       use Phoenix.Controller, namespace: AtomicWeb
+      use Gettext, backend: AtomicWeb.Gettext
 
       import Plug.Conn
-      import AtomicWeb.Gettext
+
       alias AtomicWeb.Router.Helpers, as: Routes
     end
   end
@@ -80,7 +81,7 @@ defmodule AtomicWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import AtomicWeb.Gettext
+      use Gettext, backend: AtomicWeb.Gettext
     end
   end
 
@@ -99,8 +100,10 @@ defmodule AtomicWeb do
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
+      # Custom imports
+      use Gettext, backend: AtomicWeb.Gettext
+
       import AtomicWeb.ErrorHelpers
-      import AtomicWeb.Gettext
       import AtomicWeb.Helpers
 
       alias Atomic.Uploaders

lib/atomic_web/components/activity.ex

@@ -46,21 +46,21 @@ defmodule AtomicWeb.Components.Activity do
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:clock} solid class="h-5 w-5" />
+              <.icon name="hero-clock-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:user_group} solid class="h-5 w-5" />
+              <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
               <span class="sr-only">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:map_pin} solid class="h-5 w-5" />
+              <.icon name="hero-map-pin-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.location.name %></span>
               <span class="sr-only">location</span>
             </span>

lib/atomic_web/components/avatar.ex

@@ -21,7 +21,7 @@ defmodule AtomicWeb.Components.Avatar do
     doc: "The size of the avatar."
 
   attr :color, :atom,
-    default: :primary,
+    default: :light_gray,
     values: [
       :primary,
       :secondary,
@@ -36,13 +36,13 @@ defmodule AtomicWeb.Components.Avatar do
       :light,
       :dark
     ],
-    doc: "Button color."
+    doc: "Avatar color."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
 
   def avatar(assigns) do
     ~H"""
-    <span class={generate_classes(assigns)}>
+    <span class={generate_avatar_classes(assigns)}>
       <%= if @src do %>
         <img src={@src} class={"atomic-avatar--#{assigns.type} h-full w-full"} />
       <% else %>
@@ -56,7 +56,62 @@ defmodule AtomicWeb.Components.Avatar do
     """
   end
 
-  defp generate_classes(assigns) do
+  attr :items, :list, required: true, doc: "The list of avatars to display."
+
+  attr :spacing, :integer,
+    default: -1,
+    values: [-3, -2, -1, 0, 1, 2, 3],
+    doc: "The spacing between avatars."
+
+  attr :type, :atom,
+    values: [:user, :organization, :company],
+    default: :user,
+    doc: "The type of entity associated with the avatars."
+
+  attr :size, :atom,
+    values: [:xs, :sm, :md, :lg, :xl],
+    default: :md,
+    doc: "The size of the avatars."
+
+  attr :color, :atom,
+    default: :light_gray,
+    values: [
+      :primary,
+      :secondary,
+      :info,
+      :success,
+      :warning,
+      :danger,
+      :gray,
+      :light_gray,
+      :pure_white,
+      :white,
+      :light,
+      :dark
+    ],
+    doc: "Avatar color."
+
+  attr :wrap, :boolean, default: false, doc: "Whether to wrap the avatars in a flex container."
+
+  attr :class, :string, default: "", doc: "Additional classes to apply to the component."
+
+  attr :avatar_class, :string,
+    default: "",
+    doc: "Additional classes to apply to the individual avatars."
+
+  def avatar_group(assigns) do
+    ~H"""
+    <ul class={"#{generate_avatar_group_spacing_class(@spacing)} #{if @wrap do "flex-wrap" end} #{@class} flex flex-row"}>
+      <%= for item <- @items do %>
+        <li>
+          <.avatar name={item[:name]} src={item[:src]} type={@type} size={@size} color={@color} class={"#{@avatar_class} atomic-avatar-grouped"} auto_generate_initials={Map.get(item, :auto_generate_initials, true)} />
+        </li>
+      <% end %>
+    </ul>
+    """
+  end
+
+  defp generate_avatar_classes(assigns) do
     [
       "atomic-avatar",
       assigns.src && "atomic-avatar--src",
@@ -66,4 +121,16 @@ defmodule AtomicWeb.Components.Avatar do
       assigns.class
     ]
   end
+
+  defp generate_avatar_group_spacing_class(spacing) do
+    %{
+      -3 => "-space-x-3",
+      -2 => "-space-x-2",
+      -1 => "-space-x-1",
+      0 => "space-x-0",
+      1 => "space-x-1",
+      2 => "space-x-2",
+      3 => "space-x-3"
+    }[spacing]
+  end
 end

lib/atomic_web/components/badge.ex

@@ -24,19 +24,18 @@ defmodule AtomicWeb.Components.Badge do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the badge."
   attr :label, :string, default: nil, doc: "Badge label."
-  attr :rest, :global
-  slot :inner_block, required: false
+
+  attr :rest, :global,
+    include:
+      ~w(csrf_token disabled download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
+    doc: "Arbitrary HTML or phx attributes."
+
+  slot :inner_block, required: false, doc: "Slot for the content of the badge."
 
   def badge(assigns) do
     ~H"""
@@ -50,11 +49,11 @@ defmodule AtomicWeb.Components.Badge do
       ]}
     >
       <%= if @icon && @icon_position == :left do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
       <%= render_slot(@inner_block) || @label %>
       <%= if @icon && @icon_position == :right do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
     </div>
     """

lib/atomic_web/components/button.ex

@@ -45,13 +45,7 @@ defmodule AtomicWeb.Components.Button do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
@@ -127,7 +121,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
     """
   end