feat(Drawer): add labelHide prop

BREAKING CHANGE: removed translation, use labelHide prop with Translate instead
kiwicom · Apr 17, 2023 · 198b1d8 · 198b1d8
1 parent ad64d7a
commit 198b1d8
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 12 deletions.
diff --git a/packages/orbit-components/src/Drawer/README.md b/packages/orbit-components/src/Drawer/README.md
@@ -31,6 +31,7 @@ Table below contains all types of the props available in the Drawer component.
 | width         | `string`                | `"320px"` | The width of the Drawer.                                                                                                              |
 | lockScrolling | `boolean`               | `true`    | Whether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience. |
 | fixedHeader   | `boolean`               |           | If `true` the DrawerHeader will be fixed to the top.                                                                                  |
+| labelHide     | `React.Node`            |           | Label for the close button.                                                                                                           |
 
 ### enum
 

diff --git a/packages/orbit-components/src/Drawer/components/DrawerClose.tsx b/packages/orbit-components/src/Drawer/components/DrawerClose.tsx
@@ -5,7 +5,6 @@ import ButtonLink from "../../ButtonLink";
 import Close from "../../icons/Close";
 import defaultTheme from "../../defaultTheme";
 import { left } from "../../utils/rtl";
-import useTranslate from "../../hooks/useTranslate";
 import type { Props } from "./types";
 
 const StyledDrawerClose = styled.div`
@@ -16,18 +15,10 @@ StyledDrawerClose.defaultProps = {
   theme: defaultTheme,
 };
 
-const DrawerClose = React.forwardRef<HTMLButtonElement, Props>(({ onClick }, ref) => {
-  const translate = useTranslate();
-
+const DrawerClose = React.forwardRef<HTMLButtonElement, Props>(({ onClick, title }, ref) => {
   return (
     <StyledDrawerClose>
-      <ButtonLink
-        onClick={onClick}
-        iconLeft={<Close />}
-        ref={ref}
-        type="secondary"
-        title={translate("drawer_hide")}
-      />
+      <ButtonLink onClick={onClick} iconLeft={<Close />} ref={ref} type="secondary" title={title} />
     </StyledDrawerClose>
   );
 });

diff --git a/packages/orbit-components/src/Drawer/components/types.d.ts b/packages/orbit-components/src/Drawer/components/types.d.ts
@@ -1,8 +1,11 @@
 // Type definitions for @kiwicom/orbit-components
 // Project: http://github.com/kiwicom/orbit
 
+import type React from "react";
+
 import type * as Common from "../../common/types";
 
 export interface Props {
   readonly onClick?: Common.Callback;
+  readonly title?: React.ReactNode;
 }
diff --git a/packages/orbit-components/src/Drawer/index.js.flow b/packages/orbit-components/src/Drawer/index.js.flow
@@ -13,6 +13,7 @@ export type Props = {|
   +lockScrolling?: boolean,
   +noPadding?: boolean,
   +fixedHeader?: boolean,
+  +labelHide?: React.Node,
   +onClose?: OnClose,
   +position?: Position,
   +shown: boolean,

diff --git a/packages/orbit-components/src/Drawer/index.tsx b/packages/orbit-components/src/Drawer/index.tsx
@@ -156,6 +156,7 @@ const Drawer = ({
   onClose,
   lockScrolling = true,
   fixedHeader,
+  labelHide,
   shown = true,
   width = "320px",
   position = POSITIONS.RIGHT,
@@ -241,7 +242,7 @@ const Drawer = ({
                 {actions}
               </Stack>
             )}
-            {onClose && <DrawerClose onClick={onClose} ref={closeButtonRef} />}
+            {onClose && <DrawerClose onClick={onClose} ref={closeButtonRef} title={labelHide} />}
           </StyledDrawerHeader>
         )}
         <StyledDrawerContent

diff --git a/packages/orbit-components/src/Drawer/types.d.ts b/packages/orbit-components/src/Drawer/types.d.ts
@@ -16,6 +16,7 @@ export interface Props extends Common.Globals {
   readonly fixedHeader?: boolean;
   readonly position?: Position;
   readonly shown: boolean;
+  readonly labelHide?: React.ReactNode;
   readonly suppressed?: boolean;
   readonly title?: Common.Translation;
   readonly width?: string;