feat(NotificationBadge): migrate to Tailwind

kiwicom · Oct 27, 2023 · 2f2344d · 2f2344d
1 parent 802f773
commit 2f2344d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 20 deletions.
diff --git a/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx b/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
-import { convertRgbaToHex } from "@kiwicom/orbit-design-tokens";
 
 import { render, screen } from "../../test-utils";
-import theme from "../../defaultTheme";
 import NotificationBadge from "..";
 import Sightseeing from "../../icons/Sightseeing";
 
@@ -22,9 +20,6 @@ describe("NotificationBadge", () => {
     expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
     expect(screen.getByText(content)).toBeInTheDocument();
-    expect(screen.getByTestId(dataTest)).toHaveStyle({
-      background: convertRgbaToHex(theme.orbit.paletteBlueLight),
-    });
   });
 
   it("should have icon", () => {

diff --git a/packages/orbit-components/src/NotificationBadge/index.tsx b/packages/orbit-components/src/NotificationBadge/index.tsx
@@ -1,30 +1,17 @@
 "use client";
 
 import * as React from "react";
-import styled from "styled-components";
 
 import Badge from "../Badge";
-import defaultTheme from "../defaultTheme";
 import type { Props } from "./types";
 
-const StyledNotificationBadge = styled.div`
-  .orbit-badge-primitive {
-    width: ${({ theme }) => theme.orbit.widthBadgeCircled};
-    padding: 0;
-  }
-`;
-
-StyledNotificationBadge.defaultProps = {
-  theme: defaultTheme,
-};
-
 const NotificationBadge = ({ type, children, icon, ariaLabel, dataTest, id }: Props) => {
   return (
-    <StyledNotificationBadge>
+    <div className="[&_.orbit-badge-primitive]:w-icon-large [&_.orbit-badge-primitive]:p-0">
       <Badge type={type} dataTest={dataTest} id={id} icon={icon} ariaLabel={ariaLabel}>
         {!icon && children}
       </Badge>
-    </StyledNotificationBadge>
+    </div>
   );
 };