Skip to content

Commit

Permalink
Merge pull request #2865 from kiwicom/chore/upgrade-sc-to-version-5
Browse files Browse the repository at this point in the history
chore: upgrade styled-components to v5
  • Loading branch information
mainframev committed Apr 7, 2021
2 parents 5c729ad + 3c4fcd5 commit 78cd45b
Show file tree
Hide file tree
Showing 9 changed files with 855 additions and 1,317 deletions.
3 changes: 1 addition & 2 deletions 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";

Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/Footer.tsx
Expand Up @@ -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};
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/Github/TeamMember.tsx
Expand Up @@ -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";

Expand Down
5 changes: 2 additions & 3 deletions 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";

Expand Down
14 changes: 7 additions & 7 deletions package.json
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
52 changes: 35 additions & 17 deletions 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>
`);
});
});
12 changes: 1 addition & 11 deletions packages/orbit-components/src/Popover/__tests__/index.test.js
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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" });
});
});
Expand Up @@ -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;
Expand Down

0 comments on commit 78cd45b

Please sign in to comment.