chore: upgrade styled-components to v5

docs/src/components/AddBookmark.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import StarEmpty from "@kiwicom/orbit-components/lib/icons/StarEmpty";
-import StarFull from "@kiwicom/orbit-components/lib/icons/StarFull";
+import { StarEmpty, StarFull } from "@kiwicom/orbit-components/icons";
 
 import { useBookmarks } from "../services/bookmarks";
 

docs/src/components/Footer.tsx

@@ -26,10 +26,10 @@ const StyledInner = styled.div`
   `}
 `;
 
-const StyledIconLink = styled.a.attrs({
+const StyledIconLink = styled.a.attrs(() => ({
   target: "_blank",
   rel: "noopener noreferrer",
-})`
+}))`
   ${({ theme }) => css`
     display: block;
     padding: ${theme.orbit.spaceXSmall};

docs/src/components/Github/TeamMember.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import { Stack } from "@kiwicom/orbit-components";
 import styled from "styled-components";
 import { Dribbble, Github } from "@icons-pack/react-simple-icons";
-import Twitter from "@kiwicom/orbit-components/lib/icons/Twitter";
-import LinkIcon from "@kiwicom/orbit-components/lib/icons/Link";
+import { Twitter, Link as LinkIcon } from "@kiwicom/orbit-components/icons";
 
 import { Member } from "./OrbitTeam";
 

docs/src/components/Sidenav/index.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { Portal, Drawer } from "@kiwicom/orbit-components";
-import Menu from "@kiwicom/orbit-components/lib/icons/MenuHamburger";
-import mq from "@kiwicom/orbit-components/lib/utils/mediaQuery";
+import { Portal, Drawer, mediaQueries as mq } from "@kiwicom/orbit-components";
+import { MenuHamburger as Menu } from "@kiwicom/orbit-components/icons";
 
 import { CONTENT_PADDING } from "../../consts";
 

package.json

@@ -70,11 +70,11 @@
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/styled-components": "^5.1.4",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/react-hooks": "^5.1.1",
+    "@testing-library/user-event": "^13.1.1",
+    "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.15.0",
     "babel-core": "^7.0.0-bridge.0",
@@ -117,7 +117,7 @@
     "isomorphic-unfetch": "^3.1.0",
     "jest": "^26.6.3",
     "jest-matchmedia-mock": "^1.1.0",
-    "jest-styled-components": "^6.2.1",
+    "jest-styled-components": "^7.0.3",
     "jscodeshift": "^0.11.0",
     "jsdom": "^16.4.0",
     "lerna": "4.0.0",
@@ -147,7 +147,7 @@
     "remark-validate-links": "^10.0.2",
     "rimraf": "^3.0.2",
     "sharp": "^0.27.0",
-    "styled-components": "^4.4.1",
+    "styled-components": "^5.2.2",
     "surge": "^0.21.7",
     "svg2ttf": "^5.0.0",
     "svgicons2svgfont": "^9.0.4",

packages/orbit-components/src/Mobile/__tests__/index.test.js

@@ -1,31 +1,49 @@
 // @flow strict
 
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
-import { getBreakpointWidth } from "../../utils/mediaQuery/index";
-import { QUERIES } from "../../utils/mediaQuery/consts";
-import theme from "../../defaultTheme";
 import Mobile from "..";
 
 describe("Mobile", () => {
   it("should be visible on smallMobile, largeMobile and tablet", () => {
-    render(<Mobile>kek</Mobile>);
+    const { container } = render(<Mobile>kek</Mobile>);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      @media (min-width:414px) {
+        .c0 {
+          display: inline-block;
+        }
+      }
 
-    expect(screen.getByText("kek")).toHaveStyleRule("display", "inline-block", {
-      media: getBreakpointWidth(QUERIES.LARGEMOBILE, theme),
-    });
+      @media (min-width:576px) {
+        .c0 {
+          display: inline-block;
+        }
+      }
 
-    expect(screen.getByText("kek")).toHaveStyleRule("display", "inline-block", {
-      media: getBreakpointWidth(QUERIES.TABLET, theme),
-    });
+      @media (min-width:768px) {
+        .c0 {
+          display: inline-block;
+        }
+      }
 
-    expect(screen.getByText("kek")).toHaveStyleRule("display", "none", {
-      media: getBreakpointWidth(QUERIES.LARGEDESKTOP, theme),
-    });
+      @media (min-width:992px) {
+        .c0 {
+          display: none;
+        }
+      }
 
-    expect(screen.getByText("kek")).toHaveStyleRule("display", "none", {
-      media: getBreakpointWidth(QUERIES.DESKTOP, theme),
-    });
+      @media (min-width:1200px) {
+        .c0 {
+          display: none;
+        }
+      }
+
+      <div
+        class="c0"
+      >
+        kek
+      </div>
+    `);
   });
 });

packages/orbit-components/src/Popover/__tests__/index.test.js

@@ -6,9 +6,6 @@ import userEvent from "@testing-library/user-event";
 import Popover from "../index";
 import Button from "../../Button";
 import Stack from "../../Stack";
-import { getBreakpointWidth } from "../../utils/mediaQuery/index";
-import { QUERIES } from "../../utils/mediaQuery/consts";
-import theme from "../../defaultTheme";
 
 describe("Popover", () => {
   it("should have expected DOM output", () => {
@@ -75,13 +72,6 @@ describe("Popover", () => {
     );
 
     // default is 4px
-    expect(screen.getByRole("tooltip")).toHaveStyleRule("top", "14px", {
-      media: getBreakpointWidth(QUERIES.LARGEMOBILE, theme),
-    });
-
-    // default is 0px
-    expect(screen.getByRole("tooltip")).toHaveStyleRule("left", "20px", {
-      media: getBreakpointWidth(QUERIES.LARGEMOBILE, theme),
-    });
+    expect(screen.getByRole("tooltip")).toHaveStyle({ top: "10" });
   });
 });

packages/orbit-components/src/primitives/TooltipPrimitive/__tests__/__snapshots__/index.test.js.snap

@@ -22,7 +22,7 @@ exports[`Tooltip it should match snapshot 1`] = `
   outline: none;
 }
 
-.c0 .c2 {
+.c0 .Text__StyledText-sc-19qtt4y-0 {
   display: inline-block;
   -webkit-text-decoration: underline;
   text-decoration: underline;