Skip to content

Commit 8958e9a

Browse files
ProskyneteProskynete
authored
Merge pull request #21 from Proskynete/dev
Dev
2 parents 7a7e6ca + 141fffa commit 8958e9a

37 files changed

+1310
-1071
lines changed

‎.eslintrc.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"import/prefer-default-export": "off",
2929
"no-shadow": [1],
3030
"camelcase": [1],
31+
"commentPattern": [0],
3132
"no-underscore-dangle": [0, "always"],
3233
"react/jsx-props-no-spreading": [0, {}],
3334
"jsx-a11y/label-has-associated-control": [0, {
@@ -105,5 +106,8 @@
105106
"parser": "babel-eslint",
106107
"settings": {
107108
"import/resolver": "meteor"
109+
},
110+
"env": {
111+
"jest": true
108112
}
109113
}

‎README.md‎

Lines changed: 141 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# vertical-timeline-component-react
22

33
A simple component to generate a responsive vertical timeline
4-
![Vertical Timeline Component React](https://i.imgur.com/JXdOHYV.png 'How to see vertical-timeline-component-react')
4+
![Vertical Timeline Component React](https://i.imgur.com/KBqLIlK.png 'How to see vertical-timeline-component-react')
55

66
## Status
77

@@ -15,52 +15,90 @@ To install as npm dependency
1515
npm install --save vertical-timeline-component-react
1616
```
1717

18-
Or if you preferred, you can use `yarn`
19-
20-
```sh
21-
yarn add vertical-timeline-component-react
22-
```
23-
2418
## API Documentation
2519

2620
### Timeline
2721

2822
This is the wrapper component that creates the vertical timeline.
2923

30-
### Content
24+
- Childrens
25+
26+
| Number of children | Required | Value Allowed |
27+
| ------------------ | ---------------------------------------------------- | --------------------------- |
28+
| Many | At least the first `Container` component is required | Only `Container` components |
29+
30+
- Props
31+
32+
| name | Type | Required | Values Allowed | default values | Description |
33+
| ---------- | ------ | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
34+
| theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components |
35+
| lang | node | false | `en` or `es` | `en` | Change the language `from` and `to` texts and change the format in the dates |
36+
| dateFormat | string | false | `L`, `l` or `ll` | `L` | Change the presentation format of dates |
37+
38+
`dateFormat`: Receive only one of three options. (The options are same the [moment.js](https://momentjs.com/) using).
39+
40+
- The option `L` will return a date like `MM/DD/YYYY` (in english) or `DD/MM/YYYY` (in spanish).
41+
- The option `l` will return a date like `M/D/YYYY` (in english) or `D/M/YYYY` (in spanish).
42+
- The option `ll` will return a date like `MMM DD, YYYY` (in english) or `DD de MMM, YYYY` (in spanish).
43+
44+
### Container
45+
46+
Each event in the timeline will be represented by the `Content` component. This component receive only two children's, the first is `YearContent` and the second is `BodyContent`. There can be multiple repeating instances of this component inside `Timeline` wrapper.
3147

32-
Each event in the timeline will be represented by the `Content` component. There can be multiple repeating instances of this component inside `Timeline` wrapper.
48+
- Childrens
3349

34-
### ContentYear
50+
| Number of children | Required | Value Allowed |
51+
| ------------------ | -------- | ------------------------------- |
52+
| 2 | true | `YearContent` and `BodyContent` |
3553

36-
For each `Content` you need `ContentYear` since with this component you mark the events in the given year.
54+
### YearContent
3755

38-
| Name | Type | Required | Values Allowed | Description |
39-
| ----------- | ---------------- | -------- | ------------------------ | ------------------------------------------------- |
40-
| startMonth | string or number | false | from 0 to 12 | The month of the start of the content or contents |
41-
| monthType | string | false | text or number (default) | Type of how to show the month |
42-
| startDay | string | false | from 1 to 31 | The day of the start of the content or contents |
43-
| startYear | string | true | any year | The year of the start of the content or contents |
44-
| currentYear | boolean | false | false (default) | When the content is still being made |
56+
For each `Container` you need `YearContent` (like firts children) since with this component you mark the events in the given year.
4557

46-
### ContentBody
58+
- Props
4759

48-
For each `Content` you need `ContentBody`, because with this component you describe the events that occurred in that year using `Description` component.
60+
| Name | Type | Required | Values Allowed | default values | Description |
61+
| ----------- | ------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
62+
| startDate | string | true | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
63+
| endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
64+
| currentYear | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |
4965

50-
| Name | Type | Required | Description |
51-
| --------- | --------- | --------- | ------------------------------------------------- |
52-
| Title | String | True | Show the title for the events |
53-
| Children | Node | True | It is necessary to use the description component. |
54-
| TextColor | String | False | Change the color of the text in the ContentBody. |
66+
### BodyContent
67+
68+
For each `Container` you need `ContentBody` (like second children). This component will be the container of the one or more `Sections`.
69+
70+
- Childrens
71+
72+
| Number of children | Required | Value Allowed |
73+
| ------------------ | -------------------------------------------------- | ------------------------- |
74+
| Many | At least the first `Section` component is required | Only `Section` components |
75+
76+
### Section
77+
78+
This component is the container for one or more `Description`.
79+
80+
- Childrens
81+
82+
| Number of children | Required | Value Allowed |
83+
| ------------------ | ------------------------------------------------------ | ----------------------------- |
84+
| Many | At least the first `Description` component is required | Only `Description` components |
85+
86+
- Props
87+
88+
| Name | Type | Required | Description |
89+
| ----- | ------ | -------- | ----------------------------- |
90+
| title | string | true | It's the title of any section |
5591

5692
### Description
5793

58-
With this component you describe the events one for one.
94+
This component can be the text of the description or a subtitle
5995

60-
| Name | Type | Required | Description |
61-
| -------- | ------ | -------- | ------------------------------------------ |
62-
| Text | String | True | Describe the event |
63-
| Optional | String | False | You can this props for use a optional text |
96+
- Props
97+
98+
| Name | Type | Required | Values Allowed | default values | Description |
99+
| ------- | ------ | -------- | --------------------------- | -------------- | ------------------------------------- |
100+
| variant | string | false | `subtitle` or `description` | `description` | Transform the format of the text |
101+
| text | string | true | Any text | does not apply | Show the description of the `Section` |
64102

65103
## How to use it
66104

@@ -70,80 +108,92 @@ The following snippet will show you how to use the library:
70108

71109
```js
72110
import {
73-
Timeline,
74-
Content,
75-
ContentYear,
76-
ContentBody,
77-
Description
111+
Timeline,
112+
Container,
113+
YearContent,
114+
BodyContent,
115+
Section,
116+
Description,
78117
} from 'vertical-timeline-component-react';
79118

119+
const customTheme = {
120+
yearColor: '#405b73',
121+
lineColor: '#d0cdc4',
122+
dotColor: '#262626',
123+
borderDotColor: '#d0cdc4',
124+
titleColor: '#405b73',
125+
subtitleColor: '#bf9765',
126+
textColor: '#262626',
127+
};
128+
80129
class Main extends Component {
81-
render() {
82-
return (
83-
<Timeline>
84-
<Content>
85-
<ContentYear
86-
startMonth="12"
87-
monthType="text"
88-
startDay="24"
89-
startYear="2016"
90-
currentYear
91-
/>
92-
<ContentBody title="Amazing Title">
93-
<Description
94-
text="I'm an amazing event"
95-
optional="I'm an amazing optional text"
96-
/>
97-
<Description
98-
text="I'm an amazing event"
99-
optional="I'm another amazing optional text"
100-
/>
101-
<Description text="I'm an amazing event" />
102-
</ContentBody>
103-
</Content>
104-
<Content>...</Content>
105-
</Timeline>
106-
);
107-
}
130+
render() {
131+
retrurn(
132+
<Timeline theme={customTheme} dateFormat='ll'>
133+
<Container>
134+
<YearContent startDate='2020/07/01' currentYear />
135+
<BodyContent>
136+
<Section title='Title'>
137+
<Description variant='subtitle' text='Subtitle' />
138+
<Description text='Description' />
139+
<Description text='Another description' />
140+
</Section>
141+
142+
<Section title='Another title'>
143+
<Description text='Description' />
144+
<Description text='Another description' />
145+
</Section>
146+
</BodyContent>
147+
</Container>
148+
</Timeline>,
149+
);
150+
}
108151
}
109152
```
110153

111154
**_Using function components:_**
112155

113156
```js
114157
import {
115-
Timeline,
116-
Content,
117-
ContentYear,
118-
ContentBody,
119-
Description
158+
Timeline,
159+
Container,
160+
YearContent,
161+
BodyContent,
162+
Section,
163+
Description,
120164
} from 'vertical-timeline-component-react';
121165

122-
const Main = () => (
123-
<Timeline>
124-
<Content>
125-
<ContentYear
126-
startMonth="12"
127-
monthType="text"
128-
startDay="24"
129-
startYear="2016"
130-
currentYear
131-
/>
132-
<ContentBody title="Amazing Title">
133-
<Description
134-
text="I'm an amazing event"
135-
optional="I'm an amazing optional text"
136-
/>
137-
<Description
138-
text="I'm an amazing event"
139-
optional="I'm another amazing optional text"
140-
/>
141-
<Description text="I'm an amazing event" />
142-
</ContentBody>
143-
</Content>
144-
<Content>...</Content>
166+
const Main = () => {
167+
const customTheme = {
168+
yearColor: '#405b73',
169+
lineColor: '#d0cdc4',
170+
dotColor: '#262626',
171+
borderDotColor: '#d0cdc4',
172+
titleColor: '#405b73',
173+
subtitleColor: '#bf9765',
174+
textColor: '#262626',
175+
};
176+
177+
return (
178+
<Timeline theme={customTheme} dateFormat='ll'>
179+
<Container>
180+
<YearContent startDate='2020/07/01' currentYear />
181+
<BodyContent>
182+
<Section title='Title'>
183+
<Description variant='subtitle' text='Subtitle' />
184+
<Description text='Description' />
185+
<Description text='Another description' />
186+
</Section>
187+
188+
<Section title='Another title'>
189+
<Description text='Description' />
190+
<Description text='Another description' />
191+
</Section>
192+
</BodyContent>
193+
</Container>
145194
</Timeline>
146-
);
195+
);
196+
};
147197
```
148198

149199
## License

‎__tests__/content-body.spec.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎__tests__/content-year.spec.js‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

0 commit comments

Comments
 (0)