feat(IllustrationPrimitive): migrate to Tailwind

chore: adapt IllustrationPrimitive imports chore: adjust textlink styles inside an alert chore(docs): setup tailwind in docs
kiwicom · Oct 2, 2023 · e436905 · e436905
1 parent 47394c9
commit e436905
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 105 deletions.
diff --git a/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx b/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx
@@ -3,7 +3,7 @@ import { select, text } from "@storybook/addon-knobs";
 
 // @ts-expect-error TODO
 import { NAMES } from "./consts.mts";
-import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive/consts";
+import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive";
 import SPACINGS_AFTER from "../common/getSpacingToken/consts";
 import IllustrationPrimitiveList from "../primitives/IllustrationPrimitive/IllustrationPrimitiveList";
 

diff --git a/packages/orbit-components/src/AirportIllustration/__tests__/index.test.tsx b/packages/orbit-components/src/AirportIllustration/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { render, screen } from "../../test-utils";
 import AirportIllustration from "..";
-import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive/consts";
+import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive";
 import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
 import defaultTheme from "../../defaultTheme";
 

diff --git a/packages/orbit-components/src/AirportIllustration/index.tsx b/packages/orbit-components/src/AirportIllustration/index.tsx
@@ -3,8 +3,7 @@
 import React from "react";
 
 import type { Props } from "./types";
-import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive/consts";
-import IllustrationPrimitive from "../primitives/IllustrationPrimitive";
+import IllustrationPrimitive, { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive";
 
 const AirportIllustration = ({ size = SIZE_OPTIONS.MEDIUM, ...props }: Props) => (
   <IllustrationPrimitive {...props} size={size} />

diff --git a/packages/orbit-components/src/Alert/Alert.stories.tsx b/packages/orbit-components/src/Alert/Alert.stories.tsx
@@ -13,6 +13,7 @@ import Text from "../Text";
 import Stack from "../Stack";
 import Heading from "../Heading";
 import CountryFlag from "../CountryFlag";
+import TextLink from "../TextLink";
 
 import Alert, { AlertButton } from ".";
 
@@ -160,6 +161,26 @@ InlineActions.story = {
   },
 };
 
+export const WithTextLink = () => {
+  const type = select("Type", Object.values(TYPE_OPTIONS), "info");
+
+  return (
+    <Alert type={type}>
+      <p>
+        <TextLink type="primary">This is</TextLink> a primary textlink.
+        <br />
+        <TextLink type="secondary">This is</TextLink> a secondary textlink.
+      </p>
+    </Alert>
+  );
+};
+
+WithTextLink.story = {
+  parameters: {
+    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  },
+};
+
 export const Playground = () => {
   const type = select("Type", Object.values(TYPE_OPTIONS), "info");
   const title = text("Title", "You can change the title by changing the Title knob");

diff --git a/packages/orbit-components/src/Alert/index.tsx b/packages/orbit-components/src/Alert/index.tsx
@@ -204,15 +204,19 @@ StyledTitle.defaultProps = {
 };
 
 const StyledContent = styled.div<{ inlineActions?: boolean; $type: Type; $noUnderline: boolean }>`
-  ${({ inlineActions, theme }) => css`
+  ${({ inlineActions, theme, $type }) => css`
     display: flex;
     align-items: center;
     min-height: 20px;
     width: ${!inlineActions && "100%"};
 
     & a:not([class]),
-    & .orbit-text-link {
-      ${getLinkStyle};
+    & .orbit-text-link:not(.orbit-text-link--secondary) {
+      ${getLinkStyle({ theme, $type, includeBase: true })};
+    }
+
+    & .orbit-text-link.orbit-text-link--secondary {
+      ${getLinkStyle({ theme, $type, includeBase: false })};
     }
 
     & .orbit-list-item,

diff --git a/packages/orbit-components/src/Illustration/Illustration.stories.tsx b/packages/orbit-components/src/Illustration/Illustration.stories.tsx
@@ -3,7 +3,7 @@ import { select, text } from "@storybook/addon-knobs";
 
 // @ts-expect-error currently not resolving mts properly
 import { NAMES } from "./consts.mts";
-import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive/consts";
+import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive";
 import IllustrationPrimitiveList from "../primitives/IllustrationPrimitive/IllustrationPrimitiveList";
 import type { Name } from "./types";
 

diff --git a/packages/orbit-components/src/Illustration/__tests__/index.test.tsx b/packages/orbit-components/src/Illustration/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { render, screen } from "../../test-utils";
 import Illustration from "..";
-import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive/consts";
+import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive";
 import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
 
 describe("Illustration", () => {

diff --git a/packages/orbit-components/src/Illustration/index.tsx b/packages/orbit-components/src/Illustration/index.tsx
@@ -2,8 +2,7 @@
 
 import * as React from "react";
 
-import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive/consts";
-import IllustrationPrimitive from "../primitives/IllustrationPrimitive";
+import IllustrationPrimitive, { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive";
 import type { Props } from "./types";
 
 const Illustration = ({ size = SIZE_OPTIONS.MEDIUM, ...props }: Props) => (

diff --git a/packages/orbit-components/src/SmartPassIllustrations/illustrations/IllustrationWrapper.tsx b/packages/orbit-components/src/SmartPassIllustrations/illustrations/IllustrationWrapper.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import theme from "../../defaultTheme";
-import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive/consts";
+import { SIZE_OPTIONS } from "../../primitives/IllustrationPrimitive";
 import type { Props } from "../types";
 
 const tokens = {

diff --git a/packages/orbit-components/src/TextLink/deprecated/index.ts b/packages/orbit-components/src/TextLink/deprecated/index.ts
@@ -82,24 +82,37 @@ const resolveUnderline = ({
 /**
  * @deprecated kept until Alert is refactored to TW
  */
-export const getLinkStyle = ({ theme, $type }: { theme: Theme; $type: Props["type"] }) => css`
-  &,
-  &:link,
-  &:visited {
-    color: ${getColor} ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
-    text-decoration: ${resolveUnderline} ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
-    font-weight: ${theme.orbit.fontWeightLinks} ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
-  }
-
-  &:hover {
-    outline: none;
-    text-decoration: none;
-    color: ${getHoverColor};
-  }
+export const getLinkStyle = ({
+  theme,
+  $type,
+  includeBase = true,
+}: {
+  theme: Theme;
+  $type: Props["type"];
+  includeBase?: boolean;
+}) => {
+  const baseStyles = css`
+    &,
+    &:link,
+    &:visited {
+      color: ${getColor} ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
+      text-decoration: ${resolveUnderline} ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
+      font-weight: ${theme.orbit.fontWeightLinks}
+        ${$type === TYPE_OPTIONS.SECONDARY && `!important`};
+    }
+  `;
+  return css`
+    ${includeBase && baseStyles};
+    &:hover {
+      outline: none;
+      text-decoration: none;
+      color: ${getHoverColor};
+    }
 
-  &:active {
-    outline: none;
-    text-decoration: none;
-    color: ${getActiveColor};
-  }
-`;
+    &:active {
+      outline: none;
+      text-decoration: none;
+      color: ${getActiveColor};
+    }
+  `;
+};
diff --git a/packages/orbit-components/src/TextLink/index.tsx b/packages/orbit-components/src/TextLink/index.tsx
@@ -70,6 +70,7 @@ const TextLink = ({
       download={download}
       className={cx(
         "orbit-text-link font-base duration-fast inline-flex cursor-pointer items-center font-medium transition-colors delay-0 ease-in-out hover:no-underline hover:outline-none active:no-underline active:outline-none",
+        type === "secondary" && "orbit-text-link--secondary",
         standAlone && "h-button-normal",
         typeClasses[type],
         size != null && sizeClasses[size],

diff --git a/packages/orbit-components/src/primitives/IllustrationPrimitive/__tests__/index.test.tsx b/packages/orbit-components/src/primitives/IllustrationPrimitive/__tests__/index.test.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import { render, screen } from "../../../test-utils";
 import IllustrationPrimitive from "..";
-import { SIZE_OPTIONS } from "../consts";
 import SPACINGS_AFTER from "../../../common/getSpacingToken/consts";
 import defaultTheme from "../../../defaultTheme";
 
@@ -13,7 +12,7 @@ describe("IllustrationPrimitive", () => {
   it("should have expected DOM output", () => {
     render(
       <IllustrationPrimitive
-        size={SIZE_OPTIONS.EXTRASMALL}
+        size="extraSmall"
         name="Accommodation"
         alt="Alternative text"
         dataTest="test"

diff --git a/packages/orbit-components/src/primitives/IllustrationPrimitive/consts.ts b/packages/orbit-components/src/primitives/IllustrationPrimitive/consts.ts
diff --git a/packages/orbit-components/src/primitives/IllustrationPrimitive/index.tsx b/packages/orbit-components/src/primitives/IllustrationPrimitive/index.tsx
@@ -1,63 +1,41 @@
 "use client";
 
 import React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
-import defaultTheme from "../../defaultTheme";
-import { SIZE_OPTIONS, baseURL } from "./consts";
-import getSpacingToken from "../../common/getSpacingToken";
-import type { Size, Props } from "./types";
-import { spacingUtility } from "../../utils/common";
+import type { Props } from "./types";
 import useTheme from "../../hooks/useTheme";
+import { spaceAfterClasses, getMargin } from "../../common/tailwind";
+
+export enum SIZE_OPTIONS {
+  EXTRASMALL = "extraSmall",
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+  DISPLAY = "display",
+}
 
 const getHeightToken = ({ theme, size }) => {
-  const tokens = {
-    [SIZE_OPTIONS.EXTRASMALL]: theme.orbit.heightIllustrationSmall,
-    [SIZE_OPTIONS.SMALL]: "120px", // TODO: add token
-    [SIZE_OPTIONS.MEDIUM]: theme.orbit.heightIllustrationMedium,
-    [SIZE_OPTIONS.LARGE]: "280px", // TODO: create token heightIllustrationLarge
-    [SIZE_OPTIONS.DISPLAY]: "460px", // TODO: create token heightIllustrationDisplay
+  const tokens: Record<SIZE_OPTIONS, string> = {
+    [SIZE_OPTIONS.EXTRASMALL]: theme.orbit.illustrationExtraSmallHeight,
+    [SIZE_OPTIONS.SMALL]: theme.orbit.illustrationSmallHeight,
+    [SIZE_OPTIONS.MEDIUM]: theme.orbit.illustrationMediumHeight,
+    [SIZE_OPTIONS.LARGE]: theme.orbit.illustrationLargeHeight,
+    [SIZE_OPTIONS.DISPLAY]: theme.orbit.illustrationDisplayHeight,
   };
-  return tokens[size];
+  return parseInt(tokens[size], 10);
 };
 
-export const StyledImage = styled.img.attrs<{
-  size: Size;
-  illustrationName: string;
-}>(({ theme, size, illustrationName }) => {
-  const height = parseInt(getHeightToken({ theme, size }), 10);
-  const illustrationPath = `${illustrationName}-Q85.png`;
-  return {
-    src: `${baseURL}/illustrations/0x${height}/${illustrationPath}`,
-    srcSet: `${baseURL}/illustrations/0x${
-      height * 2
-    }/${illustrationPath} 2x, ${baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`,
-  };
-})`
-  ${({
-    theme,
-    margin,
-    size,
-  }: {
-    theme: typeof defaultTheme;
-    illustrationName: string;
-    margin: Props["margin"];
-    size: Props["size"];
-  }) => css`
-    display: inline-block;
-    margin: auto 0;
-    max-height: ${getHeightToken({ theme, size })};
-    max-width: 100%;
-    background-color: ${theme.orbit.backgroundIllustration};
-    flex-shrink: 0;
-    ${spacingUtility(margin)};
-  `};
-`;
-
-StyledImage.defaultProps = {
-  theme: defaultTheme,
+const maxHeightClasses: Record<SIZE_OPTIONS, string> = {
+  [SIZE_OPTIONS.EXTRASMALL]: "max-h-illustration-extra-small",
+  [SIZE_OPTIONS.SMALL]: "max-h-illustration-small",
+  [SIZE_OPTIONS.MEDIUM]: "max-h-illustration-medium",
+  [SIZE_OPTIONS.LARGE]: "max-h-illustration-large",
+  [SIZE_OPTIONS.DISPLAY]: "max-h-illustration-display",
 };
 
+const baseURL = "//images.kiwi.com";
+
 const IllustrationPrimitive = ({
   name,
   alt,
@@ -69,15 +47,26 @@ const IllustrationPrimitive = ({
   spaceAfter,
 }: Props) => {
   const theme = useTheme();
+  const illustrationPath = `${name}-Q85.png`;
+  const height = getHeightToken({ theme, size });
+  const { vars: cssVars, classes: marginClasses } = getMargin(margin);
 
   return (
-    <StyledImage
-      illustrationName={name}
+    <img
+      className={cx(
+        "mx-0 my-auto inline-block max-w-full shrink-0 bg-transparent",
+        maxHeightClasses[size],
+        spaceAfter && spaceAfterClasses[spaceAfter],
+        ...marginClasses,
+      )}
+      src={`${baseURL}/illustrations/0x${height}/${illustrationPath}`}
+      srcSet={`${baseURL}/illustrations/0x${
+        height * 2
+      }/${illustrationPath} 2x, ${baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`}
       alt={typeof alt === "string" ? alt : name}
-      size={size}
-      id={id}
-      margin={spaceAfter ? { bottom: getSpacingToken({ spaceAfter, theme }) } : margin}
       data-test={dataTest}
+      id={id}
+      style={cssVars}
     />
   );
 };

diff --git a/packages/orbit-components/src/primitives/Primitives.stories.tsx b/packages/orbit-components/src/primitives/Primitives.stories.tsx
@@ -4,10 +4,9 @@ import { action } from "@storybook/addon-actions";
 
 import ButtonPrimitiveComponent from "./ButtonPrimitive";
 import * as Icons from "../icons";
-import { SIZE_OPTIONS } from "./IllustrationPrimitive/consts";
 import SPACINGS_AFTER from "../common/getSpacingToken/consts";
 import BadgePrimitiveComponent from "./BadgePrimitive";
-import IllustrationPrimitiveComponent from "./IllustrationPrimitive";
+import IllustrationPrimitiveComponent, { SIZE_OPTIONS } from "./IllustrationPrimitive";
 
 const getIcons = (name, defaultIcon) => select(name, [null, ...Object.keys(Icons)], defaultIcon);
 const getIcon = source => Icons[source];

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -142,9 +142,6 @@ const cfg = (options?: Options): Config => {
           "illustration-large": defaultTokens.illustrationLargeHeight,
           "illustration-display": defaultTokens.illustrationDisplayHeight,
         },
-        minWidth: {
-          "dialog-width": defaultTokens.dialogWidth,
-        },
         width: {
           "icon-small": defaultTokens.iconSmallSize,
           "icon-medium": defaultTokens.iconMediumSize,