Skip to content

Commit

Permalink
version: 4.3.2 (#63)
Browse files Browse the repository at this point in the history
* fix: when the container component has only one content component

* fix: modify unit tests

* chore: change version

* chore: some changes to PR request file

* fix: publish github action

* Create new release (#61)

* breacking change(rename): components

* chore: update tests

* change: today text to active

* add(events): optional subtitle prop

* fix(test): optional subtitle prop

* add(event): description symbol

* improve(a11y): change div and p elements to ul and li

* chore(tests): improve test and coverage

* add(events-event): allow render closed some event componentes inside events componente

* chore: order alphabetically asc all imports and attributes

* chore(package): change version

* fix(tests): improve coverage

* add(template): config template

* add(template): features requests

* add(pull-request-template): add issue section

* chore(documentation): change content

* fix(test): update snapshots

* chore(template): some changes in pull_request_template file

* chore: change version

* fix(github-actions): update snapshot
  • Loading branch information
Proskynete committed Dec 27, 2022
1 parent 8260cc9 commit 7f6f4fe
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 65 deletions.
120 changes: 60 additions & 60 deletions README.md
Expand Up @@ -6,7 +6,7 @@
<p>A simple component to generate a responsive vertical timeline</p>
</div>

![Vertical Timeline Component React](<https://dsc.cloud/83db8c/image.png> 'How to see vertical-timeline-component-react')
![Vertical Timeline Component React](https://dsc.cloud/83db8c/image.png 'How to see vertical-timeline-component-react')

## Status

Expand Down Expand Up @@ -124,38 +124,38 @@ The following snippet will show you how to use the library:
import { Timeline, Events, Content } from 'vertical-timeline-component-react';

const customTheme = {
borderDotColor: '#ffffff',
descriptionColor: '#262626',
dotColor: '#d0cdc4',
eventColor: '#965500',
lineColor: '#d0cdc4',
subtitleColor: '#7c7c7c',
titleColor: '#405b73',
yearColor: '#405b73',
borderDotColor: '#ffffff',
descriptionColor: '#262626',
dotColor: '#d0cdc4',
eventColor: '#965500',
lineColor: '#d0cdc4',
subtitleColor: '#7c7c7c',
titleColor: '#405b73',
yearColor: '#405b73',
};

class Main extends Component {
render() {
return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Events
title="What is lorem Ipsum?"
subtitle="It's a fake text"
startDate="2020/12/02"
defaultClosed
active
>
<Event
title="Lorem Ipsum"
description={[
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
'Is simply dummy text of the printing and typesetting industry.',
]}
/>
</Events>
</Timeline>
);
}
render() {
return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Events
title="What is lorem Ipsum?"
subtitle="It's a fake text"
startDate="2020/12/02"
defaultClosed
active
>
<Event
title="Lorem Ipsum"
description={[
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
'Is simply dummy text of the printing and typesetting industry.',
]}
/>
</Events>
</Timeline>
);
}
}
```

Expand All @@ -165,36 +165,36 @@ class Main extends Component {
import { Timeline, Events } from 'vertical-timeline-component-react';

const Main = () => {
const customTheme = {
borderDotColor: '#ffffff',
descriptionColor: '#262626',
dotColor: '#d0cdc4',
eventColor: '#965500',
lineColor: '#d0cdc4',
subtitleColor: '#7c7c7c',
titleColor: '#405b73',
yearColor: '#405b73',
};

return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Events
title="What is lorem Ipsum?"
subtitle="It's a fake text"
startDate="2020/12/02"
active
defaultClosed
>
<Event
title="Lorem Ipsum"
description={[
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
'Is simply dummy text of the printing and typesetting industry.',
]}
/>
</Events>
</Timeline>
);
const customTheme = {
borderDotColor: '#ffffff',
descriptionColor: '#262626',
dotColor: '#d0cdc4',
eventColor: '#965500',
lineColor: '#d0cdc4',
subtitleColor: '#7c7c7c',
titleColor: '#405b73',
yearColor: '#405b73',
};

return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Events
title="What is lorem Ipsum?"
subtitle="It's a fake text"
startDate="2020/12/02"
active
defaultClosed
>
<Event
title="Lorem Ipsum"
description={[
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
'Is simply dummy text of the printing and typesetting industry.',
]}
/>
</Events>
</Timeline>
);
};
```

Expand Down
2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "vertical-timeline-component-react",
"version": "4.3.1",
"version": "4.3.2",
"description": "A simple component for create a vertical timeline with React",
"main": "./lib/cjs/index.js",
"module": "./lib/esm/index.js",
Expand Down
8 changes: 4 additions & 4 deletions tests/components/timeline/__snapshots__/index.test.tsx.snap
Expand Up @@ -15,14 +15,14 @@ Object {
class="sc-dkzDqf bqgjsq"
>
<div
aria-label="From Tuesday, January 01, 2019 To Monday, December 26, 2022"
aria-label="From Tuesday, January 01, 2019 To Tuesday, December 27, 2022"
class="sc-hKMtZM VwYTb"
format="only-number"
lang="en"
>
<time
aria-hidden="true"
datetime="12/26/2022"
datetime="12/27/2022"
>
2022
</time>
Expand Down Expand Up @@ -87,14 +87,14 @@ Object {
class="sc-dkzDqf bqgjsq"
>
<div
aria-label="From Tuesday, January 01, 2019 To Monday, December 26, 2022"
aria-label="From Tuesday, January 01, 2019 To Tuesday, December 27, 2022"
class="sc-hKMtZM VwYTb"
format="only-number"
lang="en"
>
<time
aria-hidden="true"
datetime="12/26/2022"
datetime="12/27/2022"
>
2022
</time>
Expand Down

0 comments on commit 7f6f4fe

Please sign in to comment.