feat(ListChoice): migrate to Tailwind

Closes FEPLT-1690
kiwicom · Oct 20, 2023 · bf449fa · bf449fa
1 parent f42c385
commit bf449fa
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 87 deletions.
diff --git a/packages/orbit-components/src/Checkbox/index.tsx b/packages/orbit-components/src/Checkbox/index.tsx
@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import defaultTheme from "../defaultTheme";
 import TOKENS from "./consts";
@@ -169,7 +170,7 @@ StyledInput.defaultProps = {
 };
 
 export const StyledLabel = styled(({ className, children, dataTest }) => (
-  <label className={className} data-test={dataTest}>
+  <label className={cx("orbit-checkbox-label", className)} data-test={dataTest}>
     {children}
   </label>
 ))`

diff --git a/packages/orbit-components/src/InputSelect/InputSelectOption/index.tsx b/packages/orbit-components/src/InputSelect/InputSelectOption/index.tsx
@@ -2,13 +2,13 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 
 import type { Props, Option } from "../types";
-import ListChoice, { StyledListChoice } from "../../ListChoice";
+import ListChoice from "../../ListChoice";
 import defaultTheme from "../../defaultTheme";
 import CheckCircle from "../../icons/CheckCircle";
 
 const StyledListChoiceWrapper = styled.li<{ $active: boolean }>`
   ${({ theme, $active }) => css`
-    ${StyledListChoice} {
+    .orbit-list-choice {
       background: ${$active && theme.orbit.paletteCloudLight};
     }
   `};

diff --git a/packages/orbit-components/src/ListChoice/index.tsx b/packages/orbit-components/src/ListChoice/index.tsx
@@ -1,90 +1,14 @@
 "use client";
 
 import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import Heading from "../Heading";
-import Checkbox, { StyledLabel as Label } from "../Checkbox";
+import Checkbox from "../Checkbox";
 import Text from "../Text";
-import defaultTheme from "../defaultTheme";
-import { getSize } from "../Icon";
-import { right } from "../utils/rtl";
 import handleKeyDown from "../utils/handleKeyDown";
 import type { Props } from "./types";
 
-const StyledListChoiceIcon = styled.div`
-  ${({ theme }) => css`
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    flex: 0 0 auto;
-    margin-${right}: ${theme.orbit.spaceXSmall};
-    height: ${theme.orbit.lineHeightTextNormal};
-
-    svg {
-      align-self: center;
-      width: ${getSize("medium")};
-      height: ${getSize("medium")};
-      color: ${theme.orbit.colorIconPrimary};
-      transition: color ${theme.orbit.durationFast} ease-in-out;
-    }
-  `}
-`;
-
-StyledListChoiceIcon.defaultProps = {
-  theme: defaultTheme,
-};
-
-export const StyledListChoice = styled.div<Partial<Props>>`
-  ${({ theme, disabled }) => css`
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    padding: ${`${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`};
-    border-bottom: 1px solid ${theme.orbit.paletteCloudNormal};
-    background-color: ${theme.orbit.paletteWhite};
-    transition: background-color 0.15s ease-in-out;
-    cursor: ${disabled ? "not-allowed" : "pointer"};
-
-    &:hover {
-      outline: none;
-      button {
-        background: none;
-      }
-      ${!disabled &&
-      css`
-        background: ${theme.orbit.paletteCloudLight};
-        ${StyledListChoiceIcon} svg {
-          color: ${theme.orbit.colorIconPrimary};
-        }
-      `};
-    }
-
-    ${Label} {
-      width: auto;
-    }
-  `}
-`;
-
-StyledListChoice.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledListChoiceContent = styled.div`
-  ${({ theme }) => css`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    padding-${right}: ${theme.orbit.spaceSmall};
-`}
-`;
-
-StyledListChoiceContent.defaultProps = {
-  theme: defaultTheme,
-};
-
 const ListChoice = React.forwardRef<HTMLDivElement, Props>(
   (
     {
@@ -108,32 +32,50 @@ const ListChoice = React.forwardRef<HTMLDivElement, Props>(
     };
 
     return (
-      <StyledListChoice
+      <div
+        className={cx(
+          "orbit-list-choice",
+          "py-sm px-md box-border flex w-full items-center",
+          "border-b-cloud-normal bg-white-normal border-b-solid border-b",
+          "duration-fast transition-[background-color] ease-in-out",
+          disabled ? "cursor-not-allowed" : "hover:bg-cloud-light cursor-pointer",
+          "hover:outline-none [&_button]:hover:bg-transparent",
+          "[&_.orbit-checkbox-label]:w-auto",
+        )}
         onClick={!disabled ? onClick : undefined}
         data-test={dataTest}
         id={id}
         ref={ref}
         onKeyDown={!disabled ? handleKeyDown<HTMLDivElement>(onClick) : undefined}
         tabIndex={tabIndex || disabled ? -1 : 0}
-        disabled={disabled}
         data-title={title}
         aria-disabled={disabled}
         aria-selected={selected}
         role={role || (selectable ? "checkbox" : "button")}
         {...conditionalProps}
       >
-        {icon && <StyledListChoiceIcon>{icon}</StyledListChoiceIcon>}
-        <StyledListChoiceContent>
+        {icon && (
+          <div
+            className={cx(
+              "me-xs h-icon-medium flex flex-none items-center self-start",
+              "[&_svg]:w-icon-medium [&_svg]:h-icon-medium [&_svg]:text-icon-primary-foreground [&_svg]:self-center",
+              "[&_svg]:duration-fast [&_svg]:transition-[color] [&_svg]:ease-in-out",
+            )}
+          >
+            {icon}
+          </div>
+        )}
+        <div className="pe-sm flex w-full flex-col justify-center">
           <Heading type="title4">{title}</Heading>
           {description && (
             <Text type="secondary" size="small">
               {description}
             </Text>
           )}
-        </StyledListChoiceContent>
+        </div>
         {selectable && <Checkbox checked={selected} readOnly disabled={disabled} tabIndex={-1} />}
         {!selectable && action}
-      </StyledListChoice>
+      </div>
     );
   },
 );