@truedat/dd 8.13.1 → 8.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.13.1",
+  "version": "8.13.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -46,7 +46,7 @@
       ]
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!marked|turndown|@tiptap|react-router|cookie-es)/"
+      "/node_modules/(?!(marked|turndown|@tiptap|react-router|cookie-es|query-string|decode-uri-component|split-on-first|filter-obj)/)"
     ]
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.13.1",
+    "@truedat/test": "8.13.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -90,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "09ce6d3a8693835de75577e43d99d86addb2edf7"
+  "gitHead": "f02b46c12aeac48b129806b2c6a23cb0c87dcc94"
 }

package/src/components/GrantCartMenu.js

@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Link } from "react-router";
+import { Menu, Icon, Label } from "semantic-ui-react";
+import routes from "@truedat/core/routes";
+
+export const GrantCartMenu = ({ cartCount = 0 }) => {
+  const { formatMessage } = useIntl();
+  const [cartAnimation, setCartAnimation] = useState({
+    count: cartCount,
+    revision: 0,
+    direction: undefined,
+  });
+
+  if (cartAnimation.count !== cartCount) {
+    const direction =
+      cartCount > cartAnimation.count ? "cart-added" : "cart-removed";
+    const visibleDirection =
+      cartAnimation.count === 0 ? "cart-enter" : direction;
+    const nextDirection = cartCount === 0 ? "cart-exit" : visibleDirection;
+    const continuingBatch =
+      cartCount > 0 &&
+      (cartAnimation.direction === nextDirection ||
+        (cartAnimation.direction === "cart-enter" &&
+          direction === "cart-added"));
+    setCartAnimation({
+      count: cartCount,
+      revision: cartAnimation.revision + (continuingBatch ? 0 : 1),
+      direction: continuingBatch ? cartAnimation.direction : nextDirection,
+    });
+  }
+
+  useEffect(() => {
+    if (!cartAnimation.direction) return;
+    const timeout = setTimeout(
+      () => {
+        setCartAnimation((current) => ({ ...current, direction: undefined }));
+      },
+      cartAnimation.direction === "cart-added" ? 600 : 460,
+    );
+    return () => clearTimeout(timeout);
+  }, [cartCount, cartAnimation.direction, cartAnimation.revision]);
+
+  return cartCount > 0 || cartAnimation.direction === "cart-exit" ? (
+    <Menu.Item
+      className="grant-cart-menu"
+      as={cartCount > 0 ? Link : "div"}
+      aria-disabled={cartCount === 0 || undefined}
+      aria-label={formatMessage(
+        {
+          id: "navigation.grant_cart",
+          defaultMessage: "Checkout ({count})",
+        },
+        { count: cartCount },
+      )}
+      to={cartCount > 0 ? routes.GRANTS_REQUESTS_CHECKOUT : undefined}
+    >
+      <Icon
+        key={cartAnimation.revision}
+        name="shopping cart"
+        flipped="horizontally"
+        className={cartAnimation.direction}
+      />
+      {(cartAnimation.direction === "cart-added" ||
+        cartAnimation.direction === "cart-removed") && (
+        <Icon
+          key={`incoming-${cartAnimation.revision}`}
+          name="shopping cart"
+          className={
+            cartAnimation.direction === "cart-added"
+              ? "cart-incoming"
+              : "cart-outgoing"
+          }
+          aria-hidden="true"
+        />
+      )}
+      {cartCount > 0 && (
+        <Label
+          circular
+          color="red"
+          size="mini"
+          className="top-menu-cart-counter"
+          aria-live="polite"
+        >
+          <span
+            key={cartAnimation.revision}
+            className={
+              cartAnimation.direction === "cart-added"
+                ? "cart-counter-added"
+                : undefined
+            }
+          >
+            {cartCount > 99 ? "99+" : cartCount}
+          </span>
+        </Label>
+      )}
+    </Menu.Item>
+  ) : null;
+};
+
+GrantCartMenu.propTypes = { cartCount: PropTypes.number };
+
+const mapStateToProps = ({ grantRequestsCart }) => ({
+  cartCount: grantRequestsCart?.structures?.length ?? 0,
+});
+
+export default connect(mapStateToProps)(GrantCartMenu);

package/src/components/__tests__/GrantCartMenu.spec.js

@@ -0,0 +1,169 @@
+import React, { act } from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import ConnectedGrantCartMenu, { GrantCartMenu } from "../GrantCartMenu";
+
+describe("<GrantCartMenu />", () => {
+  const storeState = {};
+  it("reads the real cart count from Redux", async () => {
+    const rendered = render(<ConnectedGrantCartMenu />, {
+      state: { grantRequestsCart: { structures: [{ id: 1 }, { id: 2 }] } },
+    });
+    await waitForLoad(rendered);
+    expect(
+      rendered.getByRole("link", { name: "Checkout (2)" }),
+    ).toHaveTextContent("2");
+  });
+  it.each([
+    [0, ""],
+    [1, "1"],
+    [30, "30"],
+    [99, "99"],
+    [100, "99+"],
+    [230, "99+"],
+  ])(
+    "shows capped cart count %i and hides empty cart",
+    async (count, badge) => {
+      const rendered = render(<GrantCartMenu cartCount={count} />, {
+        state: storeState,
+      });
+      await waitForLoad(rendered);
+      const cart = rendered.queryByRole("link", {
+        name: `Checkout (${count})`,
+      });
+      if (count === 0) expect(cart).not.toBeInTheDocument();
+      else expect(cart).toHaveTextContent(badge);
+    },
+  );
+
+  it("animates additions and removals, including batches above 99", async () => {
+    const rendered = render(<GrantCartMenu cartCount={99} />, {
+      state: storeState,
+    });
+    await waitForLoad(rendered);
+    const initialIcon = rendered.container.querySelector(".shopping.cart.icon");
+    expect(initialIcon).not.toHaveClass("cart-added");
+
+    rendered.rerender(<GrantCartMenu cartCount={100} />);
+    const addedIcon = rendered.container.querySelector(".shopping.cart.icon");
+    expect(addedIcon).toHaveClass("cart-added");
+    expect(addedIcon).not.toBe(initialIcon);
+
+    act(() => jest.advanceTimersByTime(600));
+    rendered.rerender(<GrantCartMenu cartCount={230} />);
+    const batchIcon = rendered.container.querySelector(".shopping.cart.icon");
+    expect(batchIcon).not.toBe(addedIcon);
+    expect(batchIcon).toHaveClass("cart-added");
+
+    rendered.rerender(<GrantCartMenu cartCount={229} />);
+    const removedIcon = rendered.container.querySelector(".shopping.cart.icon");
+    expect(removedIcon).not.toBe(batchIcon);
+    expect(removedIcon).toHaveClass("cart-removed");
+    rendered.rerender(<GrantCartMenu cartCount={229} />);
+    expect(rendered.container.querySelector(".shopping.cart.icon")).toBe(
+      removedIcon,
+    );
+
+    rendered.rerender(<GrantCartMenu cartCount={0} />);
+    expect(rendered.container.querySelector(".shopping.cart.icon")).toHaveClass(
+      "cart-exit",
+    );
+    expect(
+      rendered.container.querySelector(".top-menu-cart-counter"),
+    ).toBeNull();
+    expect(rendered.queryByRole("link")).not.toBeInTheDocument();
+    act(() => jest.advanceTimersByTime(460));
+    expect(rendered.container.querySelector(".shopping.cart.icon")).toBeNull();
+    rendered.rerender(<GrantCartMenu cartCount={1} />);
+    expect(rendered.container.querySelector(".shopping.cart.icon")).toHaveClass(
+      "cart-enter",
+    );
+  });
+
+  it("exits directly from one to zero even during a removal pulse", async () => {
+    const rendered = render(<GrantCartMenu cartCount={2} />);
+    await waitForLoad(rendered);
+    rendered.rerender(<GrantCartMenu cartCount={1} />);
+    expect(rendered.container.querySelector(".shopping.cart.icon")).toHaveClass(
+      "cart-removed",
+    );
+    rendered.rerender(<GrantCartMenu cartCount={0} />);
+    const icon = rendered.container.querySelector(".shopping.cart.icon");
+    expect(icon).toHaveClass("cart-exit");
+    expect(icon).not.toHaveClass("cart-removed");
+    expect(
+      rendered.container.querySelector(".top-menu-cart-counter"),
+    ).toBeNull();
+    act(() => jest.advanceTimersByTime(460));
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it.each([1, 5])(
+    "enters from an empty cart when adding %i requests",
+    async (count) => {
+      const rendered = render(<GrantCartMenu cartCount={0} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector(".shopping.cart.icon"),
+      ).toBeNull();
+      rendered.rerender(<GrantCartMenu cartCount={count} />);
+      const icon = rendered.container.querySelector(".shopping.cart.icon");
+      expect(icon).toHaveClass("cart-enter");
+      expect(icon).not.toHaveClass("cart-added");
+      act(() => jest.advanceTimersByTime(460));
+      rendered.rerender(<GrantCartMenu cartCount={count + 1} />);
+      expect(
+        rendered.container.querySelector(".shopping.cart.icon"),
+      ).toHaveClass("cart-added");
+    },
+  );
+
+  it("cancels the pending exit when new requests are added", async () => {
+    const rendered = render(<GrantCartMenu cartCount={3} />);
+    await waitForLoad(rendered);
+    rendered.rerender(<GrantCartMenu cartCount={0} />);
+    act(() => jest.advanceTimersByTime(200));
+    rendered.rerender(<GrantCartMenu cartCount={2} />);
+    act(() => jest.advanceTimersByTime(460));
+    expect(
+      rendered.getByRole("link", { name: "Checkout (2)" }),
+    ).toHaveTextContent("2");
+    expect(
+      rendered.container.querySelector(".shopping.cart.icon"),
+    ).not.toHaveClass("cart-exit");
+  });
+
+  it.each([0, 10])(
+    "animates a burst of 30 additions once starting at %i",
+    async (initial) => {
+      const rendered = render(<GrantCartMenu cartCount={initial} />);
+      await waitForLoad(rendered);
+      rendered.rerender(<GrantCartMenu cartCount={initial + 1} />);
+      const icon = rendered.container.querySelector(".shopping.cart.icon");
+      const incoming = rendered.container.querySelector(".cart-incoming");
+      const number = rendered.container.querySelector(
+        ".top-menu-cart-counter > span",
+      );
+      Array.from({ length: 29 }, (_, index) => initial + index + 2).forEach(
+        (count) => {
+          act(() => jest.advanceTimersByTime(40));
+          rendered.rerender(<GrantCartMenu cartCount={count} />);
+          expect(rendered.container.querySelector(".shopping.cart.icon")).toBe(
+            icon,
+          );
+          expect(rendered.container.querySelector(".cart-incoming")).toBe(
+            incoming,
+          );
+          expect(
+            rendered.container.querySelector(".top-menu-cart-counter > span"),
+          ).toBe(number);
+        },
+      );
+      expect(number).toHaveTextContent(String(initial + 30));
+      act(() => jest.advanceTimersByTime(600));
+      rendered.rerender(<GrantCartMenu cartCount={initial + 31} />);
+      expect(rendered.container.querySelector(".shopping.cart.icon")).not.toBe(
+        icon,
+      );
+    },
+  );
+});

package/src/styles/GrantCartMenu.less

@@ -0,0 +1,194 @@
+.ui.menu .item.grant-cart-menu {
+  position: relative;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.03);
+  }
+}
+
+.ui.menu .item > .icon.cart-added {
+  transform-origin: center;
+  animation: cart-added-pulse 460ms cubic-bezier(0.22, 1, 0.36, 1);
+  animation-delay: 140ms;
+}
+
+.ui.menu .item > .icon.cart-removed {
+  transform-origin: center;
+  animation: cart-removed-pulse 460ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ui.menu .item.grant-cart-menu[aria-disabled="true"] {
+  cursor: default;
+  pointer-events: none;
+}
+
+.ui.menu .item > .icon.cart-exit {
+  animation: cart-exit 460ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+}
+
+.ui.menu .item > .icon.cart-enter {
+  animation: cart-enter 460ms cubic-bezier(0, 0.55, 0.45, 1) backwards;
+}
+
+@keyframes cart-enter {
+  from {
+    transform: translateX(48px) scaleX(-1);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scaleX(-1);
+    opacity: 1;
+  }
+}
+
+@keyframes cart-enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes cart-exit {
+  from {
+    transform: translateX(0) scaleX(-1);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-48px) scaleX(-1);
+    opacity: 0;
+  }
+}
+
+@keyframes cart-exit-fade {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes cart-removed-pulse {
+  0%,
+  100% {
+    transform: scaleX(-1);
+  }
+  38% {
+    color: @primaryColor;
+    transform: scale(-0.72, 0.72);
+  }
+  74% {
+    transform: scale(-1.03, 1.03);
+  }
+}
+
+@keyframes cart-added-pulse {
+  0%,
+  100% {
+    transform: scaleX(-1);
+  }
+  38% {
+    color: @red;
+    transform: scale(-1.28, 1.28);
+  }
+  74% {
+    transform: scale(-0.97, 0.97);
+  }
+}
+
+.top-menu-cart-counter > span {
+  display: inline-block;
+}
+
+.top-menu-cart-counter > .cart-counter-added {
+  transform-origin: center;
+  animation: cart-counter-added-pulse 460ms cubic-bezier(0.22, 1, 0.36, 1);
+  animation-delay: 140ms;
+}
+
+@keyframes cart-counter-added-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  38% {
+    transform: scale(1.28);
+  }
+  74% {
+    transform: scale(0.97);
+  }
+}
+
+.ui.menu .item.grant-cart-menu > .icon {
+  position: relative;
+  left: 4px;
+}
+
+.ui.menu .item.grant-cart-menu > .icon.cart-incoming,
+.ui.menu .item.grant-cart-menu > .icon.cart-outgoing {
+  position: absolute;
+  left: calc(50% + 2px);
+  top: 50%;
+  margin: 0;
+  pointer-events: none;
+  color: @primaryColor;
+  animation: cart-merge 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.ui.menu .item.grant-cart-menu > .icon.cart-outgoing {
+  animation: cart-separate 460ms cubic-bezier(0.55, 0, 1, 0.45) both;
+}
+
+@keyframes cart-separate {
+  0% {
+    transform: translate(-50%, -50%) scale(-1, 1);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate(calc(-50% + 32px), -50%) scale(-1, 1);
+    opacity: 0;
+  }
+}
+
+@keyframes cart-merge {
+  0% {
+    transform: translate(calc(-50% + 32px), -50%) scale(-1, 1);
+    opacity: 0;
+  }
+  25% {
+    opacity: 0.7;
+  }
+  75% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(-1, 1);
+    opacity: 0;
+  }
+}
+
+.ui.menu .item.grant-cart-menu .ui.label.top-menu-cart-counter {
+  position: absolute;
+  left: -3px;
+  top: 10px;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui.menu .item > .icon.cart-enter {
+    animation: cart-enter-fade 160ms ease-out backwards;
+  }
+  .ui.menu .item > .icon.cart-exit {
+    animation: cart-exit-fade 160ms ease-out forwards;
+  }
+  .ui.menu .item > .icon.cart-added,
+  .ui.menu .item > .icon.cart-removed,
+  .top-menu-cart-counter > .cart-counter-added {
+    animation: none;
+  }
+
+  .ui.menu .item.grant-cart-menu > .icon.cart-incoming,
+  .ui.menu .item.grant-cart-menu > .icon.cart-outgoing {
+    display: none;
+    animation: none;
+  }
+}