diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx index aff031c312..fec205eff6 100644 --- 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 (
- + { export const Detail = () => { return ( - + } content={content} /> ); diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx index ca3634400b..57be5a6674 100644 --- 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 index f7f9fd6dd6..9320b9c199 100644 --- 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) => 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 index 8bf9b05750..c9b0fd965e 100644 --- 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) => { 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 = ({ { - 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 index a81ecc4504..04b6853797 100644 --- 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>; + /** onCollapse callback that is triggered when Segment is collapsed */ + readonly onCollapse?: Common.Event>; } diff --git a/packages/orbit-components/src/Itinerary/README.md b/packages/orbit-components/src/Itinerary/README.md index 08d06881f5..562a51bb74 100644 --- 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