Skip to content

Commit 4d961a8

Browse files
author
Jakub Holak
committed
Merge branch 'master' of https://github.com/nordcloud/GNUI 
2 parents 54ad205 + b5cc3b6 commit 4d961a8

File tree

13 files changed

+311
-6
lines changed

13 files changed

+311
-6
lines changed

‎package-lock.json‎

Lines changed: 54 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,20 @@
1818
"@types/jest": "^24.0.0",
1919
"@types/node": "^12.0.0",
2020
"@types/react": "^16.9.0",
21+
"@types/react-date-range": "^0.94.4",
2122
"@types/react-dom": "^16.9.0",
2223
"@types/react-modal": "^3.10.5",
2324
"@types/react-select": "^3.0.13",
2425
"@types/storybook__addon-info": "^5.2.1",
2526
"@types/styled-components": "^5.1.0",
2627
"@types/styled-system": "^5.1.7",
28+
"date-fns": "^2.14.0",
2729
"chroma-js": "^2.1.0",
2830
"mini-svg-data-uri": "^1.1.3",
2931
"polished": "^3.4.4",
30-
"react": "^16.12.0",
32+
"react": "^16.13.1",
3133
"react-awesome-styled-grid": "^3.0.5",
34+
"react-date-range": "^1.0.3",
3235
"react-dom": "^16.12.0",
3336
"react-modal": "^3.11.2",
3437
"react-select": "^3.1.0",

‎src/components/datepicker/Datepicker.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { FunctionComponent } from "react";
2+
import styled from "styled-components";
3+
import 'react-date-range/dist/styles.css'; // main style file
4+
import 'react-date-range/dist/theme/default.css'; // theme css file
5+
import theme from "../../theme";
6+
7+
8+
type DatepickerProps = {
9+
children?:any;
10+
};
11+
12+
const DatepickerWrapper = styled.div`
13+
.rdrCalendarWrapper,
14+
.rdrDateRangePickerWrapper {
15+
color: ${theme.colors.primary};
16+
font-family: ${theme.fonts.body};
17+
font-weight: ${theme.fontWeights.regular};
18+
font-size: ${theme.fontSizes.small};
19+
box-shadow:${theme.shadow.shadow04};
20+
border-radius:${theme.radiusDefault};
21+
}
22+
.rdrDateRangePickerWrapper {
23+
.rdrCalendarWrapper {
24+
box-shadow:none;
25+
}
26+
}
27+
`;
28+
29+
export const Datepicker: FunctionComponent<DatepickerProps> = ({
30+
children
31+
}) => (
32+
<DatepickerWrapper>
33+
{children}
34+
</DatepickerWrapper>
35+
)
36+
;

‎src/components/datepicker/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Datepicker";

‎src/components/filter/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from "./Filter";
1+
export * from "./Filter";

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ export * from "./tabs";
2828
export * from "./spinner";
2929
export * from "./multiselect";
3030
export * from "./selectbutton";
31+
export * from "./datepicker";

‎src/components/message/Message.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { FunctionComponent } from "react";
2+
import styled, { css } from "styled-components";
3+
import theme from "../../theme";
4+
import { Icon } from "../icon";
5+
6+
type MessageProps = {
7+
image?: string;
8+
status?: "success" | "notification" | "danger";
9+
children?: React.ReactNode;
10+
};
11+
12+
export const MessageWrapper = styled.div<MessageProps>`
13+
display:flex;
14+
align-items:center;
15+
border-radius: ${theme.radiusDefault};
16+
color: ${theme.colors.white};
17+
font-size: ${theme.fontSizes.regular};
18+
padding: ${theme.spacing.spacing03};
19+
line-height:1.5rem;
20+
21+
${({ status }) =>
22+
status === "success" &&
23+
css`
24+
background: ${theme.colors.success};
25+
`}
26+
${({ status }) =>
27+
status === "danger" &&
28+
css`
29+
background: ${theme.colors.danger};
30+
`}
31+
${({ status }) =>
32+
status === "notification" &&
33+
css`
34+
background: ${theme.colors.notification};
35+
`}
36+
`;
37+
38+
export const IconBox = styled.div<MessageProps>`
39+
display:flex;
40+
align-items:center;
41+
border-radius: ${theme.radiusDefault};
42+
padding: ${theme.spacing.spacing02};
43+
margin-right: ${theme.spacing.spacing03};
44+
45+
${({ status }) =>
46+
status === "success" &&
47+
css`
48+
background: rgba(30, 132, 73, 0.5);
49+
`}
50+
${({ status }) =>
51+
status === "danger" &&
52+
css`
53+
background: rgba(176, 58, 46, 0.5);
54+
`}
55+
${({ status }) =>
56+
status === "notification" &&
57+
css`
58+
background: rgba(40, 116, 166, 0.5);
59+
`}
60+
`;
61+
62+
export const Align = styled.div`
63+
margin-bottom:auto;
64+
`;
65+
66+
export const Message: FunctionComponent<MessageProps> = ({
67+
children,
68+
image,
69+
status
70+
}) =>
71+
<MessageWrapper status={status}>
72+
<Align>
73+
<IconBox status={status}>
74+
<Icon image={image} width="1.5rem" height="1.5rem"/>
75+
</IconBox>
76+
</Align>
77+
{children}
78+
</MessageWrapper>;

‎src/components/message/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Message";

‎src/components/tabs/Tabs.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,25 @@ const TabContainer: any = styled.li<TabProps>`
8686
color: ${theme.colors.darks[2]};
8787
}
8888
p {
89+
max-width:80%;
8990
margin: ${theme.spacing.spacing01} 0 0;
9091
}
92+
&:first-child {
93+
border-top-left-radius: ${theme.radiusDefault};
94+
}
9195
&.tab-active {
9296
background-color: ${theme.colors.snowwhite};
9397
border-bottom: 1px solid transparent;
9498
}
99+
100+
&.tab, &.tab-active {
101+
&:first-child {
102+
& > div {
103+
background-color: ${theme.colors.primary};
104+
color: ${theme.colors.white};
105+
}
106+
}
107+
}
95108
`;
96109

97110
const TabsList = styled.ol`
@@ -116,7 +129,7 @@ const Step = styled(Box)`
116129
color: ${theme.colors.darks[3]};
117130
118131
&.dark {
119-
background: ${theme.colors.primary};
132+
background-color: ${theme.colors.primary};
120133
color: ${theme.colors.white};
121134
}
122135
`;
@@ -135,6 +148,7 @@ const TabsCover = styled.div`
135148
`;
136149

137150
const PreviousButton = styled(Button)`
151+
position:absolute;
138152
border: none;
139153
`;
140154
const NextButton = styled(Button)`

‎src/stories/Datepicker.stories.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
2+
import { addDays } from 'date-fns';
3+
import { useState } from 'react';
4+
import { Datepicker } from "../components/datepicker";
5+
import { Calendar, DateRangePicker } from 'react-date-range';
6+
7+
<Meta title="Components/Datepicker" component={Datepicker} />
8+
9+
# Datepicker
10+
11+
## Props
12+
13+
```typescript
14+
type DatepickerProps = {
15+
children?:any;
16+
};
17+
```
18+
19+
> Primary button is default as well.
20+
21+
<Preview>
22+
<Story name="datepicker">
23+
{() => {
24+
const handleSelect = (date) => {
25+
console.log(date);
26+
}
27+
return (
28+
<>
29+
<Datepicker>
30+
<Calendar
31+
date={new Date()}
32+
onChange={handleSelect}
33+
/>
34+
</Datepicker>
35+
</>
36+
);
37+
}}
38+
39+
</Story>
40+
</Preview>
41+
42+
<Preview>
43+
<Story name="daterangepicker">
44+
{() => {
45+
const handleSelect = (ranges) => {
46+
console.log(ranges);
47+
}
48+
const [state, setState] = useState([
49+
{
50+
startDate: new Date(),
51+
endDate: addDays(new Date(), 7),
52+
key: 'selection'
53+
}
54+
]);
55+
return (
56+
<>
57+
<Datepicker>
58+
<DateRangePicker
59+
onChange={item => setState([item.selection])}
60+
showSelectionPreview={true}
61+
moveRangeOnFirstSelection={false}
62+
months={2}
63+
ranges={state}
64+
direction="horizontal"
65+
/>
66+
</Datepicker>
67+
</>
68+
);
69+
}}
70+
71+
</Story>
72+
</Preview>
73+

0 commit comments

Comments
 (0)