@truedat/auth 8.14.4 → 8.14.5

package/src/groups/components/__tests__/GroupModals.spec.js

@@ -86,7 +86,7 @@ describe("Group modals", () => {
         ).toBeInTheDocument();
       else
         expect(
-          await ui.findByRole("textbox", { name: "Nombre del grupo" }),
+          await ui.findByRole("textbox", { name: "Group name" }),
         ).toBeInTheDocument();
     },
   );
@@ -95,7 +95,9 @@ describe("Group modals", () => {
     const ui = setup("/groups/1");
     await userEvent
       .setup({ delay: null })
-      .click(ui.getByRole("button", { name: "Close" }));
+      .click(
+        within(ui.getByRole("dialog")).getByRole("button", { name: "Close" }),
+      );
     await waitFor(() =>
       expect(ui.queryByRole("dialog")).not.toBeInTheDocument(),
     );
@@ -105,20 +107,20 @@ describe("Group modals", () => {
   it("preserves edits after a failed write", async () => {
     apiJsonPut.mockRejectedValue(new Error("offline"));
     const ui = setup("/groups/1/edit");
-    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const input = await ui.findByRole("textbox", { name: "Group name" });
     const user = userEvent.setup({ delay: null });
     await user.clear(input);
     await user.type(input, "Updated team");
-    await user.click(ui.getByRole("button", { name: "actions.save" }));
+    await user.click(ui.getByRole("button", { name: "actions.edit" }));
     await ui.findByText(
-      "No se ha podido completar la operación. Inténtalo de nuevo.",
+      "The operation could not be completed. Please try again.",
     );
     expect(input).toHaveValue("Updated team");
   });
 
   it("preserves an edit draft if directory revalidation fails", async () => {
     const ui = setup("/groups/1/edit");
-    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const input = await ui.findByRole("textbox", { name: "Group name" });
     const user = userEvent.setup({ delay: null });
     await user.clear(input);
     await user.type(input, "Draft team");
@@ -126,9 +128,7 @@ describe("Group modals", () => {
     apiJson.mockRejectedValue(new Error("offline"));
     await user.click(ui.getByRole("button", { name: "Refresh users" }));
 
-    expect(
-      await ui.findByText("No se han podido cargar los usuarios."),
-    ).toBeInTheDocument();
+    expect(await ui.findByText("Could not load users.")).toBeInTheDocument();
     expect(input).toHaveValue("Draft team");
   });
 
@@ -140,17 +140,19 @@ describe("Group modals", () => {
       }),
     );
     const ui = setup("/groups/1/edit");
-    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const input = await ui.findByRole("textbox", { name: "Group name" });
     const user = userEvent.setup({ delay: null });
     await user.type(input, " updated");
     await waitFor(() =>
       expect(
-        ui.getByRole("button", { name: "actions.save" }),
+        ui.getByRole("button", { name: "actions.edit" }),
       ).not.toBeDisabled(),
     );
-    await user.click(ui.getByRole("button", { name: "actions.save" }));
+    await user.click(ui.getByRole("button", { name: "actions.edit" }));
     await waitFor(() =>
-      expect(ui.getByRole("button", { name: "Close" })).toBeDisabled(),
+      expect(
+        within(ui.getByRole("dialog")).getByRole("button", { name: "Close" }),
+      ).toBeDisabled(),
     );
     await act(async () => deferred.resolve({ data: { data: group } }));
   });
@@ -163,7 +165,7 @@ describe("Group modals", () => {
       }),
     );
     const ui = setup("/groups/1/edit");
-    await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    await ui.findByRole("textbox", { name: "Group name" });
     const user = userEvent.setup({ delay: null });
     await user.click(document.querySelector(".group-delete-action"));
     const confirmation = document.querySelector(".group-modal--delete");
@@ -194,7 +196,7 @@ describe("Group modals", () => {
     );
     const ui = setup("/groups/1");
     expect(
-      await ui.findByText("Este grupo no tiene miembros"),
+      await ui.findByText("This group has no members"),
     ).toBeInTheDocument();
   });
 
@@ -203,8 +205,32 @@ describe("Group modals", () => {
     const ui = setup("/groups/1");
     expect(
       await within(ui.getByRole("dialog")).findByRole("button", {
-        name: "Reintentar",
+        name: "Retry",
       }),
     ).toBeInTheDocument();
   });
 });
+
+it("keeps member autocomplete disabled and uses common edit actions", async () => {
+  const ui = setup("/groups/1/edit");
+  const name = await ui.findByRole("textbox", { name: "Group name" });
+  expect(name.closest("form").querySelector("input.search")).toHaveAttribute(
+    "autocomplete",
+    "off",
+  );
+  expect(ui.getByRole("button", { name: "actions.close" })).toBeEnabled();
+  expect(ui.getByRole("button", { name: "actions.edit" })).toBeDisabled();
+});
+
+it("returns keyboard focus to the group after closing a directly opened dialog", async () => {
+  const ui = setup("/groups/1");
+  await ui.findByText("Full description", { selector: ".true-modal-subtitle" });
+  const keyboard = userEvent.setup({ delay: null });
+  await keyboard.keyboard("{Escape}");
+  await waitFor(() => {
+    expect(ui.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(
+      ui.container.querySelector('.gc-content[href="/groups/1"]'),
+    ).toHaveFocus();
+  });
+});

package/src/groups/components/__tests__/__snapshots__/GroupCards.spec.js.snap

@@ -5,6 +5,20 @@ exports[`<GroupCards /> matches the latest snapshot 1`] = `
   <div
     class="groups-toolbar"
   >
+    <div
+      class="ui left icon input"
+    >
+      <input
+        aria-label="Search groups or users…"
+        placeholder="Search groups or users…"
+        type="text"
+        value=""
+      />
+      <i
+        aria-hidden="true"
+        class="search icon"
+      />
+    </div>
     <a
       class="ui primary button group-create-button"
       data-discover="true"

package/src/styles/Groups.less

@@ -1,8 +1,21 @@
 .groups-toolbar {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+
+  > .ui.input {
+    flex: 1 1 12rem;
+    min-width: 0;
+    > input {
+      min-width: 0;
+    }
+  }
+
   .group-create-button.ui.button {
+    margin: 0;
     display: inline-flex;
     align-items: center;
     gap: 0.65rem;
@@ -21,6 +34,39 @@
     }
   }
 }
+.groups-search-hint {
+  position: relative;
+  padding-right: 1.5rem;
+
+  .groups-search-hint-close.ui.button {
+    position: absolute;
+    top: -0.55rem;
+    right: -0.6rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+    padding: 0;
+    color: #64748b;
+    opacity: 0.65;
+    box-shadow: none;
+
+    &:hover,
+    &:focus-visible {
+      color: #334155;
+      opacity: 1;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    > .icon {
+      margin: 0;
+      font-size: 0.75rem;
+    }
+  }
+}
+.ui.popup.groups-search-hint-popup {
+  z-index: 999 !important;
+}
 .groups-card-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
@@ -42,89 +88,49 @@
 }
 .td-group-card {
   --card-accent-color: var(--td-card-accent, #002057);
-  --card-secondary-color: var(--td-card-secondary, #ed5c17);
-  --gc-action-tint: rgba(100, 116, 139, 0.07);
+  --card-border-color: #edf2f7;
+  --card-elevation-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.28);
+  --card-motion-duration: 300ms;
+  --card-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   position: relative;
   height: auto;
-  min-height: 160px;
+  min-height: 152px;
   overflow: hidden;
   min-width: 0;
   background: #fff;
-  border: 1px solid #edf2f7;
-  border-radius: 1.25rem 0.5rem 1.5rem 0.25rem;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
+  border: 1px solid var(--card-border-color);
+  border-radius: 0 0.5rem 1.5rem 0.25rem;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
   color: #334155;
   transition:
-    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
-    border-color 140ms ease,
-    box-shadow 140ms ease;
+    transform var(--card-motion-duration) var(--card-motion-easing),
+    box-shadow var(--card-motion-duration) var(--card-motion-easing),
+    border-color var(--card-motion-duration) var(--card-motion-easing);
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-left: 8px solid var(--card-accent-color);
-    border-radius: inherit;
-    opacity: 0;
-    transform: translateX(-8px);
-    transition:
-      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
-    pointer-events: none;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: linear-gradient(270deg, var(--gc-action-tint), transparent 75%);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 180ms ease;
-  }
-  &:has(.gc-actions a:hover),
-  &:has(.gc-actions a:focus-visible) {
-    --gc-action-tint: rgba(37, 99, 235, 0.09);
-    border-color: rgba(37, 99, 235, 0.7);
-  }
   &:hover,
   &:focus-within {
     transform: translateY(-4px);
-    border-color: var(--card-accent-color);
-    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18);
-    &::after {
-      opacity: 1;
+    box-shadow: var(--card-elevation-shadow);
+    .gc-actions {
+      visibility: visible;
     }
     .gc-avatar {
-      background: var(--card-secondary-color);
+      background: @primaryColor;
       color: #fff;
-      box-shadow: -0.3rem 0.2rem 0 var(--card-accent-color);
-      transform: translate(0.3rem, -0.2rem);
-    }
-    .gc-content h3 {
-      color: var(--card-secondary-color);
-      transform: translate(0.3rem, -0.2rem);
-    }
-    &::before {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    .gc-actions {
-      opacity: 1;
-      transform: translateX(0);
-      pointer-events: auto;
-      transition-delay: 0ms;
     }
   }
+  &:active {
+    transform: translateY(-1px);
+  }
   .gc-content {
     display: grid;
     grid-template-columns: 2.75rem minmax(0, 1fr);
     align-content: start;
     align-items: center;
-    column-gap: 0.75rem;
+    column-gap: 0.625rem;
     row-gap: 0.3rem;
     min-height: inherit;
-    padding: calc(1.45em - 0.28rem) 2rem 2.25rem calc(1em + 0.35rem);
+    padding: calc(1.25em - 0.28rem) 2rem 2.25rem calc(1em + 0.35rem);
     border-radius: inherit;
     color: inherit;
     text-align: left;
@@ -138,9 +144,6 @@
       font-weight: 800;
       line-height: 1.25;
       color: #1e293b;
-      transition:
-        color 300ms cubic-bezier(0.22, 1, 0.36, 1),
-        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
     }
     h3,
     .gc-name,
@@ -168,13 +171,11 @@
     grid-row: 1;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.08);
-    font-size: 1.5rem;
+    font-size: 1.625rem;
     color: var(--card-accent-color);
     transition:
-      background 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      color 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+      background-color 200ms ease,
+      color 200ms ease;
     > .icon {
       margin: 0;
     }
@@ -185,14 +186,14 @@
     padding-left: 0.5rem;
   }
   .gc-name {
-    font-size: 0.85rem;
+    font-size: 0.9375rem;
     color: #64748b;
   }
   .gc-description {
-    margin: 0.75rem 0 0;
-    padding-top: 0.75rem;
+    margin: 0.625rem 0 0;
+    padding-top: 0.625rem;
     border-top: 1px solid #e2e8f0;
-    font-size: 13px;
+    font-size: 14px;
     line-height: 1.2;
     color: #64748b;
   }
@@ -205,17 +206,13 @@
     flex-direction: column;
     align-items: flex-end;
     gap: 0.25rem;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateX(0.45rem);
-    transition:
-      opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms,
-      transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
+    visibility: hidden;
     a {
       display: flex;
       align-items: center;
       width: auto;
       max-width: 1.75rem;
+      justify-content: flex-start;
       height: 1.75rem;
       padding: 0;
       border: 1px solid #64748b;
@@ -223,21 +220,17 @@
       border-radius: 0.5rem 0 0 0.5rem;
       background: #fff;
       color: #64748b;
-      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
       cursor: pointer;
       overflow: hidden;
       white-space: nowrap;
       transition:
         max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
-        padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
-        color 140ms ease,
-        background-color 140ms ease,
-        border-color 140ms ease;
+        padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
       i.icon {
         flex: 0 0 1.75rem;
         width: 1.75rem;
         margin: 0;
-        font-size: 0.8rem;
+        font-size: 1rem;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -248,13 +241,13 @@
       &:focus-visible {
         max-width: 14rem;
         padding: 0 1rem 0 0.08rem;
-        color: #1d4ed8;
-        background: #e8f1ff;
-        border-color: rgba(37, 99, 235, 0.62);
         .gc-action-label {
           max-width: 11rem;
           opacity: 1;
         }
+        color: #fff;
+        background: var(--card-accent-color);
+        border-color: var(--card-accent-color);
       }
       &:focus-visible {
         outline: 2px solid currentColor;
@@ -292,12 +285,9 @@
     line-height: 1;
     white-space: nowrap;
     pointer-events: none;
-    transition:
-      background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      color 300ms cubic-bezier(0.22, 1, 0.36, 1);
     > i.icon {
       margin: 0 0.4em 0 0;
-      font-size: 0.9rem;
+      font-size: 1rem;
       line-height: 1;
     }
   }
@@ -305,9 +295,6 @@
     max-width: 1em;
     overflow: hidden;
     opacity: 1;
-    transition:
-      max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 300ms ease;
   }
   .gc-count--empty .gc-count-label {
     text-transform: none;
@@ -318,32 +305,13 @@
     overflow: hidden;
     opacity: 0;
     text-transform: lowercase;
-    transition:
-      max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      margin-left 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 300ms ease;
-  }
-  &:hover .gc-count,
-  &:focus-within .gc-count {
-    background: var(--card-accent-color);
-    color: #ffffff;
-    .gc-count-label {
-      max-width: 8rem;
-      margin-left: 0.4em;
-      opacity: 1;
-    }
-    &.gc-count--empty {
-      .gc-count-empty-marker {
-        max-width: 0;
-        opacity: 0;
-      }
-      .gc-count-label {
-        margin-left: 0;
-      }
-    }
   }
 }
 .ui.modal.group-modal {
+  > .content i.icon,
+  > .actions .button > i.icon {
+    font-size: 1.125em;
+  }
   --group-modal-gap: clamp(16px, 6vh, 56px);
   --group-modal-gap: clamp(16px, 6dvh, 56px);
   max-height: calc(100vh - 2 * var(--group-modal-gap));
@@ -424,9 +392,7 @@
     min-height: 12rem;
   }
   .td-group-card .gc-actions {
-    opacity: 1;
-    transform: none;
-    pointer-events: auto;
+    visibility: visible;
     a {
       min-width: 2.75rem;
       max-width: 2.75rem;
@@ -436,19 +402,18 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .td-group-card,
-  .td-group-card::before,
-  .td-group-card::after,
   .td-group-card .gc-avatar,
-  .td-group-card .gc-content h3,
-  .td-group-card .gc-actions,
   .td-group-card .gc-actions a,
-  .td-group-card .gc-action-label,
-  .td-group-card .gc-count,
-  .td-group-card .gc-count-empty-marker,
-  .td-group-card .gc-count-label {
+  .td-group-card .gc-action-label {
     transition: none;
   }
+  .td-group-card,
+  .td-group-card:hover,
+  .td-group-card:focus-within,
+  .td-group-card:active {
+    transition: none;
+    transform: none;
+  }
 }
 
 .ui.modal.group-modal--info {
@@ -1004,6 +969,6 @@
 }
 
 .ui.modal.group-modal--new > .header:not(.ui) {
-  background: @secondaryColor;
+  background: @primaryColor;
   color: #fff;
 }