feat(Accordion): migrate to tailwind

kiwicom · Feb 22, 2024 · b378203 · b378203
1 parent 4c48571
commit b378203
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 157 deletions.
diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml
@@ -1,4 +1,4 @@
-Accordion: false
+Accordion: true
 AirportIllustration: true
 Alert: true
 AlertButton: true

diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionContent.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionContent.tsx
@@ -1,23 +1,15 @@
 import React from "react";
-import styled from "styled-components";
 
-import defaultTheme from "../../../defaultTheme";
 import type * as Common from "../../../common/types";
 
-const StyledWrapper = styled.div`
-  padding: ${({ theme }) => `0 ${theme.orbit.spaceLarge} ${theme.orbit.spaceLarge}`};
-`;
-
-StyledWrapper.defaultProps = {
-  theme: defaultTheme,
-};
-
 interface Props extends Common.Globals {
   children: React.ReactNode;
 }
 
 const AccordionSectionContent = ({ children, dataTest }: Props) => (
-  <StyledWrapper data-test={dataTest && `${dataTest}Content`}>{children}</StyledWrapper>
+  <div className="px-lg pb-lg" data-test={dataTest && `${dataTest}Content`}>
+    {children}
+  </div>
 );
 
 export default AccordionSectionContent;
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.tsx
@@ -1,29 +1,18 @@
 import React from "react";
-import styled from "styled-components";
 
-import defaultTheme from "../../../defaultTheme";
 import type * as Common from "../../../common/types";
 
-const StyledWrapper = styled.div`
-  display: flex;
-  padding: ${({ theme }) => theme.orbit.spaceLarge};
-  background-color: ${({ theme }) => theme.orbit.paletteWhite};
-  position: sticky;
-  bottom: 0;
-  box-sizing: border-box;
-  box-shadow: ${({ theme }) => theme.orbit.boxShadowActionActive};
-`;
-
-StyledWrapper.defaultProps = {
-  theme: defaultTheme,
-};
-
 interface Props extends Common.Globals {
   children: React.ReactNode;
 }
 
 const AccordionSectionFooter = ({ children, dataTest }: Props) => (
-  <StyledWrapper data-test={dataTest && `${dataTest}Footer`}>{children}</StyledWrapper>
+  <div
+    className="p-lg bg-white-normal shadow-action-active sticky bottom-0 flex"
+    data-test={dataTest && `${dataTest}Footer`}
+  >
+    {children}
+  </div>
 );
 
 export default AccordionSectionFooter;
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx
@@ -1,42 +1,8 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import Button from "../../../Button";
 import type * as Common from "../../../common/types";
-import defaultTheme from "../../../defaultTheme";
-
-const StyledWrapper = styled.div<{
-  expanded: boolean;
-  "data-test"?: string | boolean;
-}>`
-  ${({ theme, expanded }) => css`
-    display: flex;
-    padding: ${theme.orbit.spaceLarge};
-    background-color: ${theme.orbit.paletteWhite};
-    align-items: center;
-    min-height: ${expanded ? "19px" : "44px"};
-    transition: max-height ${theme.orbit.durationFast} ease-in-out;
-  `};
-`;
-
-StyledWrapper.defaultProps = {
-  theme: defaultTheme,
-};
-
-const HeaderContent = styled.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-`;
-
-const HeaderActions = styled.div`
-  display: flex;
-  margin-left: ${({ theme }) => theme.orbit.spaceLarge};
-`;
-
-HeaderActions.defaultProps = {
-  theme: defaultTheme,
-};
 
 interface Props extends Common.Globals {
   readonly children: React.ReactNode;
@@ -54,19 +20,25 @@ const AccordionSectionHeader = ({
   expandable,
   dataTest,
 }: Props) => (
-  <StyledWrapper expanded={expanded} data-test={dataTest && `${dataTest}Header`}>
-    <HeaderContent>{children}</HeaderContent>
+  <div
+    className={cx(
+      "p-lg bg-white-normal flex items-center",
+      expanded ? "min-h-[19px]" : "min-h-[44px]",
+    )}
+    data-test={dataTest && `${dataTest}Header`}
+  >
+    <div className="flex grow items-center">{children}</div>
     {!expanded && (
-      <HeaderActions>
+      <div className="ms-lg flex">
         {expandable &&
           (actions || (
             <Button onClick={onExpand} type="secondary">
               Open
             </Button>
           ))}
-      </HeaderActions>
+      </div>
     )}
-  </StyledWrapper>
+  </div>
 );
 
 export default AccordionSectionHeader;
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/index.tsx b/packages/orbit-components/src/Accordion/AccordionSection/index.tsx
@@ -7,7 +7,6 @@ import useRandomId from "../../hooks/useRandomId";
 import useBoundingRect from "../../hooks/useBoundingRect";
 import Slide from "../../utils/Slide";
 import Loading from "../../Loading";
-import AccordionWrapper from "../components/AccordionWrapper";
 import SectionHeader from "./components/SectionHeader";
 import SectionFooter from "./components/SectionFooter";
 import SectionContent from "./components/SectionContent";
@@ -29,7 +28,10 @@ const AccordionSection = ({
   const [{ height }, ref] = useBoundingRect<HTMLDivElement>({ height: isExpanded ? null : 0 });
 
   return (
-    <AccordionWrapper dataTest={dataTest}>
+    <div
+      className="border-elevation-flat-border-color rounded-normal my-xs bg-elevation-flat relative w-full border border-solid"
+      data-test={dataTest}
+    >
       <Loading loading={loading} type="boxLoader" dataTest={dataTest && `${dataTest}Loading`}>
         {header && (
           <SectionHeader
@@ -50,7 +52,7 @@ const AccordionSection = ({
           </div>
         </Slide>
       </Loading>
-    </AccordionWrapper>
+    </div>
   );
 };
 

diff --git a/packages/orbit-components/src/Accordion/__tests__/index.test.tsx b/packages/orbit-components/src/Accordion/__tests__/index.test.tsx
@@ -6,19 +6,22 @@ import Accordion, { AccordionSection } from "..";
 describe(`Accordion`, () => {
   const expandedSection = "0X1";
   const dataTest = "Accordion";
+  const id = "accordionId";
   const sectionDataTest = "AccordionSection";
   const onExpand = jest.fn();
 
   it("should have passed props", () => {
     render(
-      <Accordion expandedSection={expandedSection} onExpand={onExpand} dataTest={dataTest}>
+      <Accordion expandedSection={expandedSection} onExpand={onExpand} dataTest={dataTest} id={id}>
         <AccordionSection id="0X1" dataTest={sectionDataTest}>
           Section
         </AccordionSection>
       </Accordion>,
     );
 
-    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
+    const el = screen.getByTestId(dataTest);
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveAttribute("id", id);
     expect(screen.getByTestId(sectionDataTest)).toBeInTheDocument();
   });
 

diff --git a/packages/orbit-components/src/Accordion/components/AccordionWrapper/index.tsx b/packages/orbit-components/src/Accordion/components/AccordionWrapper/index.tsx
diff --git a/packages/orbit-components/src/Accordion/components/AccordionWrapper/types.d.ts b/packages/orbit-components/src/Accordion/components/AccordionWrapper/types.d.ts
diff --git a/packages/orbit-components/src/Accordion/index.tsx b/packages/orbit-components/src/Accordion/index.tsx
@@ -1,26 +1,11 @@
 "use client";
 
 import React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import { Provider as SectionProvider } from "./AccordionContext";
-import getSpacingToken from "../common/getSpacingToken";
 import type { Props } from "./types";
-import defaultTheme from "../defaultTheme";
-
-export const StyledAccordion = styled.div<{ spaceAfter?: Props["spaceAfter"] }>`
-  ${({ theme }) => css`
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    font-family: ${theme.orbit.fontFamily};
-    margin-bottom: ${getSpacingToken};
-  `};
-`;
-
-StyledAccordion.defaultProps = {
-  theme: defaultTheme,
-};
+import { spaceAfterClasses } from "../common/tailwind";
 
 const Accordion = ({
   children,
@@ -31,7 +16,14 @@ const Accordion = ({
   loading,
   onExpand,
 }: Props) => (
-  <StyledAccordion spaceAfter={spaceAfter} id={id} data-test={dataTest}>
+  <div
+    className={cx(
+      "orbit-accordion font-base relative w-full",
+      spaceAfter && spaceAfterClasses[spaceAfter],
+    )}
+    id={id}
+    data-test={dataTest}
+  >
     {children
       ? React.Children.map(children, item => {
           if (!item) return null;
@@ -51,7 +43,7 @@ const Accordion = ({
           );
         })
       : null}
-  </StyledAccordion>
+  </div>
 );
 
 export default Accordion;