feat(cardlink): adds cardlink (#2506)

feat(cardlink): adds cardlink component

Author: kennylam

packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

@@ -4,13 +4,11 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Card } from '../Card';
+
+import { CardLink } from '../CardLink';
 import CTALogic from './CTALogic';
 import PropTypes from 'prop-types';
 import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
 
 /**
  * Card subcomponent for CTA.
@@ -23,37 +21,36 @@ const CardCTA = ({
   ...otherProps
 }) => {
   return type === 'video' ? (
-    <div>
+    <>
       {CTALogic.launchLightBox(renderLightBox, openLightBox, otherProps.media)}
       {!renderLightBox && (
-        <Card
-          customClassName={`${prefix}--card__CTA`}
-          cta={{
-            href: '#',
-            icon: {
-              src: CTALogic.iconSelector(type),
+        <CardLink
+          card={{
+            cta: {
+              href: '#',
+              icon: {
+                src: CTALogic.iconSelector(type),
+              },
             },
+            copy: videoTitle[0].title,
+            handleClick: e => CTALogic.setLightBox(e, openLightBox),
           }}
-          copy={videoTitle[0].title}
-          type="link"
-          handleClick={e => CTALogic.setLightBox(e, openLightBox)}
         />
       )}
-    </div>
+    </>
   ) : (
-    <Card
-      customClassName={`${prefix}--card__CTA`}
-      cta={{
-        type,
-        href: otherProps.cta.href,
-        icon: {
-          src: CTALogic.iconSelector(type),
+    <CardLink
+      card={{
+        cta: {
+          type,
+          href: otherProps.cta.href,
+          icon: {
+            src: CTALogic.iconSelector(type),
+          },
         },
+        copy: otherProps.copy,
+        target: CTALogic.external(type),
       }}
-      copy={otherProps.copy}
-      type="link"
-      target={CTALogic.external(type)}
-      role="region"
     />
   );
 };

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

@@ -19,6 +19,7 @@ const FeatureCTA = ({
   videoTitle,
   ...otherProps
 }) => {
+  console.log(otherProps);
   return type === 'video' ? (
     <div>
       {CTALogic.launchLightBox(

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Card } from '../Card';
+import PropTypes from 'prop-types';
+import React from 'react';
+import settings from 'carbon-components/es/globals/js/settings';
+
+const { prefix } = settings;
+
+/**
+ * CardLink component
+ */
+const CardLink = ({ card }) => {
+  return (
+    <Card
+      customClassName={`${prefix}--card__CTA`}
+      {...card}
+      role="region"
+      type="link"
+    />
+  );
+};
+
+CardLink.propTypes = {
+  /**
+   * Card options.
+   * See [`<Card>`'s README](http://ibmdotcom-react.mybluemix.net/?path=/docs/components-card--link-clickable#props) for full usage details.
+   */
+  card: PropTypes.shape(Card.propTypes).isRequired,
+};
+
+export default CardLink;

packages/react/src/components/CardLink/CardLink.js

@@ -0,0 +1,82 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { Card } from '../Card';
+
+# CardLink
+
+> The cardlink component uses
+> [Carbon's Clickable Tile component](https://www.carbondesignsystem.com/components/tile/code#clickable-tile)
+> while presenting content in a concise and readable style.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+##### CSS
+
+```css
+// yourapplication.scss
+@import '@carbon/type/scss/font-face/mono';
+@import '@carbon/type/scss/font-face/sans';
+@include carbon--font-face-mono();
+@include carbon--font-face-sans();
+@import '@carbon/ibmdotcom-styles/scss/patterns/sub-patterns/card/index.scss';
+```
+
+> 💡 Only import fonts once per usage. Don't forget to import the Card styles
+> from
+> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/ibm-dotcom-library/blob/master/packages/styles).
+
+##### JS
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CardLink } from '@carbon/ibmdotcom-react';
+import 'yourapplication.scss';
+
+function App() {
+  return (
+    <CardLink
+      card={{
+        heading: 'Heading',
+        copy: 'Lorem ipsum dolor sit amet',
+        cta: {
+          href: 'http://www.example.com',
+          icon: {
+            src: ArrowRight20,
+          },
+        },
+      }}
+    />
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+Add the following line in your `.env` file at the root of your project.
+[See more details](https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/styles#usage).
+
+```
+  SASS_PATH=node_modules:src
+```
+
+> 💡 Don't forget to import the card styles from
+> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/ibm-dotcom-library/blob/master/packages/styles).
+
+## Props
+
+<Props of={Card} />
+
+## 🙌 Contributing
+
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our
+[Contributing Guide](https://github.com/carbon-design-system/ibm-dotcom-library/blob/master/.github/CONTRIBUTING.md)!
+👀
+
+## 📝 License
+
+Licensed under the
+[Apache 2.0 License](https://github.com/carbon-design-system/ibm-dotcom-library/blob/master/LICENSE).

packages/react/src/components/CardLink/README.stories.mdx

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { text, withKnobs } from '@storybook/addon-knobs';
+import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
+import CardLink from '../CardLink';
+import React from 'react';
+import readme from '../README.stories.mdx';
+
+export default {
+  title: 'Components|CardLink',
+  decorators: [withKnobs],
+
+  parameters: {
+    ...readme.parameters,
+  },
+};
+
+export const Default = () => {
+  const cardheading = text(
+    'Card Heading:',
+    'Explore AI use cases in all industries'
+  );
+  const cardhref = text('Card href:', 'https://www.example.com');
+
+  return (
+    <div className="bx--grid">
+      <div className="bx--row">
+        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
+          <CardLink
+            card={{
+              copy: cardheading,
+              cta: {
+                href: cardhref,
+                icon: {
+                  src: ArrowRight20,
+                },
+              },
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,8 +1,8 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2016, 2020
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../../../../../styles/scss/patterns/sections/ctasection/index';
+export { default as CardLink } from './CardLink';