diff --git a/lib/mave_core_web/components/dashboard_components/states.ex b/lib/mave_core_web/components/dashboard_components/states.ex index a0d5f8c..022fe96 100644 --- a/lib/mave_core_web/components/dashboard_components/states.ex +++ b/lib/mave_core_web/components/dashboard_components/states.ex @@ -296,7 +296,12 @@ defmodule MaveCoreWeb.DashboardComponents.States do
-
{@current}
+
0 && "text-red-500"]} + > + {@current} +
{@max}
diff --git a/storybook/dashboard/states/usage_bar.story.exs b/storybook/dashboard/states/usage_bar.story.exs index 8bf512e..0343c90 100644 --- a/storybook/dashboard/states/usage_bar.story.exs +++ b/storybook/dashboard/states/usage_bar.story.exs @@ -56,6 +56,16 @@ defmodule Storybook.Dashboard.States.UsageBar do max: "10,000 calls", percent: 100.0 } + }, + %Variation{ + id: :over_limit, + description: "Over limit (129%)", + attributes: %{ + label: "Bandwidth", + current: "1.29 TB", + max: "1 TB", + percent: 129.0 + } } ] end diff --git a/test/mave_core_web/components/dashboard_components/states_test.exs b/test/mave_core_web/components/dashboard_components/states_test.exs index 397710d..83bf2a2 100644 --- a/test/mave_core_web/components/dashboard_components/states_test.exs +++ b/test/mave_core_web/components/dashboard_components/states_test.exs @@ -16,6 +16,7 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do assert html =~ ~s(data-usage-segment="within-limit") assert html =~ ~s(style="width: 25.0%;") refute html =~ ~s(data-usage-segment="overage") + refute html =~ "text-red-500" end test "usage_bar shows the portion above the limit in red" do @@ -31,5 +32,6 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do assert html =~ ~s(data-usage-segment="overage") assert html =~ "bg-red-500" assert html =~ ~s(style="width: 25.0%;") + assert html =~ ~r/data-usage-current[^>]*class="flex-grow text-red-500"/ end end