Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Very basic badge component #8

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+120 −3
Open

feat: Very basic badge component #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9bcc9a
feat: Very basic badge component with optional glow effect
latachz May 3, 2024
cf411f3
feat: Get rid of gradient (to be extracted soon)
latachz May 5, 2024
10acf2f
feat: resolve conflict
latachz May 5, 2024
c51890c
Merge branch 'main' into feat/badge-component
chrisgreg May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions bloom_site/lib/bloom_site_web/components/badge.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
defmodule BloomSiteWeb.Components.Badge do
use Phoenix.Component

@moduledoc """
Badge component
"""

attr(:variant, :string, doc: "Badge variant", default: "primary")

attr(:class, :string, default: "", doc: "Class for badge")
attr(:rest, :global)

slot(:inner_block, required: true)

def badge(assigns) do
~H"""
<span
class={[
"text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
variant_class(@variant),
@class
]}
{@rest}
>
<%= render_slot(@inner_block) %>
</span>
"""
end

defp variant_class("primary"), do: "bg-black text-gray-100"
defp variant_class("secondary"), do: "bg-white border border-black"
end
21 changes: 21 additions & 0 deletions bloom_site/storybook/bloom_components/badge.story.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
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"]
}
]
end
end
32 changes: 32 additions & 0 deletions lib/bloom/components/badge.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
defmodule Bloom.Components.Badge do
use Phoenix.Component

@moduledoc """
Badge component
"""

attr(:variant, :string, doc: "Badge variant", default: "primary")

attr(:class, :string, default: "", doc: "Class for badge")
attr(:rest, :global)

slot(:inner_block, required: true)

Comment on lines +8 to +14
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great - but one usecase I always have for badges is for tags and those require lots of colour variations.

Can you think of a way we can make them easily customisable from their colours without defining a variation?
Maybe a variation called colour and another prop that sets the colour? Could be done well with pattern matching.

def badge(assigns) do
~H"""
<span
class={[
"text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
variant_class(@variant),
@class
]}
{@rest}
>
<%= render_slot(@inner_block) %>
</span>
"""
end

defp variant_class("primary"), do: "bg-black text-gray-100"
defp variant_class("secondary"), do: "bg-white border border-black"
end
2 changes: 1 addition & 1 deletion lib/tasks/install.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ defmodule Mix.Tasks.Bloom.Install do
Mix.shell().info("Usage: mix bloom.install [component_name]")

Mix.shell().info(
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee"
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
)
end

Expand Down
32 changes: 32 additions & 0 deletions priv/templates/badge.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
defmodule <%= @module_name %>Web.Components.Badge do
use Phoenix.Component

@moduledoc """
Badge component
"""

attr(:variant, :string, doc: "Badge variant", default: "primary")

attr(:class, :string, default: "", doc: "Class for badge")
attr(:rest, :global)

slot(:inner_block, required: true)

def badge(assigns) do
~H"""
<span
class={[
"text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
variant_class(@variant),
@class
]}
{@rest}
>
<%%= render_slot(@inner_block) %>
</span>
"""
end

defp variant_class("primary"), do: "bg-black text-gray-100"
defp variant_class("secondary"), do: "bg-white border border-black"
end
4 changes: 2 additions & 2 deletions test/tasks/install_test.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ defmodule Mix.Tasks.Bloom.InstallTest do

expect(ShellMock, :info, fn msg ->
assert msg ==
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee"
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
end)

Mix.Tasks.Bloom.Install.run(["nonexistent_component"])
Expand All @@ -52,7 +52,7 @@ defmodule Mix.Tasks.Bloom.InstallTest do

expect(ShellMock, :info, fn msg ->
assert msg ==
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee"
"Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
end)

Mix.Tasks.Bloom.Install.run([])
Expand Down
Loading