Skip to content

Commit e7f8785

Browse files
steven-mercatantesteven-mercatante
committed
clean up
1 parent 2c5372c commit e7f8785

File tree

10 files changed

+48
-31
lines changed

10 files changed

+48
-31
lines changed

‎src/DemoTimeline.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
ImageEvent,
1111
YouTubeEvent,
1212
UrlButton,
13-
Button,
1413
themes,
1514
} from './index';
1615

@@ -150,7 +149,6 @@ export default function DemoTimeline({
150149
<UrlButton href="https://unsplash.com/search/photos/undersea">
151150
View more undersea photos
152151
</UrlButton>
153-
<Button>Regular Button</Button>
154152
</div>
155153
</ImageEvent>
156154

‎src/components/Button.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import PropTypes from 'prop-types';
22
import styled from 'styled-components';
33

44
const Button = styled.button`
5-
font-size: ${props => props.theme.button.fontSize};
6-
background-color: ${props => props.theme.button.backgroundColor};
7-
border-radius: ${props => props.theme.button.borderRadius};
8-
padding: ${props => props.theme.button.padding};
9-
color: ${props => props.theme.button.color};
10-
margin: ${props => props.theme.button.margin};
11-
border: ${props => props.theme.button.border};
12-
text-decoration: ${props => props.theme.button.textDecoration};
13-
cursor: ${props => props.theme.button.cursor};
5+
&& {
6+
font-size: ${props => props.theme.button.fontSize};
7+
background-color: ${props => props.theme.button.backgroundColor};
8+
border-radius: ${props => props.theme.button.borderRadius};
9+
padding: ${props => props.theme.button.padding};
10+
color: ${props => props.theme.button.color};
11+
margin: ${props => props.theme.button.margin};
12+
border: ${props => props.theme.button.border};
13+
text-decoration: ${props => props.theme.button.textDecoration};
14+
cursor: ${props => props.theme.button.cursor};
15+
}
1416
`;
1517

1618
Button.propTypes = {

‎src/components/Events.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import LAYOUTS from '../constants/layouts';
44
const Events = styled.div.attrs(_ => ({
55
className: 'events',
66
}))`
7-
padding: ${props => props.theme.events.padding};
7+
&& {
8+
padding: ${props => props.theme.events.padding};
89
9-
&.${LAYOUTS.INLINE_EVENTS_INLINE_DATE} {
10-
padding-left: 0px;
10+
&.${LAYOUTS.INLINE_EVENTS_INLINE_DATE} {
11+
padding-left: 0px;
12+
}
1113
}
1214
`;
1315

‎src/components/Theming.stories.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,13 @@ export const customThemeExample = () => {
4949
</div>
5050
</TextEvent>
5151
<ImageEvent
52+
date="10/04/19"
5253
src="https://images.unsplash.com/photo-1559291001-693fb9166cba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
5354
alt="jellyfish"
5455
credit="Photo by [Vino Li](https://unsplash.com/@vinomamba24)"
5556
/>
5657
<ImageEvent
58+
date="10/05/19"
5759
src="https://images.unsplash.com/photo-1555901879-245ec81f706c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
5860
alt="blue octopus"
5961
credit="Photo by [Adam Muise](https://unsplash.com/@muiseadam)"

‎src/components/Timeline.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const Container = styled.div`
2626
2727
font-size: ${props => props.theme.timeline.fontSize};
2828
font-family: ${props => props.theme.timeline.fontFamily};
29+
background-color: ${props => props.theme.timeline.backgroundColor};
2930
3031
::after {
3132
position: absolute;

‎src/components/atoms/ImageAtom.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const Image = styled.img`
6-
overflow: hidden;
7-
object-fit: ${props => props.theme.imageAtom.objectFit};
8-
width: ${props => props.theme.imageAtom.width};
9-
max-height: ${props => props.theme.imageAtom.maxHeight};
6+
&& {
7+
overflow: hidden;
8+
object-fit: ${props => props.theme.imageAtom.objectFit};
9+
width: ${props => props.theme.imageAtom.width};
10+
max-height: ${props => props.theme.imageAtom.maxHeight};
11+
}
1012
`;
1113

1214
export default function ImageAtom({ src, alt }) {

‎src/components/events/ImageEvent.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@ import MarkdownAtom from '../atoms/MarkdownAtom';
77
import { joinClassNames } from '../../utils/classNames';
88

99
const ImageTextContainer = styled.div`
10-
margin-bottom: ${props => props.theme.imageText.marginBottom};
11-
font-size: ${props => props.theme.imageText.fontSize};
10+
&& {
11+
margin-bottom: ${props => props.theme.imageText.marginBottom};
12+
font-size: ${props => props.theme.imageText.fontSize};
13+
}
1214
`;
1315

1416
const ImageCreditContainer = styled.div`
15-
margin-top: ${props => props.theme.imageCredit.marginTop};
16-
font-size: ${props => props.theme.imageCredit.fontSize};
17+
&& {
18+
margin-top: ${props => props.theme.imageCredit.marginTop};
19+
font-size: ${props => props.theme.imageCredit.fontSize};
20+
}
1721
`;
1822

1923
function ImageCredit({ text }) {

‎src/components/events/Marker.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const Container = styled.span`
6-
position: relative;
7-
zindex: 100;
8-
background-color: ${props => props.theme.marker.backgroundColor};
9-
border: ${props => props.theme.marker.border};
10-
border-radius: ${props => props.theme.marker.borderRadius};
11-
width: ${props => props.theme.marker.width};
12-
height: ${props => props.theme.marker.height};
6+
&& {
7+
position: relative;
8+
z-index: 100;
9+
background-color: ${props => props.theme.marker.backgroundColor};
10+
border: ${props => props.theme.marker.border};
11+
border-radius: ${props => props.theme.marker.borderRadius};
12+
border-color: ${props => props.theme.marker.borderColor};
13+
width: ${props => props.theme.marker.width};
14+
height: ${props => props.theme.marker.height};
15+
}
1316
`;
1417

1518
export default function Marker() {

‎src/components/events/YouTubeEvent.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import YouTubeAtom from '../atoms/YouTubeAtom';
77
import { joinClassNames } from '../../utils/classNames';
88

99
const YouTubeTextContainer = styled.div`
10-
margin-bottom: ${props => props.theme.youTubeText.marginBottom};
11-
font-size: ${props => props.theme.youTubeText.fontSize};
10+
&& {
11+
margin-bottom: ${props => props.theme.youTubeText.marginBottom};
12+
font-size: ${props => props.theme.youTubeText.fontSize};
13+
}
1214
`;
1315

1416
function YouTubeText({ text }) {

‎src/themes/default.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const defaultTheme = {
22
timeline: {
3+
backgroundColor: 'inherit',
34
fontSize: '1rem',
45
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
56
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,

0 commit comments

Comments
 (0)