Skip to content

Commit

Permalink
feat(Itinerary): add actionable bool prop to ItineraryStatus
Browse files Browse the repository at this point in the history
It allows to control the visual aspect of the component in case it is not actionable
  • Loading branch information
DSil committed Mar 10, 2023
1 parent f705780 commit d58e9ce
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 10 deletions.
11 changes: 8 additions & 3 deletions packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
Expand Up @@ -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)"
Expand All @@ -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"
Expand Down
29 changes: 22 additions & 7 deletions packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx
Expand Up @@ -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;
Expand All @@ -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};
}
`
}
`}
`;
Expand Down Expand Up @@ -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">
Expand Down
Expand Up @@ -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 */
Expand Down

0 comments on commit d58e9ce

Please sign in to comment.