Skip to content

Commit

Permalink
feat(Itinerary): support multiple banners (#3543)
Browse files Browse the repository at this point in the history 
* chore(Itinerary): add more examples

* feat(Itinerary): add support for multiple banners
  • Loading branch information
@mainframev
mainframev committed Jul 28, 2022
1 parent 3679d91 commit 4994e9e
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 5 deletions.
135 changes: 134 additions & 1 deletion packages/orbit-components/src/Itinerary/Itinerary.stories.jsx
View file
Expand Up @@ -15,6 +15,8 @@ import {
PowerPlug,
StarFull,
BaggageSet,
Accommodation,
Location,
Wifi,
Visa,
Seat,
Expand All @@ -29,6 +31,7 @@ import Heading from "../Heading";
import { BadgeListItem } from "../BadgeList";
import RenderInRtl from "../utils/rtl/RenderInRtl";
import defaultTheme from "../defaultTheme";
import Separator from "../Separator";

import Itinerary, {
ItinerarySeparator,
Expand Down Expand Up @@ -353,7 +356,7 @@ export const Status = (): React.Node => {
);
};

export const Separator = (): React.Node => {
export const ItnerarySeparatorComponent = (): React.Node => {
return (
<Stack direction="column">
<ItinerarySeparator>
Expand Down Expand Up @@ -546,6 +549,135 @@ export const Default = (): React.Node => {
);
};

export const MultipleBanners = (): React.Node => {
return (
<>
<Heading type="title2">Throwaway ticketing</Heading>
<Itinerary>
<ItineraryStatus type="success" label="This part is new">
<ItinerarySegment
onBannerClick={action("onBannerClick")}
banner={
<Stack direction="column" align="stretch" spacing="XSmall">
<ItineraryBadgeList>
<BadgeListItem type="info" icon={<StarFull color="info" />}>
<Text as="span" type="info" weight="bold">
Throwaway ticketing hack:{" "}
</Text>{" "}
You are saving money with this travel hack.
</BadgeListItem>
</ItineraryBadgeList>
<Separator />
<ItineraryBadgeList>
<Stack spacing="XSmall">
<BadgeListItem icon={<Location color="secondary" />}>
You’ll depart from a different place in New York: John F. Kennedy
International.
</BadgeListItem>
<BadgeListItem icon={<Location color="secondary" />}>
You’ll depart from a different place in New York: John F. Kennedy
International.
</BadgeListItem>
<BadgeListItem icon={<Accommodation color="secondary" />}>
We won’t cover your overnight stay. Hotel coverage is only available if the
disruption happens during the trip. If you want to avoid extra hotel costs
please choose a different alternative or a refund.
</BadgeListItem>
</Stack>
</ItineraryBadgeList>
</Stack>
}
>
<ItinerarySegmentStop
city="Barcelona BCN"
station="Brno-Tuřany"
date="Mon, 30.1"
time="17:30"
/>
<ItinerarySegmentDetail
duration="2h 30m"
summary={
<Badge carriers={[{ code: "FR", name: "Ryanair" }]} border={false}>
Ryanair
</Badge>
}
content={content}
/>
<ItinerarySegmentStop
city="London LHR"
station="London Heathrow"
date="Mon, 30.1"
time="20:00"
/>
</ItinerarySegment>
</ItineraryStatus>
<ItineraryBadgeList>
<BadgeListItem type="warning" icon={<Info color="warning" />}>
Changing stations is your responsibility.
</BadgeListItem>
<BadgeListItem type="warning" icon={<Clock />}>
10h 20m layover
</BadgeListItem>
<BadgeListItem type="warning" icon={<SelfTransfer color="warning" />}>
You need to do a self-transfer in Prague.
</BadgeListItem>
</ItineraryBadgeList>
<ItineraryStatus type="success" label="This part is new">
<ItinerarySegment
banner={
<Stack>
<ItineraryBadgeList>
<BadgeListItem icon={<StarFull />} type="warning">
Hidden city hack: This itinerary finishes in New York (United States), but
you’ll get off during the layover.
</BadgeListItem>
<BadgeListItem icon={<Visa />}>
Check travel document requirements for all destinations, including passport,
visa and COVID-19 documents.
</BadgeListItem>
<BadgeListItem icon={<BaggageCheckedNone />}>
You can’t bring checked or cabin baggage.
</BadgeListItem>
</ItineraryBadgeList>
<Separator />
<ItineraryBadgeList>
<BadgeListItem icon={<Location />} type="warning">
You’ll depart from a different place in Prague: Václav Havel Airport Prague
</BadgeListItem>
</ItineraryBadgeList>
</Stack>
}
>
<ItinerarySegmentStop
city="Prague"
station="Václav Haivel Airport Prague (PRG)"
time="16:20"
date="Wed, 15.6"
/>
<ItinerarySegmentDetail
duration="2h 10m"
summary={
<Badge carriers={[{ code: "FR", name: "Ryanair" }]} border={false}>
Ryanair
</Badge>
}
content={content}
/>
<ItinerarySegmentStop
hidden
city="Frankfurt"
time="18:30"
date="Wed, 15.6"
station="Frankfurt International Airport "
/>
<ItinerarySegmentStop city="New York JFK" station="United States" />
</ItinerarySegment>
</ItineraryStatus>
</Itinerary>
</>
);
};

export const RTL = (): React.Node => {
const source = select("icon", Object.keys(Icons), "Airplane");
const Icon = Icons[source];
Expand Down Expand Up @@ -610,6 +742,7 @@ export default {
"RTL",
"Segment",
"Separator",
"MultipleBanners",
"Status",
"Stop",
],
Expand Down
11 changes: 9 additions & 2 deletions packages/orbit-components/src/Itinerary/ItinerarySegment/index.jsx
View file
Expand Up @@ -7,7 +7,7 @@ import Stack from "../../Stack";
import getSpacingToken from "../../common/getSpacingToken";
import defaultTheme from "../../defaultTheme";
import handleKeyDown from "../../utils/handleKeyDown";
import Separator from "../../Separator";
import Separator, { StyledSeparator } from "../../Separator";
import ChevronRight from "../../icons/ChevronRight";

import type { Props } from ".";
Expand Down Expand Up @@ -35,9 +35,16 @@ const StyledBannerWrapper = styled.div`
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0 ${theme.orbit.spaceMedium};
${StyledSeparator} {
width: 150% !important;
margin-left: -${theme.orbit.spaceMedium};
}
& > div {
max-width: calc(100% - 50px);
max-width: calc(100% - 20px);
}
`}
`;
Expand Down
5 changes: 4 additions & 1 deletion packages/orbit-components/src/Separator/index.d.ts
View file
Expand Up @@ -2,6 +2,7 @@
// Project: http://github.com/kiwicom/orbit

import * as React from "react";
import { StyledComponent } from "styled-components";

import * as Common from "../common/common";

Expand All @@ -11,4 +12,6 @@ interface Props extends Common.SpaceAfter {
}

declare const Separator: React.FunctionComponent<Props>;
export { Separator, Separator as default };
declare const StyledSeparator: StyledComponent<any, HTMLHRElement>;

export { Separator, StyledSeparator, Separator as default };
2 changes: 1 addition & 1 deletion packages/orbit-components/src/Separator/index.jsx
View file
Expand Up @@ -43,7 +43,7 @@ const StyledContainer = styled.div`
`};
`;

const StyledSeparator = styled.hr`
export const StyledSeparator: any = styled.hr`
${({ theme }) => css`
height: ${theme.orbit.heightSeparator};
background: ${theme.orbit.backgroundSeparator};
Expand Down
2 changes: 2 additions & 0 deletions packages/orbit-components/src/Separator/index.jsx.flow
View file
Expand Up @@ -3,6 +3,7 @@
DOCUMENTATION: https://orbit.kiwi/components/separator/
*/
import * as React from "react";
import type { CSSRules } from "styled-components";

import type { spaceAfter } from "../common/getSpacingToken";

Expand All @@ -15,3 +16,4 @@ export type Props = {|
|};

declare export default React.ComponentType<Props>;
declare export var StyledSeparator: CSSRules;

0 comments on commit 4994e9e

Please sign in to comment.