feat(Grid): migrate Grid to tailwind (#3965)

* feat(Grid): migrate Grid to tailwind

* test: update snapshots

* test(Layout): remove maxWidth assetion on Grid

* test(Grid): add cypress media-query test

packages/orbit-components/cypress/integration/index.tsx

@@ -13,6 +13,7 @@ import TextStyles from "./pages/text-styles";
 import TextLinkStyles from "./pages/text-link-styles";
 import NavigationBar from "./pages/navigation-bar";
 import HeadingMediaProps from "./pages/heading-media-query-props";
+import GridMediaProps from "./pages/grid-mediaquery-props";
 
 const router = createRouter({
   lockScrolling: "/lock-scrolling",
@@ -24,85 +25,45 @@ const router = createRouter({
   textLinkStyles: "/text-link-styles",
   navigationBar: "/navigation-bar",
   headingMediaProps: "/heading-media-props",
+  gridMediaProps: "/grid-media-props",
 });
 
 function PageNotFound() {
   return <div>404</div>;
 }
 
+const Tests = ({ route }: { route: string }) => {
+  if (route === "lockScrolling") return <LockScrolling />;
+  if (route === "mediaQueries") return <MediaQueries />;
+  if (route === "modalFooter") return <ModalFooter />;
+  if (route === "boxMediaProps") return <BoxMediaProps />;
+  if (route === "stackMediaProps") return <StackMediaProps />;
+  if (route === "gridMediaProps") return <GridMediaProps />;
+  if (route === "navigationBar") return <NavigationBar />;
+  if (route === "textStyles") return <TextStyles />;
+  if (route === "textLinkStyles") return <TextLinkStyles />;
+  if (route === "headingMediaProps") return <HeadingMediaProps />;
+
+  return <PageNotFound />;
+};
+
 function App() {
   const page = useStore(router);
 
-  if (!page) {
-    return <PageNotFound />;
-  }
+  if (!page) return <PageNotFound />;
 
-  switch (page.route) {
-    case "lockScrolling":
-      return (
-        <OrbitProvider
-          useId={React.useId}
-          theme={{
-            ...defaultTheme,
-            lockScrollingBarGap: true,
-            // eslint-disable-next-line no-restricted-globals
-            lockScrolling: location.search === "?disabled" ? false : undefined,
-          }}
-        >
-          <LockScrolling />
-        </OrbitProvider>
-      );
-    case "mediaQueries":
-      return (
-        <OrbitProvider useId={React.useId} theme={defaultTheme}>
-          <MediaQueries />
-        </OrbitProvider>
-      );
-    case "modalFooter":
-      return (
-        <OrbitProvider useId={React.useId} theme={defaultTheme}>
-          <ModalFooter />
-        </OrbitProvider>
-      );
-    case "boxMediaProps":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <BoxMediaProps />
-        </OrbitProvider>
-      );
-    case "stackMediaProps":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <StackMediaProps />
-        </OrbitProvider>
-      );
-    case "textStyles":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <TextStyles />
-        </OrbitProvider>
-      );
-    case "textLinkStyles":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <TextLinkStyles />
-        </OrbitProvider>
-      );
-    case "navigationBar":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <NavigationBar />
-        </OrbitProvider>
-      );
-    case "headingMediaProps":
-      return (
-        <OrbitProvider theme={defaultTheme}>
-          <HeadingMediaProps />
-        </OrbitProvider>
-      );
-    default:
-      return <PageNotFound />;
-  }
+  return (
+    <OrbitProvider
+      useId={React.useId}
+      theme={{
+        ...defaultTheme,
+        lockScrollingBarGap: page.route === "lockScrolling",
+        lockScrolling: window.location.search === "?disabled" ? false : undefined,
+      }}
+    >
+      <Tests route={page.route} />
+    </OrbitProvider>
+  );
 }
 
 const container = document.getElementById("app");

packages/orbit-components/cypress/integration/pages/grid-media-query.test.ts

@@ -0,0 +1,38 @@
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+
+describe("Grid media properties and gap", () => {
+  it("should have correct gap for mediumMobile", () => {
+    cy.visit("/grid-media-props");
+    cy.viewport(defaultTokens.widthBreakpointMediumMobile, 600);
+    cy.findByTestId("test").should("have.css", "gap", "10px");
+    cy.findByTestId("test").should("have.css", "max-width", "300px");
+  });
+
+  it("should have correct gap for largeMobile", () => {
+    cy.visit("/grid-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeMobile, 600);
+    cy.findByTestId("test").should("have.css", "gap", "20px");
+    cy.findByTestId("test").should("have.css", "max-width", "400px");
+  });
+
+  it("should have correct gap for tablet", () => {
+    cy.visit("/grid-media-props");
+    cy.viewport(defaultTokens.widthBreakpointTablet, 600);
+    cy.findByTestId("test").should("have.css", "gap", "30px");
+    cy.findByTestId("test").should("have.css", "max-width", "500px");
+  });
+
+  it("should have correct gap for desktop", () => {
+    cy.visit("/grid-media-props");
+    cy.viewport(defaultTokens.widthBreakpointDesktop, 600);
+    cy.findByTestId("test").should("have.css", "gap", "40px");
+    cy.findByTestId("test").should("have.css", "max-width", "600px");
+  });
+
+  it("should have correct gap for largeDesktop", () => {
+    cy.visit("/grid-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeDesktop, 600);
+    cy.findByTestId("test").should("have.css", "gap", "50px");
+    cy.findByTestId("test").should("have.css", "max-width", "700px");
+  });
+});

packages/orbit-components/cypress/integration/pages/grid-mediaquery-props.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Grid } from "@kiwicom/orbit-components";
+
+const commonStyles = {
+  height: "30px",
+  padding: "10px",
+  width: "50px",
+  display: "flex",
+  alignItems: "center",
+};
+
+export default function StackMediaProps() {
+  return (
+    <Grid
+      dataTest="test"
+      columns="repeat(4, 1fr)"
+      mediumMobile={{ gap: "10px", maxWidth: "300px" }}
+      largeMobile={{ gap: "20px", maxWidth: "400px" }}
+      tablet={{ gap: "30px", maxWidth: "500px" }}
+      desktop={{ gap: "40px", maxWidth: "600px" }}
+      largeDesktop={{ gap: "50px", maxWidth: "700px" }}
+    >
+      <div style={{ background: "blue", ...commonStyles }}>1</div>
+      <div style={{ background: "red", ...commonStyles }}>2</div>
+      <div style={{ background: "cyan", ...commonStyles }}>3</div>
+      <div style={{ background: "magenta", ...commonStyles }}>4</div>
+    </Grid>
+  );
+}

packages/orbit-components/src/Layout/__tests__/index.test.tsx

@@ -14,9 +14,7 @@ describe("Layout", () => {
         <LayoutColumn dataTest="column">two</LayoutColumn>
       </Layout>,
     );
-    const container = screen.getByTestId("container");
     const columns = screen.getAllByTestId("column");
-    expect(container).toHaveStyle({ maxWidth: LAYOUT_SETTINGS.Search.maxWidth });
     expect(columns[0].tagName.toLowerCase()).toBe("span");
     expect(columns[0]).toHaveTextContent("one");
     expect(columns[1].tagName.toLowerCase()).toBe(LAYOUT_SETTINGS.Search.layoutColumns[1].as);

packages/orbit-components/src/utils/Grid/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,50 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Grid should match snapshot 1`] = `
-.c0 {
-  display: inline-grid;
-  max-width: 1440px;
-  width: 100%;
-  grid-template-columns: repeat(2,1fr);
-  grid-template-rows: repeat(2,minmax(30px,100px));
-  grid-column-gap: 10px;
-  grid-row-gap: 20px;
-}
-
-@media (min-width:414px) {
-  .c0 {
-    max-width: 600px;
-  }
-}
-
-@media (min-width:576px) {
-  .c0 {
-    max-width: 700px;
-  }
-}
-
-@media (min-width:768px) {
-  .c0 {
-    max-width: 800px;
-  }
-}
-
-@media (min-width:992px) {
-  .c0 {
-    max-width: 900px;
-  }
-}
-
-@media (min-width:1200px) {
-  .c0 {
-    max-width: 1000px;
-  }
-}
-
 <div>
   <div
-    class="c0"
+    class="inline-grid w-[var(--grid-width)] max-w-[var(--grid-max-width)] mm:max-w-[var(--mm-grid-max-width)] lm:max-w-[var(--lm-grid-max-width)] tb:max-w-[var(--tb-grid-max-width)] de:max-w-[var(--de-grid-max-width)] ld:max-w-[var(--ld-grid-max-width)] grid-cols-[var(--grid-columns)] grid-rows-[var(--grid-rows)] gap-x-[var(--grid-column-gap)] gap-y-[var(--grid-row-gap)]"
     data-test="test"
+    style="--grid-width: 100%; --grid-max-width: 1440px; --mm-grid-max-width: 600px; --lm-grid-max-width: 700px; --tb-grid-max-width: 800px; --de-grid-max-width: 900px; --ld-grid-max-width: 1000px; --grid-columns: repeat(2, 1fr); --grid-rows: repeat(2, minmax(30px, 100px)); --grid-column-gap: 10px; --grid-row-gap: 20px;"
   >
     <div>
       1