feat(Box): migrate to Tailwind

BREAKING CHANGE: StyledBox removed. `.orbit-box` selector should be used
kiwicom · Oct 2, 2023 · 08a68ed · 08a68ed
1 parent ec841aa
commit 08a68ed
Show file tree

Hide file tree

Showing 53 changed files with 1,422 additions and 532 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -105,6 +105,7 @@ jobs:
       - name: Cypress
         uses: cypress-io/github-action@v5
         with:
+          browser: chrome
           install: false
           working-directory: packages/orbit-components
           start: yarn cy:dev
diff --git a/packages/orbit-components/cypress.config.ts b/packages/orbit-components/cypress.config.ts
@@ -3,6 +3,10 @@ import { devServer } from "@cypress/vite-dev-server";
 
 export default defineConfig({
   pageLoadTimeout: 120000,
+  defaultCommandTimeout: 120000,
+  videoCompression: false,
+  video: false,
+  screenshotOnRunFailure: false,
   e2e: {
     baseUrl: "http://localhost:3000",
     specPattern: "cypress/**/*.test.*",

diff --git a/packages/orbit-components/cypress/integration/index.css b/packages/orbit-components/cypress/integration/index.css
@@ -1 +1 @@
-@import "tailwindcss/base";
+@import "../../src/tailwind.css";
diff --git a/packages/orbit-components/cypress/integration/index.tsx b/packages/orbit-components/cypress/integration/index.tsx
@@ -7,11 +7,13 @@ import { OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";
 import LockScrolling from "./pages/lock-scrolling";
 import MediaQueries from "./pages/media-queries";
 import ModalFooter from "./pages/modal-footer";
+import BoxMediaProps from "./pages/box-mediaquery-props";
 
 const router = createRouter({
   lockScrolling: "/lock-scrolling",
   mediaQueries: "/media-queries",
   modalFooter: "/modal-footer",
+  boxMediaProps: "/box-media-props",
 });
 
 function PageNotFound() {
@@ -52,6 +54,12 @@ function App() {
           <ModalFooter />
         </OrbitProvider>
       );
+    case "boxMediaProps":
+      return (
+        <OrbitProvider theme={defaultTheme}>
+          <BoxMediaProps />
+        </OrbitProvider>
+      );
     default:
       return <PageNotFound />;
   }

diff --git a/packages/orbit-components/cypress/integration/pages/box-media-query.test.ts b/packages/orbit-components/cypress/integration/pages/box-media-query.test.ts
@@ -0,0 +1,68 @@
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+import color from "onecolor";
+
+describe("Box media query", () => {
+  it("should have correct styles for medium mobile", () => {
+    cy.visit("/box-media-props");
+    cy.viewport(defaultTokens.widthBreakpointMediumMobile, 600);
+    const element = cy.findByText("Box Content");
+    element.should("have.css", "display", "flex");
+    element.should("have.css", "flex-wrap", "wrap");
+    element.should("have.css", "flex-direction", "row-reverse");
+    element.should("have.css", "position", "fixed");
+    element.should("have.css", "min-width", "42px");
+    element.should("not.have.css", "text-align", "center"); // Assertion of next media query style
+  });
+  it("should have correct styles for large mobile", () => {
+    cy.visit("/box-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeMobile, 600);
+    const element = cy.findByText("Box Content");
+    element.should("have.css", "text-align", "center");
+    element.should("have.css", "border-radius", defaultTokens.borderRadiusLarge);
+    element.should("have.css", "overflow", "scroll");
+    element.should("have.css", "flex-shrink", "0");
+    element.should(
+      "have.css",
+      "color",
+      color(defaultTokens.paletteOrangeDark).css().replaceAll(",", ", "),
+    );
+    element.should("not.have.css", "flex-grow", "1"); // Assertion of next media query style
+  });
+  it("should have correct styles for tablet", () => {
+    cy.visit("/box-media-props");
+    cy.viewport(defaultTokens.widthBreakpointTablet, 600);
+    const element = cy.findByText("Box Content");
+    element.should("have.css", "flex-grow", "1");
+    element.should("have.css", "z-index", "42");
+    element.should("have.css", "width", "100px");
+    element.should("have.css", "justify-content", "space-between");
+    element.should("not.have.css", "align-items", "flex-end"); // Assertion of next media query style
+  });
+  it("should have correct styles for desktop", () => {
+    cy.visit("/box-media-props");
+    cy.viewport(defaultTokens.widthBreakpointDesktop, 600);
+    const element = cy.findByText("Box Content");
+    element.should("not.have.css", "max-height", "24px"); // Assertion of next media query style
+    element.should("have.css", "height", "10px");
+    element.should("have.css", "top", "10px");
+    element.should("have.css", "left", "5px");
+    element.should("have.css", "right", "0px");
+    element.should("have.css", "bottom", "-1px");
+  });
+  it("should have correct styles for large desktop", () => {
+    cy.visit("/box-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeDesktop, 600);
+    const element = cy.findByText("Box Content");
+    element.should(
+      "have.css",
+      "background-color",
+      color(defaultTokens.paletteRedLight).css().replaceAll(",", ", "),
+    );
+    element.should("have.css", "padding", defaultTokens.spaceLarge);
+    element.should("have.css", "margin-top", defaultTokens.spaceSmall);
+    element.should("have.css", "margin-left", "0px");
+    element.should("have.css", "margin-right", defaultTokens.spaceXSmall);
+    element.should("have.css", "align-items", "flex-end");
+    element.should("have.css", "max-height", "24px");
+  });
+});
diff --git a/packages/orbit-components/cypress/integration/pages/box-mediaquery-props.tsx b/packages/orbit-components/cypress/integration/pages/box-mediaquery-props.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Box } from "@kiwicom/orbit-components";
+
+export default function BoxMediaProps() {
+  return (
+    <Box
+      mediumMobile={{
+        display: "flex",
+        wrap: "wrap",
+        direction: "row-reverse",
+        position: "fixed",
+        minWidth: "42px",
+      }}
+      largeMobile={{
+        textAlign: "center",
+        borderRadius: "large",
+        overflow: "scroll",
+        shrink: 0,
+        color: "orangeDark",
+      }}
+      tablet={{
+        grow: 1,
+        zIndex: 42,
+        width: "100%",
+        maxWidth: "100px",
+        justify: "between",
+      }}
+      desktop={{
+        height: "10px",
+        top: "10px",
+        left: "5px",
+        right: "0",
+        bottom: "-1px",
+      }}
+      largeDesktop={{
+        background: "redLight",
+        padding: "large",
+        margin: { top: "small", left: "none", right: "XSmall" },
+        align: "end",
+        maxHeight: "24px",
+      }}
+    >
+      Box Content
+    </Box>
+  );
+}
diff --git a/packages/orbit-components/package.json b/packages/orbit-components/package.json
@@ -126,6 +126,7 @@
     "loki": "^0.30.3",
     "monstra": "^0.9.2",
     "nanostores": "^0.5.12",
+    "onecolor": "^4.0.0",
     "ora": "^6.1.0",
     "react-element-to-jsx-string": "^14.3.2",
     "react-window": "^1.8.6",

diff --git a/packages/orbit-components/src/Box/Box.stories.tsx b/packages/orbit-components/src/Box/Box.stories.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { text, select, number } from "@storybook/addon-knobs";
 
 import RenderInRtl from "../utils/rtl/RenderInRtl";
-import { WIDTH_AND_HEIGHT } from "./consts";
 import type { SpacingToken, ColorTokens } from "./types";
 
 import Box from ".";
@@ -373,10 +372,10 @@ export const Playground = () => {
   const textAlign = select("text-align", Object.values(TEXT_ALIGN), TEXT_ALIGN.LEFT);
   const justify = select("justify", Object.values(JUSTIFY), JUSTIFY.CENTER);
   const direction = select("direction", Object.values(DIRECTION), DIRECTION.ROW);
-  const width = text("width", WIDTH_AND_HEIGHT.FULL);
+  const width = text("width", "full");
   const minWidth = text("min-width", "");
   const maxWidth = text("max-width", "300px");
-  const height = text("height", WIDTH_AND_HEIGHT.AUTO);
+  const height = text("height", "auto");
   const maxHeight = text("max-height", "100px");
   const elevation = select("elevation", Object.values(ELEVATION), ELEVATION.ACTION);
   const borderRadius = select("border-radius", Object.values(BORDER_RADIUS), BORDER_RADIUS.NORMAL);