From e0998af2b0c2afa7550e62a0b1d8db00d40bf2c4 Mon Sep 17 00:00:00 2001 From: briar Date: Tue, 8 Apr 2025 21:08:38 +0100 Subject: [PATCH 1/6] Add: ChatBubble and test --- lib/petal_components.ex | 1 + lib/petal_components/chat_bubble.ex | 837 ++++++++++++++++++++++++++++ test/petal/chat_bubble_test.exs | 214 +++++++ 3 files changed, 1052 insertions(+) create mode 100644 lib/petal_components/chat_bubble.ex create mode 100644 test/petal/chat_bubble_test.exs diff --git a/lib/petal_components.ex b/lib/petal_components.ex index e02633a8..d185e8e8 100644 --- a/lib/petal_components.ex +++ b/lib/petal_components.ex @@ -10,6 +10,7 @@ defmodule PetalComponents do Button, ButtonGroup, Card, + ChatBubble, Container, Dropdown, Field, diff --git a/lib/petal_components/chat_bubble.ex b/lib/petal_components/chat_bubble.ex new file mode 100644 index 00000000..ddf1f7da --- /dev/null +++ b/lib/petal_components/chat_bubble.ex @@ -0,0 +1,837 @@ +defmodule PetalComponents.ChatBubble do + use Phoenix.Component + + attr(:kind, :atom, + default: :default_chat_bubble, + doc: "chat_bubble", + values: [ + :default_chat_bubble, + :voice_note_message, + :file_attachment, + :image_attachment, + :image_gallery, + :url_preview_sharing, + :outline_chat_bubble, + :outline_voicenote, + :outline_file_attachment, + :outline_image_attachment, + :outline_image_gallery, + :outline_url_preview_sharing, + :clean_chat_bubble, + :clean_voicenote, + :clean_file_attachment, + :clean_image_attachment, + :clean_image_gallery, + :clean_url_preview_sharing + ] + ) + + attr(:author, :string, default: "Sarah Hill") + attr(:message, :string, default: "That's awesome. I think our users will really appreciate the improvements.") + attr(:time, :string, default: "10.13") + + + + def chat_bubble(%{kind: :default_chat_bubble} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+

<%= @message %>

+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :voice_note_message} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+ + + 3:42 +
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :file_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+
+ <%= @author %> + <%= @time %> +
+
+
+ + + Flowbite Terms & Conditions + + + 12 Pages + + 18 MB + + PDF + +
+
+ +
+
+ Delivered +
+
+
+ """ + end + + def chat_bubble(%{kind: :image_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+
+ <%= @author %> + <%= @time %> +
+

This is the new office

+ +
+
+ + +
+ Download image +
+
+ +
+ Delivered +
+
+
+ """ + end + + def chat_bubble(%{kind: :image_gallery} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+
+ <%= @author %> + <%= @time %> +
+

This is the new office

+ +
+ + + + + +
+ + +
+
+ +
+ Delivered + +
+
+
+
+ """ + end + + def chat_bubble(%{kind: :url_preview_sharing} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+

Check out this open-source UI component library based on Tailwind CSS:

+

https://petal.build/components

+ + + Welcome to Petal Components 👋 A versatile set of beautifully styled components ... + github.com + + Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_chat_bubble} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

<%= @message %>some. I think our users will really appreciate the improvements.

+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_voicenote} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+
+ + + 3:42 +
+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_file_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+
+
+ + + Flowbite Terms & Conditions + + + 12 Pages + + 18 MB + + PDF + +
+
+ +
+
+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_image_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

I'm working from home today! 😅

+
+
+ + +
+ +
+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_image_gallery} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

I'm working from home today! 😅

+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+ + +
+
+
+ +
+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :outline_url_preview_sharing} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

Check out this open-source UI component library based on Tailwind CSS:

+

https://petal.build/components

+ + + GitHub - themesberg/flowbite: The most popular and open source libra ... + github.com + +
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :chat_bubble} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+

<%= @message %>some. I think our users will really appreciate the improvements.

+ Delivered +
+
+ + """ + end + + def chat_bubble(%{kind: :clean_chat_bubble} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+

<%= @message %>

+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :clean_voicenote} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+
+ + + 3:42 +
+
+ Delivered +
+
+ """ + end + + + + + def chat_bubble(%{kind: :clean_file_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+
+
+ + + Flowbite Terms & Conditions + + + 12 Pages + + 18 MB + + PDF + +
+
+ +
+
+
+ Delivered +
+
+ """ + end + + def chat_bubble(%{kind: :clean_image_attachment} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

This is the new office

+
+
+ + +
+ +
+
+ Delivered +
+
+ """ + end + + + + def chat_bubble(%{kind: :clean_image_gallery} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ <%= @author %> + <%= @time %> +
+
+

This is the new office

+
+
+
+ + + +
+ Download image +
+
+
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+ + + +
+
+
+
+ Delivered + +
+
+
+ """ + end + + def chat_bubble(%{kind: :clean_url_preview_sharing} = assigns) do + ~H""" +
+ {@author " image"}> +
+
+ Megan Archer + <%= @time %> +
+

Check out this UI component library for Phoenix web applications using Tailwind CSS and AlpineJS:

+

https://petal.build/components

+ + + GitHub - themesberg/flowbite: The most popular and open source libra ... + github.com + + Delivered +
+
+ """ + end +end diff --git a/test/petal/chat_bubble_test.exs b/test/petal/chat_bubble_test.exs new file mode 100644 index 00000000..5dd8f755 --- /dev/null +++ b/test/petal/chat_bubble_test.exs @@ -0,0 +1,214 @@ +defmodule PetalComponents.ChatBubbleTest do + use ComponentCase + import PetalComponents.ChatBubble + + test "renders chat_bubble without specifying kind" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as default_chat_bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:default_chat_bubble} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as voice_note_message" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:voice_note_message} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as file_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:file_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as image_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:image_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + + test "renders chat_bubble specifying kind as image_gallery" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:image_gallery} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as url_preview_sharing" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:url_preview_sharing} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_chat_bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_chat_bubble} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_voicenote" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_voicenote} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_file_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_file_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_image_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_image_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_image_gallery" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_image_gallery} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as outline_url_preview_sharing" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:outline_url_preview_sharing} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_chat_bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_chat_bubble} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_voicenote" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_voicenote} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_file_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_file_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_image_attachment" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_image_attachment} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_image_gallery" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_image_gallery} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end + + test "renders chat_bubble specifying kind as clean_url_preview_sharing" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble kind={:clean_url_preview_sharing} /> + """) + + assert html =~ "class=\"flex items-start gap-2.5\"" + end +end \ No newline at end of file From be45526a0dcf640309706c5767d70a0a6a797aa8 Mon Sep 17 00:00:00 2001 From: briar Date: Tue, 8 Apr 2025 21:37:30 +0100 Subject: [PATCH 2/6] Updated text for consistency --- lib/petal_components/chat_bubble.ex | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/petal_components/chat_bubble.ex b/lib/petal_components/chat_bubble.ex index ddf1f7da..512c4fb4 100644 --- a/lib/petal_components/chat_bubble.ex +++ b/lib/petal_components/chat_bubble.ex @@ -129,7 +129,7 @@ defmodule PetalComponents.ChatBubble do - Flowbite Terms & Conditions + Petal Components Terms & Conditions 12 Pages @@ -372,7 +372,7 @@ defmodule PetalComponents.ChatBubble do - Flowbite Terms & Conditions + Petal Components Terms & Conditions 12 Pages @@ -527,7 +527,7 @@ defmodule PetalComponents.ChatBubble do

https://petal.build/components

- GitHub - themesberg/flowbite: The most popular and open source libra ... + Check out this UI component library for Phoenix web applications using Tailwind... github.com @@ -656,7 +656,7 @@ defmodule PetalComponents.ChatBubble do - Flowbite Terms & Conditions + Petal Components Terms & Conditions 12 Pages @@ -819,14 +819,14 @@ defmodule PetalComponents.ChatBubble do {@author " image"}>
- Megan Archer + Sarah Hill <%= @time %>

Check out this UI component library for Phoenix web applications using Tailwind CSS and AlpineJS:

https://petal.build/components

- GitHub - themesberg/flowbite: The most popular and open source libra ... + Check out this UI component library for Phoenix web applications using Tailwind... github.com Delivered From a8677e97d0200393b9b14f136f8a5d3aa95814a2 Mon Sep 17 00:00:00 2001 From: briar Date: Wed, 9 Apr 2025 15:58:01 +0100 Subject: [PATCH 3/6] Modified chatbubble variants implementing assigns preprocessing method for passing map values and added associated tests --- lib/petal_components/chat_bubble.ex | 1831 ++++++++++++++++----------- test/petal/chat_bubble_test.exs | 630 ++++++--- 2 files changed, 1479 insertions(+), 982 deletions(-) diff --git a/lib/petal_components/chat_bubble.ex b/lib/petal_components/chat_bubble.ex index 512c4fb4..e7042a4d 100644 --- a/lib/petal_components/chat_bubble.ex +++ b/lib/petal_components/chat_bubble.ex @@ -1,837 +1,1122 @@ defmodule PetalComponents.ChatBubble do use Phoenix.Component - attr(:kind, :atom, - default: :default_chat_bubble, - doc: "chat_bubble", + # Base chat bubble component + attr(:author, :string, default: "Sarah Hill", doc: "author name for the chat message") + attr(:message, :string, default: "That's awesome. I think our users will really appreciate the improvements.", doc: "main message content") + attr(:time, :string, default: "10:13", doc: "timestamp for the message") + attr(:avatar_src, :string, default: "https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg", doc: "hosted avatar URL") + attr(:avatar_alt, :string, default: nil, doc: "alt text for avatar image") + attr(:kind, :atom, default: :default_chat_bubble, values: [ - :default_chat_bubble, - :voice_note_message, - :file_attachment, - :image_attachment, - :image_gallery, - :url_preview_sharing, - :outline_chat_bubble, - :outline_voicenote, - :outline_file_attachment, - :outline_image_attachment, - :outline_image_gallery, - :outline_url_preview_sharing, - :clean_chat_bubble, - :clean_voicenote, - :clean_file_attachment, - :clean_image_attachment, - :clean_image_gallery, - :clean_url_preview_sharing - ] + :default_chat_bubble, :voicenote, :file_attachment, + :image_attachment, :image_gallery, :url_preview_sharing, + :outline_chat_bubble, :outline_voicenote, :outline_file_attachment, + :outline_image_attachment, :outline_image_gallery, :outline_url_preview_sharing, + :clean_chat_bubble, :clean_voicenote, :clean_file_attachment, + :clean_image_attachment, :clean_image_gallery, :clean_url_preview_sharing + ], + doc: "determines the type of chat bubble to render" ) + attr(:class, :any, default: nil, doc: "additional css classes") + attr(:rest, :global) - attr(:author, :string, default: "Sarah Hill") - attr(:message, :string, default: "That's awesome. I think our users will really appreciate the improvements.") - attr(:time, :string, default: "10.13") + # File attributes + attr(:file_name, :string, default: "Petal Components Terms & Conditions", doc: "name of the attached file") + attr(:file_size, :string, default: "18 MB", doc: "size of the attached file") + attr(:file_pages, :string, default: "12 Pages", doc: "number of pages in document") + attr(:file_type, :string, default: "PDF", doc: "type of file") + + # Voice note attributes + attr(:duration, :string, default: "3:42", doc: "duration of voice note") + + # Image attributes + attr(:image_src, :string, default: "https://images.unsplash.com/photo-1562664377-709f2c337eb2", doc: "URL of the attached image") + attr(:image_alt, :string, default: "Image attachment", doc: "alt text for attached image") + + # Gallery attributes + attr(:images, :list, + default: [ + "https://images.unsplash.com/photo-1552664730-d307ca884978", + "https://images.unsplash.com/photo-1551434678-e076c223a692", + "https://images.unsplash.com/photo-1562664377-709f2c337eb2", + "https://petal.build/images/logo_dark.svg" + ], + doc: "list of gallery image URLs" + ) + attr(:extra_images_count, :integer, default: 7, doc: "number of additional images not shown") + + # URL Preview attributes + attr(:url, :string, default: "https://petal.build/components", doc: "URL to preview") + attr(:url_title, :string, default: "Welcome to Petal Components", doc: "title of the URL preview") + attr(:url_description, :string, default: "A versatile set of beautifully styled components", doc: "description for the URL preview") + attr(:url_image, :string, default: "https://petal.build/images/favicon.png", doc: "image for the URL preview") + attr(:url_domain, :string, default: "github.com", doc: "domain name for the URL") + + def chat_bubble(assigns) do + case assigns.kind do + :default_chat_bubble -> render_default_chat_bubble(assigns) + :voicenote -> render_voicenote(assigns) + :file_attachment -> render_file_attachment(assigns) + :image_attachment -> render_image_attachment(assigns) + :image_gallery -> render_image_gallery(assigns) + :url_preview_sharing -> render_url_preview_sharing(assigns) + + # Outline variants + :outline_chat_bubble -> render_outline_chat_bubble(assigns) + :outline_voicenote -> render_outline_voicenote(assigns) + :outline_file_attachment -> render_outline_file_attachment(assigns) + :outline_image_attachment -> render_outline_image_attachment(assigns) + :outline_image_gallery -> render_outline_image_gallery(assigns) + :outline_url_preview_sharing -> render_outline_url_preview_sharing(assigns) + + # Clean variants + :clean_chat_bubble -> render_clean_chat_bubble(assigns) + :clean_voicenote -> render_clean_voicenote(assigns) + :clean_file_attachment -> render_clean_file_attachment(assigns) + :clean_image_attachment -> render_clean_image_attachment(assigns) + :clean_image_gallery -> render_clean_image_gallery(assigns) + :clean_url_preview_sharing -> render_clean_url_preview_sharing(assigns) + + # Default fallback + _ -> render_default_chat_bubble(assigns) + end + end + defp render_header(assigns) do + ~H""" +
+ <%= @author %> + <%= @time %> +
+ """ +end + +defp render_default_chat_bubble(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+ Delivered +
+
+
+ """ +end - def chat_bubble(%{kind: :default_chat_bubble} = assigns) do - ~H""" -
- {@author " image"}> -
-
+defp render_waveform(assigns) do + ~H""" +
+ + + <%= assigns[:duration] %> +
+ """ +end + +defp render_voicenote(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:duration, assigns[:duration]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> + <%= render_waveform(assigns) %> + Delivered +
+
+
+ """ +end + +defp render_file_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:file_name, assigns[:file_name]) + |> assign(:file_size, assigns[:file_size]) + |> assign(:file_pages, assigns[:file_pages]) + |> assign(:file_type, assigns[:file_type]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+
+
<%= @author %> <%= @time %> +
+
+
+ + + <%= @file_name %> + + + <%= @file_pages %> + + <%= @file_size %> + + <%= @file_type %> +
-

<%= @message %>

- Delivered -
-
- """ - end - - def chat_bubble(%{kind: :voice_note_message} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
- -
+ + +
+ Download file +
- Delivered -
+
+ Delivered
- """ - end +
+
+
+ """ +end - def chat_bubble(%{kind: :file_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
-
- <%= @author %> - <%= @time %> -
-
-
- - - Petal Components Terms & Conditions - - - 12 Pages - - 18 MB - - PDF - -
-
- -
-
- Delivered -
-
-
- """ - end +defp render_image_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:image_src, assigns[:image_src]) + |> assign(:image_alt, assigns[:image_alt]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :image_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
-
- <%= @author %> - <%= @time %> -
-

This is the new office

- -
-
- - -
- Download image -
-
- -
- Delivered + ~H""" +
+
+ {@avatar_alt} +
+
+
+ <%= @author %> + <%= @time %> +
+

<%= @message %>

+ +
+
+ + +
+ Download image +
+ {@image_alt} +
+ Delivered
-
- """ - end +
+
+
+ """ +end + +defp render_image_gallery(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:images, assigns[:images] || []) + |> assign(:extra_images_count, assigns[:extra_images_count] || 0) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :image_gallery} = assigns) do - ~H""" -
- {@author " image"}> -
-
-
- <%= @author %> - <%= @time %> + ~H""" +
+
+ {@avatar_alt} +
+
+
+ <%= @author %> + <%= @time %> +
+

<%= @message %>

+ + +
+ + <%= for {img, _index} <- Enum.with_index(Enum.take(@images, 3)) do %> +
+
+ + +
+ Download image +
-

This is the new office

- -
- - - - - -
- - -
-
- -
- Delivered - -
+ +
+ <% end %> + + +
+ +
+ View more +
+ <%= if length(@images) > 3 do %> + + <% else %> +
+ <% end %>
-
-
- """ - end +
- def chat_bubble(%{kind: :url_preview_sharing} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-

Check out this open-source UI component library based on Tailwind CSS:

-

https://petal.build/components

- - - Welcome to Petal Components 👋 A versatile set of beautifully styled components ... - github.com - +
Delivered + +
-
- """ - end +
+
+
+ """ +end - def chat_bubble(%{kind: :outline_chat_bubble} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

<%= @message %>some. I think our users will really appreciate the improvements.

-
- Delivered -
+defp render_url_preview_sharing(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:url, assigns[:url]) + |> assign(:url_title, assigns[:url_title]) + |> assign(:url_description, assigns[:url_description]) + |> assign(:url_image, assigns[:url_image]) + |> assign(:url_domain, assigns[:url_domain]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+

+ <%= @url %> +

+ + +
+

<%= @url_title %>

+

<%= @url_description %>

+ + + <%= @url_domain %> + +
+ + Delivered +
+
+
+ """ +end + +defp render_outline_chat_bubble(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+

<%= @message %>

- """ - end - - def chat_bubble(%{kind: :outline_voicenote} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-
- - - 3:42 -
-
- Delivered -
+ Delivered +
+
+
+ """ +end + +defp render_outline_voicenote(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+ <%= render_waveform(assigns) %>
- """ - end + Delivered +
+
+
+ """ +end + +defp render_outline_file_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:file_name, assigns[:file_name]) + |> assign(:file_size, assigns[:file_size]) + |> assign(:file_pages, assigns[:file_pages]) + |> assign(:file_type, assigns[:file_type]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :outline_file_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+
+
+ + + <%= @file_name %> + + + <%= @file_pages %> + + <%= @file_size %> + + <%= @file_type %> +
-
-
-
- - - Petal Components Terms & Conditions - - - 12 Pages - - 18 MB - - PDF - -
-
- -
-
+ +
+ +
+ Download file +
- Delivered +
-
- """ - end + Delivered +
+
+
+ """ +end - def chat_bubble(%{kind: :outline_image_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

I'm working from home today! 😅

-
-
- - -
- -
+defp render_outline_image_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:image_src, assigns[:image_src]) + |> assign(:image_alt, assigns[:image_alt]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+
+
+
+ +
+ Download image +
- Delivered -
+ {@image_alt} +
- """ - end + Delivered +
+
+
+ """ +end - def chat_bubble(%{kind: :outline_image_gallery} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

I'm working from home today! 😅

-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
- - -
-
-
- +defp render_outline_image_gallery(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:images, assigns[:images] || []) + |> assign(:extra_images_count, assigns[:extra_images_count] || 0) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+
+ +
+ <%= for {img, _index} <- Enum.with_index(Enum.take(@images, 3)) do %> +
+
+ +
+ Download image +
-
- Delivered -
-
- """ - end + +
+ <% end %> + +
+ +
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

Check out this open-source UI component library based on Tailwind CSS:

-

https://petal.build/components

- - - Check out this UI component library for Phoenix web applications using Tailwind... - github.com - + > + View more +
+ <%= if length(@images) > 3 do %> + + <% else %> +
+ <% end %>
- Delivered -
-
- """ - end +
- def chat_bubble(%{kind: :chat_bubble} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-

<%= @message %>some. I think our users will really appreciate the improvements.

- Delivered + +
+ +
+
+ Delivered +
+
+
+ """ +end + +defp render_outline_url_preview_sharing(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:url, assigns[:url]) + |> assign(:url_title, assigns[:url_title]) + |> assign(:url_description, assigns[:url_description]) + |> assign(:url_image, assigns[:url_image]) + |> assign(:url_domain, assigns[:url_domain]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+
+

+ <%= @url %> +

+ + +
+

<%= @url_title %>

+

<%= @url_description %>

+ + + <%= @url_domain %> +
+
+ Delivered +
+
+
+ """ +end - """ - end +defp render_clean_chat_bubble(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :clean_chat_bubble} = assigns) do - ~H""" + ~H""" +
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
+ {@avatar_alt} +
+ <%= render_header(assigns) %>

<%= @message %>

Delivered -
+
- """ - end - - def chat_bubble(%{kind: :clean_voicenote} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-
- - - 3:42 -
-
- Delivered -
-
- """ - end +
+ """ +end +defp render_clean_voicenote(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> + <%= render_waveform(assigns) %> + Delivered +
+
+
+ """ +end +defp render_clean_file_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:file_name, assigns[:file_name]) + |> assign(:file_size, assigns[:file_size]) + |> assign(:file_pages, assigns[:file_pages]) + |> assign(:file_type, assigns[:file_type]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :clean_file_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-
-
- - - Petal Components Terms & Conditions - - - 12 Pages - - 18 MB - - PDF - -
-
- -
-
+ ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+
+ + + <%= @file_name %> + + + <%= @file_pages %> + + <%= @file_size %> + + <%= @file_type %> + +
+
+ +
+ Download file
- Delivered -
+
- """ - end + Delivered +
+
+
+ """ +end - def chat_bubble(%{kind: :clean_image_attachment} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

This is the new office

-
-
- - -
- -
-
- Delivered +defp render_clean_image_attachment(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:image_src, assigns[:image_src]) + |> assign(:image_alt, assigns[:image_alt]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+

<%= @message %>

+
+
+
+ +
+ Download image +
+
+ {@image_alt} +
- """ - end + Delivered +
+
+
+ """ +end - +defp render_clean_image_gallery(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:images, assigns[:images] || []) + |> assign(:extra_images_count, assigns[:extra_images_count] || 0) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) - def chat_bubble(%{kind: :clean_image_gallery} = assigns) do - ~H""" -
- {@author " image"}> -
-
- <%= @author %> - <%= @time %> -
-
-

This is the new office

-
-
-
- - - -
- Download image -
-
-
- -
-
-
- - -
- -
-
-
- - -
- -
-
- - - -
-
-
-
- Delivered - -
-
-
- """ - end - - def chat_bubble(%{kind: :clean_url_preview_sharing} = assigns) do - ~H""" -
- {@author " image"}> -
-
- Sarah Hill - <%= @time %> + + +
+ Download image +
-

Check out this UI component library for Phoenix web applications using Tailwind CSS and AlpineJS:

-

https://petal.build/components

- - - Check out this UI component library for Phoenix web applications using Tailwind... - github.com - - Delivered + +
+ <% end %> + + +
+ +
+ View more +
+ <%= if length(@images) > 3 do %> + + <% else %> +
+ <% end %>
+
+
+ Delivered + +
+
- """ - end +
+
+
+ """ +end + +defp render_clean_url_preview_sharing(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:url, assigns[:url]) + |> assign(:url_title, assigns[:url_title]) + |> assign(:url_description, assigns[:url_description]) + |> assign(:url_image, assigns[:url_image]) + |> assign(:url_domain, assigns[:url_domain]) + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+

+ <%= @url %> +

+ + +
+

<%= @url_title %>

+

<%= @url_description %>

+ + + <%= @url_domain %> + +
+ + Delivered +
+
+
+ """ +end + end diff --git a/test/petal/chat_bubble_test.exs b/test/petal/chat_bubble_test.exs index 5dd8f755..e0a05850 100644 --- a/test/petal/chat_bubble_test.exs +++ b/test/petal/chat_bubble_test.exs @@ -2,213 +2,425 @@ defmodule PetalComponents.ChatBubbleTest do use ComponentCase import PetalComponents.ChatBubble - test "renders chat_bubble without specifying kind" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as default_chat_bubble" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:default_chat_bubble} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as voice_note_message" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:voice_note_message} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as file_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:file_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as image_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:image_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - - test "renders chat_bubble specifying kind as image_gallery" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:image_gallery} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as url_preview_sharing" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:url_preview_sharing} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_chat_bubble" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_chat_bubble} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_voicenote" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_voicenote} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_file_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_file_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_image_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_image_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_image_gallery" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_image_gallery} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as outline_url_preview_sharing" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:outline_url_preview_sharing} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_chat_bubble" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_chat_bubble} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_voicenote" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_voicenote} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_file_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_file_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_image_attachment" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_image_attachment} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_image_gallery" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_image_gallery} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end - - test "renders chat_bubble specifying kind as clean_url_preview_sharing" do - assigns = %{} - - html = - rendered_to_string(~H""" - <.chat_bubble kind={:clean_url_preview_sharing} /> - """) - - assert html =~ "class=\"flex items-start gap-2.5\"" - end +test "default chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + author="Test User" + message="Hello world" + time="12:45" + /> + """) + + assert html =~ "Test User" + assert html =~ "Hello world" + assert html =~ "12:45" + assert html =~ "Delivered" + assert html =~ "pc-chat-bubble--default" +end + +test "voice note chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:voicenote} + author="Voice User" + time="15:20" + duration="2:15" + /> + """) + + assert html =~ "Voice User" + assert html =~ "15:20" + assert html =~ "2:15" + assert html =~ "pc-chat-bubble--voice-note" + assert html =~ ~s( + """) + + assert html =~ "File User" + assert html =~ "16:45" + assert html =~ "Petal Components Terms & Conditions" + assert html =~ "18 MB" + assert html =~ "12 Pages" + assert html =~ "PDF" + assert html =~ "pc-chat-bubble--file-attachment" + assert html =~ "Download file" +end + +test "image attachment chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:image_attachment} + author="Image User" + time="17:00" + image_src="https://example.com/image.jpg" + image_alt="Example image" + /> + """) + + assert html =~ "Image User" + assert html =~ "17:00" + assert html =~ ~s(src="https://example.com/image.jpg") + assert html =~ ~s(alt="Example image") + assert html =~ "pc-chat-bubble--image-attachment" +end + +test "image gallery chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:image_gallery} + author="Gallery User" + time="18:00" + images={[ + "https://example.com/image1.jpg", + "https://example.com/image2.jpg", + "https://example.com/image3.jpg", + "https://example.com/image4.jpg" + ]} + extra_images_count={2} + /> + """) + + assert html =~ "Gallery User" + assert html =~ "18:00" + assert html =~ ~s(src="https://example.com/image1.jpg") + assert html =~ ~s(src="https://example.com/image2.jpg") + assert html =~ ~s(src="https://example.com/image3.jpg") + assert html =~ ~s(src="https://example.com/image4.jpg") + assert html =~ "pc-chat-bubble--image-gallery" +end + +test "URL preview sharing chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:url_preview_sharing} + author="URL User" + time="19:00" + url="https://example.com" + url_title="Example Title" + url_description="Example Description" + url_image="https://example.com/image.jpg" + url_domain="example.com" + /> + """) + + assert html =~ "URL User" + assert html =~ "19:00" + assert html =~ ~s(href="https://example.com") + assert html =~ "Example Title" + assert html =~ "Example Description" + assert html =~ ~s(src="https://example.com/image.jpg") + assert html =~ "example.com" + assert html =~ "pc-chat-bubble--url-preview" +end + +test "outline chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:outline_chat_bubble} + author="Outline User" + time="20:00" + message="Outline message" + /> + """) + + assert html =~ "Outline User" + assert html =~ "20:00" + assert html =~ "Outline message" + assert html =~ "Delivered" + assert html =~ "pc-chat-bubble--outline-chat-bubble" +end + +test "outline voicenote chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:outline_voicenote} + author="Outline Voice User" + time="23:00" + duration="3:00" + /> + """) + + assert html =~ "Outline Voice User" + assert html =~ "23:00" + assert html =~ "3:00" + assert html =~ "pc-chat-bubble--outline-voicenote" + assert html =~ ~s( + """) + + assert html =~ "Outline File User" + assert html =~ "00:00" + assert html =~ "Outline File.pdf" + assert html =~ "10 MB" + assert html =~ "5 Pages" + assert html =~ "PDF" + assert html =~ "pc-chat-bubble--outline-file-attachment" + assert html =~ "Download file" +end + +test "outline image attachment chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:outline_image_attachment} + author="Outline Image User" + time="01:00" + image_src="https://example.com/outline_image.jpg" + image_alt="Outline Example Image" + /> + """) + + assert html =~ "Outline Image User" + assert html =~ "01:00" + assert html =~ ~s(src="https://example.com/outline_image.jpg") + assert html =~ ~s(alt="Outline Example Image") + assert html =~ "pc-chat-bubble--outline-image-attachment" +end + +test "outline image gallery chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:outline_image_gallery} + author="Outline Gallery User" + time="01:00" + images={[ + "https://example.com/image1.jpg", + "https://example.com/image2.jpg", + "https://example.com/image3.jpg" + ]} + extra_images_count={5} + /> + """) + + assert html =~ "Outline Gallery User" + assert html =~ "01:00" + assert html =~ "pc-chat-bubble--outline-image-gallery" + assert html =~ ~s(src="https://example.com/image1.jpg") + assert html =~ ~s(src="https://example.com/image2.jpg") + assert html =~ ~s(src="https://example.com/image3.jpg") + assert html =~ "+5" +end + +test "outline URL preview sharing chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:outline_url_preview_sharing} + author="Outline URL User" + time="22:00" + url="https://example.com" + url_title="Outline Example Title" + url_description="Outline Example Description" + url_image="https://example.com/image.jpg" + url_domain="example.com" + /> + """) + + assert html =~ "Outline URL User" + assert html =~ "22:00" + assert html =~ ~s(href="https://example.com") + assert html =~ "Outline Example Title" + assert html =~ "Outline Example Description" + assert html =~ ~s(src="https://example.com/image.jpg") + assert html =~ "example.com" + assert html =~ "pc-chat-bubble--outline-url-preview" +end + +test "clean chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:clean_chat_bubble} + author="Clean User" + time="21:00" + message="Clean message" + /> + """) + + assert html =~ "Clean User" + assert html =~ "21:00" + assert html =~ "Clean message" + assert html =~ "Delivered" + assert html =~ "pc-chat-bubble--clean-chat-bubble" +end + +test "clean voicenote chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:clean_voicenote} + author="Clean Voice User" + time="23:00" + duration="3:00" + /> + """) + + assert html =~ "Clean Voice User" + assert html =~ "23:00" + assert html =~ "3:00" + assert html =~ "pc-chat-bubble--clean-voicenote" + assert html =~ ~s( + """) + + assert html =~ "Clean File User" + assert html =~ "00:00" + assert html =~ "Clean File.pdf" + assert html =~ "10 MB" + assert html =~ "5 Pages" + assert html =~ "PDF" + assert html =~ "pc-chat-bubble--clean-file-attachment" + assert html =~ "Download file" +end + +test "clean image attachment chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:clean_image_attachment} + author="Clean Image User" + time="02:00" + image_src="https://example.com/clean_image.jpg" + image_alt="Clean Example Image" + /> + """) + + assert html =~ "Clean Image User" + assert html =~ "02:00" + assert html =~ ~s(src="https://example.com/clean_image.jpg") + assert html =~ ~s(alt="Clean Example Image") + assert html =~ "pc-chat-bubble--clean-image-attachment" +end + +test "clean image gallery chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:clean_image_gallery} + author="Clean Gallery User" + time="03:00" + images={[ + "https://example.com/image1.jpg", + "https://example.com/image2.jpg", + "https://example.com/image3.jpg" + ]} + extra_images_count={4} + /> + """) + + assert html =~ "Clean Gallery User" + assert html =~ "03:00" + assert html =~ "pc-chat-bubble--clean-image-gallery" + assert html =~ ~s(src="https://example.com/image1.jpg") + assert html =~ ~s(src="https://example.com/image2.jpg") + assert html =~ ~s(src="https://example.com/image3.jpg") + assert html =~ "+4" +end + +test "clean URL preview sharing chat bubble" do + assigns = %{} + + html = + rendered_to_string(~H""" + <.chat_bubble + kind={:clean_url_preview_sharing} + author="Clean URL User" + time="02:00" + url="https://example.com" + url_title="Clean Example Title" + url_description="Clean Example Description" + url_image="https://example.com/image.jpg" + url_domain="example.com" + /> + """) + + assert html =~ "Clean URL User" + assert html =~ "02:00" + assert html =~ ~s(href="https://example.com") + assert html =~ "Clean Example Title" + assert html =~ "Clean Example Description" + assert html =~ ~s(src="https://example.com/image.jpg") + assert html =~ "example.com" + assert html =~ "pc-chat-bubble--clean-url-preview" +end end \ No newline at end of file From 3bd407fdf07390d8fd1af4829ec1428937d13ea0 Mon Sep 17 00:00:00 2001 From: briar Date: Wed, 9 Apr 2025 16:29:45 +0100 Subject: [PATCH 4/6] Adjusted tooltips and svgs @greptileai --- lib/petal_components/chat_bubble.ex | 71 +++++++++++++++-------------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/lib/petal_components/chat_bubble.ex b/lib/petal_components/chat_bubble.ex index e7042a4d..d4a7f77f 100644 --- a/lib/petal_components/chat_bubble.ex +++ b/lib/petal_components/chat_bubble.ex @@ -251,10 +251,10 @@ defp render_file_attachment(assigns) do class="inline-flex self-center items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white" type="button" > - + + + +
Delivered
@@ -586,10 +586,10 @@ defp render_outline_file_attachment(assigns) do class="inline-flex self-center items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white" type="button" > - + + + +
- + + + +
- -
- Download image -
-
+ + +
+ Download image +
+
{@image_alt}
@@ -1060,8 +1061,8 @@ defp render_clean_image_gallery(assigns) do Delivered
From bda8a33cb26271a798aae7b05e6c042d9600db0f Mon Sep 17 00:00:00 2001 From: briar Date: Thu, 15 May 2025 16:59:35 +0100 Subject: [PATCH 5/6] Revise CSS with additional BEM style variants and adjust tooltips and highlighting for consistency --- assets/default.css | 174 ++++++- lib/petal_components/chat_bubble.ex | 691 ++++++++++++++-------------- 2 files changed, 498 insertions(+), 367 deletions(-) diff --git a/assets/default.css b/assets/default.css index d0c85091..e50ccfcd 100644 --- a/assets/default.css +++ b/assets/default.css @@ -1051,24 +1051,6 @@ .pc-checkbox-group__item--col { @apply inline-flex items-center gap-3 cursor-pointer; } - .pc-radio { - @apply w-4 h-4 border-gray-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600; - } - .pc-radio-group { - @apply pt-2; - } - .pc-radio-group--row { - @apply flex flex-row gap-4 mb-3; - } - .pc-radio-group--col { - @apply flex flex-col gap-4 mb-3; - } - .pc-radio-group__item--row { - @apply inline-flex items-center gap-2 cursor-pointer; - } - .pc-radio-group__item--col { - @apply inline-flex items-center gap-3 cursor-pointer; - } .pc-checkbox-group--empty-message, .pc-radio-group--empty-message { @apply text-sm; @@ -2518,6 +2500,160 @@ @apply shrink-0 w-5 h-5; } + /* Chat Bubble */ + + .pc-chat-bubble { + @apply flex items-start gap-2.5 + + } + .pc-chat-bubble__container { + @apply flex flex-col gap-1 + } + .pc-chat-bubble__box { + @apply flex flex-col w-full max-w-[326px] leading-1.5 p-4 bg-gray-100 dark:bg-gray-700 rounded-e-xl rounded-es-xl; + } + + /* Chat Bubble - Header */ + .pc-chat-bubble__header { + @apply flex items-center space-x-2 rtl:space-x-reverse + } + + .pc-chat-bubble__author { + @apply text-sm font-semibold text-gray-900 dark:text-white + } + + .pc-chat-bubble__time { + @apply text-sm font-normal text-gray-500 dark:text-gray-400 + } + + .pc-chat-bubble__avatar { + @apply w-8 h-8 rounded-full + } + + /* Chat Bubble - Message */ + .pc-chat-bubble__message-text { + @apply text-sm font-normal py-2.5 text-gray-900 dark:text-white + } + + .pc-chat-bubble__delivered { + @apply text-sm font-normal text-gray-500 dark:text-gray-400 + } + + /* Chat Bubble - File Attachment */ + .pc-chat-bubble__file-container { + @apply flex items-start my-2.5 rounded-xl p-2 hover:bg-gray-200 dark:hover:bg-gray-600 + } + + .pc-chat-bubble__file-content { + @apply me-2 + } + + .pc-chat-bubble__file-name { + @apply flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white pb-2 + } + + .pc-chat-bubble__file-icon { + @apply w-5 h-5 shrink-0 + } + + .pc-chat-bubble__file-details { + @apply flex text-xs font-normal text-gray-500 dark:text-gray-400 gap-2 + } + + .pc-chat-bubble__file-download-button { + @apply inline-flex self-center items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white; + svg { + @apply size-6; + } + } + + .pc-chat-bubble__dot { + @apply self-center + } + + /*Chat Bubble - Download Button */ + .pc-chat-bubble__download-wrapper { + @apply relative inline-flex self-center items-center + } + + .pc-chat-bubble__tooltip { + @apply absolute bottom-full mb-2 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-xs dark:bg-gray-700 whitespace-nowrap + } + /* Chat Bubble - Duration Element */ + .pc-chat-bubble__duration { + @apply inline-flex self-center items-center p-2 text-sm font-medium text-gray-900 dark:text-white + } + + /* Chat Bubble - URL Preview */ + .pc-chat-bubble__url-preview-content { + @apply w-full p-2.5 bg-white dark:bg-gray-800; + } + + .pc-chat-bubble__url-preview-link { + @apply flex flex-col items-start cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700; + } + + .pc-chat-bubble__url-image { + @apply w-full h-auto object-cover; + } + + .pc-chat-bubble__url-title { + @apply text-sm font-medium text-gray-900 dark:text-white; + } + + .pc-chat-bubble__url-description { + @apply text-xs font-normal text-gray-500 dark:text-gray-400 my-1; + } + + .pc-chat-bubble__url-domain { + @apply flex items-center text-xs font-normal text-gray-500 dark:text-gray-400; + } + + .pc-chat-bubble__url-domain-icon { + @apply w-3 h-3 me-1; + } + + .pc-chat-bubble__url { + @apply text-sm font-normal pb-2.5 text-gray-900 dark:text-white; + } + + .pc-chat-bubble__url a { + @apply text-blue-700 dark:text-blue-500 underline hover:no-underline font-medium break-all; + } + + /* Chat Bubble - Gallery */ + .pc-chat-bubble--gallery { + @apply flex flex-col w-full max-w-[326px] leading-1.5 p-2 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700; + } + + .pc-chat-bubble__gallery-grid { + @apply grid grid-cols-2 gap-2 my-2.5; + } + + .pc-chat-bubble__gallery-overlay { + @apply absolute w-full h-full bg-gray-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg flex items-center justify-center; + } + + .pc-chat-bubble__gallery-button { + @apply inline-flex items-center justify-center rounded-full h-8 w-8 bg-white/30 hover:bg-white/50 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50; + } + + /* Chat Bubble - Save All button and icon */ + .pc-chat-bubble__save-button { + @apply text-sm text-blue-700 dark:text-blue-500 font-medium inline-flex items-center hover:underline whitespace-nowrap; + } + + .pc-chat-bubble__gallery-tooltip { + @apply absolute -top-10 left-1/2 transform -translate-x-1/2 z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-xs dark:bg-gray-700; + } + + /* Chat bubble Alpine.js tooltip */ + [x-cloak] { + display: none; + } + +} + /* Other */ /* This is for selects inside of a group of selects. Phoenix doesn't provide a way to add a class to these. */ @@ -2561,7 +2697,7 @@ display: block; padding: 0; } -} + /* Hide the calendar icon added by Petal in Firefox since Firefox includes one diff --git a/lib/petal_components/chat_bubble.ex b/lib/petal_components/chat_bubble.ex index d4a7f77f..5c0394b3 100644 --- a/lib/petal_components/chat_bubble.ex +++ b/lib/petal_components/chat_bubble.ex @@ -9,7 +9,9 @@ defmodule PetalComponents.ChatBubble do attr(:avatar_alt, :string, default: nil, doc: "alt text for avatar image") attr(:kind, :atom, default: :default_chat_bubble, values: [ - :default_chat_bubble, :voicenote, :file_attachment, + :default_chat_bubble, + :voicenote, + :file_attachment, :image_attachment, :image_gallery, :url_preview_sharing, :outline_chat_bubble, :outline_voicenote, :outline_file_attachment, :outline_image_attachment, :outline_image_gallery, :outline_url_preview_sharing, @@ -83,36 +85,11 @@ defmodule PetalComponents.ChatBubble do end end - defp render_header(assigns) do +defp render_header(assigns) do ~H""" -
- <%= @author %> - <%= @time %> -
- """ -end - -defp render_default_chat_bubble(assigns) do - assigns = - assigns - |> assign(:author, assigns[:author]) - |> assign(:message, assigns[:message]) - |> assign(:time, assigns[:time]) - |> assign(:avatar_src, assigns[:avatar_src]) - |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") - |> assign(:class, assigns[:class]) - |> assign(:rest, assigns[:rest]) - - ~H""" -
-
- {@avatar_alt} -
- <%= render_header(assigns) %> -

<%= @message %>

- Delivered -
-
+
+ <%= @author %> + <%= @time %>
""" end @@ -160,6 +137,29 @@ defp render_waveform(assigns) do """ end +defp render_default_chat_bubble(assigns) do + assigns = + assigns + |> assign(:author, assigns[:author]) + |> assign(:message, assigns[:message]) + |> assign(:time, assigns[:time]) + |> assign(:avatar_src, assigns[:avatar_src]) + |> assign(:avatar_alt, assigns[:avatar_alt] || "#{assigns[:author]} image") + |> assign(:class, assigns[:class]) + |> assign(:rest, assigns[:rest]) + + ~H""" +
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +

<%= @message %>

+ Delivered +
+
+ """ +end + defp render_voicenote(assigns) do assigns = assigns @@ -173,15 +173,13 @@ defp render_voicenote(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
<%= render_header(assigns) %> <%= render_waveform(assigns) %> - Delivered + Delivered
-
""" end @@ -202,74 +200,66 @@ defp render_file_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
-
-
- <%= @author %> - <%= @time %> -
-
-
- - - <%= @file_name %> - - - <%= @file_pages %> - - <%= @file_size %> - - <%= @file_type %> - -
- -
- - -
- Download file -
-
+
+ {@avatar_alt} +
+ <%= render_header(assigns) %> +
+
+ + + <%= @file_name %> + + + <%= @file_pages %> + + <%= @file_size %> + + <%= @file_type %> + +
+ +
+ +
+ Download file
- Delivered
+ Delivered
""" @@ -289,17 +279,15 @@ defp render_image_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
- <%= @author %> - <%= @time %> + <%= @author %> + <%= @time %>
-

<%= @message %>

- +

<%= @message %>

- +
- Download image + x-show="showTooltip" + x-cloak + x-transition + class="pc-chat-bubble__tooltip" + aria-label="Tooltip text" + > + Download image
{@image_alt}
- Delivered + Delivered
-
""" end @@ -345,27 +333,26 @@ defp render_image_gallery(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
- <%= @author %> - <%= @time %> + <%= @author %> + <%= @time %>
-

<%= @message %>

+

<%= @message %>

- <%= for {img, _index} <- Enum.with_index(Enum.take(@images, 3)) do %> + <%= for img <- Enum.take(@images, 3) do %>
Download image @@ -386,7 +374,7 @@ defp render_image_gallery(assigns) do <% end %> -
+
+
View more @@ -411,17 +401,16 @@ defp render_image_gallery(assigns) do
- Delivered -
-
""" end @@ -443,31 +432,29 @@ defp render_url_preview_sharing(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -

<%= @message %>

-

- <%= @url %> +

<%= @message %>

+

+ <%= @url %>

-
-

<%= @url_title %>

-

<%= @url_description %>

- -
+

<%= @url_title %>

+

<%= @url_description %>

+ + <%= @url_domain %>
- Delivered + Delivered
-
""" end @@ -484,17 +471,15 @@ defp render_outline_chat_bubble(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
<%= render_header(assigns) %>
-

<%= @message %>

+

<%= @message %>

- Delivered + Delivered
-
""" end @@ -510,17 +495,15 @@ defp render_outline_voicenote(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
<%= render_header(assigns) %>
<%= render_waveform(assigns) %>
- Delivered + Delivered
-
""" end @@ -540,16 +523,15 @@ defp render_outline_file_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -
-
-
- -
+
+
+ + - <%= @file_name %> - - - <%= @file_pages %> - - <%= @file_size %> - - <%= @file_type %> - -
- -
-
+
+ -
- Download file -
+ +
+ Download file
- Delivered +
+ Delivered
-
""" end @@ -623,37 +605,41 @@ defp render_outline_image_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -

<%= @message %>

+

<%= @message %>

-
-
+
+
+
Download image
- {@image_alt} + {@image_alt}
- Delivered + +
+ Delivered
@@ -674,31 +660,34 @@ defp render_outline_image_gallery(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -

<%= @message %>

-
- +

<%= @message %>

+
+
- <%= for {img, _index} <- Enum.with_index(Enum.take(@images, 3)) do %> -
+ + <%= for img <- Enum.take(@images, 3) do %> +
+
Download image @@ -707,8 +696,9 @@ defp render_outline_image_gallery(assigns) do
<% end %> + -
+
+
View more
@@ -732,17 +723,17 @@ defp render_outline_image_gallery(assigns) do <% end %>
-
- +
-
- Delivered +
+ Delivered
@@ -766,23 +757,23 @@ defp render_outline_url_preview_sharing(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -

<%= @message %>

+

<%= @message %>

-

- <%= @url %> +

+ <%= @url %>

- -
-

<%= @url_title %>

-

<%= @url_description %>

- - +
+

<%= @url_title %>

+

<%= @url_description %>

+ + <%= @url_domain %> @@ -790,7 +781,7 @@ defp render_outline_url_preview_sharing(assigns) do
- Delivered + Delivered
@@ -809,13 +800,13 @@ defp render_clean_chat_bubble(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} +
+
+ {@avatar_alt}
<%= render_header(assigns) %> -

<%= @message %>

- Delivered +

<%= @message %>

+ Delivered
@@ -833,13 +824,13 @@ defp render_clean_voicenote(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} +
+
+ {@avatar_alt}
<%= render_header(assigns) %> <%= render_waveform(assigns) %> - Delivered + Delivered
@@ -861,15 +852,15 @@ defp render_clean_file_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} +
+
+ {@avatar_alt}
<%= render_header(assigns) %> -
-
- -
+
+ + <%= @file_name %> - + <%= @file_pages %>
-
+
Download file
- Delivered + Delivered
@@ -942,41 +934,42 @@ defp render_clean_image_attachment(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} +
+
+ {@avatar_alt}
<%= render_header(assigns) %> -
-

<%= @message %>

+
+

<%= @message %>

-
+
- - -
- Download image -
-
+ + +
+ Download image +
+
{@image_alt}
- Delivered + Delivered
@@ -997,23 +990,23 @@ defp render_clean_image_gallery(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} -
+
+
+ {@avatar_alt} +
<%= render_header(assigns) %> -

<%= @message %>

+

<%= @message %>

- <%= for {img, _index} <- Enum.with_index(Enum.take(@images, 3)) do %> + <%= for img <- Enum.take(@images, 3) do %>
Download image @@ -1034,7 +1028,7 @@ defp render_clean_image_gallery(assigns) do <% end %> -
+
+
View more @@ -1058,15 +1054,14 @@ defp render_clean_image_gallery(assigns) do
- Delivered -
-
@@ -1091,29 +1086,29 @@ defp render_clean_url_preview_sharing(assigns) do |> assign(:rest, assigns[:rest]) ~H""" -
-
- {@avatar_alt} +
+
+ {@avatar_alt}
<%= render_header(assigns) %> -

<%= @message %>

-

- <%= @url %> +

<%= @message %>

+

+ <%= @url %>

- -
-

<%= @url_title %>

-

<%= @url_description %>

- - +
+

<%= @url_title %>

+

<%= @url_description %>

+ + <%= @url_domain %>
- Delivered + Delivered
From a03c69b120424558adf6d2c4ffb2a4d896e75ee7 Mon Sep 17 00:00:00 2001 From: briar Date: Thu, 15 May 2025 17:23:18 +0100 Subject: [PATCH 6/6] Restore deleted content and apply intended updates to default css classes --- assets/default.css | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/assets/default.css b/assets/default.css index e50ccfcd..b5b7c938 100644 --- a/assets/default.css +++ b/assets/default.css @@ -1051,6 +1051,24 @@ .pc-checkbox-group__item--col { @apply inline-flex items-center gap-3 cursor-pointer; } + .pc-radio { + @apply w-4 h-4 border-gray-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600; + } + .pc-radio-group { + @apply pt-2; + } + .pc-radio-group--row { + @apply flex flex-row gap-4 mb-3; + } + .pc-radio-group--col { + @apply flex flex-col gap-4 mb-3; + } + .pc-radio-group__item--row { + @apply inline-flex items-center gap-2 cursor-pointer; + } + .pc-radio-group__item--col { + @apply inline-flex items-center gap-3 cursor-pointer; + } .pc-checkbox-group--empty-message, .pc-radio-group--empty-message { @apply text-sm; @@ -2499,7 +2517,7 @@ .pc-vertical-menu-item__icon--inactive { @apply shrink-0 w-5 h-5; } - + /* Chat Bubble */ .pc-chat-bubble { @@ -2647,13 +2665,6 @@ @apply absolute -top-10 left-1/2 transform -translate-x-1/2 z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-xs dark:bg-gray-700; } - /* Chat bubble Alpine.js tooltip */ - [x-cloak] { - display: none; - } - -} - /* Other */ /* This is for selects inside of a group of selects. Phoenix doesn't provide a way to add a class to these. */ @@ -2697,7 +2708,7 @@ display: block; padding: 0; } - +} /* Hide the calendar icon added by Petal in Firefox since Firefox includes one