@ews-admin/global-design-system 1.26.0 → 1.28.0

package/dist/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.d.ts

@@ -17,6 +17,12 @@ export interface SpecialtySearchAutocompleteProps {
     title?: string;
     label?: string;
     getSelectedCountText?: (count: number) => React.ReactNode;
+    /**
+     * MED-1499: accessible label / tooltip of the button that removes a
+     * selected specialty from its chip. Defaults to the English
+     * "Remove specialty".
+     */
+    removeSpecialtyLabel?: string;
 }
 export declare const SpecialtySearchAutocomplete: React.FC<SpecialtySearchAutocompleteProps>;
 //# sourceMappingURL=SpecialtySearchAutocomplete.d.ts.map

package/dist/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpecialtySearchAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtD;AAED,MAAM,WAAW,gCAAgC;IAC/C,mBAAmB,EAAE,SAAS,EAAE,CAAC;IACjC,mBAAmB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC3D;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CA+JjC,CAAC"}
+{"version":3,"file":"SpecialtySearchAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtD;AAED,MAAM,WAAW,gCAAgC;IAC/C,mBAAmB,EAAE,SAAS,EAAE,CAAC;IACjC,mBAAmB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CAuLjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -41,6 +41,7 @@
     "@storybook/react": "^7.5.0",
     "@storybook/react-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "14",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^8.44.0",
@@ -51,6 +52,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "29",
+    "jest-environment-jsdom": "29",
     "postcss": "^8.5.6",
     "rollup": "^4.6.1",
     "rollup-plugin-dts": "^6.1.0",

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -22,6 +22,13 @@ interface SearchAutocompleteProps<T extends SearchableEntity> {
   minSearchLength?: number;
   debounceTime?: number;
   error?: string;
+  /**
+   * MED-1501: builds the hint appended to the placeholder while the search
+   * term is still too short. Return `null` (or an empty string) to suppress
+   * the hint entirely. Defaults to the English "(min. N characters)", so
+   * callers that do not pass it keep today's placeholder.
+   */
+  getMinCharactersHint?: (minSearchLength: number) => string | null;
 }
 
 export function SearchAutocomplete<T extends SearchableEntity>({
@@ -37,6 +44,7 @@ export function SearchAutocomplete<T extends SearchableEntity>({
   minSearchLength = 2,
   debounceTime = 300,
   error,
+  getMinCharactersHint = (min) => `(min. ${min} characters)`,
 }: SearchAutocompleteProps<T>) {
   const [searchTerm, setSearchTerm] = useState("");
   const [entities, setEntities] = useState<T[]>([]);
@@ -171,12 +179,17 @@ export function SearchAutocomplete<T extends SearchableEntity>({
     onSelect("");
   };
 
+  const minCharactersHint = getMinCharactersHint(minSearchLength);
+  const inputPlaceholder = minCharactersHint
+    ? `${placeholder} ${minCharactersHint}`
+    : placeholder;
+
   return (
     <div className="relative" ref={dropdownRef}>
       <div className="relative">
         <Input
           type="text"
-          placeholder={`${placeholder} (min. ${minSearchLength} characters)`}
+          placeholder={inputPlaceholder}
           value={selectedEntity ? "" : searchTerm}
           onChange={handleSearchChange}
           onFocus={() =>

package/src/components/SecureLoader/SecureLoader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Lock } from "lucide-react";
+
+/**
+ * The loader is purely presentational: the caller decides when to render it
+ * (while the session is validated, fetched or terminated) and provides
+ * already-translated labels.
+ */
+export interface SecureLoaderProps {
+  label: string;
+  /** Extra line shown under the label. */
+  description?: string;
+}
+
+/**
+ * Full-screen loader (lock icon with a spinner) shown while the user's
+ * session is being checked.
+ */
+const SecureLoader: React.FC<SecureLoaderProps> = ({ label, description }) => (
+  <div
+    data-testid="secure-loader"
+    className="flex min-h-screen items-center justify-center bg-gray-100"
+  >
+    <div className="flex flex-col items-center rounded-lg bg-white p-6 shadow-lg">
+      <div className="relative">
+        <Lock className="h-16 w-16 text-gray-500" />
+        <div className="absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500"></div>
+      </div>
+      <p className="mt-4 text-lg text-gray-600">{label}</p>
+      {description && (
+        <p className="mt-2 text-sm text-gray-500">{description}</p>
+      )}
+    </div>
+  </div>
+);
+
+export default SecureLoader;

package/src/components/SecureLoader/index.ts

@@ -0,0 +1,2 @@
+export { default as SecureLoader } from "./SecureLoader";
+export type { SecureLoaderProps } from "./SecureLoader";

package/src/components/Select/Select.tsx

@@ -107,6 +107,21 @@ export interface SelectProps<T = unknown> {
    * avatar menu).
    */
   renderTrigger?: () => React.ReactNode;
+  /**
+   * MED-1501: placeholder of the in-dropdown search input, so the caller can
+   * translate it. Defaults to the English "Search options...".
+   */
+  searchPlaceholder?: string;
+  /**
+   * MED-1501: text shown when a search matches no option, so the caller can
+   * translate it. Defaults to the English "No options found".
+   */
+  noOptionsFoundText?: string;
+  /**
+   * MED-1501: text shown when there is no option at all, so the caller can
+   * translate it. Defaults to the English "No options available".
+   */
+  noOptionsAvailableText?: string;
 }
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(
@@ -133,6 +148,9 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       renderOption,
       renderValue,
       renderTrigger,
+      searchPlaceholder = "Search options...",
+      noOptionsFoundText = "No options found",
+      noOptionsAvailableText = "No options available",
       ...props
     },
     ref
@@ -495,7 +513,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
                       type="text"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                      placeholder="Search options..."
+                      placeholder={searchPlaceholder}
                       leftIcon={
                         <Search className="w-4 h-4 text-ews-gray-400" />
                       }
@@ -511,7 +529,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
               >
                 {filteredOptions.length === 0 ? (
                   <div className="px-3 py-2 text-sm text-ews-gray-500">
-                    {searchTerm ? "No options found" : "No options available"}
+                    {searchTerm ? noOptionsFoundText : noOptionsAvailableText}
                   </div>
                 ) : (
                   filteredOptions.map((option, index) => {

package/src/index.ts

@@ -52,6 +52,9 @@ export type { TagListProps } from "./components/TagList";
 export { PaymentDueBanner } from "./components/PaymentDueBanner";
 export type { PaymentDueBannerProps } from "./components/PaymentDueBanner";
 
+export { SecureLoader } from "./components/SecureLoader";
+export type { SecureLoaderProps } from "./components/SecureLoader";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";

package/src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Stethoscope } from "lucide-react";
+import { Stethoscope, X } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { MultiSearchAutocomplete } from "../../components/MultiSearchAutocomplete";
 import { cn } from "../../utils";
@@ -22,6 +22,12 @@ export interface SpecialtySearchAutocompleteProps {
   title?: string;
   label?: string;
   getSelectedCountText?: (count: number) => React.ReactNode;
+  /**
+   * MED-1499: accessible label / tooltip of the button that removes a
+   * selected specialty from its chip. Defaults to the English
+   * "Remove specialty".
+   */
+  removeSpecialtyLabel?: string;
 }
 
 export const SpecialtySearchAutocomplete: React.FC<
@@ -38,6 +44,7 @@ export const SpecialtySearchAutocomplete: React.FC<
   title = "Medical Specialties",
   label = "Select Specialties",
   getSelectedCountText,
+  removeSpecialtyLabel = "Remove specialty",
 }) => {
   const [filteredSpecialties, setFilteredSpecialties] = useState<Specialty[]>(
     []
@@ -83,6 +90,19 @@ export const SpecialtySearchAutocomplete: React.FC<
     [onSpecialtiesChange, maxSelections]
   );
 
+  // MED-1499: a selected specialty must be removable from its chip, not only
+  // by toggling it off again in the dropdown list.
+  const handleRemoveSpecialty = useCallback(
+    (specialtyToRemove: Specialty) => {
+      onSpecialtiesChange(
+        selectedSpecialties.filter(
+          (specialty) => specialty.id !== specialtyToRemove.id
+        )
+      );
+    },
+    [onSpecialtiesChange, selectedSpecialties]
+  );
+
   const getEntityById = useCallback(
     async (id: string): Promise<Specialty | undefined> => {
       return availableSpecialties.find((specialty) => specialty.id === id);
@@ -127,6 +147,16 @@ export const SpecialtySearchAutocomplete: React.FC<
         renderSelectedItem={(specialty) => (
           <span className="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full border bg-ews-primary/10 text-ews-primary border-ews-primary/20">
             {specialty.label}
+            <button
+              type="button"
+              onClick={() => handleRemoveSpecialty(specialty)}
+              className="ml-2 text-ews-primary/60 hover:text-ews-primary"
+              disabled={disabled}
+              title={removeSpecialtyLabel}
+              aria-label={removeSpecialtyLabel}
+            >
+              <X className="w-3 h-3" />
+            </button>
           </span>
         )}
         renderListItem={(specialty, isSelected) => (