feat: add translations prop to search button (#995)

algolia · Feb 5, 2021 · 44f5c7b · 44f5c7b
1 parent f5c2a27
commit 44f5c7b
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -3,10 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
-export type DocSearchButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->;
+type Translations = Partial<{
+  buttonText: string;
+  buttonAriaLabel: string;
+}>
+
+export type DocSearchButtonProps = React.ComponentProps<'button'> & {translations?: Translations}
 
 const ACTION_KEY_DEFAULT = 'Ctrl' as const;
 const ACTION_KEY_APPLE = '⌘' as const;
@@ -18,7 +20,12 @@ function isAppleDevice() {
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
   DocSearchButtonProps
->((props, ref) => {
+>(({translations = {}, ...props}, ref) => {
+  const {
+    buttonText = "Search",
+    buttonAriaLabel = "Search"
+  } = translations;
+
   const [key, setKey] = useState<
     typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
   >(null);
@@ -33,13 +40,13 @@ export const DocSearchButton = React.forwardRef<
     <button
       type="button"
       className="DocSearch DocSearch-Button"
-      aria-label="Search"
+      aria-label={buttonAriaLabel}
       {...props}
       ref={ref}
     >
       <span className="DocSearch-Button-Container">
         <SearchIcon />
-        <span className="DocSearch-Button-Placeholder">Search</span>
+        <span className="DocSearch-Button-Placeholder">{buttonText}</span>
       </span>
 
       {key !== null ? (