Merge pull request #137 from edx/mailto-component

feat(mailtolink): add MailtoLink component

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -443,6 +443,18 @@ exports[`Storyshots HyperLink with blank target 1`] = `
 </a>
 `;
 
+exports[`Storyshots HyperLink with icon as content 1`] = `
+<a
+  href="https://www.edx.org"
+  onClick={[Function]}
+  target="_self"
+>
+  <span
+    className="fa fa-book"
+  />
+</a>
+`;
+
 exports[`Storyshots HyperLink with onClick 1`] = `
 <a
   href="https://www.edx.org"
@@ -1077,6 +1089,96 @@ exports[`Storyshots InputText validation with danger theme 1`] = `
 </div>
 `;
 
+exports[`Storyshots MailtoLink minimal usage 1`] = `
+<a
+  href="mailto:[email protected]"
+  onClick={null}
+  target="_self"
+>
+  [email protected]
+</a>
+`;
+
+exports[`Storyshots MailtoLink with blank target 1`] = `
+<a
+  href="mailto:[email protected]"
+  onClick={null}
+  target="_blank"
+>
+  [email protected]
+  <span>
+     
+    <span
+      aria-hidden={false}
+      aria-label={undefined}
+      className="fa fa-external-link"
+      title="Opens in a new window"
+    />
+  </span>
+</a>
+`;
+
+exports[`Storyshots MailtoLink with cc and bcc 1`] = `
+<a
+  href="mailto:?bcc=edx%40example.com&cc=edx%40example.com"
+  onClick={null}
+  target="_self"
+>
+  Moar mail, this time with cc and bcc
+</a>
+`;
+
+exports[`Storyshots MailtoLink with multiple cc and bcc 1`] = `
+<a
+  href="mailto:?bcc=foo%40example.com%2Cbar%40example.com%2Cbaz%40example.com&cc=foo%40example.com%2Cbar%40example.com%2Cbaz%40example.com"
+  onClick={null}
+  target="_self"
+>
+  [email protected]
+</a>
+`;
+
+exports[`Storyshots MailtoLink with multiple recipients and mail icon 1`] = `
+<a
+  href="mailto:[email protected],[email protected],[email protected]"
+  onClick={null}
+  target="_self"
+>
+  <span
+    className="fa fa-envelope"
+  />
+</a>
+`;
+
+exports[`Storyshots MailtoLink with onClick 1`] = `
+<a
+  href="mailto:[email protected]"
+  onClick={[Function]}
+  target="_blank"
+>
+  [email protected]
+  <span>
+     
+    <span
+      aria-hidden={false}
+      aria-label={undefined}
+      className="fa fa-external-link"
+      title="Opens in a new window"
+    />
+  </span>
+</a>
+`;
+
+exports[`Storyshots MailtoLink with subject and body 1`] = `
+<a
+  href="mailto:[email protected]?body=This%20mailto%20component%20is%20awesome%21&subject=Check%20out%20this%20mailto%20component%21"
+  onClick={null}
+  target="_self"
+>
+  email with subject and body
+</a>
+`;
+
 exports[`Storyshots Modal basic usage 1`] = `
 <div
   aria-labelledby="id3"

package.json

@@ -29,7 +29,9 @@
     "@edx/edx-bootstrap": "^0.4.2",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",
+    "email-prop-type": "^1.1.3",
     "font-awesome": "^4.7.0",
+    "mailto-link": "^1.0.0",
     "prop-types": "^15.5.8",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",

src/Hyperlink/Hyperlink.stories.jsx

@@ -37,4 +37,10 @@ storiesOf('HyperLink', module)
       target="_blank"
       onClick={onClick}
     />
+  ))
+  .add('with icon as content', () => (
+    <Hyperlink
+      destination="https://www.edx.org"
+      content={(<span className="fa fa-book" />)}
+    />
   ));

src/Hyperlink/README.md

@@ -0,0 +1,31 @@
+# Hyperlink
+
+## API
+
+### `content` (string or element; required)
+
+`content` specifies the text or element that a URL should be associated with
+
+### `destination` (string; required)
+
+`destination` specifies the URL
+
+### `target` (string; optional)
+
+`target` specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one
+
+### `onClick` (function; optional)
+
+`onClick` specifies the callback function when the link is clicked
+
+### `externalLinkAlternativeText` (string; optional)
+
+`externalLinkAlternativeText` specifies the text for links with a `_blank` target (which loads the URL in a new browsing context).
+
+**This value is required if the `target` value is `_blank`**
+
+### `externalLinkTitle` (string; optional)
+
+`externalLinkTitle` specifies the title for links with a `_blank` target (which loads the URL in a new browsing context).
+
+**This value is required if the `target` value is `_blank`**

src/Hyperlink/index.jsx

@@ -51,7 +51,7 @@ Hyperlink.defaultProps = {
 
 Hyperlink.propTypes = {
   destination: PropTypes.string.isRequired,
-  content: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   target: PropTypes.string,
   onClick: PropTypes.func,
   externalLinkAlternativeText: isRequiredIf(PropTypes.string, props => props.target === '_blank'),

src/MailtoLink/MailtoLink.stories.jsx

@@ -0,0 +1,68 @@
+/* eslint-disable import/no-extraneous-dependencies, no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setConsoleOptions } from '@storybook/addon-console';
+
+import MailtoLink from './index';
+
+setConsoleOptions({
+  panelExclude: ['warn', 'error'],
+});
+
+const onClick = (event) => {
+  console.log(`onClick fired for ${event.target}`);
+
+  action('MailtoLink Click');
+};
+
+storiesOf('MailtoLink', module)
+  .add('minimal usage', () => (
+    <MailtoLink
+      to="[email protected]"
+      content="[email protected]"
+    />
+  ))
+  .add('with blank target', () => (
+    <MailtoLink
+      to="[email protected]"
+      content="[email protected]"
+      target="_blank"
+    />
+  ))
+  .add('with onClick', () => (
+    <MailtoLink
+      to="[email protected]"
+      content="[email protected]"
+      target="_blank"
+      onClick={onClick}
+    />
+  ))
+  .add('with multiple recipients and mail icon', () => (
+    <MailtoLink
+      to={['[email protected]', '[email protected]', '[email protected]']}
+      content={(<span className="fa fa-envelope" />)}
+    />
+  ))
+  .add('with subject and body', () => (
+    <MailtoLink
+      to="[email protected]"
+      subject="Check out this mailto component!"
+      body="This mailto component is awesome!"
+      content="email with subject and body"
+    />
+  ))
+  .add('with cc and bcc', () => (
+    <MailtoLink
+      cc="[email protected]"
+      bcc="[email protected]"
+      content="Moar mail, this time with cc and bcc"
+    />
+  ))
+  .add('with multiple cc and bcc', () => (
+    <MailtoLink
+      cc={['[email protected]', '[email protected]', '[email protected]']}
+      bcc={['[email protected]', '[email protected]', '[email protected]']}
+      content="[email protected]"
+    />
+  ));