Merge branch 'jialecl/searchBar' into PelayoFelgueroso/searchbar-sidenav

Author: PelayoFelgueroso

apps/website/screens/components/flex/code/FlexCodePage.tsx

@@ -136,7 +136,12 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>fullHeight</td>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                fullHeight
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>boolean</TableCode>
             </td>

apps/website/screens/principles/localization/LocalizationPage.tsx

@@ -551,6 +551,45 @@ const sections = [
           </DxcTable>
         ),
       },
+      {
+        title: "searchBar",
+        content: (
+          <DxcTable>
+            <thead>
+              <tr>
+                <th>Label Name</th>
+                <th>Default value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <Code>clearFieldActionTitle</Code>
+                </td>
+                <td>Clear field</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>inputAriaLabel</Code>
+                </td>
+                <td>Search input</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>triggerTitle</Code>
+                </td>
+                <td>Search</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>cancelButtonLabel</Code>
+                </td>
+                <td>Cancel</td>
+              </tr>
+            </tbody>
+          </DxcTable>
+        ),
+      },
       {
         title: "select",
         content: (

packages/lib/src/common/variables.ts

@@ -105,6 +105,12 @@ export const defaultTranslatedComponentLabels = {
   radioGroup: {
     optionalItemLabelDefault: "N/A",
   },
+  searchBar: {
+    clearFieldActionTitle: "Clear field",
+    inputAriaLabel: "Search input",
+    triggerTitle: "Search",
+    cancelButtonLabel: "Cancel",
+  },
   select: {
     actionClearSelectionTitle: "Clear selection",
     actionClearSearchTitle: "Clear search",

packages/lib/src/search-bar/SearchBar.accessibility.test.tsx

@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import DxcSearchBar from "./SearchBar";
-import DxcSearchBarTrigger from "./SearchBarTrigger";
 import { axe } from "../../test/accessibility/axe-helper";
 
 describe("SearchBar component accessibility tests", () => {
@@ -42,17 +41,3 @@ describe("SearchBar component accessibility tests", () => {
     expect(results.violations).toHaveLength(0);
   });
 });
-
-describe("SearchBarTrigger component accessibility tests", () => {
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(<DxcSearchBarTrigger />);
-    const results = await axe(container);
-    expect(results.violations).toHaveLength(0);
-  });
-
-  it("Should not have basic accessibility issues with onTriggerClick", async () => {
-    const { container } = render(<DxcSearchBarTrigger onTriggerClick={() => {}} />);
-    const results = await axe(container);
-    expect(results.violations).toHaveLength(0);
-  });
-});

packages/lib/src/search-bar/SearchBar.stories.tsx

@@ -6,9 +6,10 @@ import { useState } from "react";
 import DxcSearchBar from "./SearchBar";
 import DxcFlex from "../flex/Flex";
 import DxcContainer from "../container/Container";
+import { userEvent, within } from "storybook/internal/test";
 
 export default {
-  title: "Searchbar",
+  title: "Search Bar",
   component: DxcSearchBar,
 } satisfies Meta<typeof DxcSearchBar>;
 
@@ -21,7 +22,6 @@ const SearchBarComponent = () => {
         <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} />
       ) : (
         <DxcSearchBar
-          placeholder="Search..."
           onBlur={(value) => {
             console.log("onBlur", value);
           }}
@@ -40,14 +40,15 @@ const SearchBarComponent = () => {
 const SearchBar = () => {
   return (
     <>
-      <Title title="Searchbar component" theme="light" level={2} />
+      <Title title="Search Bar component" theme="light" level={2} />
       <ExampleContainer>
         <SearchBarComponent />
       </ExampleContainer>
 
       <Title title="States" theme="light" level={2} />
       <ExampleContainer>
         <Title title="Default" theme="light" level={4} />
+        <DxcSearchBarTrigger onTriggerClick={() => {}} />
         <DxcSearchBar
           placeholder="Search..."
           onBlur={(value) => {
@@ -57,10 +58,12 @@ const SearchBar = () => {
           onEnter={(value) => {
             console.log("onEnter", value);
           }}
+          onCancel={() => {}}
         />
       </ExampleContainer>
       <ExampleContainer pseudoState="pseudo-hover">
         <Title title="Hover" theme="light" level={4} />
+        <DxcSearchBarTrigger onTriggerClick={() => {}} />
         <DxcSearchBar
           placeholder="Search..."
           onBlur={(value) => {
@@ -70,10 +73,27 @@ const SearchBar = () => {
           onEnter={(value) => {
             console.log("onEnter", value);
           }}
+          onCancel={() => {}}
         />
       </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-focus-within">
+      <ExampleContainer pseudoState={["pseudo-focus", "pseudo-focus-within"]}>
         <Title title="Focus" theme="light" level={4} />
+        <DxcSearchBarTrigger onTriggerClick={() => {}} />
+        <DxcSearchBar
+          placeholder="Search..."
+          onBlur={(value) => {
+            console.log("onBlur", value);
+          }}
+          onChange={(value) => console.log("onChange", value)}
+          onEnter={(value) => {
+            console.log("onEnter", value);
+          }}
+          onCancel={() => {}}
+        />
+      </ExampleContainer>
+      <ExampleContainer pseudoState={["pseudo-focus", "pseudo-active"]}>
+        <Title title="Focus and active" theme="light" level={4} />
+        <DxcSearchBarTrigger onTriggerClick={() => {}} />
         <DxcSearchBar
           placeholder="Search..."
           onBlur={(value) => {
@@ -83,6 +103,7 @@ const SearchBar = () => {
           onEnter={(value) => {
             console.log("onEnter", value);
           }}
+          onCancel={() => {}}
         />
       </ExampleContainer>
       <ExampleContainer>
@@ -96,6 +117,7 @@ const SearchBar = () => {
           onEnter={(value) => {
             console.log("onEnter", value);
           }}
+          onCancel={() => {}}
           disabled
         />
       </ExampleContainer>
@@ -123,4 +145,14 @@ type Story = StoryObj<typeof DxcSearchBar>;
 
 export const Chromatic: Story = {
   render: SearchBar,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    const enabledInputs = (await canvas.findAllByRole("textbox")).filter((input) => !input.hasAttribute("disabled"));
+
+    for (let i = 0; i < enabledInputs.length - 1; i++) {
+      await user.type(enabledInputs[i]!, "Lorem ipsum");
+    }
+  },
 };

packages/lib/src/search-bar/SearchBar.tsx

@@ -60,13 +60,13 @@ const SearchBarInput = styled.input<{ disabled: Required<SearchBarProps>["disabl
 `;
 
 const DxcSearchBar = ({
-  autoFocus,
+  autoFocus = false,
   disabled = false,
   onBlur,
   onCancel,
   onChange,
   onEnter,
-  placeholder,
+  placeholder = "Search...",
 }: SearchBarProps) => {
   const translatedLabels = useContext(HalstackLanguageContext);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -106,7 +106,7 @@ const DxcSearchBar = ({
   return (
     <DxcFlex gap="var(--spacing-gap-m)" alignItems="center" justifyContent="center" grow={1}>
       <SearchBarContainer disabled={disabled}>
-        <DxcIcon icon="search" />
+        <DxcIcon icon="search" aria-hidden="true" />
         <SearchBarInput
           ref={inputRef}
           value={innerValue}
@@ -115,6 +115,7 @@ const DxcSearchBar = ({
           onChange={(e) => handleSearchChangeValue(e.target.value)}
           onKeyDown={handleInputOnKeyDown}
           disabled={disabled}
+          aria-label={translatedLabels.searchBar.inputAriaLabel}
           autoFocus={autoFocus}
         />
         {!disabled && innerValue.length > 0 && (
@@ -124,13 +125,19 @@ const DxcSearchBar = ({
             icon="cancel"
             onClick={handleClearActionOnClick}
             tabIndex={0}
-            title={!disabled ? translatedLabels.textInput.clearFieldActionTitle : undefined}
+            title={!disabled ? translatedLabels.searchBar.clearFieldActionTitle : undefined}
           />
         )}
       </SearchBarContainer>
 
       {typeof onCancel === "function" && (
-        <DxcButton label="Cancel" title="Cancel" onClick={onCancel} mode="tertiary" size={{ height: "medium" }} />
+        <DxcButton
+          label={translatedLabels.searchBar.cancelButtonLabel}
+          title={translatedLabels.searchBar.cancelButtonLabel}
+          onClick={onCancel}
+          mode="tertiary"
+          size={{ height: "medium" }}
+        />
       )}
     </DxcFlex>
   );

packages/lib/src/search-bar/SearchBarTrigger.tsx

@@ -1,15 +1,20 @@
+import { useContext } from "react";
 import DxcButton from "../button/Button";
+import { HalstackLanguageContext } from "../HalstackContext";
 import { SearchBarTriggerProps } from "./types";
 
-const DxcSearchBarTrigger = ({ onTriggerClick }: SearchBarTriggerProps) => (
-  <DxcButton
-    onClick={onTriggerClick}
-    icon="Search"
-    mode="tertiary"
-    title="Search"
-    semantic="default"
-    size={{ height: "medium" }}
-  />
-);
+const DxcSearchBarTrigger = ({ onTriggerClick }: SearchBarTriggerProps) => {
+  const translatedLabels = useContext(HalstackLanguageContext);
+  return (
+    <DxcButton
+      onClick={onTriggerClick}
+      icon="Search"
+      mode="tertiary"
+      title={translatedLabels.searchBar.triggerTitle}
+      semantic="default"
+      size={{ height: "medium" }}
+    />
+  );
+};
 
 export default DxcSearchBarTrigger;