feat(ItinerarySegmentStop): add support of cancelled time

kiwicom · Jun 29, 2022 · 92c8b64 · 92c8b64
1 parent 72e204b
commit 92c8b64
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 20 deletions.
diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.jsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.jsx
@@ -203,14 +203,18 @@ export const Status = (): React.Node => {
               city="Prague"
               station="Václav Havel Airport Prague (PRG)"
               date="Fri, 19.10"
+              type="critical"
               time="14:05"
+              cancelledTime="12:50"
             />
             <ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />} content={content} />
             <ItinerarySegmentStop
               city="Vienna"
+              type="critical"
               station="Vienna International Airport"
               date="Fri, 19.10"
               time="15:35"
+              cancelledTime="14:00"
             />
           </ItinerarySegment>
         </ItineraryStatus>
@@ -308,7 +312,6 @@ export const Stop = (): React.Node => {
   const time = text("time", "14:05");
   const station = text("station", "Václav Havel Airport Prague (PRG)");
   const city = text("city", "Prague");
-  const canceled = boolean("canceled", false);
   const type = select("type", ["warning", "critical", "success", "info"], "warning");
   const hidden = boolean("hidden", false);
 
@@ -317,7 +320,6 @@ export const Stop = (): React.Node => {
       <Heading type="title2">Regular stop</Heading>
       <ItinerarySegmentStop
         city={city}
-        canceled={canceled}
         station={station}
         hidden={hidden}
         date={date}
@@ -384,7 +386,7 @@ export const Stop = (): React.Node => {
           />
         </ItinerarySegment>
       </Itinerary>
-      <Heading>Throwaway ticketing</Heading>
+      <Heading type="title2">Throwaway ticketing</Heading>
       <Itinerary>
         <ItinerarySegment
           onBannerClick={action("onBannerClick")}

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.d.ts b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.d.ts
@@ -12,6 +12,8 @@ export interface Props {
   readonly date?: string;
   /** The time of ItinerarySegmentStop */
   readonly time?: React.ReactNode;
+  /** Render time with strikeThrough property */
+  readonly cancelledTime?: React.ReactNode;
   /** The city of ItinerarySegmentStop */
   readonly city: React.ReactNode;
   /** The place of ItinerarySegmentStop */
@@ -26,8 +28,6 @@ export interface Props {
   readonly minWidth?: number;
   /** sets custom icon */
   readonly icon?: React.ReactNode;
-  /** shows segment stop as canceled with striked through Text */
-  readonly canceled?: React.ReactNode;
 }
 
 declare const ItinerarySegmentStop: React.FunctionComponent<Props>;

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.jsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.jsx
@@ -57,11 +57,11 @@ const ItinerarySegmentStop = ({
   date,
   icon,
   time,
+  cancelledTime,
   city,
   station,
   hidden,
   hiddenCityText = "Hidden city",
-  canceled,
   minWidth = 70,
   type,
 }: Props): React.Node => {
@@ -79,11 +79,7 @@ const ItinerarySegmentStop = ({
         <StyledDate minWidth={calculatedWidth} ref={setDateWidth} data-test="time">
           <Stack flex direction="column" spacing="none" align="end">
             {time && (
-              <Text
-                strikeThrough={canceled}
-                weight="medium"
-                type={canceled ? "critical" : "primary"}
-              >
+              <Text weight="medium" type={type} withBackground={!!cancelledTime}>
                 {time}
               </Text>
             )}
@@ -92,6 +88,11 @@ const ItinerarySegmentStop = ({
                 {date}
               </Text>
             )}
+            {cancelledTime && (
+              <Text type="secondary" weight="medium" strikeThrough={!!cancelledTime}>
+                {cancelledTime}
+              </Text>
+            )}
           </Stack>
         </StyledDate>
         <ItineraryIcon type={type}>

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.jsx.flow b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.jsx.flow
@@ -6,12 +6,12 @@ import type { Status } from "../..";
 export type Props = {|
   +date?: string,
   +time?: React.Node,
+  +cancelledTime?: React.Node,
   +city: React.Node,
   +station: React.Node,
   +hidden?: boolean,
   +hiddenCityText?: React.Node,
   +type?: Status,
-  +canceled?: boolean,
   +minWidth?: number,
   +icon?: React.Node,
 |};

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.jsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.jsx
@@ -108,8 +108,8 @@ const ItinerarySegment = ({
       noElevation={noElevation}
     >
       {parts}
-      {banner && <Separator spaceAfter="small" />}
-      {banner && (
+      {Boolean(banner) && <Separator spaceAfter="small" />}
+      {Boolean(banner) && (
         <StyledBannerWrapper onClick={handleBannerClick}>
           {banner}
           <ChevronRight color="secondary" />

diff --git a/packages/orbit-components/src/Itinerary/README.md b/packages/orbit-components/src/Itinerary/README.md
@@ -70,13 +70,14 @@ ItinerarySegmentStop is an atomic unit of the Itinerary component, shows two loc
 
 | Name           | Type                | Required           | Default       | Description                                              |
 | -------------- | ------------------- | ------------------ | ------------- | -------------------------------------------------------- |
-| date           | `string`            | :heavy_check_mark: |               | The date of ItinerarySegmentStop                         |
-| time           | `React.Node`        | :heavy_check_mark: |               | The time of ItinerarySegmentStop                         |
-| city           | `React.Node`        | :heavy_check_mark: |               | The city of ItinerarySegmentStop                         |
-| station        | `React.Node`        | :heavy_check_mark: |               | The station of ItinerarySegmentStop                      |
-| hidden         | `boolean`           |                    |               | ItinerarySegmentStop which status is hidden              |
+| date           | `string`            | :heavy_check_mark: |               | The date of `ItinerarySegmentStop`                       |
+| time           | `React.Node`        | :heavy_check_mark: |               | The time of `ItinerarySegmentStop`                       |
+| cancelledTime  | `React.Node`        |                    |               | The cancelled time of `ItinerarySegmentStop`             |
+| city           | `React.Node`        | :heavy_check_mark: |               | The city of `ItinerarySegmentStop`                       |
+| station        | `React.Node`        | :heavy_check_mark: |               | The station of `ItinerarySegmentStop`                    |
+| hidden         | `boolean`           |                    |               | `ItinerarySegmentStop` which status is hidden            |
 | hiddenCityText | `React.Node`        |                    | `Hidden city` | Text which appears above city                            |
-| icon           | `React.Node`        |                    |               | ItinerarySegmentStop custom icon                         |
+| icon           | `React.Node`        |                    |               | `ItinerarySegmentStop` custom icon                       |
 | canceled       | `boolean`           |                    |               | Shows segment stop as canceled with striked through Text |
 | type           | [`Status`](#status) |                    |               | The color of `ItinerarySegmentStop` icon                 |
 | minWidth       | `number`            |                    | `70`          | sets min-width for first column with date and time       |