feat(component): refactored the CTA and updated the README

Author: Mahesh Kothur

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

@@ -11,7 +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';
+import { smoothScroll } from '@carbon/ibmdotcom-utilities';
 /**
  * CTA component
  *
@@ -28,14 +28,16 @@ const CTA = ({ style, type, ...cta }) => {
         <CardLink
           {...cta}
           icon={iconSelector(type)}
-          onClick={type === 'jump' ? smoothScrolling : null}
+          target={external(type)}
+          onClick={e => jump(e, type)}
         />
       );
     case 'button':
       return (
         <ButtonGroup
           buttons={renderButtons(cta)}
-          onClick={type === 'jump' ? smoothScrolling : null}
+          target={external(type)}
+          onClick={e => jump(e, type)}
         />
       );
     case 'feature':
@@ -44,22 +46,39 @@ const CTA = ({ style, type, ...cta }) => {
       return (
         <LinkWithIcon
           href={cta.href}
-          target={type === 'external' ? '_blank' : null}
-          onClick={type === 'jump' ? smoothScrolling : null}>
+          target={external(type)}
+          onClick={e => jump(e, type)}>
           {cta.copy}
           {iconSelector(type)}
         </LinkWithIcon>
       );
   }
 };
+
+/**
+ * jump to target element  onClick
+ * @param {*} e event object
+ * @param {*} type cta type ( external | jump | local)
+ * * @returns {*} behaviour object
+ */
+const jump = (e, type) => (type === 'jump' ? smoothScroll(e) : null);
+
+/**
+ * sets target
+ * @param {string} type cta type ( external | jump | local)
+ * @returns {string} target value
+ */
+const external = type => (type === 'external' ? '_blank' : null);
+
 /**
  * TEMPORARY sets icon based on link type
  *
  * @param {string} type cta type ( external | jump | local)
- * @returns {*} cta type component
+ * @returns {*} type of icon component
  */
 const TEMP_iconSelector = type =>
   type === 'external' ? Launch20 : type === 'jump' ? ArrowDown20 : ArrowRight20;
+
 /**
  * sets icon based on link type
  *
@@ -74,6 +93,7 @@ const iconSelector = type =>
   ) : (
     <ArrowRight20 />
   );
+
 /**
  * sets button
  *
@@ -85,8 +105,8 @@ const renderButtons = ({ buttons }) =>
     button.renderIcon = TEMP_iconSelector(button.type);
     return button;
   });
+
 CTA.propTypes = {
-  cta: PropTypes.object,
   style: PropTypes.string,
   type: PropTypes.string,
 };

packages/react/src/components/Cta/README.md

@@ -20,10 +20,13 @@ Here's a quick example to get you started.
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { CTA } from '@carbon/ibmdotcom-react';
 import 'yourapplication.scss';
 
 function App() {
-  return <CTA style={style} type={type} {...cta} />;
+  return (
+    <CTA style="text" type="local" copy="IBM Homepage" href="www.ibm.com" />
+  );
 }
 
 ReactDOM.render(<App />, document.querySelector('#app'));
@@ -34,11 +37,19 @@ ReactDOM.render(<App />, document.querySelector('#app'));
 
 ## Props
 
-| Name    | Required | Data Type | Default Value | Description                                    |
-| ------- | -------- | --------- | ------------- | ---------------------------------------------- |
-| `style` | NO       | String    | text          | Deafult style is text (LinkWithIcon component) |
-| `cta`   | NO       | Object    | null          | Contains type, href,copy title, heading, image |
-| `type`  | NO       | String    | local         | Contains type, href,copy title, heading, image |
+| Name    | Required | Data Type | Default Value | Description                                                          |
+| ------- | -------- | --------- | ------------- | -------------------------------------------------------------------- |
+| `style` | YES      | String    | text          | Describes style type, for more information See `Style type's` below. |
+| `type`  | YES      | String    | local         | Describes which type (`local`                                        | `jump` | `external`) icon. |
+
+## Style type's
+
+| Style Type | Component Name | Description                                                               |
+| ---------- | -------------- | ------------------------------------------------------------------------- |
+| `text`     | LinkWithIcon   | See the documentation of LinkWithIcon component and use thier props here. |
+| `button`   | ButtonGroup    | See the documentation of ButtonGroup component and use thier props here.  |
+| `card`     | Card           | See the documentation of Card component and use thier props here.         |
+| `feature`  | FeatureCard    | See the documentaion of FeatureCard component and user their props here.  |
 
 ## 🙌 Contributing
 

packages/utilities/src/utilities/index.js

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

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

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as smoothScrolling } from './smoothScrolling';
+export { default as smoothScroll } from './smoothScroll';

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

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