From b9bcc9ac03b3c99d021ec6211a177de9e3ea3771 Mon Sep 17 00:00:00 2001 From: latachz Date: Fri, 3 May 2024 12:22:56 +0200 Subject: [PATCH 1/2] feat: Very basic badge component with optional glow effect --- .../lib/bloom_site_web/components/badge.ex | 60 +++++++++++++++++++ .../bloom_components/badge.story.exs | 30 ++++++++++ lib/bloom/components/badge.ex | 60 +++++++++++++++++++ lib/tasks/install.ex | 2 +- priv/templates/badge.ex | 60 +++++++++++++++++++ test/tasks/install_test.exs | 16 ++++- 6 files changed, 225 insertions(+), 3 deletions(-) create mode 100644 bloom_site/lib/bloom_site_web/components/badge.ex create mode 100644 bloom_site/storybook/bloom_components/badge.story.exs create mode 100644 lib/bloom/components/badge.ex create mode 100644 priv/templates/badge.ex diff --git a/bloom_site/lib/bloom_site_web/components/badge.ex b/bloom_site/lib/bloom_site_web/components/badge.ex new file mode 100644 index 0000000..a0f7f6d --- /dev/null +++ b/bloom_site/lib/bloom_site_web/components/badge.ex @@ -0,0 +1,60 @@ +defmodule BloomSiteWeb.Components.Badge do + use Phoenix.Component + + @moduledoc """ + Badge component + + Requires the following Tailwind CSS config extension: + + extend: { + animation: { + tilt: "tilt 5s ease-in-out infinite", + }, + keyframes: { + tilt: { + "0%, 50%, 100%": { transform: "rotate(0deg)" }, + "25%": { transform: "rotate(3deg)" }, + "75%": { transform: "rotate(-3deg)" }, + }, + }, + } + """ + + attr(:variant, :string, doc: "Badge variant", default: "primary") + + attr(:from_color, :string) + attr(:to_color, :string) + + attr(:class, :string, default: "", doc: "Class for badge") + attr(:rest, :global) + + slot(:inner_block, required: true) + + def badge(assigns) do + ~H""" +
+
+
+ + <%= render_slot(@inner_block) %> + +
+ """ + end + + defp variant_class("primary"), do: "bg-black text-gray-100" + defp variant_class("secondary"), do: "bg-white border border-black" + + defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), + do: + "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" + + defp bg_gradient_class(_assigns), do: "" +end diff --git a/bloom_site/storybook/bloom_components/badge.story.exs b/bloom_site/storybook/bloom_components/badge.story.exs new file mode 100644 index 0000000..2af8e68 --- /dev/null +++ b/bloom_site/storybook/bloom_components/badge.story.exs @@ -0,0 +1,30 @@ +defmodule BloomSite.Storybook.BloomComponents.Badge do + use PhoenixStorybook.Story, :component + + def function, do: &BloomSiteWeb.Components.Badge.badge/1 + + def variations do + [ + %Variation{ + id: :primary, + slots: ["Badge"] + }, + %Variation{ + id: :secondary, + attributes: %{ + variant: "secondary" + }, + slots: ["Badge"] + }, + %Variation{ + id: :glow, + attributes: %{ + variant: "primary", + from_color: "rose-700", + to_color: "purple-800" + }, + slots: ["Badge"] + } + ] + end +end diff --git a/lib/bloom/components/badge.ex b/lib/bloom/components/badge.ex new file mode 100644 index 0000000..4390b59 --- /dev/null +++ b/lib/bloom/components/badge.ex @@ -0,0 +1,60 @@ +defmodule Bloom.Components.Badge do + use Phoenix.Component + + @moduledoc """ + Badge component + + Requires the following Tailwind CSS config extension: + + extend: { + animation: { + tilt: "tilt 5s ease-in-out infinite", + }, + keyframes: { + tilt: { + "0%, 50%, 100%": { transform: "rotate(0deg)" }, + "25%": { transform: "rotate(3deg)" }, + "75%": { transform: "rotate(-3deg)" }, + }, + }, + } + """ + + attr(:variant, :string, doc: "Badge variant", default: "primary") + + attr(:from_color, :string) + attr(:to_color, :string) + + attr(:class, :string, default: "", doc: "Class for badge") + attr(:rest, :global) + + slot(:inner_block, required: true) + + def badge(assigns) do + ~H""" +
+
+
+ + <%= render_slot(@inner_block) %> + +
+ """ + end + + defp variant_class("primary"), do: "bg-black text-gray-100" + defp variant_class("secondary"), do: "bg-white border border-black" + + defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), + do: + "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" + + defp bg_gradient_class(_assigns), do: "" +end diff --git a/lib/tasks/install.ex b/lib/tasks/install.ex index 49e3c11..2c2780d 100644 --- a/lib/tasks/install.ex +++ b/lib/tasks/install.ex @@ -64,7 +64,7 @@ defmodule Mix.Tasks.Bloom.Install do Mix.shell().info("Usage: mix bloom.install [component_name]") Mix.shell().info( - "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee" + "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge" ) end diff --git a/priv/templates/badge.ex b/priv/templates/badge.ex new file mode 100644 index 0000000..3376cd6 --- /dev/null +++ b/priv/templates/badge.ex @@ -0,0 +1,60 @@ +defmodule <%= @module_name %>Web.Components.Badge do + use Phoenix.Component + + @moduledoc """ + Badge component + + Requires the following Tailwind CSS config extension: + + extend: { + animation: { + tilt: "tilt 5s ease-in-out infinite", + }, + keyframes: { + tilt: { + "0%, 50%, 100%": { transform: "rotate(0deg)" }, + "25%": { transform: "rotate(3deg)" }, + "75%": { transform: "rotate(-3deg)" }, + }, + }, + } + """ + + attr(:variant, :string, doc: "Badge variant", default: "primary") + + attr(:from_color, :string) + attr(:to_color, :string) + + attr(:class, :string, default: "", doc: "Class for badge") + attr(:rest, :global) + + slot(:inner_block, required: true) + + def badge(assigns) do + ~H""" +
+
+
+ + <%%= render_slot(@inner_block) %> + +
+ """ + end + + defp variant_class("primary"), do: "bg-black text-gray-100" + defp variant_class("secondary"), do: "bg-white border border-black" + + defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), + do: + "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" + + defp bg_gradient_class(_assigns), do: "" +end diff --git a/test/tasks/install_test.exs b/test/tasks/install_test.exs index d078ec2..c0a912b 100644 --- a/test/tasks/install_test.exs +++ b/test/tasks/install_test.exs @@ -20,6 +20,11 @@ defmodule Mix.Tasks.Bloom.InstallTest do "glow_button component installed successfully ✅ - lib/bloom_web/components/glow_button.ex" end) + expect(ShellMock, :info, fn msg -> + assert msg == + "Don't forget to import the component to your bloom_web.ex` file." + end) + Mix.Tasks.Bloom.Install.run(["glow_button"]) end @@ -33,7 +38,8 @@ defmodule Mix.Tasks.Bloom.InstallTest do end) expect(ShellMock, :info, fn msg -> - assert msg == "Available components: glow_button" + assert msg == + "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge" end) Mix.Tasks.Bloom.Install.run(["nonexistent_component"]) @@ -45,7 +51,8 @@ defmodule Mix.Tasks.Bloom.InstallTest do end) expect(ShellMock, :info, fn msg -> - assert msg == "Available components: glow_button" + assert msg == + "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge" end) Mix.Tasks.Bloom.Install.run([]) @@ -64,6 +71,11 @@ defmodule Mix.Tasks.Bloom.InstallTest do "glow_button component installed successfully ✅ - lib/bloom_web/components/glow_button.ex" end) + expect(ShellMock, :info, fn msg -> + assert msg == + "Don't forget to import the component to your bloom_web.ex` file." + end) + Mix.Tasks.Bloom.Install.install_component("glow_button") end end From cf411f3526b37bc979bd9cd55ed6f9a1bf2f9213 Mon Sep 17 00:00:00 2001 From: latachz Date: Sun, 5 May 2024 12:38:37 +0200 Subject: [PATCH 2/2] feat: Get rid of gradient (to be extracted soon) --- .../lib/bloom_site_web/components/badge.ex | 48 ++++--------------- .../bloom_components/badge.story.exs | 9 ---- lib/bloom/components/badge.ex | 48 ++++--------------- priv/templates/badge.ex | 48 ++++--------------- 4 files changed, 30 insertions(+), 123 deletions(-) diff --git a/bloom_site/lib/bloom_site_web/components/badge.ex b/bloom_site/lib/bloom_site_web/components/badge.ex index a0f7f6d..c078258 100644 --- a/bloom_site/lib/bloom_site_web/components/badge.ex +++ b/bloom_site/lib/bloom_site_web/components/badge.ex @@ -3,28 +3,10 @@ defmodule BloomSiteWeb.Components.Badge do @moduledoc """ Badge component - - Requires the following Tailwind CSS config extension: - - extend: { - animation: { - tilt: "tilt 5s ease-in-out infinite", - }, - keyframes: { - tilt: { - "0%, 50%, 100%": { transform: "rotate(0deg)" }, - "25%": { transform: "rotate(3deg)" }, - "75%": { transform: "rotate(-3deg)" }, - }, - }, - } """ attr(:variant, :string, doc: "Badge variant", default: "primary") - attr(:from_color, :string) - attr(:to_color, :string) - attr(:class, :string, default: "", doc: "Class for badge") attr(:rest, :global) @@ -32,29 +14,19 @@ defmodule BloomSiteWeb.Components.Badge do def badge(assigns) do ~H""" -
-
-
- - <%= render_slot(@inner_block) %> - -
+ + <%= render_slot(@inner_block) %> + """ end defp variant_class("primary"), do: "bg-black text-gray-100" defp variant_class("secondary"), do: "bg-white border border-black" - - defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), - do: - "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" - - defp bg_gradient_class(_assigns), do: "" end diff --git a/bloom_site/storybook/bloom_components/badge.story.exs b/bloom_site/storybook/bloom_components/badge.story.exs index 2af8e68..224e7a3 100644 --- a/bloom_site/storybook/bloom_components/badge.story.exs +++ b/bloom_site/storybook/bloom_components/badge.story.exs @@ -15,15 +15,6 @@ defmodule BloomSite.Storybook.BloomComponents.Badge do variant: "secondary" }, slots: ["Badge"] - }, - %Variation{ - id: :glow, - attributes: %{ - variant: "primary", - from_color: "rose-700", - to_color: "purple-800" - }, - slots: ["Badge"] } ] end diff --git a/lib/bloom/components/badge.ex b/lib/bloom/components/badge.ex index 4390b59..987aebd 100644 --- a/lib/bloom/components/badge.ex +++ b/lib/bloom/components/badge.ex @@ -3,28 +3,10 @@ defmodule Bloom.Components.Badge do @moduledoc """ Badge component - - Requires the following Tailwind CSS config extension: - - extend: { - animation: { - tilt: "tilt 5s ease-in-out infinite", - }, - keyframes: { - tilt: { - "0%, 50%, 100%": { transform: "rotate(0deg)" }, - "25%": { transform: "rotate(3deg)" }, - "75%": { transform: "rotate(-3deg)" }, - }, - }, - } """ attr(:variant, :string, doc: "Badge variant", default: "primary") - attr(:from_color, :string) - attr(:to_color, :string) - attr(:class, :string, default: "", doc: "Class for badge") attr(:rest, :global) @@ -32,29 +14,19 @@ defmodule Bloom.Components.Badge do def badge(assigns) do ~H""" -
-
-
- - <%= render_slot(@inner_block) %> - -
+ + <%= render_slot(@inner_block) %> + """ end defp variant_class("primary"), do: "bg-black text-gray-100" defp variant_class("secondary"), do: "bg-white border border-black" - - defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), - do: - "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" - - defp bg_gradient_class(_assigns), do: "" end diff --git a/priv/templates/badge.ex b/priv/templates/badge.ex index 3376cd6..82e8fc5 100644 --- a/priv/templates/badge.ex +++ b/priv/templates/badge.ex @@ -3,28 +3,10 @@ defmodule <%= @module_name %>Web.Components.Badge do @moduledoc """ Badge component - - Requires the following Tailwind CSS config extension: - - extend: { - animation: { - tilt: "tilt 5s ease-in-out infinite", - }, - keyframes: { - tilt: { - "0%, 50%, 100%": { transform: "rotate(0deg)" }, - "25%": { transform: "rotate(3deg)" }, - "75%": { transform: "rotate(-3deg)" }, - }, - }, - } """ attr(:variant, :string, doc: "Badge variant", default: "primary") - attr(:from_color, :string) - attr(:to_color, :string) - attr(:class, :string, default: "", doc: "Class for badge") attr(:rest, :global) @@ -32,29 +14,19 @@ defmodule <%= @module_name %>Web.Components.Badge do def badge(assigns) do ~H""" -
-
-
- - <%%= render_slot(@inner_block) %> - -
+ + <%%= render_slot(@inner_block) %> + """ end defp variant_class("primary"), do: "bg-black text-gray-100" defp variant_class("secondary"), do: "bg-white border border-black" - - defp bg_gradient_class(%{from_color: from_color, to_color: to_color}), - do: - "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}" - - defp bg_gradient_class(_assigns), do: "" end