feat(Heading): migrate to Tailwind

chore: replace references to StyledHeading for orbit-heading

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

@@ -12,6 +12,7 @@ import StackMediaProps from "./pages/stack-mediaquery-props";
 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";
 
 const router = createRouter({
   lockScrolling: "/lock-scrolling",
@@ -22,6 +23,7 @@ const router = createRouter({
   textStyles: "/text-styles",
   textLinkStyles: "/text-link-styles",
   navigationBar: "/navigation-bar",
+  headingMediaProps: "/heading-media-props",
 });
 
 function PageNotFound() {
@@ -92,6 +94,12 @@ function App() {
           <NavigationBar />
         </OrbitProvider>
       );
+    case "headingMediaProps":
+      return (
+        <OrbitProvider theme={defaultTheme}>
+          <HeadingMediaProps />
+        </OrbitProvider>
+      );
     default:
       return <PageNotFound />;
   }

packages/orbit-components/cypress/integration/pages/heading-media-query-props.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Heading } from "@kiwicom/orbit-components";
+
+export default function HeadingMediaProps() {
+  return (
+    <Heading
+      type="title1"
+      mediumMobile={{ type: "display" }}
+      largeMobile={{ spaceAfter: "small", type: "title2" }}
+      tablet={{ align: "center", type: "title4" }}
+      desktop={{ type: "title5" }}
+      largeDesktop={{ type: "title6" }}
+    >
+      Heading
+    </Heading>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+
+describe("Heading media query", () => {
+  it("should have correct styles for small mobile", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointMediumMobile - 10, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle1);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle1);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle1);
+
+    // Assertion of next media query style
+    element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingDisplay);
+  });
+  it("should have correct styles for medium mobile", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointMediumMobile, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingDisplay);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingDisplay);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingDisplay);
+
+    // Assertion of next media query style
+    element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle2);
+    element.should("not.have.css", "margin-bottom", defaultTokens.spaceSmall);
+  });
+
+  it("should have correct styles for large mobile", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeMobile, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle2);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle2);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle2);
+    element.should("have.css", "margin", `0px 0px ${defaultTokens.spaceXSmall}`);
+
+    // Assertion of next media query style
+    element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle4);
+    element.should("not.have.css", "text-align", "center");
+  });
+
+  it("should have correct styles for tablet", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointTablet, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle4);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle4);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle4);
+    element.should("have.css", "text-align", "center");
+
+    // Assertion of next media query style
+    element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle5);
+  });
+
+  it("should have correct styles for desktop", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointDesktop, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle5);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle5);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle5);
+
+    // Assertion of next media query style
+    element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle6);
+  });
+
+  it("should have correct styles for large desktop", () => {
+    cy.visit("/heading-media-props");
+    cy.viewport(defaultTokens.widthBreakpointLargeDesktop, 600);
+
+    const element = cy.findByRole("heading");
+    element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle6);
+    element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle6);
+    element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle6);
+  });
+});

packages/orbit-components/src/Alert/index.tsx

@@ -19,7 +19,6 @@ import { getLinkStyle } from "../TextLink/deprecated";
 import { TYPE_OPTIONS, TOKENS, CLOSE_BUTTON_DATA_TEST } from "./consts";
 import { rtlSpacing, right, left } from "../utils/rtl";
 import getSpacingToken from "../common/getSpacingToken";
-import { StyledHeading } from "../Heading";
 import media from "../utils/mediaQuery";
 
 const getTypeToken =
@@ -218,7 +217,7 @@ const StyledContent = styled.div<{ inlineActions?: boolean; $type: Type; $noUnde
 
     & .orbit-list-item,
     .orbit-text,
-    ${StyledHeading} {
+    .orbit-heading {
       color: ${theme.orbit.paletteInkDark};
     }
   `}

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

@@ -1,21 +1,15 @@
 import * as React from "react";
 
-import { render, screen } from "../../test-utils";
+import { render, screen, spaceAfterTokens } from "../../test-utils";
+import type { SpaceAfterSizes } from "../../common/types";
 import theme from "../../defaultTheme";
 import Heading from "..";
-import { ELEMENT_OPTIONS, TYPE_OPTIONS } from "../consts";
-import { getBreakpointWidth } from "../../utils/mediaQuery";
+import { ELEMENT_OPTIONS, TYPE_OPTIONS, ALIGN } from "../consts";
 
 describe("Heading", () => {
   it("should have expected DOM output", () => {
     render(
-      <Heading
-        as={ELEMENT_OPTIONS.H2}
-        type={TYPE_OPTIONS.TITLE1}
-        inverted={false}
-        dataTest="test"
-        id="id"
-      >
+      <Heading as={ELEMENT_OPTIONS.H2} type={TYPE_OPTIONS.TITLE1} dataTest="test" id="id">
         My lovely heading
       </Heading>,
     );
@@ -25,64 +19,39 @@ describe("Heading", () => {
     expect(heading).toHaveAttribute("id", "id");
   });
 
-  it("should ignore unsupported props", () => {
+  it.each(Object.values(TYPE_OPTIONS))("should have expected styles from type %s", type => {
     render(
-      // className has to be undefined to reproduce the error
-      // @ts-expect-error className is not defined
-      <Heading as="h1" type="display" className={undefined}>
-        My lovely heading
+      <Heading dataTest={type} type={type}>
+        Title
       </Heading>,
     );
-    expect(screen.getByRole("heading", { name: "My lovely heading" }));
+    const element = screen.getByTestId(type);
+    const typeToken = type.charAt(0).toUpperCase() + type.slice(1);
+    expect(element).toHaveStyle({
+      "font-size": theme.orbit[`fontSizeHeading${typeToken}`],
+      "font-weight": theme.orbit[`fontWeightHeading${typeToken}`],
+      "line-height": theme.orbit[`lineHeightHeading${typeToken}`],
+    });
   });
-});
-
-describe("Heading with every media query", () => {
-  it("should have desktop styles", () => {
-    const dataTest = `test`;
 
+  it.each(Object.values(ALIGN))("should have expected styles from align %s", align => {
     render(
-      <Heading
-        dataTest={dataTest}
-        type={TYPE_OPTIONS.TITLE5}
-        mediumMobile={{ type: TYPE_OPTIONS.TITLE4 }}
-        largeMobile={{ type: TYPE_OPTIONS.TITLE3 }}
-        tablet={{ type: TYPE_OPTIONS.TITLE2 }}
-        desktop={{ type: TYPE_OPTIONS.TITLE1 }}
-        largeDesktop={{ type: TYPE_OPTIONS.DISPLAY }}
-      >
-        Heading
+      <Heading dataTest={align} align={align}>
+        Title
       </Heading>,
     );
-
-    expect(screen.getByTestId(dataTest)).toHaveStyleRule(
-      "font-size",
-      theme.orbit.fontSizeHeadingTitle4,
-      { media: getBreakpointWidth("mediumMobile", theme) },
-    );
-
-    expect(screen.getByTestId(dataTest)).toHaveStyleRule(
-      "font-size",
-      theme.orbit.fontSizeHeadingTitle3,
-      { media: getBreakpointWidth("largeMobile", theme) },
-    );
-
-    expect(screen.getByTestId(dataTest)).toHaveStyleRule(
-      "font-size",
-      theme.orbit.fontSizeHeadingTitle2,
-      { media: getBreakpointWidth("tablet", theme) },
-    );
-
-    expect(screen.getByTestId(dataTest)).toHaveStyleRule(
-      "font-size",
-      theme.orbit.fontSizeHeadingTitle1,
-      { media: getBreakpointWidth("desktop", theme) },
-    );
-
-    expect(screen.getByTestId(dataTest)).toHaveStyleRule(
-      "font-size",
-      theme.orbit.fontSizeHeadingDisplay,
-      { media: getBreakpointWidth("largeDesktop", theme) },
-    );
+    expect(screen.getByTestId(align)).toHaveStyle(`text-align: ${align}`);
   });
+
+  it.each(Object.keys(spaceAfterTokens))(
+    "should have expected styles from spaceAfter %s",
+    space => {
+      render(
+        <Heading dataTest={space} spaceAfter={space as SpaceAfterSizes}>
+          Title
+        </Heading>,
+      );
+      expect(screen.getByTestId(space)).toHaveStyle(`margin-bottom: ${spaceAfterTokens[space]}`);
+    },
+  );
 });

packages/orbit-components/src/Heading/index.js.flow

@@ -3,11 +3,9 @@
   DOCUMENTATION: https://orbit.kiwi/components/heading/
 */
 import * as React from "react";
-import type { StyledComponent } from "styled-components";
 
 import type { Globals } from "../common/common.js.flow";
 import type { spaceAfter } from "../common/getSpacingToken/index.js.flow";
-import type { ThemeProps } from "../defaultTheme.js.flow";
 
 export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
 
@@ -44,10 +42,4 @@ export type Props = {|
   +largeDesktop?: MediaQuery,
 |};
 
-export type GetHeadingToken = (name: string, type: Type) => ({| ...ThemeProps |}) => string;
-
 declare export default React.ComponentType<Props>;
-
-declare export var StyledHeading: StyledComponent<any, any, HTMLElement>;
-
-declare export var getHeadingToken: GetHeadingToken;