feat(Card): add labelClose prop

BREAKING CHANGE: use labelClose prop to add title for close button
kiwicom · Apr 17, 2023 · 71d6cc4 · 71d6cc4
1 parent b1614e6
commit 71d6cc4
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 5 deletions.
diff --git a/packages/orbit-components/src/Card/CardSection/components/SectionHeader.tsx b/packages/orbit-components/src/Card/CardSection/components/SectionHeader.tsx
@@ -48,6 +48,7 @@ interface Props {
   dataA11ySection?: string;
   header?: React.ReactNode;
   expandable?: boolean;
+  labelClose?: React.ReactNode;
   expanded?: boolean;
   handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -64,6 +65,7 @@ const CardSectionHeader = ({
   isContent,
   expandable,
   expanded,
+  labelClose,
   onClick,
   slideID,
   labelID,
@@ -89,6 +91,7 @@ const CardSectionHeader = ({
         title={title}
         titleAs={titleAs}
         description={description}
+        labelClose={labelClose}
         icon={icon}
         expandable={expandable}
         header={header}

diff --git a/packages/orbit-components/src/Card/components/Header/index.js.flow b/packages/orbit-components/src/Card/components/Header/index.js.flow
@@ -10,6 +10,7 @@ export type Props = {|
   +onClose?: () => void | Promise<any>,
   +title?: React.Node,
   +titleAs?: As,
+  +labelClose?: React.Node,
   +isSection?: boolean,
   +dataA11ySection?: string,
   +expandable?: boolean,

diff --git a/packages/orbit-components/src/Card/components/Header/index.tsx b/packages/orbit-components/src/Card/components/Header/index.tsx
@@ -9,7 +9,6 @@ import Stack from "../../../Stack";
 import Heading from "../../../Heading";
 import Text from "../../../Text";
 import Close from "../../../icons/Close";
-import useTranslate from "../../../hooks/useTranslate";
 import ButtonLink from "../../../ButtonLink";
 import type { Props } from "./types";
 
@@ -29,15 +28,14 @@ const StyledCloseContainer = styled.div`
   z-index: 1;
 `;
 
-const CardCloseButton = ({ onClick }) => {
-  const translate = useTranslate();
+const CardCloseButton = ({ onClick, labelClose }) => {
   return (
     <ButtonLink
       type="secondary"
       size="small"
       iconLeft={<Close />}
       onClick={onClick}
-      title={translate("button_close")}
+      title={labelClose}
     />
   );
 };
@@ -48,6 +46,7 @@ const Header = ({
   title,
   titleAs,
   isSection,
+  labelClose,
   actions,
   dataA11ySection,
   onClose,
@@ -89,7 +88,7 @@ const Header = ({
     )}
     {onClose && !actions && (
       <StyledCloseContainer>
-        <CardCloseButton onClick={onClose} />
+        <CardCloseButton onClick={onClose} labelClose={labelClose} />
       </StyledCloseContainer>
     )}
   </Stack>

diff --git a/packages/orbit-components/src/Card/components/Header/types.d.ts b/packages/orbit-components/src/Card/components/Header/types.d.ts
@@ -10,6 +10,7 @@ export interface Props {
   onClose?: Common.Event<React.SyntheticEvent<HTMLButtonElement | HTMLAnchorElement>>;
   title?: React.ReactNode;
   titleAs?: As;
+  labelClose?: React.ReactNode;
   isSection?: boolean;
   dataA11ySection?: string;
   expandable?: boolean;

diff --git a/packages/orbit-components/src/Card/index.js.flow b/packages/orbit-components/src/Card/index.js.flow
@@ -17,6 +17,7 @@ export type Props = {|
   +margin?: string | number | ObjectProperty,
   +description?: React.Node,
   +icon?: React.Node,
+  +labelClose?: React.Node,
   +actions?: React.Node,
   +onClose?: () => void | Promise<any>,
   +loading?: boolean,

diff --git a/packages/orbit-components/src/Card/index.tsx b/packages/orbit-components/src/Card/index.tsx
@@ -37,6 +37,7 @@ const Card = ({
   actions,
   description,
   children,
+  labelClose,
   dataTest,
   id,
   onClose,
@@ -91,6 +92,7 @@ const Card = ({
             dataA11ySection={dataA11ySection}
             actions={actions}
             title={title}
+            labelClose={labelClose}
             titleAs={titleAs}
             onClose={onClose}
             header={header}

diff --git a/packages/orbit-components/src/Card/types.d.ts b/packages/orbit-components/src/Card/types.d.ts
@@ -14,6 +14,7 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly titleAs?: As;
   readonly margin?: React.CSSProperties["margin"] | Common.ObjectProperty;
   readonly description?: React.ReactNode;
+  readonly labelClose?: React.ReactNode;
   readonly icon?: React.ReactNode;
   readonly actions?: React.ReactNode;
   readonly onClose?: Common.Event<React.SyntheticEvent<HTMLButtonElement | HTMLAnchorElement>>;