From 7082f9dd87cd7a4fc2f1a48c27b7bbef031e86de Mon Sep 17 00:00:00 2001 From: Paulo Curado Date: Sat, 26 Oct 2024 09:03:50 +0300 Subject: [PATCH] add toggle component (#32) --- README.md | 2 +- .../assets/package-lock.json | 6 +-- daisy_ui_components_site/mix.lock | 2 +- .../storybook/components/toggle.story.exs | 42 +++++++++++++++ lib/daisy_ui_components.ex | 1 + lib/daisy_ui_components/breadcrumbs.ex | 4 +- lib/daisy_ui_components/toggle.ex | 52 +++++++++++++++++++ test/daisy_ui_components/toggle_test.exs | 52 +++++++++++++++++++ 8 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 daisy_ui_components_site/storybook/components/toggle.story.exs create mode 100644 lib/daisy_ui_components/toggle.ex create mode 100644 test/daisy_ui_components/toggle_test.exs diff --git a/README.md b/README.md index e291cf6..9caa7be 100644 --- a/README.md +++ b/README.md @@ -131,7 +131,7 @@ List of available components. - [Table](https://daisyui.com/components/table) ✅ - [Textarea](https://daisyui.com/components/textarea) ✅ - [Toast](https://daisyui.com/components/toast) ❌ -- [Toggle](https://daisyui.com/components/toggle) ❌ +- [Toggle](https://daisyui.com/components/toggle) ✅ - [Tooltip](https://daisyui.com/components/tooltip) ✅ ✅: Implemented diff --git a/daisy_ui_components_site/assets/package-lock.json b/daisy_ui_components_site/assets/package-lock.json index 77d23cf..03d819c 100644 --- a/daisy_ui_components_site/assets/package-lock.json +++ b/daisy_ui_components_site/assets/package-lock.json @@ -49,9 +49,9 @@ } }, "node_modules/daisyui": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz", - "integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==", + "version": "4.12.13", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.13.tgz", + "integrity": "sha512-BnXyQoOByUF/7wSdIKubyhXxbtL8gxwY3u2cNMkxGP39TSVJqMmlItqtpY903fQnLI/NokC+bc+ZV+PEPsppPw==", "dev": true, "dependencies": { "css-selector-tokenizer": "^0.8", diff --git a/daisy_ui_components_site/mix.lock b/daisy_ui_components_site/mix.lock index d710d94..f7a0896 100644 --- a/daisy_ui_components_site/mix.lock +++ b/daisy_ui_components_site/mix.lock @@ -7,7 +7,7 @@ "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"}, "expo": {:hex, :expo, "1.1.0", "f7b9ed7fb5745ebe1eeedf3d6f29226c5dd52897ac67c0f8af62a07e661e5c75", [:mix], [], "hexpm", "fbadf93f4700fb44c331362177bdca9eeb8097e8b0ef525c9cc501cb9917c960"}, "file_system": {:hex, :file_system, "1.0.1", "79e8ceaddb0416f8b8cd02a0127bdbababe7bf4a23d2a395b983c1f8b3f73edd", [:mix], [], "hexpm", "4414d1f38863ddf9120720cd976fce5bdde8e91d8283353f0e31850fa89feb9e"}, - "floki": {:hex, :floki, "0.36.2", "a7da0193538c93f937714a6704369711998a51a6164a222d710ebd54020aa7a3", [:mix], [], "hexpm", "a8766c0bc92f074e5cb36c4f9961982eda84c5d2b8e979ca67f5c268ec8ed580"}, + "floki": {:hex, :floki, "0.36.3", "1102f93b16a55bc5383b85ae3ec470f82dee056eaeff9195e8afdf0ef2a43c30", [:mix], [], "hexpm", "fe0158bff509e407735f6d40b3ee0d7deb47f3f3ee7c6c182ad28599f9f6b27a"}, "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"}, "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "88ab3a0d790e6a47404cba02800a6b25d2afae50", [tag: "v2.1.1", sparse: "optimized"]}, "hpax": {:hex, :hpax, "1.0.0", "28dcf54509fe2152a3d040e4e3df5b265dcb6cb532029ecbacf4ce52caea3fd2", [:mix], [], "hexpm", "7f1314731d711e2ca5fdc7fd361296593fc2542570b3105595bb0bc6d0fad601"}, diff --git a/daisy_ui_components_site/storybook/components/toggle.story.exs b/daisy_ui_components_site/storybook/components/toggle.story.exs new file mode 100644 index 0000000..13c213d --- /dev/null +++ b/daisy_ui_components_site/storybook/components/toggle.story.exs @@ -0,0 +1,42 @@ +defmodule Storybook.Components.Toggle do + use PhoenixStorybook.Story, :component + + alias DaisyUIComponents.Utils + + def function, do: &DaisyUIComponents.Toggle.toggle/1 + + def imports, do: [] + + def variations do + [ + %Variation{ + id: :default + }, + %VariationGroup{ + id: :colors, + variations: + for color <- Utils.colors() do + %Variation{ + id: String.to_atom(color), + attributes: %{ + color: color, + checked: "checked" + } + } + end + }, + %VariationGroup{ + id: :sizes, + variations: + for size <- Utils.sizes() do + %Variation{ + id: String.to_atom(size), + attributes: %{ + size: size + } + } + end + } + ] + end +end diff --git a/lib/daisy_ui_components.ex b/lib/daisy_ui_components.ex index fe5d5a7..9ff3807 100644 --- a/lib/daisy_ui_components.ex +++ b/lib/daisy_ui_components.ex @@ -30,6 +30,7 @@ defmodule DaisyUIComponents do import DaisyUIComponents.Table import DaisyUIComponents.TextInput import DaisyUIComponents.Textarea + import DaisyUIComponents.Toggle import DaisyUIComponents.Tooltip import DaisyUIComponents.Loading end diff --git a/lib/daisy_ui_components/breadcrumbs.ex b/lib/daisy_ui_components/breadcrumbs.ex index 333369c..3462963 100644 --- a/lib/daisy_ui_components/breadcrumbs.ex +++ b/lib/daisy_ui_components/breadcrumbs.ex @@ -10,7 +10,7 @@ defmodule DaisyUIComponents.Breadcrumbs do import DaisyUIComponents.Icon - attr :class, :string, default: nil + attr :class, :any, default: nil attr :rest, :global slot :item do @@ -22,7 +22,7 @@ defmodule DaisyUIComponents.Breadcrumbs do def breadcrumbs(assigns) do ~H""" -
+
    <%= for item <- @item do %>
  • diff --git a/lib/daisy_ui_components/toggle.ex b/lib/daisy_ui_components/toggle.ex new file mode 100644 index 0000000..5f831ba --- /dev/null +++ b/lib/daisy_ui_components/toggle.ex @@ -0,0 +1,52 @@ +defmodule DaisyUIComponents.Toggle do + @moduledoc """ + Stat component + + https://daisyui.com/components/toggle + + """ + + use DaisyUIComponents.Component + + attr :class, :any, default: nil + attr :color, :string, values: colors() + attr :size, :string, values: sizes() + attr :rest, :global, include: ~w(checked) + + def toggle(assigns) do + assigns = + assign( + assigns, + :class, + join_classes( + [ + "toggle", + toggle_color(assigns[:color]), + toggle_size(assigns[:size]) + ], + assigns.class + ) + ) + + ~H""" + + """ + end + + # Color + defp toggle_color("primary"), do: "toggle-primary" + defp toggle_color("secondary"), do: "toggle-secondary" + defp toggle_color("accent"), do: "toggle-accent" + defp toggle_color("info"), do: "toggle-info" + defp toggle_color("success"), do: "toggle-success" + defp toggle_color("warning"), do: "toggle-warning" + defp toggle_color("error"), do: "toggle-error" + defp toggle_color(_color), do: nil + + # Size + defp toggle_size("xs"), do: "toggle-xs" + defp toggle_size("sm"), do: "toggle-sm" + defp toggle_size("md"), do: "toggle-md" + defp toggle_size("lg"), do: "toggle-lg" + defp toggle_size(_size), do: nil +end diff --git a/test/daisy_ui_components/toggle_test.exs b/test/daisy_ui_components/toggle_test.exs new file mode 100644 index 0000000..620b598 --- /dev/null +++ b/test/daisy_ui_components/toggle_test.exs @@ -0,0 +1,52 @@ +defmodule DaisyUIComponents.ToggleTest do + use ExUnit.Case + + import Phoenix.Component + import Phoenix.LiveViewTest + import DaisyUIComponents.Toggle + + alias DaisyUIComponents.Utils + + test "toggle" do + assigns = %{} + + toggle = + rendered_to_string(~H""" + <.toggle checked="checked" /> + """) + + assert toggle =~ ~s( + """) + + assert toggle =~ ~s( + """) =~ ~s() + end + end + + test "toggle sizes" do + for size <- Utils.sizes() do + assigns = %{size: size} + + assert rendered_to_string(~H""" + <.toggle size={@size} /> + """) =~ ~s() + end + end +end