Merge branch 'master' into rcsl/add-flight-change-illus

.browserslistrc

@@ -1,10 +1,5 @@
 [production]
 extends @kiwicom/browserslist-config
 
-ios_saf 14
-ios_saf 15
-safari 14
-safari 15
-
 [test]
 current node

.github/workflows/update-visual-tests.yml

@@ -0,0 +1,51 @@
+name: Update Visual Tests
+
+on:
+  workflow_dispatch:
+    inputs:
+      commitMessage:
+        description: "Commit message for the update"
+        required: true
+        default: "chore: update visual tests"
+
+jobs:
+  update-visual-tests:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.39.0-jammy
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT }}
+          ref: ${{ github.head_ref }}
+
+      - name: Install
+        uses: ./.github/actions/node
+
+      - name: Setup git config
+        run: |
+          git config --global --add safe.directory "$GITHUB_WORKSPACE"
+          git config user.name "kiwicom-orbit-bot"
+          git config user.email "[email protected]"
+
+      - name: Build
+        run: |
+          apt-get update
+          apt-get install zip --yes
+          yarn tokens build
+          yarn tailwind-preset build
+          yarn components build
+
+      - name: Update Visual Tests
+        run: |
+          yarn components test-ct --update-snapshots
+          git add \*.png
+          if git diff-index --quiet HEAD; then
+            echo "No changes to visual tests. Exiting."
+            exit 0
+          else
+            echo "Commiting changes to visual tests"
+            git commit -m "${{ github.event.inputs.commitMessage || 'chore: update visual tests' }}"
+            git push
+          fi

.npmrc

@@ -0,0 +1 @@
+@kiwicom/browserslist-config:registry=https://registry.npmjs.org

docs/src/data/tailwind-migration-status.yaml

@@ -1,4 +1,4 @@
-Accordion: false
+Accordion: true
 AirportIllustration: true
 Alert: true
 AlertButton: true

package.json

@@ -57,7 +57,7 @@
     "@babel/types": "^7.21.4",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@kiwicom/browserslist-config": "^4.0.0",
+    "@kiwicom/browserslist-config": "^4.0.3",
     "@octokit/rest": "^19.0.5",
     "@size-limit/file": "^8.0.0",
     "@size-limit/webpack": "^8.0.0",

packages/orbit-components/package.json

@@ -49,9 +49,7 @@
     "component"
   ],
   "browserslist": [
-    "extends @kiwicom/browserslist-config",
-    "iOS >= 14",
-    "Safari >= 14"
+    "extends @kiwicom/browserslist-config"
   ],
   "files": [
     "es",

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;

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;

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;

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>
   );
 };
 

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();
   });