feat(BadgeList): migrate to Tailwind

Closes FEPLT-1685
kiwicom · Oct 20, 2023 · 4a28842 · 4a28842
1 parent bf449fa
commit 4a28842
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 96 deletions.
diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.js.flow b/packages/orbit-components/src/BadgeList/BadgeListItem/index.js.flow
@@ -1,6 +1,5 @@
 // @flow
 import * as React from "react";
-import type { StyledComponent } from "styled-components";
 
 import type { Globals } from "../../common/common.js.flow";
 
@@ -17,8 +16,5 @@ export type Props = {|
 |};
 
 declare export var getIconColor: (type: Type) => string;
-declare export var StyledBadgeListItem: StyledComponent<any, any, HTMLDivElement>;
-declare export var StyledVerticalBadge: StyledComponent<any, any, HTMLDivElement>;
-declare export var StyledBadgeContent: StyledComponent<any, any, HTMLDivElement>;
 
 declare export default React.ComponentType<Props>;
diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx
@@ -1,86 +1,68 @@
 "use client";
 
 import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import Text from "../../Text";
 import { TYPE_OPTIONS, SIZE_OPTIONS } from "../consts";
-import defaultTheme from "../../defaultTheme";
 import { ICON_COLORS } from "../../Icon/consts";
-import { right } from "../../utils/rtl";
 import type { Props, Type } from "./types";
 import type { Props as IconProps } from "../../Icon/types";
 
-const getBackground = ({ theme, $type }: { theme: typeof defaultTheme; $type?: Type }) => {
-  const tokens = {
-    [TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight,
-    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight,
-    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight,
-    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight,
-    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight,
-  };
-
-  if (!$type) return null;
-
-  return tokens[$type];
+const BACKGROUND = {
+  [TYPE_OPTIONS.NEUTRAL]: "bg-badge-neutral-background",
+  [TYPE_OPTIONS.INFO]: "bg-badge-info-subtle-background",
+  [TYPE_OPTIONS.SUCCESS]: "bg-badge-success-subtle-background",
+  [TYPE_OPTIONS.WARNING]: "bg-badge-warning-subtle-background",
+  [TYPE_OPTIONS.CRITICAL]: "bg-badge-critical-subtle-background",
 };
 
 export const getIconColor = (type: Type) => {
   if (type === TYPE_OPTIONS.NEUTRAL) return ICON_COLORS.SECONDARY;
   return type;
 };
 
-export const StyledBadgeListItem = styled.li`
-  ${({ theme }) => css`
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    & + & {
-      margin-top: ${theme.orbit.spaceXXSmall};
-    }
-  `};
-`;
-
-StyledBadgeListItem.defaultProps = {
-  theme: defaultTheme,
-};
-
-export const StyledVerticalBadge = styled.div<{ $type?: Props["type"] }>`
-  ${({ theme, $type }) => css`
-    background: ${getBackground({ theme, $type })};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-${right}: ${theme.orbit.spaceXSmall};
-    flex-shrink: 0;
-    height: ${theme.orbit.heightIconLarge};
-    width: ${theme.orbit.widthIconLarge};
-    border-radius: ${theme.orbit.borderRadiusCircle};
-    svg {
-      height: ${theme.orbit.heightIconSmall};
-      width: ${theme.orbit.widthIconSmall};
-    }
-  `};
-`;
+export const ItemWrapper = ({ children, dataTest }) => (
+  <li className="[&_+_&]:mt-xxs flex w-full flex-row" data-test={dataTest}>
+    {children}
+  </li>
+);
 
-StyledVerticalBadge.defaultProps = {
-  theme: defaultTheme,
+export const VerticalBadge = ({
+  children,
+  type,
+}: {
+  children: React.ReactNode;
+  type: Props["type"];
+}) => {
+  return (
+    <div
+      className={cx(
+        "me-xs h-icon-large w-icon-large rounded-circle flex flex-shrink-0 items-center justify-center",
+        "[&_svg]:h-icon-small [&_svg]:w-icon-small",
+        type && BACKGROUND[type],
+      )}
+      aria-hidden
+    >
+      {children}
+    </div>
+  );
 };
 
-export const StyledBadgeContent = styled.div`
-  ${({ theme }) => css`
-    display: inline-flex;
-    align-items: center;
-
-    .orbit-tooltip-wrapper .orbit-text {
-      font-weight: ${theme.orbit.fontWeightMedium};
-    }
-  `};
-`;
-
-StyledBadgeContent.defaultProps = {
-  theme: defaultTheme,
-};
+export const BadgeContent = ({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) => (
+  <div
+    className="inline-flex items-center [&_.orbit-tooltip-wrapper_.orbit-text]:font-medium"
+    style={style}
+  >
+    {children}
+  </div>
+);
 
 const BadgeListItem = ({
   icon,
@@ -91,19 +73,19 @@ const BadgeListItem = ({
   children,
 }: Props) => {
   return (
-    <StyledBadgeListItem data-test={dataTest}>
-      <StyledVerticalBadge $type={type} aria-hidden>
+    <ItemWrapper dataTest={dataTest}>
+      <VerticalBadge type={type}>
         {React.isValidElement(icon) &&
           React.cloneElement(icon as React.ReactElement<IconProps>, {
             color: getIconColor(type),
           })}
-      </StyledVerticalBadge>
-      <StyledBadgeContent>
+      </VerticalBadge>
+      <BadgeContent>
         <Text type="secondary" size={size} as="span" strikeThrough={strikeThrough}>
           {children}
         </Text>
-      </StyledBadgeContent>
-    </StyledBadgeListItem>
+      </BadgeContent>
+    </ItemWrapper>
   );
 };
 

diff --git a/packages/orbit-components/src/BadgeList/index.tsx b/packages/orbit-components/src/BadgeList/index.tsx
@@ -1,22 +1,14 @@
 "use client";
 
 import * as React from "react";
-import styled from "styled-components";
 
 import type { Props } from "./types";
 
-const StyledBadgeList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
 const BadgeList = ({ children, dataTest, id }: Props) => {
   return (
-    <StyledBadgeList data-test={dataTest} id={id}>
+    <ul className="m-0 flex flex-col p-0" data-test={dataTest} id={id}>
       {children}
-    </StyledBadgeList>
+    </ul>
   );
 };
 

diff --git a/packages/orbit-components/src/Itinerary/ItineraryBadgeList/ItineraryBadgeListItem.tsx b/packages/orbit-components/src/Itinerary/ItineraryBadgeList/ItineraryBadgeListItem.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import * as React from "react";
-import { css } from "styled-components";
 
 import {
-  StyledBadgeListItem,
+  ItemWrapper,
   getIconColor,
-  StyledVerticalBadge,
-  StyledBadgeContent,
+  VerticalBadge,
+  BadgeContent,
 } from "../../BadgeList/BadgeListItem";
 import Stack from "../../Stack";
 // TODO: remove after designers will resolve status colors
@@ -25,15 +24,15 @@ const ItineraryBadgeListItem = ({
   strikeThrough,
 }: Props) => {
   return (
-    <StyledBadgeListItem data-test={dataTest}>
-      <StyledVerticalBadge $type={type} aria-hidden>
+    <ItemWrapper dataTest={dataTest}>
+      <VerticalBadge type={type}>
         {/* @ts-expect-error TODO */}
         {React.isValidElement(icon) && React.cloneElement(icon, { color: getIconColor(type) })}
-      </StyledVerticalBadge>
-      <StyledBadgeContent
-        css={css`
-          margin-top: ${cancelledValue ? `4px` : ""};
-        `}
+      </VerticalBadge>
+      <BadgeContent
+        style={{
+          marginTop: cancelledValue ? `4px` : "",
+        }}
       >
         <Stack direction="column" spacing="XXSmall">
           <Text
@@ -52,8 +51,8 @@ const ItineraryBadgeListItem = ({
             </Text>
           )}
         </Stack>
-      </StyledBadgeContent>
-    </StyledBadgeListItem>
+      </BadgeContent>
+    </ItemWrapper>
   );
 };