From b47561e3351a825c7f8f18b48575e4be11873659 Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 2 May 2024 14:18:53 +0200 Subject: [PATCH 1/8] Basic Button added --- lib/bloom/components/button.ex | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 lib/bloom/components/button.ex diff --git a/lib/bloom/components/button.ex b/lib/bloom/components/button.ex new file mode 100644 index 0000000..0971f56 --- /dev/null +++ b/lib/bloom/components/button.ex @@ -0,0 +1,18 @@ +defmodule Bloom.Components.Button do + use Phoenix.Component + + @moduledoc """ + Button component + """ + + attr(:class, :string, default: "", doc: "CSS class property for the button component") + slot(:inner_block, required: true, doc: "Content block of the button component") + + def hero(assigns) do + ~H""" + + """ + end +end From 517e22fb102ead3d89da29134add23668dffd0b5 Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 2 May 2024 15:07:45 +0200 Subject: [PATCH 2/8] added basic outlined bloom button --- .../bloom_site_web/components/bloom_button.ex | 44 +++++++++++++++++++ .../bloom_components/bloom_button.story.exs | 25 +++++++++++ .../components/{button.ex => bloom_button.ex} | 2 +- priv/templates/bloom_button.ex | 18 ++++++++ 4 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 bloom_site/lib/bloom_site_web/components/bloom_button.ex create mode 100644 bloom_site/storybook/bloom_components/bloom_button.story.exs rename lib/bloom/components/{button.ex => bloom_button.ex} (93%) create mode 100644 priv/templates/bloom_button.ex diff --git a/bloom_site/lib/bloom_site_web/components/bloom_button.ex b/bloom_site/lib/bloom_site_web/components/bloom_button.ex new file mode 100644 index 0000000..fbbeb8a --- /dev/null +++ b/bloom_site/lib/bloom_site_web/components/bloom_button.ex @@ -0,0 +1,44 @@ + +defmodule BloomSiteWeb.Components.Button do + use Phoenix.Component + + @moduledoc """ + Button component + + ## Examples + <.button>Send! + <.button variant="outlined">Outlined Button + """ + + attr :type, :string, default: nil + attr :class, :string, default: nil + attr :rest, :global, include: ~w(disabled form name value) + attr :variant, :string, default: "contained" + + slot :inner_block, required: true + + def bloom_button(assigns) do + ~H""" + + """ + end + + defp get_variant(variant) do + case variant do + "contained" -> "bg-zinc-900 hover:bg-zinc-700" + "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" + _ -> "bg-zinc-900 hover:bg-zinc-700" + end + end +end diff --git a/bloom_site/storybook/bloom_components/bloom_button.story.exs b/bloom_site/storybook/bloom_components/bloom_button.story.exs new file mode 100644 index 0000000..a1ee931 --- /dev/null +++ b/bloom_site/storybook/bloom_components/bloom_button.story.exs @@ -0,0 +1,25 @@ +defmodule BloomSite.Storybook.BloomComponents.Button do + use PhoenixStorybook.Story, :component + + def function, do: &BloomSiteWeb.Components.Button.bloom_button/1 + + def variations do + [ + %Variation{ + id: :default, + slots: [ + "Button" + ] + }, + %Variation{ + id: :outlined, + attributes: %{ + variant: "outlined" + }, + slots: [ + "Outlined button" + ] + }, + ] + end +end diff --git a/lib/bloom/components/button.ex b/lib/bloom/components/bloom_button.ex similarity index 93% rename from lib/bloom/components/button.ex rename to lib/bloom/components/bloom_button.ex index 0971f56..35603f3 100644 --- a/lib/bloom/components/button.ex +++ b/lib/bloom/components/bloom_button.ex @@ -8,7 +8,7 @@ defmodule Bloom.Components.Button do attr(:class, :string, default: "", doc: "CSS class property for the button component") slot(:inner_block, required: true, doc: "Content block of the button component") - def hero(assigns) do + def button(assigns) do ~H""" + """ + end +end From 43b54e2628da42ff27756f3ccf82866d8b0ff069 Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 2 May 2024 21:00:39 +0200 Subject: [PATCH 3/8] bloom button in bloom button component --- lib/bloom/components/bloom_button.ex | 34 ++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/lib/bloom/components/bloom_button.ex b/lib/bloom/components/bloom_button.ex index 35603f3..c7dbb3a 100644 --- a/lib/bloom/components/bloom_button.ex +++ b/lib/bloom/components/bloom_button.ex @@ -1,18 +1,44 @@ + defmodule Bloom.Components.Button do use Phoenix.Component @moduledoc """ Button component + + ## Examples + <.bloom_button>Send! + <.bloom_button variant="outlined">Outlined Button """ - attr(:class, :string, default: "", doc: "CSS class property for the button component") - slot(:inner_block, required: true, doc: "Content block of the button component") + attr :type, :string, default: nil + attr :class, :string, default: nil + attr :rest, :global, include: ~w(disabled form name value) + attr :variant, :string, default: "contained" + + slot :inner_block, required: true - def button(assigns) do + def bloom_button(assigns) do ~H""" - """ end + + defp get_variant(variant) do + case variant do + "contained" -> "bg-zinc-900 hover:bg-zinc-700" + "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" + _ -> "bg-zinc-900 hover:bg-zinc-700" + end + end end From bebc136124d001ab614ee4b0840e1d1341fe1a4e Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 2 May 2024 21:02:29 +0200 Subject: [PATCH 4/8] template updated --- .../bloom_site_web/components/bloom_button.ex | 4 +-- priv/templates/bloom_button.ex | 34 ++++++++++++++++--- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/bloom_site/lib/bloom_site_web/components/bloom_button.ex b/bloom_site/lib/bloom_site_web/components/bloom_button.ex index fbbeb8a..c261e5b 100644 --- a/bloom_site/lib/bloom_site_web/components/bloom_button.ex +++ b/bloom_site/lib/bloom_site_web/components/bloom_button.ex @@ -6,8 +6,8 @@ defmodule BloomSiteWeb.Components.Button do Button component ## Examples - <.button>Send! - <.button variant="outlined">Outlined Button + <.bloom_button>Send! + <.bloom_button variant="outlined">Outlined Button """ attr :type, :string, default: nil diff --git a/priv/templates/bloom_button.ex b/priv/templates/bloom_button.ex index cdcd427..34402df 100644 --- a/priv/templates/bloom_button.ex +++ b/priv/templates/bloom_button.ex @@ -1,18 +1,44 @@ + defmodule <%= @module_name %>Web.Components.Button do use Phoenix.Component @moduledoc """ Button component + + ## Examples + <.bloom_button>Send! + <.bloom_button variant="outlined">Outlined Button """ - attr(:class, :string, default: "", doc: "CSS class property for the button component") - slot(:inner_block, required: true, doc: "Content block of the button component") + attr :type, :string, default: nil + attr :class, :string, default: nil + attr :rest, :global, include: ~w(disabled form name value) + attr :variant, :string, default: "contained" + + slot :inner_block, required: true - def button(assigns) do + def bloom_button(assigns) do ~H""" - """ end + + defp get_variant(variant) do + case variant do + "contained" -> "bg-zinc-900 hover:bg-zinc-700" + "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" + _ -> "bg-zinc-900 hover:bg-zinc-700" + end + end end From ac8571233c32565235ba01739477c64c433a2786 Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 2 May 2024 21:30:25 +0200 Subject: [PATCH 5/8] added basic outline buttons --- .../bloom_site_web/components/bloom_button.ex | 16 +++++++++------- lib/bloom/components/bloom_button.ex | 16 +++++++++------- priv/templates/bloom_button.ex | 16 +++++++++------- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/bloom_site/lib/bloom_site_web/components/bloom_button.ex b/bloom_site/lib/bloom_site_web/components/bloom_button.ex index c261e5b..e4a24f4 100644 --- a/bloom_site/lib/bloom_site_web/components/bloom_button.ex +++ b/bloom_site/lib/bloom_site_web/components/bloom_button.ex @@ -1,13 +1,15 @@ -defmodule BloomSiteWeb.Components.Button do +defmodule BloomSiteWeb.Components.BloomButton do use Phoenix.Component @moduledoc """ - Button component + An extension of the *core_components button*. + The `<.bloom_button>` has the possibility to handle variants + in the form of `contained` or `outlined` buttons. - ## Examples - <.bloom_button>Send! - <.bloom_button variant="outlined">Outlined Button + ## Examples + <.bloom_button>Send! + <.bloom_button variant="outlined">Outlined Button """ attr :type, :string, default: nil @@ -22,7 +24,7 @@ defmodule BloomSiteWeb.Components.Button do - """ - end - - defp get_variant(variant) do - case variant do - "contained" -> "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" - "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" - _ -> "bg-zinc-900 hover:bg-zinc-700" - end - end -end diff --git a/bloom_site/lib/bloom_site_web/components/button.ex b/bloom_site/lib/bloom_site_web/components/button.ex new file mode 100644 index 0000000..ad4764c --- /dev/null +++ b/bloom_site/lib/bloom_site_web/components/button.ex @@ -0,0 +1,50 @@ +defmodule BloomSiteWeb.Components.Button do + use Phoenix.Component + + @moduledoc """ + An extension of the *core_components button*. + The `<.button>` has the ability to handle a variant attribute. + This makes it possible to have a `contained` or `outlined` look. + + ## Examples + <.button>Send! + <.button variant="outlined">Outlined Button + """ + + attr(:type, :string, default: nil) + attr(:class, :string, default: nil) + attr(:rest, :global, include: ~w(disabled form name value)) + attr(:variant, :string, default: "contained") + + slot(:inner_block, required: true) + + def button(assigns) do + ~H""" + + """ + end + + defp get_variant(variant) do + case variant do + "contained" -> + "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" + + "outlined" -> + "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700" + + _ -> + "bg-zinc-900 hover:bg-zinc-700" + end + end +end diff --git a/bloom_site/mix.exs b/bloom_site/mix.exs index 3f36fdf..a1201f7 100644 --- a/bloom_site/mix.exs +++ b/bloom_site/mix.exs @@ -54,7 +54,7 @@ defmodule BloomSite.MixProject do {:gettext, "~> 0.20"}, {:jason, "~> 1.2"}, {:plug_cowboy, "~> 2.5"}, - {:bloom, "~> 0.0.7"}, + {:bloom, path: "../"}, # {:bloom, path: "..", override: true}, {:phoenix_storybook, "~> 0.6.0"} ] diff --git a/bloom_site/storybook/bloom_components/bloom_button.story.exs b/bloom_site/storybook/bloom_components/button.story.exs similarity index 85% rename from bloom_site/storybook/bloom_components/bloom_button.story.exs rename to bloom_site/storybook/bloom_components/button.story.exs index a1ee931..e9ef91e 100644 --- a/bloom_site/storybook/bloom_components/bloom_button.story.exs +++ b/bloom_site/storybook/bloom_components/button.story.exs @@ -1,7 +1,7 @@ defmodule BloomSite.Storybook.BloomComponents.Button do use PhoenixStorybook.Story, :component - def function, do: &BloomSiteWeb.Components.Button.bloom_button/1 + def function, do: &BloomSiteWeb.Components.Button.button/1 def variations do [ diff --git a/lib/bloom/components/bloom_button.ex b/lib/bloom/components/bloom_button.ex deleted file mode 100644 index 6a1864f..0000000 --- a/lib/bloom/components/bloom_button.ex +++ /dev/null @@ -1,46 +0,0 @@ - -defmodule Bloom.Components.BloomButton do - use Phoenix.Component - - @moduledoc """ - An extension of the *core_components button*. - The `<.bloom_button>` has the ability to handle a variant attribute. - This makes it possible to have a `contained` or `outlined` look. - - ## Examples - <.bloom_button>Send! - <.bloom_button variant="outlined">Outlined Button - """ - - attr :type, :string, default: nil - attr :class, :string, default: nil - attr :rest, :global, include: ~w(disabled form name value) - attr :variant, :string, default: "contained" - - slot :inner_block, required: true - - def bloom_button(assigns) do - ~H""" - - """ - end - - defp get_variant(variant) do - case variant do - "contained" -> "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" - "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" - _ -> "bg-zinc-900 hover:bg-zinc-700" - end - end -end diff --git a/lib/bloom/components/button.ex b/lib/bloom/components/button.ex new file mode 100644 index 0000000..aee5e59 --- /dev/null +++ b/lib/bloom/components/button.ex @@ -0,0 +1,50 @@ +defmodule Bloom.Components.Button do + use Phoenix.Component + + @moduledoc """ + An extension of the *core_components button*. + The `<.button>` has the ability to handle a variant attribute. + This makes it possible to have a `contained` or `outlined` look. + + ## Examples + <.button>Send! + <.button variant="outlined">Outlined Button + """ + + attr(:type, :string, default: nil) + attr(:class, :string, default: nil) + attr(:rest, :global, include: ~w(disabled form name value)) + attr(:variant, :string, default: "contained") + + slot(:inner_block, required: true) + + def button(assigns) do + ~H""" + + """ + end + + defp get_variant(variant) do + case variant do + "contained" -> + "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" + + "outlined" -> + "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700" + + _ -> + "bg-zinc-900 hover:bg-zinc-700" + end + end +end diff --git a/priv/templates/bloom_button.ex b/priv/templates/bloom_button.ex deleted file mode 100644 index 0a5e3ec..0000000 --- a/priv/templates/bloom_button.ex +++ /dev/null @@ -1,46 +0,0 @@ - -defmodule <%= @module_name %>Web.Components.BloomButton do - use Phoenix.Component - - @moduledoc """ - An extension of the *core_components button*. - The `<.bloom_button>` has the ability to handle a variant attribute. - This makes it possible to have a `contained` or `outlined` look. - - ## Examples - <.bloom_button>Send! - <.bloom_button variant="outlined">Outlined Button - """ - - attr :type, :string, default: nil - attr :class, :string, default: nil - attr :rest, :global, include: ~w(disabled form name value) - attr :variant, :string, default: "contained" - - slot :inner_block, required: true - - def bloom_button(assigns) do - ~H""" - - """ - end - - defp get_variant(variant) do - case variant do - "contained" -> "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" - "outlined" -> "border-2 border-zinc-900 bg-transparent hover:bg-zinc-700 hover:border-zinc-700 hover:text-white text-zinc-900" - _ -> "bg-zinc-900 hover:bg-zinc-700" - end - end -end diff --git a/priv/templates/button.ex b/priv/templates/button.ex new file mode 100644 index 0000000..636eac4 --- /dev/null +++ b/priv/templates/button.ex @@ -0,0 +1,50 @@ +defmodule <%= @module_name %>Web.Components.Button do + use Phoenix.Component + + @moduledoc """ + An extension of the *core_components button*. + The `<.button>` has the ability to handle a variant attribute. + This makes it possible to have a `contained` or `outlined` look. + + ## Examples + <.button>Send! + <.button variant="outlined">Outlined Button + """ + + attr(:type, :string, default: nil) + attr(:class, :string, default: nil) + attr(:rest, :global, include: ~w(disabled form name value)) + attr(:variant, :string, default: "contained") + + slot(:inner_block, required: true) + + def button(assigns) do + ~H""" + + """ + end + + defp get_variant(variant) do + case variant do + "contained" -> + "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700" + + "outlined" -> + "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700" + + _ -> + "bg-zinc-900 hover:bg-zinc-700" + end + end +end From 771a7506800a59eb52b7305181509fbff06a771e Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Sun, 12 May 2024 20:34:39 +0200 Subject: [PATCH 8/8] added correct doc and generated templates --- bloom_site/lib/bloom_site_web/components/button.ex | 7 +++---- lib/bloom/components/button.ex | 7 +++---- priv/templates/button.ex | 7 +++---- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/bloom_site/lib/bloom_site_web/components/button.ex b/bloom_site/lib/bloom_site_web/components/button.ex index ad4764c..d97912d 100644 --- a/bloom_site/lib/bloom_site_web/components/button.ex +++ b/bloom_site/lib/bloom_site_web/components/button.ex @@ -1,14 +1,13 @@ defmodule BloomSiteWeb.Components.Button do use Phoenix.Component - @moduledoc """ + @doc """ An extension of the *core_components button*. The `<.button>` has the ability to handle a variant attribute. This makes it possible to have a `contained` or `outlined` look. - ## Examples - <.button>Send! - <.button variant="outlined">Outlined Button + ⚠️ Uninstall the core button component! + As you do not need two button components, the button component of the core phoenix_package can be deleted. """ attr(:type, :string, default: nil) diff --git a/lib/bloom/components/button.ex b/lib/bloom/components/button.ex index aee5e59..7d45df7 100644 --- a/lib/bloom/components/button.ex +++ b/lib/bloom/components/button.ex @@ -1,14 +1,13 @@ defmodule Bloom.Components.Button do use Phoenix.Component - @moduledoc """ + @doc """ An extension of the *core_components button*. The `<.button>` has the ability to handle a variant attribute. This makes it possible to have a `contained` or `outlined` look. - ## Examples - <.button>Send! - <.button variant="outlined">Outlined Button + ⚠️ Uninstall the core button component! + As you do not need two button components, the button component of the core phoenix_package can be deleted. """ attr(:type, :string, default: nil) diff --git a/priv/templates/button.ex b/priv/templates/button.ex index 636eac4..341a972 100644 --- a/priv/templates/button.ex +++ b/priv/templates/button.ex @@ -1,14 +1,13 @@ defmodule <%= @module_name %>Web.Components.Button do use Phoenix.Component - @moduledoc """ + @doc """ An extension of the *core_components button*. The `<.button>` has the ability to handle a variant attribute. This makes it possible to have a `contained` or `outlined` look. - ## Examples - <.button>Send! - <.button variant="outlined">Outlined Button + ⚠️ Uninstall the core button component! + As you do not need two button components, the button component of the core phoenix_package can be deleted. """ attr(:type, :string, default: nil)