feat(Hide): migrate to Tailwind

chore(Layout): remove getViewportHideStyles test: update snapshots Update packages/orbit-tailwind-preset/src/presets/components/index.ts Co-authored-by: Marco Vidal García <marco.vidal@kiwi.com>
kiwicom · Oct 11, 2023 · 302e0dd · 302e0dd
1 parent 01fd709
commit 302e0dd
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 158 deletions.
diff --git a/packages/orbit-components/src/Hide/__tests__/index.test.tsx b/packages/orbit-components/src/Hide/__tests__/index.test.tsx
@@ -11,42 +11,8 @@ describe("Hide", () => {
       </Hide>,
     );
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c0 {
-        display: none;
-      }
-
-      @media (min-width:414px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:576px) {
-        .c0 {
-          display: none;
-        }
-      }
-
-      @media (min-width:768px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:992px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:1200px) {
-        .c0 {
-          display: none;
-        }
-      }
-
       <div
-        class="c0"
+        class="inline-block sm-mm:hidden lm-tb:hidden ld:hidden"
       >
         content
       </div>

diff --git a/packages/orbit-components/src/Hide/helpers/getDisplay.ts b/packages/orbit-components/src/Hide/helpers/getDisplay.ts
diff --git a/packages/orbit-components/src/Hide/helpers/getViewportHideStyles.ts b/packages/orbit-components/src/Hide/helpers/getViewportHideStyles.ts
diff --git a/packages/orbit-components/src/Hide/index.tsx b/packages/orbit-components/src/Hide/index.tsx
@@ -1,26 +1,23 @@
 "use client";
 
-import * as React from "react";
-import styled from "styled-components";
+import React from "react";
+import cx from "clsx";
 
-import defaultTheme from "../defaultTheme";
-import getViewportHideStyles from "./helpers/getViewportHideStyles";
-import getDisplay from "./helpers/getDisplay";
 import type { Props } from "./types";
-import type { Devices } from "../utils/mediaQuery/types";
-
-const StyledHide = styled.div<{ $on: Devices[]; $block?: boolean }>`
-  ${({ $on }) => getViewportHideStyles($on, getDisplay)};
-`;
-
-StyledHide.defaultProps = {
-  theme: defaultTheme,
-};
 
 const Hide = ({ on = [], block, children }: Props) => (
-  <StyledHide $on={on} $block={block}>
+  <div
+    className={cx(block ? "block" : "inline-block", {
+      "sm-mm:hidden": on.includes("smallMobile"),
+      "mm-lm:hidden": on.includes("mediumMobile"),
+      "lm-tb:hidden": on.includes("largeMobile"),
+      "tb-de:hidden": on.includes("tablet"),
+      "de-ld:hidden": on.includes("desktop"),
+      "ld:hidden": on.includes("largeDesktop"),
+    })}
+  >
     {children}
-  </StyledHide>
+  </div>
 );
 
 export default Hide;
diff --git a/packages/orbit-components/src/Layout/LayoutColumn/index.tsx b/packages/orbit-components/src/Layout/LayoutColumn/index.tsx
@@ -4,13 +4,30 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 
 import defaultTheme from "../../defaultTheme";
-import getViewportHideStyles from "../../Hide/helpers/getViewportHideStyles";
 import type { Props } from "./types";
 import type { Devices } from "../../utils/mediaQuery/types";
+import { DEVICES } from "../../utils/mediaQuery/consts";
+import mq from "../../utils/mediaQuery";
 
-const StyledColumn = styled.div<{ spanEntireRow?: boolean; hideOn?: Devices[] }>`
+const StyledColumn = styled.div<{ spanEntireRow?: boolean; hideOn: Devices[] }>`
   ${({ spanEntireRow, hideOn }) => css`
-    ${!!hideOn && getViewportHideStyles(hideOn)};
+    ${Boolean(hideOn) &&
+    hideOn.length > 0 &&
+    Object.values(DEVICES).map(viewport =>
+      viewport in mq
+        ? css`
+            ${mq[viewport](css`
+              display: ${hideOn.includes(viewport) && "none"};
+            `)};
+          `
+        : // "smallMobile" is not media query so we need to check it explicitly
+          viewport === "smallMobile" &&
+          hideOn.includes(viewport) &&
+          css`
+            display: none;
+          `,
+    )};
+
     ${spanEntireRow &&
     css`
       grid-column: 1 / -1;
@@ -22,9 +39,9 @@ StyledColumn.defaultProps = {
   theme: defaultTheme,
 };
 
-const LayoutColumn = ({ children, hideOn, as = "div", spanEntireRow, dataTest }: Props) => {
+const LayoutColumn = ({ children, hideOn = [], as = "div", spanEntireRow, dataTest }: Props) => {
   return (
-    // @ts-expect-error TODO
+    /* @ts-expect-error: as */
     <StyledColumn data-test={dataTest} hideOn={hideOn} as={as} spanEntireRow={spanEntireRow}>
       {children}
     </StyledColumn>

diff --git a/packages/orbit-components/src/deprecated/Desktop/__tests__/index.test.tsx b/packages/orbit-components/src/deprecated/Desktop/__tests__/index.test.tsx
@@ -7,42 +7,8 @@ describe("Desktop", () => {
   it("should output expected styles", () => {
     const { container } = render(<Desktop>kek</Desktop>);
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c0 {
-        display: none;
-      }
-
-      @media (min-width:414px) {
-        .c0 {
-          display: none;
-        }
-      }
-
-      @media (min-width:576px) {
-        .c0 {
-          display: none;
-        }
-      }
-
-      @media (min-width:768px) {
-        .c0 {
-          display: none;
-        }
-      }
-
-      @media (min-width:992px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:1200px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
       <div
-        class="c0"
+        class="inline-block sm-mm:hidden mm-lm:hidden lm-tb:hidden tb-de:hidden"
       >
         kek
       </div>

diff --git a/packages/orbit-components/src/deprecated/Mobile/__tests__/index.test.tsx b/packages/orbit-components/src/deprecated/Mobile/__tests__/index.test.tsx
@@ -7,38 +7,8 @@ describe("Mobile", () => {
   it("should be visible on smallMobile, largeMobile and tablet", () => {
     const { container } = render(<Mobile>kek</Mobile>);
     expect(container.firstChild).toMatchInlineSnapshot(`
-      @media (min-width:414px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:576px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:768px) {
-        .c0 {
-          display: inline-block;
-        }
-      }
-
-      @media (min-width:992px) {
-        .c0 {
-          display: none;
-        }
-      }
-
-      @media (min-width:1200px) {
-        .c0 {
-          display: none;
-        }
-      }
-
       <div
-        class="c0"
+        class="inline-block de-ld:hidden ld:hidden"
       >
         kek
       </div>

diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
@@ -2937,11 +2937,30 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "screens": {
       "de": "992px",
+      "de-ld": {
+        "max": "1199px",
+        "min": "992px",
+      },
       "ld": "1200px",
       "lm": "576px",
+      "lm-tb": {
+        "max": "767px",
+        "min": "576px",
+      },
       "mm": "414px",
+      "mm-lm": {
+        "max": "575px",
+        "min": "414px",
+      },
       "sm": "320px",
+      "sm-mm": {
+        "max": "413px",
+      },
       "tb": "768px",
+      "tb-de": {
+        "max": "991px",
+        "min": "768px",
+      },
     },
     "scrollMargin": {
       "0": "0px",

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -26,6 +26,8 @@ const COLORS: Partial<ExportedComponentLevelTokens>[] = [
   "countryFlag",
 ];
 
+const px = (n: number) => `${n}px`;
+
 interface Options {
   /** default: true e.g. does not include default normalize styles */
   disablePreflight?: boolean;
@@ -73,6 +75,25 @@ const cfg = (options?: Options): Config => {
     },
     theme: {
       extend: {
+        screens: {
+          "sm-mm": { max: px(defaultTokens.breakpointMediumMobile - 1) },
+          "mm-lm": {
+            min: px(defaultTokens.breakpointMediumMobile),
+            max: px(defaultTokens.breakpointLargeMobile - 1),
+          },
+          "lm-tb": {
+            min: px(defaultTokens.breakpointLargeMobile),
+            max: px(defaultTokens.breakpointTablet - 1),
+          },
+          "tb-de": {
+            min: px(defaultTokens.breakpointTablet),
+            max: px(defaultTokens.breakpointDesktop - 1),
+          },
+          "de-ld": {
+            min: px(defaultTokens.breakpointDesktop),
+            max: px(defaultTokens.breakpointLargeDesktop - 1),
+          },
+        },
         fontSize: {
           "heading-display": defaultTokens.headingDisplayFontSize,
           "heading-display-subtitle": defaultTokens.headingDisplaySubtitleFontSize,