From d58e9cebd8cd7a4db0502f4ccb46d55d4c176997 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Fri, 10 Mar 2023 14:27:02 +0100
Subject: [PATCH] feat(Itinerary): add actionable bool prop to ItineraryStatus

It allows to control the visual aspect of the component in case it is not actionable
---
 .../src/Itinerary/Itinerary.stories.tsx       | 11 +++++--
 .../src/Itinerary/ItineraryStatus/index.tsx   | 29 ++++++++++++++-----
 .../src/Itinerary/ItineraryStatus/types.d.ts  |  1 +
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
index abe9b0c8d8..79dab2c6db 100644
--- a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
+++ b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
@@ -248,8 +248,13 @@ export const Status = () => {
   return (
     <>
       <Itinerary>
-        <ItineraryStatus type="critical" label="Rescheduled · 4h later" spaceAfter="medium">
-          <ItinerarySegment noElevation>
+        <ItineraryStatus
+          type="critical"
+          label="Rescheduled · 4h later"
+          spaceAfter="medium"
+          actionable={false}
+        >
+          <ItinerarySegment noElevation actionable={false}>
             <ItinerarySegmentStop
               city="Prague"
               station="Václav Havel Airport Prague (PRG)"
@@ -258,7 +263,7 @@ export const Status = () => {
               time="14:05"
               cancelledTime="12:50"
             />
-            <ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />} content={content} />
+            <ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />} />
             <ItinerarySegmentStop
               city="Vienna"
               type="critical"
diff --git a/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx b/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
index 6372181685..305fff0e3d 100644
--- a/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
+++ b/packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
@@ -39,8 +39,12 @@ const resolveColor = (status: Status, isHeader?: boolean) => ({ theme }: ThemePr
   return border[status];
 };
 
-const StyledWrapper = styled.div<{ $type: Status; spaceAfter: Common.SpaceAfterSizes }>`
-  ${({ theme, $type }) => css`
+const StyledWrapper = styled.div<{
+  $type: Status;
+  spaceAfter: Common.SpaceAfterSizes;
+  actionable?: boolean;
+}>`
+  ${({ theme, $type, actionable }) => css`
     display: flex;
     box-sizing: border-box;
     flex-direction: column;
@@ -49,9 +53,13 @@ const StyledWrapper = styled.div<{ $type: Status; spaceAfter: Common.SpaceAfterS
     border-${left}: ${theme.orbit.borderRadiusNormal} solid ${$type && resolveColor($type)};
     box-shadow: ${theme.orbit.boxShadowFixed};
     margin-bottom: ${getSpacingToken};
-    &:hover {
-      outline: none;
-      box-shadow: ${theme.orbit.boxShadowActionActive};
+    ${
+      actionable &&
+      css`
+        &:hover {
+          box-shadow: ${theme.orbit.boxShadowActionActive};
+        }
+      `
     }
   `}
 `;
@@ -106,9 +114,16 @@ const StatusIcon = ({ type }: { type: Status }) => {
   }
 };
 
-const ItineraryStatus = ({ type, label, spaceAfter = "medium", children, offset = 0 }: Props) => {
+const ItineraryStatus = ({
+  type,
+  label,
+  spaceAfter = "medium",
+  children,
+  offset = 0,
+  actionable = true,
+}: Props) => {
   return (
-    <StyledWrapper $type={type} spaceAfter={spaceAfter}>
+    <StyledWrapper $type={type} spaceAfter={spaceAfter} actionable={actionable}>
       <StyledStatusHeader $type={type}>
         <StyledStatusText $offset={offset}>
           <Stack flex spacing="XSmall" align="center">
diff --git a/packages/orbit-components/src/Itinerary/ItineraryStatus/types.d.ts b/packages/orbit-components/src/Itinerary/ItineraryStatus/types.d.ts
index 4a7b071596..01ce34c540 100644
--- a/packages/orbit-components/src/Itinerary/ItineraryStatus/types.d.ts
+++ b/packages/orbit-components/src/Itinerary/ItineraryStatus/types.d.ts
@@ -5,6 +5,7 @@ import type * as Common from "../../common/types";
 export type Status = "warning" | "critical" | "info" | "success" | "neutral";
 
 export interface Props extends Common.SpaceAfter {
+  readonly actionable?: boolean;
   /** Type of the status  */
   readonly type: Status;
   /** Label of the status */