Skip to content

Commit 3f805b2

Browse files
stampaaaronstampaaaron
committed
feat: make easier to style component externally
1 parent 9b3d1d6 commit 3f805b2

File tree

5 files changed

+68
-24
lines changed

5 files changed

+68
-24
lines changed

‎src/components/Timeline.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.timeline {
1+
:where(.timeline) {
22
--timeline-line-width: 0.2rem;
33
--timeline-line-color: black;
44
--marker-line-width: var(--timeline-line-width);
@@ -13,7 +13,7 @@
1313
}
1414

1515
.timeline__line {
16-
background-color: black;
16+
background-color: var(--timeline-line-color);
1717
width: var(--timeline-line-width);
1818
height: 100%;
1919
margin-inline: auto;

‎src/components/Timeline.stories.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.styled-timeline * {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
.styled-timeline {
7+
--timeline-line-width: 2px;
8+
--timeline-line-color: gray;
9+
--marker-inner-color: hotpink;
10+
--marker-color: gray;
11+
--marker-size: 1.5rem;
12+
13+
font-family: sans-serif;
14+
line-height: 1.4;
15+
}
16+
17+
.styled-timeline .timeline-card {
18+
border: none;
19+
padding: 2rem;
20+
border-radius: 0.2rem;
21+
box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.2);
22+
}
23+
24+
.styled-timeline .timeline-card__title {
25+
font-size: 1.5rem;
26+
margin-bottom: 1rem;
27+
font-weight: bold;
28+
}
29+
30+
.styled-timeline img {
31+
margin-top: 1rem;
32+
}

‎src/components/Timeline.stories.mdx

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
1+
import './Timeline.stories.css';
12
import { Meta, Description } from '@storybook/addon-docs';
23
import { Timeline } from './Timeline';
34

45
<Meta title="Timeline" component={Timeline} />
56

6-
<Story name="Basic">
7-
8-
<Timeline
9-
items={[
7+
export const items = [
108
{
119
key: 1,
12-
title: '1',
10+
title: '1 First date',
1311
date: new Date(),
1412
children:
1513
'alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj ',
1614
},
17-
{ key: 2, title: '2', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
18-
{ key: 3, title: '3', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
19-
{ key: 4, title: '4', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
20-
{ key: 5, title: '5', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
21-
{ key: 6, title: '6', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
15+
{ key: 2, title: '2 Another date', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
16+
{ key: 3, title: '3 A cool event', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
17+
{ key: 4, title: '4 Something else happend', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
18+
{ key: 5, title: '5 Another event', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
19+
{ key: 6, title: '6 This happend aswell', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
2220
{
2321
key: 7,
24-
title: '7',
22+
title: '7 Interessting date here',
2523
date: new Date(),
2624
children:
2725
'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfk f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fl f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fl f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fls flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f',
2826
},
29-
{ key: 8,title: '8', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
30-
{key: 9, title: '9', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
27+
{ key: 8,title: '8 Cool stuff going on', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
28+
{key: 9, title: '9 No more ideas', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
3129
{
3230
key: 10,
33-
title: '10',
31+
title: '10 Date with image',
3432
date: new Date(),
3533
children: (
3634
<>
@@ -40,12 +38,25 @@ import { Timeline } from './Timeline';
4038

4139
),
4240
},
43-
{ key: 11,title: '11', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
44-
{ key: 12,title: '12', date: new Date() },
45-
{key: 13, title: '13', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
46-
{ key: 14,title: '14', date: new Date() },
41+
{ key: 11,title: '11 Another date', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
42+
{ key: 12,title: '12 So much fun', date: new Date() },
43+
{key: 13, title: '13 Special date', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
44+
{ key: 14,title: '14 Christmas', date: new Date() },
45+
46+
]
4747

48-
]}
48+
<Canvas>
49+
<Story name="Basic">
50+
<Timeline
51+
items={items}
4952
/>
5053

5154
</Story>
55+
56+
<Story name="Styled">
57+
<Timeline
58+
className="styled-timeline"
59+
items={items}
60+
/>
61+
</Story>
62+
</Canvas>

‎src/components/Timeline.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export type TimelineProps = {
2121
items: PropsWithKey<TimelineItemProps>[];
2222
gap?: number;
2323
offset?: OffsetConfig;
24+
className?: string;
2425
};
2526

2627
const defaultTimelineConfig: Partial<TimelineProps> = {
@@ -29,7 +30,7 @@ const defaultTimelineConfig: Partial<TimelineProps> = {
2930
};
3031

3132
export function Timeline(props: TimelineProps) {
32-
const { items, gap, offset } = { ...defaultTimelineConfig, ...props };
33+
const { items, gap, offset, className } = { ...defaultTimelineConfig, ...props };
3334

3435
const timelineRef = useRef<HTMLDivElement>(null);
3536
const itemsRef = useRef<Map<Date, HTMLElement>>();
@@ -74,7 +75,7 @@ export function Timeline(props: TimelineProps) {
7475
}, [itemsRef]);
7576

7677
return (
77-
<div className="timeline" ref={timelineRef}>
78+
<div className={['timeline', className].join(' ')} ref={timelineRef}>
7879
<div className="timeline__line" />
7980
{items.map((item) => (
8081
<TimelineItem

‎src/components/TimelineItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ cla
1616
<div className="timeline-item__marker" />
1717
<div className="timeline-card">
1818
<p className="timeline-card__date">{date.toISOString()}</p>
19-
<p>{title}</p>
19+
<p className="timeline-card__title">{title}</p>
2020
{children}
2121
</div>
2222
</div>

0 commit comments

Comments
 (0)