diff --git a/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte b/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte new file mode 100644 index 0000000000..0eb629b02d --- /dev/null +++ b/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte @@ -0,0 +1,76 @@ + + + + +
+ +
+ +
+ +
+ + diff --git a/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js b/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js new file mode 100644 index 0000000000..125db40d1f --- /dev/null +++ b/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js @@ -0,0 +1,55 @@ +import { afterEach, describe, expect, it } from "vitest"; +import { cleanup, getAllByRole, render } from "@testing-library/svelte"; + +import { UsageIndicator } from ".."; + +const getPercentages = () => + getAllByRole(document.body, "graphics-symbol").map((el) => + Number( + el + .getAttribute("data-tooltip-text") + ?.replace(/^.*?(\d+(\.\d+)?)%.*?$/, "$1") + ) + ); + +describe("UsageIndicator", () => { + const baseProps = { + value: 45, + }; + const baseOptions = { + props: baseProps, + target: document.body, + }; + + afterEach(cleanup); + + it("should render the `UsageIndicator` component and react to value changes", async () => { + const { container, rerender } = render(UsageIndicator, baseOptions); + + expect(getPercentages()).toStrictEqual([45, 55]); + expect(container.firstChild).toMatchSnapshot(); + + await rerender({ value: 80 }); + + expect(getPercentages()).toStrictEqual([80, 20]); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("should accept additional class names", () => { + const props = { ...baseProps, className: "foo bar" }; + const { container } = render(UsageIndicator, { ...baseOptions, props }); + + expect(container.firstChild).toHaveClass("usage-indicator foo bar"); + }); + + it("should round decimal values at two decimals", async () => { + const props = { ...baseProps, value: 45.7687 }; + const { rerender } = render(UsageIndicator, { ...baseOptions, props }); + + expect(getPercentages()).toStrictEqual([45.77, 54.23]); + + await rerender({ value: 0.005 }); + + expect(getPercentages()).toStrictEqual([0.01, 99.99]); + }); +}); diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/UsageIndicator.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/UsageIndicator.spec.js.snap new file mode 100644 index 0000000000..414a59a9b8 --- /dev/null +++ b/web-wallet/src/lib/components/__tests__/__snapshots__/UsageIndicator.spec.js.snap @@ -0,0 +1,95 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`UsageIndicator > should render the \`UsageIndicator\` component and react to value changes 1`] = ` +
+ + + + + +
+ + + + + + +
+`; + +exports[`UsageIndicator > should render the \`UsageIndicator\` component and react to value changes 2`] = ` +
+ + + + + +
+ + + + + + +
+`; diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js index bcdeb2ddde..8acf0b5a4a 100644 --- a/web-wallet/src/lib/components/index.js +++ b/web-wallet/src/lib/components/index.js @@ -15,3 +15,4 @@ export { default as Send } from "./Send/Send.svelte"; export { default as ScanQR } from "./ScanQR/ScanQR.svelte"; export { default as Stake } from "./Stake/Stake.svelte"; export { default as Transactions } from "./Transactions/Transactions.svelte"; +export { default as UsageIndicator } from "./UsageIndicator/UsageIndicator.svelte"; diff --git a/web-wallet/src/routes/components-showcase/+page.svelte b/web-wallet/src/routes/components-showcase/+page.svelte index b991bf8dcd..719188735c 100644 --- a/web-wallet/src/routes/components-showcase/+page.svelte +++ b/web-wallet/src/routes/components-showcase/+page.svelte @@ -18,6 +18,7 @@ import Throbbers from "./Throbbers.svelte"; import Toasts from "./Toasts.svelte"; import Tooltips from "./Tooltips.svelte"; + import UsageIndicators from "./UsageIndicators.svelte"; import Wizards from "./Wizards.svelte"; /** @type {Record} */ @@ -37,6 +38,7 @@ Throbbers: Throbbers, Toasts: Toasts, Tooltips: Tooltips, + "Usage Indicators": UsageIndicators, Wizards: Wizards, }; diff --git a/web-wallet/src/routes/components-showcase/UsageIndicators.svelte b/web-wallet/src/routes/components-showcase/UsageIndicators.svelte new file mode 100644 index 0000000000..635a089fcb --- /dev/null +++ b/web-wallet/src/routes/components-showcase/UsageIndicators.svelte @@ -0,0 +1,11 @@ + + + + +
+
+ +
+
diff --git a/web-wallet/src/style/dusk/colors.css b/web-wallet/src/style/dusk/colors.css index 9359f710fe..4d4df38788 100644 --- a/web-wallet/src/style/dusk/colors.css +++ b/web-wallet/src/style/dusk/colors.css @@ -23,7 +23,8 @@ /* Status */ - --success: #16db93; + --success-500: #16db93; + --success-700: #0f9363; --warning: #ffcf23; --error: #ed254e; --info: #71b1ff; diff --git a/web-wallet/src/style/dusk/language.css b/web-wallet/src/style/dusk/language.css index 390f98c736..00c49de720 100644 --- a/web-wallet/src/style/dusk/language.css +++ b/web-wallet/src/style/dusk/language.css @@ -12,7 +12,8 @@ --danger-color: var(--error); --error-color: var(--error); --info-color: var(--info); - --success-color: var(--success); + --success-color: var(--success-500); + --success-color-variant-dark: var(--success-700); --warning-color: var(--warning); --on-background-color: var(--smokey-black);