feat(component): created utility for smoothScrolling

Author: Mahesh Kothur

packages/react/src/components/Cta/Cta.js

@@ -11,6 +11,7 @@ import { FeaturedLink } from '../../patterns/blocks/FeaturedLink';
 import { LinkWithIcon } from '../LinkWithIcon';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { smoothScrolling } from '@carbon/ibmdotcom-utilities';
 
 /**
  * CTA component
@@ -28,26 +29,14 @@ const CTA = ({ style, type, ...cta }) => {
         <CardLink
           {...cta}
           icon={iconSelector(type)}
-          onClick={
-            type === 'jump'
-              ? e => {
-                  smoothScrolling(e, cta.id);
-                }
-              : null
-          }
+          onClick={type === 'jump' ? smoothScrolling : null}
         />
       );
     case 'button':
       return (
         <ButtonGroup
           buttons={renderButtons(cta)}
-          onClick={
-            type === 'jump'
-              ? e => {
-                  smoothScrolling(e, cta.id);
-                }
-              : null
-          }
+          onClick={type === 'jump' ? smoothScrolling : null}
         />
       );
     case 'feature':
@@ -57,33 +46,14 @@ const CTA = ({ style, type, ...cta }) => {
         <LinkWithIcon
           href={cta.href}
           target={type === 'external' ? '_blank' : null}
-          onClick={
-            type === 'jump'
-              ? e => {
-                  smoothScrolling(e, cta.id);
-                }
-              : null
-          }>
+          onClick={type === 'jump' ? smoothScrolling : null}>
           {cta.copy}
           {iconSelector(type)}
         </LinkWithIcon>
       );
   }
 };
 
-/**
- * Handle OnClick
- *
- * @param {*} e event object
- * @param {*} id element id
- */
-const smoothScrolling = (e, id) => {
-  e.preventDefault();
-  document.querySelector(`[id="${id}"]`).scrollIntoView({
-    behavior: 'smooth',
-    block: 'start',
-  });
-};
 /**
  * TEMPORARY sets icon based on link type
  *

packages/react/src/components/Cta/__stories__/Cta.stories.js

@@ -31,7 +31,6 @@ storiesOf('Components|CTA', module)
           type: type,
           href: urlBy[type],
           copy: copy[0],
-          id: 'example',
         };
         break;
       case 'card':

packages/utilities/src/utilities/index.js

@@ -14,3 +14,4 @@ export * from './markdownToHtml';
 export * from './sameHeight';
 export * from './serialize';
 export * from './settings';
+export * from './smoothScrolling';

packages/utilities/src/utilities/smoothScrolling/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as smoothScrolling } from './smoothScrolling';

packages/utilities/src/utilities/smoothScrolling/smoothScrolling.js

@@ -0,0 +1,14 @@
+/**
+ * Handle OnClick
+ *
+ * @param {*} e event object
+ */
+const smoothScrolling = e => {
+  e.preventDefault();
+  const id = e.currentTarget.getAttribute('href');
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  });
+};
+export default smoothScrolling;