Create UI component for alerts

Author: chaimann

admin/app/components/solidus_admin/ui/alert/component.html.erb

@@ -0,0 +1,35 @@
+<div
+  class="
+    flex w-full justify-between min-h-[85px]
+    rounded-lg p-4 border pointer-events-auto
+    transform -translate-y-[150%] opacity-0 duration-500
+    <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
+  "
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-animation-class="-translate-y-[150%] opacity-0"
+  data-<%= stimulus_id %>-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
+  role="dialog"
+  aria-label="<%= t(".#{@scheme}_label") %>"
+  aria-live="polite"
+>
+  <div class="flex">
+    <div class="px-2">
+      <%= icon %>
+    </div>
+    <div class="flex flex-col px-2 pt-1 gap-3">
+      <p class="font-semibold text-base text-black leading-none"><%= @title %></p>
+      <p class="font-normal text-sm text-black leading-none"><%= @description %></p>
+    </div>
+  </div>
+  <div>
+    <button
+      type="button"
+      title="<%= t(".close") %>"
+      aria-label="<%= t(".close") %>"
+      data-action="<%= stimulus_id %>#close"
+      data-<%= stimulus_id %>-target="closeButton"
+    >
+      <%= icon_tag('close-fill', class: "w-6 h-6 #{ICONS.dig(@scheme.to_sym, :class)}") %>
+    </button>
+  </div>
+</div>

admin/app/components/solidus_admin/ui/alert/component.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["closeButton"]
+  static classes = ["animation"]
+  static values = { transition: Number }
+
+  connect() {
+    this.closeButtonTarget.focus()
+
+    requestAnimationFrame(() => {
+      this.element.classList.remove(...this.animationClasses)
+    })
+  }
+
+  close() {
+    this.element.classList.add(...this.animationClasses)
+    setTimeout(() => this.element.remove(), this.transitionValue)
+  }
+}

admin/app/components/solidus_admin/ui/alert/component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Alert::Component < SolidusAdmin::BaseComponent
+  SCHEMES = {
+    success: %w[
+      border-forest bg-seafoam
+    ],
+    warning: %w[
+      border-orange bg-sazerac
+    ],
+    danger: %w[
+      border-red-500 bg-red-100 text-black
+    ],
+    info: %w[
+      border-gray-500 bg-gray-50
+    ],
+  }
+
+  ICONS = {
+    success: {
+      name: "checkbox-circle-fill",
+      class: "fill-forest",
+    },
+    warning: {
+      name: "error-warning-fill",
+      class: "fill-orange",
+    },
+    danger: {
+      name: "error-warning-fill",
+      class: "fill-red-500",
+    },
+    info: {
+      name: "information-fill",
+      class: "fill-gray-500",
+    },
+  }
+
+  def initialize(title:, description:, scheme: :success)
+    @title = title
+    @description = description
+    @scheme = scheme
+  end
+
+  def icon
+    icon_tag(ICONS.dig(@scheme.to_sym, :name), class: "w-5 h-5 #{ICONS.dig(@scheme.to_sym, :class)}")
+  end
+end

admin/app/components/solidus_admin/ui/alert/component.yml

@@ -0,0 +1,2 @@
+en:
+  close: Close

admin/config/tailwind.config.js

@@ -42,6 +42,7 @@ module.exports = {
 
         // Extra colors (not part of the original palette)
         "papaya-whip": "#f9e3d9",
+        sazerac: "#fcf0dd",
 
         // UI Red
         red: {

admin/spec/components/previews/solidus_admin/ui/alert/component_preview.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# @component "ui/toast"
+class SolidusAdmin::UI::Alert::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+end

admin/spec/components/previews/solidus_admin/ui/alert/component_preview/overview.html.erb

@@ -0,0 +1,41 @@
+<div class="flex flex-col gap-4">
+  <div class="flex items-center">
+    <h6 class="text-gray-500 mb-3 mt-0 w-1/6">
+      Success
+    </h6>
+
+    <div class="w-5/6">
+      <%= render current_component.new(scheme: :success, title: "Added Solidus T-Shirt", description: "<a href='#' class='underline'>Add another product</a> or <a href='#' class='underline'>view product in a new window</a>".html_safe) %>
+    </div>
+  </div>
+
+  <div class="flex items-center">
+    <h6 class="text-gray-500 mb-3 mt-0 w-1/6">
+      Warning
+    </h6>
+
+    <div class="w-5/6">
+      <%= render current_component.new(scheme: :warning, title: "No active stock locations left", description: "You can assign new active stock location <a href='#' class='underline'>here</a>".html_safe) %>
+    </div>
+  </div>
+
+  <div class="flex items-center">
+    <h6 class="text-gray-500 mb-3 mt-0 w-1/6">
+      Danger
+    </h6>
+
+    <div class="w-5/6">
+      <%= render current_component.new(scheme: :danger, title: "Request was not completed", description: "Cannot destroy default store") %>
+    </div>
+  </div>
+
+  <div class="flex items-center">
+    <h6 class="text-gray-500 mb-3 mt-0 w-1/6">
+      Info
+    </h6>
+
+    <div class="w-5/6">
+      <%= render current_component.new(scheme: :info, title: "Locales available", description: "Did you know you can update storefront locales <a href='#' class='underline'>here</a>?".html_safe) %>
+    </div>
+  </div>
+</div>