diff --git a/scripts/lazy-route-bundle-baseline.json b/scripts/lazy-route-bundle-baseline.json index 6838a7f..06978a1 100644 --- a/scripts/lazy-route-bundle-baseline.json +++ b/scripts/lazy-route-bundle-baseline.json @@ -2,7 +2,7 @@ "src/app/routes/ProtectedLayout.tsx": 3057, "src/pages/account-events/index.ts": 4364, "src/pages/account-operations/index.ts": 13854, - "src/pages/account/index.ts": 24695, + "src/pages/account/index.ts": 25407, "src/pages/accounts/index.ts": 6145, "src/pages/login/index.ts": 662, "src/pages/not-found/index.ts": 877, diff --git a/src/pages/account/ui/AccountPage.module.css b/src/pages/account/ui/AccountPage.module.css index 26cff9d..98c49fb 100644 --- a/src/pages/account/ui/AccountPage.module.css +++ b/src/pages/account/ui/AccountPage.module.css @@ -56,12 +56,37 @@ white-space: nowrap; } -.stockMeta { +.stockMeta, +.bondMeta { padding-top: var(--mantine-spacing-xs); margin-top: var(--mantine-spacing-sm); border-top: 1px solid var(--mantine-color-gray-2); } +.bondCard { + padding: var(--mantine-spacing-md); +} + +.bondMain { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: var(--mantine-spacing-sm); + align-items: center; +} + +.bondIdentity, +.bondValue { + min-width: 0; +} + +.bondIdentifiers { + overflow-wrap: anywhere; +} + +.bondValue { + white-space: nowrap; +} + .mono { font-family: var(--mantine-font-family-monospace); } diff --git a/src/pages/account/ui/AccountPage.test.tsx b/src/pages/account/ui/AccountPage.test.tsx index 935e7d9..2ef1891 100644 --- a/src/pages/account/ui/AccountPage.test.tsx +++ b/src/pages/account/ui/AccountPage.test.tsx @@ -165,9 +165,12 @@ describe("AccountPage states", () => { expect(screen.getByText("10 ₽")).toBeInTheDocument(); expect(screen.getByText("-1 ₽")).toBeInTheDocument(); expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument(); - expect(screen.getByText("Средняя цена: 11 ₽")).toBeInTheDocument(); - expect(screen.getByText("Доля: 100 %")).toBeInTheDocument(); - expect(screen.getByText("RU000A0JX0J2")).toBeInTheDocument(); + expect( + screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"), + ).toBeInTheDocument(); + expect( + screen.getByText("Количество: 1 · RU000A0JX0J2"), + ).toBeInTheDocument(); expect(screen.queryByText("—")).not.toBeInTheDocument(); expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute( "src", @@ -289,6 +292,34 @@ describe("AccountPage states", () => { expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument(); }); + it("renders bond cards in expanded layout with bond-specific classes", () => { + renderPage( + , + ); + expect(screen.getByText("О")).toBeInTheDocument(); + expect(screen.getByText("+50 ₽")).toBeInTheDocument(); + expect( + screen.getByText("Средняя цена: 950 ₽ · Доля: 100 %"), + ).toBeInTheDocument(); + }); + it("renders the bonds section as a single-column grid on any screen width", () => { renderPage( = (props) => { const { position, wide = false, variant } = props; const { t } = useTranslation(); - const isStock = variant === "stock"; + const isExpanded = variant === "stock" || variant === "bond"; + const ec = + variant === "bond" + ? { + card: classes.bondCard, + main: classes.bondMain, + identity: classes.bondIdentity, + identifiers: classes.bondIdentifiers, + value: classes.bondValue, + meta: classes.bondMeta, + } + : { + card: classes.stockCard, + main: classes.stockMain, + identity: classes.stockIdentity, + identifiers: classes.stockIdentifiers, + value: classes.stockValue, + meta: classes.stockMeta, + }; const returnClass = position.returnTone ? classes[position.returnTone] : undefined; @@ -46,24 +64,24 @@ const PositionCard: FC = (props) => { .filter(Boolean) .join(" · "); - if (isStock) + if (isExpanded) return ( - -
+ +
- + {position.displayName} - + {identifierText} - + {position.currentValue ? ( {formatMoney(position.currentValue)} @@ -77,7 +95,7 @@ const PositionCard: FC = (props) => {
{secondaryText ? ( - + {secondaryText} ) : null} diff --git a/src/pages/account/ui/components/PositionSection.view.tsx b/src/pages/account/ui/components/PositionSection.view.tsx index 6289f26..aa3c229 100644 --- a/src/pages/account/ui/components/PositionSection.view.tsx +++ b/src/pages/account/ui/components/PositionSection.view.tsx @@ -20,7 +20,13 @@ const PositionSection: FC = (props) => { key={`${position.figi}-${position.displayName}-${position.quantity}`} position={position} wide={section.wide} - variant={section.kind === "stocks" ? "stock" : undefined} + variant={ + section.kind === "stocks" + ? "stock" + : section.kind === "bonds" + ? "bond" + : undefined + } /> ))}