shadowSize made configurable for icons on timeline, updated README

Author: jaspinderkohli

README.md

@@ -167,6 +167,10 @@ Icon of the element.
 
 Add extra class name to the element's icon.
 
+### `shadowSize={ String }`
+
+Shadow size for icon (default: `'small'`). Available sizes are `'small'`, `'medium'` and `'large'`.
+
 ### `iconOnClick={ Function }`
 
 onClick handler of the element's icon.

docs/vertical-load-more.js

@@ -73,6 +73,7 @@ const VerticalLoadMore = () => {
           iconOnClick={loadMore}
           iconClassName="vertical-timeline-element-icon--button"
           icon={addButton()}
+          shadowSize="small" // small, medium or large
         />
       </VerticalTimeline>
     </div>

src/VerticalTimelineElement.css

@@ -35,7 +35,17 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+}
+.vertical-timeline-element-icon.shadow-size-small {
+  box-shadow: 0 0 0 2px white, inset 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.vertical-timeline-element-icon.shadow-size-medium {
+  box-shadow: 0 0 0 3px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.vertical-timeline-element-icon.shadow-size-large {
+  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 4px 0 6px rgba(0, 0, 0, 0.05);
 }
 .vertical-timeline--one-column-right .vertical-timeline-element-icon {
   right: 0;

src/VerticalTimelineElement.js

@@ -24,6 +24,7 @@ const VerticalTimelineElement = ({
     triggerOnce: true,
   },
   visible = false,
+  shadowSize = 'small', // small | medium | large
 }) => (
   <InView {...intersectionObserverProps}>
     {({ inView, ref }) => (
@@ -44,6 +45,7 @@ const VerticalTimelineElement = ({
             className={classNames(
               iconClassName,
               'vertical-timeline-element-icon',
+              `shadow-size-${shadowSize}`, // for shadow size
               {
                 'bounce-in': inView || visible,
                 'is-hidden': !(inView || visible),
@@ -104,6 +106,7 @@ VerticalTimelineElement.propTypes = {
   style: PropTypes.shape({}),
   textClassName: PropTypes.string,
   visible: PropTypes.bool,
+  shadowSize: PropTypes.string,
   intersectionObserverProps: PropTypes.shape({
     root: PropTypes.object,
     rootMargin: PropTypes.string,