SONAR-19711 Move security report page tab buttons to the new UI

2 files changed, 9 insertions, 5 deletions

diff --git a/server/sonar-web/design-system/src/components/Card.tsx b/server/sonar-web/design-system/src/components/Card.tsx
index f45cfe02bd4..3a00a11b6b2 100644
--- a/server/sonar-web/design-system/src/components/Card.tsx
+++ b/server/sonar-web/design-system/src/components/Card.tsx
@@ -22,15 +22,14 @@ import * as React from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor } from '../helpers/theme';
 
-interface CardProps {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 export function Card(props: CardProps) {
-  const { className, children } = props;
+  const { children, ...rest } = props;
 
-  return <CardStyled className={className}>{children}</CardStyled>;
+  return <CardStyled {...rest}>{children}</CardStyled>;
 }
 
 const CardStyled = styled.div`
diff --git a/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx
index 04b58a7dcba..5d3c5a28b7a 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx
@@ -32,7 +32,12 @@ it('renders card correctly', () => {
 });
 
 it('renders card correctly with classNames', () => {
-  render(<Card className="sw-bg-black sw-border-8">Hello</Card>);
+  render(
+    <Card className="sw-bg-black sw-border-8" role="tabpanel">
+      Hello
+    </Card>
+  );
   const cardContent = screen.getByText('Hello');
   expect(cardContent).toHaveClass('sw-bg-black sw-border-8');
+  expect(cardContent).toHaveAttribute('role', 'tabpanel');
 });