Skip to content

Commit f55384c

Browse files
tvdeyentvdeyen
authored
Merge pull request #6226 from chaimann/admin-ui-alert-component
[Admin][UI] Alert component
2 parents 6be1858 + 74ca15d commit f55384c

9 files changed

Lines changed: 150 additions & 5 deletions

File tree

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div
2+
class="
3+
flex w-full justify-between min-h-[85px]
4+
rounded-lg p-4 border pointer-events-auto
5+
transform -translate-y-[150%] opacity-0 duration-500
6+
<%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
7+
"
8+
data-controller="alert-animation"
9+
data-alert-animation-animation-class="-translate-y-[150%] opacity-0"
10+
data-alert-animation-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
11+
role="dialog"
12+
aria-label="<%= @title %>"
13+
aria-live="polite"
14+
>
15+
<div class="flex">
16+
<div class="px-2">
17+
<%= icon %>
18+
</div>
19+
<div class="flex flex-col px-2 pt-1 gap-3">
20+
<p class="font-semibold text-base text-black leading-none"><%= @title %></p>
21+
<p class="font-normal text-sm text-black leading-none"><%= @description.html_safe %></p>
22+
</div>
23+
</div>
24+
<div>
25+
<button
26+
type="button"
27+
title="<%= t(".close") %>"
28+
aria-label="<%= t(".close") %>"
29+
data-action="alert-animation#close"
30+
data-alert-animation-target="closeButton"
31+
>
32+
<%= icon_tag('close-fill', class: "w-6 h-6 #{ICONS.dig(@scheme.to_sym, :class)}") %>
33+
</button>
34+
</div>
35+
</div>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# frozen_string_literal: true
2+
3+
class SolidusAdmin::UI::Alert::Component < SolidusAdmin::BaseComponent
4+
SCHEMES = {
5+
success: %w[
6+
border-forest bg-seafoam
7+
],
8+
warning: %w[
9+
border-orange bg-sazerac
10+
],
11+
danger: %w[
12+
border-red-500 bg-red-100 text-black
13+
],
14+
info: %w[
15+
border-gray-500 bg-gray-50
16+
],
17+
}
18+
19+
ICONS = {
20+
success: {
21+
name: "checkbox-circle-fill",
22+
class: "fill-forest",
23+
},
24+
warning: {
25+
name: "error-warning-fill",
26+
class: "fill-orange",
27+
},
28+
danger: {
29+
name: "error-warning-fill",
30+
class: "fill-red-500",
31+
},
32+
info: {
33+
name: "information-fill",
34+
class: "fill-gray-500",
35+
},
36+
}
37+
38+
def initialize(title:, description:, scheme: :success)
39+
@title = title
40+
@description = description
41+
@scheme = scheme
42+
end
43+
44+
def icon
45+
icon_tag(ICONS.dig(@scheme.to_sym, :name), class: "w-5 h-5 #{ICONS.dig(@scheme.to_sym, :class)}")
46+
end
47+
end

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
en:
2+
close: Close

‎admin/app/components/solidus_admin/ui/toast/component.html.erb‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
pointer-events-auto
77
<%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
88
"
9-
data-controller="<%= stimulus_id %>"
10-
data-<%= stimulus_id %>-animation-class="translate-y-full opacity-0"
11-
data-<%= stimulus_id %>-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
9+
data-controller="alert-animation"
10+
data-alert-animation-animation-class="translate-y-full opacity-0"
11+
data-alert-animation-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
1212
role="dialog"
1313
aria-label="<%= t(".#{@scheme}_label") %>"
1414
aria-live="polite"
@@ -21,9 +21,9 @@
2121
type="button"
2222
class="ml-2 align-text-bottom"
2323
title="<%= t('.close_text') %>"
24-
data-action="<%= stimulus_id %>#close"
24+
data-action="alert-animation#close"
2525
aria-label="<%= t('.close_text') %>"
26-
data-<%= stimulus_id %>-target="closeButton"
26+
data-alert-animation-target="closeButton"
2727
>
2828
<%= icon_tag('close-line', class: "w-[1.125rem] h-[1.125rem] fill-current") %>
2929
</button>

admin/app/components/solidus_admin/ui/toast/component.js renamed to admin/app/javascript/solidus_admin/controllers/alert_animation_controller.js

File renamed without changes.

‎admin/config/tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ module.exports = {
4242

4343
// Extra colors (not part of the original palette)
4444
"papaya-whip": "#f9e3d9",
45+
sazerac: "#fcf0dd",
4546

4647
// UI Red
4748
red: {

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# frozen_string_literal: true
2+
3+
# @component "ui/toast"
4+
class SolidusAdmin::UI::Alert::ComponentPreview < ViewComponent::Preview
5+
include SolidusAdmin::Preview
6+
7+
def overview
8+
render_with_template
9+
end
10+
end

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="flex flex-col gap-4">
2+
<div class="flex items-center">
3+
<h6 class="text-gray-500 mb-3 mt-0 w-1/6">
4+
Success
5+
</h6>
6+
7+
<div class="w-5/6">
8+
<%= 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) %>
9+
</div>
10+
</div>
11+
12+
<div class="flex items-center">
13+
<h6 class="text-gray-500 mb-3 mt-0 w-1/6">
14+
Warning
15+
</h6>
16+
17+
<div class="w-5/6">
18+
<%= 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) %>
19+
</div>
20+
</div>
21+
22+
<div class="flex items-center">
23+
<h6 class="text-gray-500 mb-3 mt-0 w-1/6">
24+
Danger
25+
</h6>
26+
27+
<div class="w-5/6">
28+
<%= render current_component.new(scheme: :danger, title: "Request was not completed", description: "Cannot destroy default store") %>
29+
</div>
30+
</div>
31+
32+
<div class="flex items-center">
33+
<h6 class="text-gray-500 mb-3 mt-0 w-1/6">
34+
Info
35+
</h6>
36+
37+
<div class="w-5/6">
38+
<%= 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) %>
39+
</div>
40+
</div>
41+
</div>

‎admin/spec/components/solidus_admin/ui/alert/component_spec.rb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
require "spec_helper"
4+
5+
RSpec.describe SolidusAdmin::UI::Alert::Component, type: :component do
6+
it "renders the overview preview" do
7+
render_preview(:overview)
8+
end
9+
end

0 commit comments

Comments
 (0)