feat(CountryFlag): migrate to Tailwind

kiwicom · Oct 2, 2023 · e054877 · e054877
1 parent 1e04a7d
commit e054877
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 86 deletions.
diff --git a/packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx b/packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx
@@ -2,15 +2,20 @@ import React from "react";
 
 import { render, screen, cleanup } from "../../test-utils";
 import CountryFlag from "..";
-import { baseURL } from "../consts";
+import { baseURL, SIZE_WIDTHS } from "../consts";
 
 describe("CountryFlag", () => {
   it("should have expected DOM output", () => {
     render(<CountryFlag code="anywhere" name="Anywhere" dataTest="test" />);
     const flag = screen.getByRole("img", { name: "Anywhere" });
-    expect(flag).toHaveAttribute("src", expect.stringContaining("anywhere"));
-    expect(flag).toHaveAttribute("src", `${baseURL}/flags/24x0/flag-anywhere.jpg`);
-    expect(flag).toHaveAttribute("srcset", `${baseURL}/flags/48x0/flag-anywhere.jpg 2x`);
+    expect(flag).toHaveAttribute(
+      "src",
+      `${baseURL}/flags/${SIZE_WIDTHS.medium}x0/flag-anywhere.jpg`,
+    );
+    expect(flag).toHaveAttribute(
+      "srcset",
+      `${baseURL}/flags/${SIZE_WIDTHS.medium * 2}x0/flag-anywhere.jpg 2x`,
+    );
     expect(screen.getByTitle("Anywhere")).toBeInTheDocument();
     expect(screen.getByAltText("Anywhere")).toBeInTheDocument();
     expect(screen.getByTestId("test")).toBeInTheDocument();
@@ -44,4 +49,36 @@ describe("CountryFlag", () => {
     const flag = screen.getByRole("img");
     expect(flag).toHaveAttribute("src", expect.stringContaining("us"));
   });
+
+  it("should have the correct styles", () => {
+    render(<CountryFlag code="us" />);
+    const flag = screen.getByRole("img");
+    const wrapper = flag.parentElement;
+
+    expect(flag).toHaveStyle({ display: "block", height: "100%", width: "100%", "flex-shrink": 0 });
+
+    expect(wrapper).toHaveStyle({
+      position: "relative",
+      "background-color": "transparent",
+      "border-radius": "2px",
+      overflow: "hidden",
+      "flex-shrink": 0,
+      width: "24px",
+      height: "13px",
+    });
+  });
+
+  it("should have the correct size", () => {
+    render(<CountryFlag code="us" size="small" />);
+
+    const flag = screen.getByRole("img");
+    const wrapper = flag.parentElement;
+
+    expect(flag).toHaveAttribute("src", `${baseURL}/flags/${SIZE_WIDTHS.small}x0/flag-us.jpg`);
+    expect(flag).toHaveAttribute(
+      "srcset",
+      `${baseURL}/flags/${SIZE_WIDTHS.small * 2}x0/flag-us.jpg 2x`,
+    );
+    expect(wrapper).toHaveStyle({ width: "16px", height: "9px" });
+  });
 });
diff --git a/packages/orbit-components/src/CountryFlag/consts.ts b/packages/orbit-components/src/CountryFlag/consts.ts
@@ -266,7 +266,7 @@ export enum SIZES {
   MEDIUM = "medium",
 }
 
-export enum TOKENS {
-  WIDTH = "width",
-  HEIGHT = "height",
-}
+export const SIZE_WIDTHS = {
+  [SIZES.SMALL]: 16,
+  [SIZES.MEDIUM]: 24,
+};
diff --git a/packages/orbit-components/src/CountryFlag/index.tsx b/packages/orbit-components/src/CountryFlag/index.tsx
@@ -1,79 +1,10 @@
 "use client";
 
 import React from "react";
-import styled from "styled-components";
-import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
+import cx from "clsx";
 
-import type { Theme } from "../defaultTheme";
-import defaultTheme from "../defaultTheme";
-import { baseURL, CODES, SIZES, TOKENS } from "./consts";
-import type { Props, Size } from "./types";
-
-const getSizeToken =
-  (name: string) =>
-  ({ theme, size }: { theme: Theme; size: Size }) => {
-    const tokens = {
-      [TOKENS.WIDTH]: {
-        [SIZES.SMALL]: "16px",
-        [SIZES.MEDIUM]: theme.orbit.widthCountryFlag,
-      },
-      [TOKENS.HEIGHT]: {
-        [SIZES.SMALL]: "9px",
-        [SIZES.MEDIUM]: "13px",
-      },
-    };
-    return tokens[name][size];
-  };
-
-const StyledCountryFlag = styled.div<{ size: Size }>`
-  position: relative;
-  height: ${getSizeToken(TOKENS.HEIGHT)};
-  width: ${getSizeToken(TOKENS.WIDTH)};
-  background-color: ${({ theme }) => theme.orbit.backgroundCountryFlag};
-  border-radius: ${({ theme }) => theme.orbit.borderRadiusSmall};
-  overflow: hidden;
-  flex-shrink: 0;
-`;
-
-StyledCountryFlag.defaultProps = {
-  theme: defaultTheme,
-};
-
-export const StyledImage: any = styled.img.attrs<{ size: Size; code: string }>(
-  ({ theme, size, code }: { theme: Theme; size: Size; code: string }) => {
-    const width = parseInt(getSizeToken(TOKENS.WIDTH)({ theme, size }), 10);
-    return {
-      src: `${baseURL}/flags/${width}x0/flag-${code.toLowerCase()}.jpg`,
-      srcSet: `${baseURL}/flags/${width * 2}x0/flag-${code.toLowerCase()}.jpg 2x`,
-    };
-  },
-)`
-  display: block;
-  height: 100%;
-  width: 100%;
-  flex-shrink: 0;
-`;
-
-StyledImage.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledShadow = styled.div`
-  position: absolute;
-  display: block;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  box-shadow: inset 0 0 0 1px ${({ theme }) => convertHexToRgba(theme.orbit.paletteInkDark, 10)};
-  border-radius: ${({ theme }) => theme.orbit.borderRadiusSmall};
-`;
-
-StyledShadow.defaultProps = {
-  theme: defaultTheme,
-};
+import { baseURL, CODES, SIZE_WIDTHS, SIZES } from "./consts";
+import type { Props } from "./types";
 
 function getCountryProps(code?: string, name?: string) {
   const codeNormalized = code ? code.toUpperCase().replace("-", "_") : "UNDEFINED";
@@ -88,19 +19,30 @@ function getCountryProps(code?: string, name?: string) {
 
 const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) => {
   const { code, name } = getCountryProps(props.code, props.name);
+
+  const width = SIZE_WIDTHS[size];
+  const src = `${baseURL}/flags/${width}x0/flag-${code.toLowerCase()}.jpg`;
+  const srcSet = `${baseURL}/flags/${width * 2}x0/flag-${code.toLowerCase()}.jpg 2x`;
+
   return (
-    <StyledCountryFlag size={size}>
-      <StyledImage
+    <div
+      className={cx("rounded-small bg-country-flag-background relative shrink-0 overflow-hidden", {
+        "h-country-flag-small w-country-flag-small": size === SIZES.SMALL,
+        "h-country-flag-medium w-country-flag-medium": size === SIZES.MEDIUM,
+      })}
+    >
+      <img
+        className="block h-full w-full shrink-0"
         key={code}
         alt={name}
         title={name}
-        code={code}
         id={id}
         data-test={dataTest}
-        size={size}
+        src={src}
+        srcSet={srcSet}
       />
-      <StyledShadow />
-    </StyledCountryFlag>
+      <div className="rounded-small shadow-country-flag absolute inset-0 block h-full w-full" />
+    </div>
   );
 };