Skip to content

Commit

Permalink
feat(Itinerary): migrate to Tailwind
Browse files Browse the repository at this point in the history
some visual tests were updated because some bugs were actually fixed during this migration
  • Loading branch information
DSil committed Mar 8, 2024
1 parent 5190e25 commit a1f8c9d
Show file tree
Hide file tree
Showing 44 changed files with 342 additions and 711 deletions.
12 changes: 6 additions & 6 deletions docs/src/data/tailwind-migration-status.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ InputFile: true
InputGroup: true
InputSelect: true
Inline: false
Itinerary: false
ItineraryBadgeList: false
ItinerarySegment: false
ItinerarySegmentBanner: false
ItinerarySegmentDetail: false
ItinerarySegmentStop: false
Itinerary: true
ItineraryBadgeList: true
ItinerarySegment: true
ItinerarySegmentBanner: true
ItinerarySegmentDetail: true
ItinerarySegmentStop: true
Layout: true
LayoutColumn: true
LinkList: true
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 10 additions & 45 deletions packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import * as React from "react";
import { text, select, boolean } from "@storybook/addon-knobs";
import styled, { css } from "styled-components";
import { action } from "@storybook/addon-actions";

import Modal, { ModalSection } from "../Modal";
import * as Icons from "../icons";
import {
KiwicomGuarantee as Guarantee,
Airplane,
Expand All @@ -29,7 +27,6 @@ import Text from "../Text";
import CountryFlag from "../CountryFlag";
import Heading from "../Heading";
import RenderInRtl from "../utils/rtl/RenderInRtl";
import defaultTheme from "../defaultTheme";
import Separator from "../Separator";

import Itinerary, {
Expand All @@ -43,19 +40,6 @@ import Itinerary, {
ItineraryStatus,
} from ".";

const StyledText = styled.span<{ type?: string; weight?: string }>`
${({ theme, type }) => css`
font-weight: ${theme.orbit.fontWeightBold};
font-size: ${theme.orbit.fontSizeTextSmall};
font-family: ${theme.orbit.fontFamily};
color: ${type === "warning" ? theme.orbit.paletteOrangeNormal : theme.orbit.paletteBlueNormal};
`}
`;

StyledText.defaultProps = {
theme: defaultTheme,
};

const BadgeGroup = () => {
const carriers = [{ code: "REGIOJETT", name: "Regiojet" }];

Expand Down Expand Up @@ -428,9 +412,9 @@ export const Stop = () => {
<ItinerarySegmentBanner>
<ItineraryBadgeList>
<ItineraryBadgeListItem type="warning" icon={<StarFull color="warning" />}>
<StyledText as="span" type="warning">
<Text as="span" type="warning" weight="bold" size="small">
Hidden city hack:{" "}
</StyledText>{" "}
</Text>{" "}
This itinerary finishes in New York (United States), but you’ll get off during
the layover
</ItineraryBadgeListItem>
Expand Down Expand Up @@ -463,7 +447,7 @@ export const Stop = () => {
/>
<ItinerarySegmentStop
city="Barcelona BCN"
station="El Prat de LIobregat"
station="El Prat de Llobregat"
hidden
date="Mon, 30.1"
time="20:00"
Expand All @@ -489,9 +473,9 @@ export const Stop = () => {
<ItinerarySegmentBanner>
<ItineraryBadgeList>
<ItineraryBadgeListItem type="info" icon={<StarFull color="info" />}>
<StyledText as="span" type="info" weight="bold">
<Text as="span" type="info" weight="bold">
Throwaway ticketing hack:{" "}
</StyledText>{" "}
</Text>{" "}
You are saving money with this travel hack.
</ItineraryBadgeListItem>
</ItineraryBadgeList>
Expand All @@ -501,7 +485,7 @@ export const Stop = () => {
>
<ItinerarySegmentStop
city="Barcelona BCN"
station="Brno-Tuřany"
station="Barcelona-Sants"
date="Mon, 30.1"
time="17:30"
/>
Expand Down Expand Up @@ -535,9 +519,6 @@ export const Detail = () => {
};

export const Default = () => {
const source = select("icon", Object.keys(Icons), "Airplane");
const Icon = Icons[source];

return (
<Itinerary>
<ItinerarySegment spaceAfter="medium">
Expand All @@ -548,7 +529,7 @@ export const Default = () => {
time="14:05"
/>
<ItinerarySegmentDetail
icon={<Icon size="small" />}
icon={<Airplane size="small" />}
duration="2h 30m"
summary={<BadgeGroup />}
content={content}
Expand Down Expand Up @@ -822,9 +803,6 @@ export const MultipleBanners = () => {
};

export const RTL = () => {
const source = select("icon", Object.keys(Icons), "Airplane");
const Icon = Icons[source];

return (
<>
<RenderInRtl>
Expand All @@ -837,7 +815,7 @@ export const RTL = () => {
time="14:05"
/>
<ItinerarySegmentDetail
icon={<Icon size="small" />}
icon={<Airplane size="small" />}
duration="2h 30m"
summary={<BadgeGroup />}
content={content}
Expand Down Expand Up @@ -880,9 +858,9 @@ export const RTL = () => {
<ItinerarySegmentBanner onClick={action("onClick")}>
<ItineraryBadgeList>
<ItineraryBadgeListItem type="info" icon={<StarFull color="info" />}>
<StyledText as="span" type="info" weight="bold">
<Text as="span" type="info" weight="bold">
Throwaway ticketing hack:{" "}
</StyledText>{" "}
</Text>{" "}
You are saving money with this travel hack.
</ItineraryBadgeListItem>
</ItineraryBadgeList>
Expand Down Expand Up @@ -921,17 +899,4 @@ export const RTL = () => {
export default {
title: "Itinerary",
component: Itinerary,
includeStories: [
"BadgeList",
"CarrierBadge",
"Default",
"Detail",
"RTL",
"Segment",
"ItinerarySeparatorComponent",
"MultipleBanners",
"Status",
"Stop",
"InsideModal",
],
};
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,9 @@

import * as React from "react";

import {
ItemWrapper,
getIconColor,
VerticalBadge,
BadgeContent,
} from "../../BadgeList/BadgeListItem";
import { ItemWrapper, VerticalBadge, BadgeContent } from "../../BadgeList/BadgeListItem";
import Stack from "../../Stack";
// TODO: remove after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
import Text from "../ItineraryTemporaryText";
import ItineraryText from "../ItineraryText";
import type { BadgeListItem as Props } from "./types";

const ItineraryBadgeListItem = ({
Expand All @@ -25,17 +18,14 @@ const ItineraryBadgeListItem = ({
}: Props) => {
return (
<ItemWrapper dataTest={dataTest}>
<VerticalBadge type={type}>
{/* @ts-expect-error TODO */}
{React.isValidElement(icon) && React.cloneElement(icon, { color: getIconColor(type) })}
</VerticalBadge>
<VerticalBadge type={type} icon={icon} />
<BadgeContent
style={{
marginTop: cancelledValue ? `4px` : "",
}}
>
<Stack direction="column" spacing="XXSmall">
<Text
<ItineraryText
withBackground={withBackground}
type={withBackground && type !== "neutral" ? type : "secondary"}
weight={withBackground ? "medium" : "normal"}
Expand All @@ -44,11 +34,11 @@ const ItineraryBadgeListItem = ({
strikeThrough={strikeThrough}
>
{children}
</Text>
</ItineraryText>
{cancelledValue && (
<Text type="secondary" size="small" as="span" strikeThrough weight="medium">
<ItineraryText type="secondary" size="small" as="span" strikeThrough weight="medium">
{cancelledValue}
</Text>
</ItineraryText>
)}
</Stack>
</BadgeContent>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,35 +1,25 @@
"use client";

import * as React from "react";
import styled, { css } from "styled-components";
import cx from "clsx";

import type * as Common from "../../common/types";
import getSpacingToken from "../../common/getSpacingToken";
import themeDefault from "../../defaultTheme";
import { left } from "../../utils/rtl";
import BadgeList from "../../BadgeList";
import { useWidth } from "../context";
import ItineraryBadgeListItem from "./ItineraryBadgeListItem";
import type { Props } from "./types";

export const StyledWrapper = styled.div<{ offset: number; spaceAfter?: Common.SpaceAfterSizes }>`
${({ theme, offset }) => css`
margin-bottom: ${getSpacingToken};
margin-${left}: ${
parseInt(theme.orbit.spaceSmall, 10) + parseInt(theme.orbit.spaceSmall, 10) + offset
}px`};
`;

StyledWrapper.defaultProps = {
theme: themeDefault,
};
import { spaceAfterClasses } from "../../common/tailwind";
import useTheme from "../../hooks/useTheme";

const ItineraryBadgeList = ({ children, spaceAfter, ...props }: Props) => {
const { calculatedWidth: offset } = useWidth();
const theme = useTheme();
return (
<StyledWrapper offset={offset} spaceAfter={spaceAfter}>
<div
className={cx("orbit-itinerary-badge-list", spaceAfter && spaceAfterClasses[spaceAfter])}
style={{ marginInlineStart: `${2 * parseInt(theme.orbit.spaceSmall, 10) + offset}px` }}
>
<BadgeList {...props}>{children}</BadgeList>
</StyledWrapper>
</div>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import * as React from "react";
import styled, { css } from "styled-components";
import cx from "clsx";

import { usePart } from "./context";
import AlertCircle from "../../icons/AlertCircle";
import defaultTheme from "../../defaultTheme";
import type { Status } from "../types";
import StarFull from "../../icons/StarFull";
import CircleEmpty from "../../icons/CircleSmallEmpty";
Expand All @@ -14,67 +13,6 @@ interface Props {
children?: React.ReactNode;
}

const lineMixin = css`
content: "";
position: absolute;
height: calc(50% + 9px);
z-index: -1;
`;

const IconStyled = styled.div<{
index: number;
last: boolean;
count: number;
isPrevHidden: boolean;
isHidden: boolean;
}>`
${({ theme, index, last, count, isPrevHidden, isHidden }) => css`
display: flex;
justify-content: center;
z-index: 1;
svg {
background: ${last || index === 0 ? "transparent" : theme.orbit.paletteWhite};
overflow: hidden;
}
${index > 0 &&
!last &&
css`
padding: ${theme.orbit.spaceXXSmall} 0;
background: radial-gradient(
farthest-side,
${theme.orbit.paletteWhite},
${theme.orbit.paletteWhite},
${theme.orbit.paletteWhite},
transparent
);
`}
${index > 0 &&
count > 0 &&
css`
&:before {
top: ${last && isPrevHidden ? "-14px" : "-9px"};
border: 1px ${isPrevHidden ? "dashed" : "solid"} ${theme.orbit.paletteCloudNormalActive};
${lineMixin};
}
`};
${!last &&
count > 0 &&
css`
&:after {
bottom: ${isHidden ? "4px" : "-9px"};
border: 1px ${isHidden ? "dashed" : "solid"} ${theme.orbit.paletteCloudNormalActive};
${lineMixin};
}
`};
`}
`;

IconStyled.defaultProps = {
theme: defaultTheme,
};

const RenderedIcon = ({
isPrevHidden,
isLast,
Expand All @@ -100,17 +38,35 @@ const ItinerarySegmentStopIcon = ({ type, children }: Props) => {
const { index, last, isPrevHidden, isHidden, count } = usePart();

return (
<IconStyled
index={index}
last={last}
isPrevHidden={isPrevHidden}
isHidden={isHidden}
count={count}
<div
className={cx(
"z-default flex justify-center",
"[&_svg]:overflow-hidden",
last || index === 0 ? "[&_svg]:bg-transparent" : "[&_svg]:bg-white-normal",
index > 0 &&
!last && [
"py-xxs px-0",
"bg-[radial-gradient(farthest-side,theme(colors.white.normal),theme(colors.white.normal),theme(colors.white.normal),transparent)]",
],
index > 0 &&
count > 0 && [
"before:-z-default before:border-cloud-normal-active before:absolute before:h-[calc(50%+9px)] before:border",
last && isPrevHidden ? "before:top-[-14px]" : "before:top-[-9px]",
isPrevHidden ? "before:border-dashed" : "before:border-solid",
],
!last &&
count > 0 && [
"after:-z-default after:border-cloud-normal-active after:absolute after:h-[calc(50%+9px)] after:border",
isHidden
? "after:bottom-[4px] after:border-dashed"
: "after:bottom-[-9px] after:border-solid",
],
)}
>
<RenderedIcon type={type} isPrevHidden={isPrevHidden} isLast={last} isHidden={isHidden}>
{children}
</RenderedIcon>
</IconStyled>
</div>
);
};

Expand Down
Loading

0 comments on commit a1f8c9d

Please sign in to comment.