feat(Itinerary): add onExpand and onCollapse props to ItinerarySegment

kiwicom · Jul 1, 2024 · df0c31b · df0c31b
1 parent 4448925
commit df0c31b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 17 deletions.
diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
@@ -168,7 +168,11 @@ export const Segment = () => {
   return (
     <div className="space-y-xl">
       <Itinerary>
-        <ItinerarySegment>
+        <ItinerarySegment
+          onClick={action("clicked")}
+          onCollapse={action("collapsed")}
+          onExpand={action("expanded")}
+        >
           <ItinerarySegmentStop
             city="Prague"
             station="Václav Havel Airport Prague (PRG)"
@@ -514,7 +518,12 @@ export const Stop = () => {
 
 export const Detail = () => {
   return (
-    <ItinerarySegment noElevation>
+    <ItinerarySegment
+      noElevation
+      onClick={action("clicked")}
+      onCollapse={action("collapsed")}
+      onExpand={action("expanded")}
+    >
       <ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />} content={content} />
     </ItinerarySegment>
   );

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
@@ -87,7 +87,7 @@ const ItinerarySegmentDetail = ({
             ref={slideRef}
             tabIndex={-1}
             role="button"
-            onClick={toggleOpened}
+            onClick={ev => toggleOpened(ev)}
             onKeyDown={ev => {
               ev.stopPropagation();
             }}

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx
@@ -8,7 +8,7 @@ interface Context {
   isBanner: boolean;
   index: number;
   opened: boolean;
-  toggleOpened: () => void;
+  toggleOpened: (ev: React.SyntheticEvent<HTMLDivElement>) => void;
   last: boolean;
   count: number;
 }

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
@@ -15,8 +15,10 @@ const ItinerarySegment = ({
   dataTest,
   noElevation,
   actionable = true,
-  onClick,
   banner,
+  onClick,
+  onExpand,
+  onCollapse,
 }: Props) => {
   const content = React.Children.toArray(children) as React.ReactElement[];
 
@@ -25,6 +27,9 @@ const ItinerarySegment = ({
   const handleClick = (ev: React.SyntheticEvent<HTMLDivElement>) => {
     ev.stopPropagation();
     if (onClick) onClick(ev);
+    if (!opened && onExpand) onExpand(ev);
+    if (opened && onCollapse) onCollapse(ev);
+
     setOpened(prev => !prev);
   };
 
@@ -43,8 +48,8 @@ const ItinerarySegment = ({
           <ItinerarySegmentProvider
             index={i}
             opened={opened}
-            toggleOpened={() => {
-              if (document && document.getSelection()?.type !== "Range") setOpened(prev => !prev);
+            toggleOpened={ev => {
+              if (document && document.getSelection()?.type !== "Range") handleClick(ev);
             }}
             last={i === content.length - 1}
             isNextHidden={Boolean(content[i + 1]?.props?.hidden)}

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts b/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts
@@ -23,4 +23,8 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly actionable?: boolean;
   /** Additional information to ItinerarySegment */
   readonly banner?: React.ReactNode;
+  /** onExpand callback that is triggered when Segment is expanded */
+  readonly onExpand?: Common.Event<React.SyntheticEvent<HTMLDivElement>>;
+  /** onCollapse callback that is triggered when Segment is collapsed */
+  readonly onCollapse?: Common.Event<React.SyntheticEvent<HTMLDivElement>>;
 }
diff --git a/packages/orbit-components/src/Itinerary/README.md b/packages/orbit-components/src/Itinerary/README.md
@@ -62,16 +62,19 @@ The ItinerarySegment component serves as a wrapper of atomic unit `ItinerarySegm
 
 ## Props
 
-| Name        | Type              | Required           | Default | Description                                            |
-| ----------- | ----------------- | ------------------ | ------- | ------------------------------------------------------ |
-| label       | `React.ReactNode` |                    |         | Status message of ItinerarySegment                     |
-| children    | `React.ReactNode` | :heavy_check_mark: |         | The content of ItinerarySegment                        |
-| dataTest    | `string`          |                    |         | Optional prop for testing purposes.                    |
-| id          | `string`          |                    |         | Set `id` for `Itinerary`                               |
-| noElevation | `boolean`         |                    |         | Turn off elevation (box-shadow) for a segment.         |
-| spaceAfter  | `enum`            |                    |         | Additional `margin-bottom` after component.            |
-| actionable  | `boolean`         |                    | `true`  | Applies actionable styles for ItinerarySegment wrapper |
-| banner      | `React.Node`      |                    |         | Additional information for `ItinerarySegment`          |
+| Name        | Type                       | Required           | Default | Description                                                    |
+| ----------- | -------------------------- | ------------------ | ------- | -------------------------------------------------------------- |
+| label       | `React.ReactNode`          |                    |         | Status message of ItinerarySegment                             |
+| children    | `React.ReactNode`          | :heavy_check_mark: |         | The content of ItinerarySegment                                |
+| dataTest    | `string`                   |                    |         | Optional prop for testing purposes.                            |
+| id          | `string`                   |                    |         | Set `id` for `Itinerary`                                       |
+| noElevation | `boolean`                  |                    |         | Turn off elevation (box-shadow) for a segment.                 |
+| spaceAfter  | `enum`                     |                    |         | Additional `margin-bottom` after component.                    |
+| actionable  | `boolean`                  |                    | `true`  | Applies actionable styles for ItinerarySegment wrapper         |
+| banner      | `React.Node`               |                    |         | Additional information for `ItinerarySegment`                  |
+| onClick     | `event => void \| Promise` |                    |         | Function for handling `onClick` event.                         |
+| onExpand    | `event => void \| Promise` |                    |         | Function to be triggered when `ItinerarySegment` is expanded.  |
+| onCollapse  | `event => void \| Promise` |                    |         | Function to be triggered when `ItinerarySegment` is collapsed. |
 
 ### enum