fix(ItinerarySegmentStop): fix CircleSmall icon (#3746)

kiwicom · Feb 16, 2023 · 8d22436 · 8d22436
1 parent 520d345
commit 8d22436
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 46 deletions.
diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
@@ -395,8 +395,8 @@ export const Stop = () => {
         station={station}
         hidden={hidden}
         date={date}
-        time={time}
         type={type}
+        time={time}
       />
       <Heading type="title2">Hidden city example</Heading>
       <Itinerary>

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItineraryIcon.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItineraryIcon.tsx
@@ -2,14 +2,14 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 
 import { usePart } from "./context";
-import AirplaneDown from "../../icons/AirplaneDown";
 import AlertCircle from "../../icons/AlertCircle";
-import Circle from "../../icons/Circle";
 import defaultTheme from "../../defaultTheme";
 import type { Status } from "../types";
+import StarFull from "../../icons/StarFull";
+import CircleEmpty from "../../icons/CircleSmallEmpty";
+import CircleSmall from "../../icons/CircleSmall";
 
 interface Props {
-  isDetails?: boolean;
   type?: Status;
   children?: React.ReactNode;
 }
@@ -75,15 +75,28 @@ IconStyled.defaultProps = {
   theme: defaultTheme,
 };
 
-const Icon = ({ type, isDetails, icon }) => {
-  if (type) return <AlertCircle size="small" color={type === "neutral" ? "primary" : type} />;
-  if (icon) return icon;
-  if (isDetails) return <AirplaneDown size="small" />;
+const RenderedIcon = ({
+  isPrevHidden,
+  isLast,
+  isHidden,
+  children,
+  type,
+}: {
+  isHidden?: boolean;
+  isPrevHidden: boolean;
+  isLast: boolean;
+  children: React.ReactNode;
+  type: Props["type"];
+}): JSX.Element => {
+  if (type && children !== null)
+    return <AlertCircle size="small" color={type === "neutral" ? "primary" : type} />;
+  if (isHidden) return <StarFull color="warning" size="small" />;
+  if (isPrevHidden && isLast) return <CircleEmpty size="small" color="tertiary" />;
 
-  return <Circle size="small" color="secondary" />;
+  return <>{children || <CircleSmall size="small" color="secondary" />}</>;
 };
 
-const ItineraryIcon = ({ isDetails, type, children }: Props) => {
+const ItinerarySegmentStopIcon = ({ type, children }: Props) => {
   const { index, last, isPrevHidden, isHidden, count } = usePart();
 
   return (
@@ -94,9 +107,11 @@ const ItineraryIcon = ({ isDetails, type, children }: Props) => {
       isHidden={isHidden}
       count={count}
     >
-      <Icon type={type} isDetails={isDetails} icon={children} />
+      <RenderedIcon type={type} isPrevHidden={isPrevHidden} isLast={last} isHidden={isHidden}>
+        {children}
+      </RenderedIcon>
     </IconStyled>
   );
 };
 
-export default ItineraryIcon;
+export default ItinerarySegmentStopIcon;
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
@@ -17,8 +17,9 @@ import useBoundingRect from "../../../hooks/useBoundingRect";
 import { useRandomIdSeed } from "../../../hooks/useRandomId";
 import { usePart } from "../context";
 import { useWidth } from "../../context";
-import ItineraryIcon from "../ItineraryIcon";
+import AirplaneDown from "../../../icons/AirplaneDown";
 import type { Props } from "./types";
+import ItineraryIcon from "../ItineraryIcon";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -133,7 +134,12 @@ StyledExpandableContent.defaultProps = {
   theme: themeDefault,
 };
 
-const ItinerarySegmentDetail = ({ duration, summary, content, icon }: Props) => {
+const ItinerarySegmentDetail = ({
+  duration,
+  summary,
+  content,
+  icon = <AirplaneDown size="small" />,
+}: Props) => {
   const { opened, toggleOpened } = usePart();
   const { calculatedWidth } = useWidth();
   const [{ height: slideHeight }, slideRef] = useBoundingRect<HTMLDivElement>({
@@ -152,8 +158,9 @@ const ItinerarySegmentDetail = ({ duration, summary, content, icon }: Props) =>
             </TemporaryText>
           </StyledDuration>
           <StyledDetailsIcon>
-            <ItineraryIcon isDetails>{icon}</ItineraryIcon>
+            <ItineraryIcon>{icon}</ItineraryIcon>
           </StyledDetailsIcon>
+
           <StyledSummary
             onClick={ev => {
               if (isOverflowed && opened) ev.stopPropagation();

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.tsx
@@ -1,9 +1,6 @@
 import * as React from "react";
 import styled, { css } from "styled-components";
 
-import StarFull from "../../../icons/StarFull";
-import CircleEmpty from "../../../icons/CircleSmallEmpty";
-import Circle from "../../../icons/CircleSmall";
 import { useWidth } from "../../context";
 import defaultTheme from "../../../defaultTheme";
 import Stack from "../../../Stack";
@@ -49,41 +46,23 @@ StyledHiddenCity.defaultProps = {
   theme: defaultTheme,
 };
 
-const ItinerarySegmentStopIcon = ({
-  isPrevHidden,
-  isLast,
-  isHidden,
-  icon,
-}: {
-  isHidden?: boolean;
-  isPrevHidden: boolean;
-  isLast: boolean;
-  icon?: React.ReactNode;
-}): JSX.Element => {
-  if (icon) return <>{icon}</>;
-  if (isHidden) return <StarFull color="warning" size="small" />;
-  if (isPrevHidden && isLast) return <CircleEmpty size="small" color="tertiary" />;
-
-  return <Circle size="small" color="secondary" />;
-};
-
 const ItinerarySegmentStop = ({
   date,
-  icon,
   time,
   cancelledDate,
   cancelledCity,
   cancelledStation,
   cancelledTime,
   city,
+  icon,
   station,
   hidden,
   hiddenCityText = "Hidden city",
   minWidth = 70,
   type,
 }: Props) => {
   const { calculatedWidth, setWidths } = useWidth();
-  const { isPrevHidden, last, isBanner, index } = usePart();
+  const { last, isBanner, index } = usePart();
   const [dateWidth, setDateWidth] = React.useState<HTMLDivElement | null>(null);
 
   const textType = type === "neutral" ? "primary" : type;
@@ -130,14 +109,7 @@ const ItinerarySegmentStop = ({
             )}
           </Stack>
         </StyledDate>
-        <ItineraryIcon type={type}>
-          <ItinerarySegmentStopIcon
-            isLast={last}
-            isHidden={hidden}
-            isPrevHidden={isPrevHidden}
-            icon={icon}
-          />
-        </ItineraryIcon>
+        <ItineraryIcon type={type}>{icon}</ItineraryIcon>
         <Stack direction="column" shrink spacing="none">
           {hidden && hiddenCityText && <StyledHiddenCity>{hiddenCityText}</StyledHiddenCity>}
           <Text