Skip to content

Commit

Permalink
feat(ItinerarySeparator): add type and color props
Browse files Browse the repository at this point in the history
  • Loading branch information
@mainframev
mainframev committed May 16, 2023
1 parent b6497a0 commit d73b182
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 51 deletions.
13 changes: 13 additions & 0 deletions packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
View file
Expand Up @@ -384,6 +384,19 @@ export const ItinerarySeparatorComponent = () => {
<Text weight="bold">8 nights in Barcelona</Text>
</ItinerarySeparator>
<ItinerarySeparator />
<ItinerarySeparator type="solid" color="paletteBlueNormal">
<Text weight="bold">Eternity in Valhalla</Text>
</ItinerarySeparator>
<ItinerarySeparator type="dashed" color="paletteRedNormal">
<Text weight="bold">Eternity in Hell</Text>
</ItinerarySeparator>
<ItinerarySeparator type="dotted" color="paletteGreenNormal">
<Text weight="bold">Eternity in Paradise</Text>
</ItinerarySeparator>
<ItinerarySeparator type="double" color="paletteOrangeNormal">
<Text weight="bold">Eternity in Tartarus</Text>
</ItinerarySeparator>
<ItinerarySeparator />
</Stack>
);
};
Expand Down
2 changes: 2 additions & 0 deletions packages/orbit-components/src/Itinerary/ItinerarySeparator/index.js.flow
View file
Expand Up @@ -3,6 +3,8 @@ import * as React from "react";

export type Props = {|
+children?: React.Node,
+type?: "dashed" | "solid" | "dotted" | "double" | "none",
+color?: string,
|};

declare export default React.ComponentType<Props>;
27 changes: 16 additions & 11 deletions packages/orbit-components/src/Itinerary/ItinerarySeparator/index.tsx
View file
Expand Up @@ -12,17 +12,20 @@ const StyledWrapper = styled.div`
width: 100%;
`;

const StyledInner = styled.div`
${({ theme }) => css`
const StyledInner = styled.div<{ $type: Props["type"]; $color: Props["color"] }>`
${({ theme, $type, $color }) => css`
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
z-index: 10;
width: 50%;
height: 1px;
background: ${theme.orbit.paletteCloudNormal};
height: ${!$type && theme.orbit.heightSeparator};
background: ${theme.orbit.backgroundSeparator};
border-width: ${$type && "1px"};
border-color: ${$color && theme.orbit[$color]};
border-style: ${$type};
}
&:before {
Expand All @@ -40,21 +43,23 @@ StyledInner.defaultProps = {
};

const StyledWord = styled.div`
position: relative;
padding: 0 2px;
background: #fff;
z-index: 11;
${({ theme }) => css`
position: relative;
padding: 0 2px;
background: ${theme.orbit.paletteWhite};
z-index: 11;
`};
`;

StyledWord.defaultProps = {
theme: defaultTheme,
};

const ItinerarySeparator = ({ children }: Props) => {
if (children)
const ItinerarySeparator = ({ children, type, color }: Props) => {
if (children || type)
return (
<StyledWrapper>
<StyledInner>
<StyledInner $type={type} $color={color}>
<StyledWord>{children}</StyledWord>
</StyledInner>
</StyledWrapper>
Expand Down
4 changes: 4 additions & 0 deletions packages/orbit-components/src/Itinerary/ItinerarySeparator/types.d.ts
View file
@@ -1,5 +1,9 @@
import type * as React from "react";

import type { Props } from "../../Separator/types";

export interface Props {
readonly children?: React.ReactNode;
readonly type?: Props["type"];
readonly color?: Props["color"];
}
82 changes: 45 additions & 37 deletions packages/orbit-components/src/Itinerary/README.md
View file
Expand Up @@ -12,7 +12,7 @@ import Itinerary, {
} from "@kiwicom/orbit-components/lib/Itinerary";
```

After adding import into your project you can use it simply like:
After adding import to your project you can use it simply like:

```jsx
<Itinerary>
Expand Down Expand Up @@ -46,7 +46,7 @@ After adding import into your project you can use it simply like:

## ItinerarySegment

ItinerarySegment component serves as a wrapper of atomic units `ItinerarySegmentStop` and `ItinerarySegmentDetail, has status prop for showing important information about the connection between two segments of journey.
The ItinerarySegment component serves as a wrapper of atomic unit `ItinerarySegmentStop` and `ItinerarySegmentDetail, have a status prop for showing important information about the connection between two segments of a journey.

## Props

Expand All @@ -63,44 +63,44 @@ ItinerarySegment component serves as a wrapper of atomic units `ItinerarySegment

## ItinerarySegmentStop

ItinerarySegmentStop is an atomic unit of the Itinerary component, shows two locations, date and time, has warning property which changes the icon to `<AlertCircle color="warning" />` to attract user attention about some important information about journey.
ItinerarySegmentStop is an atomic unit of the Itinerary component, shows two locations, date and time, have the warning property which changes the icon to `<AlertCircle color="warning" />` to attract user attention to some important information about a journey.

## Props

| Name | Type | Required | Default | Description |
| ---------------- | ------------------- | ------------------ | ------------- | -------------------------------------------------------- |
| date | `React.Node` | | | The date of `ItinerarySegmentStop` |
| time | `React.Node` | | | The time of `ItinerarySegmentStop` |
| cancelledTime | `React.Node` | | | The cancelled time of `ItinerarySegmentStop` |
| cancelledDate | `React.Node` | | | The cancelled date of `ItinerarySegmentStop` |
| cancelledStation | `React.Node` | | | The cancelled station of `ItinerarySegmentStop` |
| cancelledCity | `React.Node` | | | The cancelled city 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 |
| 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 |
| Name | Type | Required | Default | Description |
| ---------------- | ----------------- | ------------------ | ------------- | -------------------------------------------------------- |
| date | `React.Node` | | | The date of `ItinerarySegmentStop` |
| time | `React.Node` | | | The time of `ItinerarySegmentStop` |
| cancelledTime | `React.Node` | | | The cancelled time of `ItinerarySegmentStop` |
| cancelledDate | `React.Node` | | | The cancelled date of `ItinerarySegmentStop` |
| cancelledStation | `React.Node` | | | The cancelled station of `ItinerarySegmentStop` |
| cancelledCity | `React.Node` | | | The cancelled city 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 |
| canceled | `boolean` | | | Shows segment stop as canceled with striked through Text |
| type | [`Status`](#enum) | | | The color of `ItinerarySegmentStop` icon |
| minWidth | `number` | | `70` | sets min-width for first column with date and time |

## ItineraryStatus

ItineraryStatus is a wrapper for `ItinerarySegment` or group of segments. Shows the [status](#status) of the `Itinerary` or `ItinerarySegment`
ItineraryStatus is a wrapper for `ItinerarySegment` or a group of segments. Shows the [status](#enum) of the `Itinerary` or `ItinerarySegment`

### Props

| Name | Type | Required | Default | Description |
| ---------- | ------------------- | ------------------ | ------- | --------------------------------------------- |
| type | [`Status`](#status) | | | The type of `ItineraryStatus` component |
| label | `React.Node` | | | The label of the `ItineraryStatus` |
| offset | `number` | | `0` | The offset for the label |
| actionable | `boolean` | | true | Applies actionable styles for ItineraryStatus |
| children | `React.ReactNode` | :heavy_check_mark: | | The content of `ItineraryStatus` component |
| Name | Type | Required | Default | Description |
| ---------- | ----------------- | ------------------ | ------- | --------------------------------------------- |
| type | [`Status`](#enum) | | | The type of `ItineraryStatus` component |
| label | `React.Node` | | | The label of the `ItineraryStatus` |
| offset | `number` | | `0` | The offset for the label |
| actionable | `boolean` | | true | Applies actionable styles for ItineraryStatus |
| children | `React.ReactNode` | :heavy_check_mark: | | The content of `ItineraryStatus` component |

## ItinerarySegmentDetail

ItinerarySegmentDetail serves as connection between two ItinerarySegmentStop components (segments)
ItinerarySegmentDetail serves as a connection between two ItinerarySegmentStop components (segments)

### Props

Expand All @@ -118,14 +118,22 @@ ItinerarySegmentDetail serves as connection between two ItinerarySegmentStop com
| children | `React.ReactNode` | :heavy_check_mark: | | The content of ItineraryDetail component, shown when it's expanded |
| onClick | `React.ReactNode` | | | for handling `onClick` callback in`ItinerarySegmentBanner` |

### Props
## ItinerarySeparator

### Status
### Props

| Status |
| ------------ |
| `"warning"` |
| `"critical"` |
| `"info"` |
| `"success"` |
| `"neutral"` |
| Name | Type | Required | Default | Description |
| :------- | :---------------- | :----------------- | :------ | :-------------------------------------------- |
| children | `React.ReactNode` | :heavy_check_mark: | | The content of `ItinerarySeparator` component |
| type | [`Status`](#enum) | | | The type of `ItinerarySeparator` component |
| color | `"string"` | | | The color of `ItinerarySeparator` component |

### enum

| Status | Type |
| ------------ | ---------- |
| `"warning"` | `"dashed"` |
| `"critical"` | `"dotted"` |
| `"info"` | `"solid"` |
| `"success"` | `"none"` |
| `"neutral"` | `"double"` |
9 changes: 6 additions & 3 deletions packages/orbit-components/src/Separator/Separator.stories.tsx
View file
@@ -1,5 +1,5 @@
import * as React from "react";
import { select } from "@storybook/addon-knobs";
import { select, text } from "@storybook/addon-knobs";

import SPACINGS_AFTER from "../common/getSpacingToken/consts";
import RenderInRtl from "../utils/rtl/RenderInRtl";
Expand All @@ -23,9 +23,12 @@ export const Playground = () => {
const spaceAfter = select("spaceAfter", Object.values(SPACINGS_AFTER), SPACINGS_AFTER.LARGEST);
const align = select("align", ["left", "right", "center"], "left");
const indentOptions: Indent[] = ["none", "small", "medium", "large", "XLarge", "XXLarge"];
const type = select("type", ["solid", "dashed", "dotted", "double"], "solid");
const type = select("type", ["solid", "dashed", "dotted", "double", "none"], "none");
const color = text("color", "");
const indent = select("indent", indentOptions, "none");
return <Separator align={align} indent={indent} spaceAfter={spaceAfter} type={type} />;
return (
<Separator color={color} align={align} indent={indent} spaceAfter={spaceAfter} type={type} />
);
};

Playground.story = {
Expand Down

0 comments on commit d73b182

Please sign in to comment.