Merge pull request #28 from steven-mercatante/refactor-theming

Refactor theming

Author: steven-mercatante

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@merc/react-timeline",
-  "version": "0.1.36",
+  "version": "0.1.40",
   "description": "An opinionated (but highly customizable) timeline component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -1,9 +1,19 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Button = styled.button(props => {
-  return props.theme.button;
-});
+const Button = styled.button`
+  && {
+    font-size: ${props => props.theme.button.fontSize};
+    background-color: ${props => props.theme.button.backgroundColor};
+    border-radius: ${props => props.theme.button.borderRadius};
+    padding: ${props => props.theme.button.padding};
+    color: ${props => props.theme.button.color};
+    margin: ${props => props.theme.button.margin};
+    border: ${props => props.theme.button.border};
+    text-decoration: ${props => props.theme.button.textDecoration};
+    cursor: ${props => props.theme.button.cursor};
+  }
+`;
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,

src/components/Button.js

@@ -3,16 +3,14 @@ import LAYOUTS from '../constants/layouts';
 
 const Events = styled.div.attrs(_ => ({
   className: 'events',
-}))(props => {
-  const defaults = {
-    [`&.${LAYOUTS.INLINE_EVENTS_INLINE_DATE}`]: {
-      paddingLeft: '0px',
-    },
-  };
+}))`
+  && {
+    padding: ${props => props.theme.events.padding};
 
-  const style = { ...defaults, ...props.theme.events };
-
-  return style;
-});
+    &.${LAYOUTS.INLINE_EVENTS_INLINE_DATE} {
+      padding-left: 0px;
+    }
+  }
+`;
 
 export default Events;

src/components/Events.js

@@ -49,11 +49,13 @@ export const customThemeExample = () => {
           </div>
         </TextEvent>
         <ImageEvent
+          date="10/04/19"
           src="https://images.unsplash.com/photo-1559291001-693fb9166cba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
           alt="jellyfish"
           credit="Photo by [Vino Li](https://unsplash.com/@vinomamba24)"
         />
         <ImageEvent
+          date="10/05/19"
           src="https://images.unsplash.com/photo-1555901879-245ec81f706c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
           alt="blue octopus"
           credit="Photo by [Adam Muise](https://unsplash.com/@muiseadam)"

src/components/Theming.stories.js

@@ -18,6 +18,13 @@ Check out the example below in which we customize some of the elements.
 import React from 'react';
 import { Timeline, Events, TextEvent, themes, createTheme } from '@merc/react-timeline';
 
+/**
+  * `createTheme` is a helper function that takes two arguments:
+  * - a base theme to extend from
+  * - the new theme properties
+  * It uses deep copying behind the scenes to create a new theme object with
+  * all of the required properties.
+  */
 const customTheme = createTheme(themes.default, {
   card: {
     backgroundColor: '#efefef',

src/components/Theming.stories.mdx

@@ -12,36 +12,49 @@ const OverflowWrapper = styled.div`
   overflow: auto;
 `;
 
-const Container = styled.div(props => {
-  const defaults = {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
 
-    '*, *:before, *:after': {
-      boxSizing: 'border-box',
-    },
-
-    // renders the vertical line
-    '::after': { ...props.theme.timelineTrack },
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
 
-    [`&.${LAYOUTS.INLINE_EVENTS}`]: {
-      '::after': { left: '130px' },
-    },
+  font-size: ${props => props.theme.timeline.fontSize};
+  font-family: ${props => props.theme.timeline.fontFamily};
+  background-color: ${props => props.theme.timeline.backgroundColor};
 
-    [`&.${LAYOUTS.INLINE_EVENTS_INLINE_DATE}`]: {
-      '::after': { left: '29px' },
-    },
+  ::after {
+    position: absolute;
+    left: ${props => props.theme.timelineTrack.left};
+    width: ${props => props.theme.timelineTrack.width};
+    height: ${props => props.theme.timelineTrack.height};
+    background-color: ${props => props.theme.timelineTrack.backgroundColor};
+    content: ${props => props.theme.timelineTrack.content};
+  }
 
-    '@media (max-width: 768px)': {
-      '::after': { left: '29px !important' },
-    },
-  };
+  &.${LAYOUTS.INLINE_EVENTS} {
+    ::after {
+      left: 130px;
+    }
+  }
 
-  const style = { ...defaults, ...props.theme.timeline };
+  &.${LAYOUTS.INLINE_EVENTS_INLINE_DATE} {
+    ::after {
+      left: 29px;
+    }
+  }
 
-  return style;
-});
+  @media (max-width: 768px) {
+    ::after {
+      left: 29px !important;
+    }
+  }
+`;
 
 const _opts = {
   layout: LAYOUTS.ALTERNATE_EVENTS, // see LAYOUTS constant

src/components/Timeline.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const UrlButtonContainer = styled.a(props => props.theme.urlButton);
 
 export default function UrlButton({ href, target, children }) {
   const extraProps = {};
@@ -11,9 +8,9 @@ export default function UrlButton({ href, target, children }) {
   }
 
   return (
-    <UrlButtonContainer href={href} className="url-button" {...extraProps}>
+    <a href={href} className="url-button" {...extraProps}>
       {children}
-    </UrlButtonContainer>
+    </a>
   );
 }
 

src/components/UrlButton.js

@@ -2,9 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Image = styled.img(props => {
-  return props.theme.imageAtom;
-});
+const Image = styled.img`
+  && {
+    overflow: hidden;
+    object-fit: ${props => props.theme.imageAtom.objectFit};
+    width: ${props => props.theme.imageAtom.width};
+    max-height: ${props => props.theme.imageAtom.maxHeight};
+  }
+`;
 
 export default function ImageAtom({ src, alt }) {
   return <Image src={src} alt={alt} />;

src/components/atoms/ImageAtom.js

@@ -2,11 +2,17 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import ImageAtom from './ImageAtom';
+import { ThemeProvider } from 'styled-components';
+import themes from '../../themes';
 
 afterEach(cleanup);
 
 test('ImageAtom renders an img tag', () => {
-  const { container } = render(<ImageAtom src="test.png" alt="test image" />);
+  const { container } = render(
+    <ThemeProvider theme={themes.default}>
+      <ImageAtom src="test.png" alt="test image" />
+    </ThemeProvider>
+  );
 
   expect(container.firstChild).toHaveAttribute('src', 'test.png');
   expect(container.firstChild).toHaveAttribute('alt', 'test image');