qpp-style 9.11.3 → 9.12.0

package/components/Link/Link.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import DSLink from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+
+export default {
+  title: 'Link',
+  component: DSLink,
+  decorators: [withKnobs],
+};
+
+export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
+
+export const LinkColorVariants = () => (
+  <>
+    <div className=" qpp-dark-background qpp-u-padding--16">
+      <DSLink href="#" variant="white">
+        Link Label
+      </DSLink>
+    </div>
+    <p>
+      <DSLink href="#" variant="gray">
+        Link Label
+      </DSLink>
+    </p>
+  </>
+);
+
+export const inlineLinks = () => (
+  <div className="qpp-u-padding--16">
+    <p className="qpp-u-width--60">
+      Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{' '}
+      <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
+      venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
+      venenatis <DSLink href="#">inline link</DSLink> dapibus posuere velit
+      aliquet.
+    </p>
+  </div>
+);
+
+export const inlineLinksDarkBackground = () => (
+  <div className="qpp-dark-background qpp-u-padding--16">
+    Aenean lacinia{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    nulla sed{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>
+    . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+    Integer posuere erat a ante venenatis{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    dapibus posuere velit aliquet.
+  </div>
+);
+
+export const linkWithIcon = () => {
+  const icon = <OpenInNewIcon classes={{ root: 'qpp-icon-mat' }} />;
+  return (
+    <div className="qpp-u-padding--16">
+      <DSLink href="#">
+        Standalone Link With Icon
+        {icon}
+      </DSLink>{' '}
+      <p className=" qpp-u-width--60">
+        Aenean lacinia{' '}
+        <DSLink href="#">
+          inline link
+          {icon}
+        </DSLink>{' '}
+        nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer posuere
+        erat a ante venenatis dapibus posuere velit aliquet. Integer posuere
+        erat a ante venenatis <DSLink href="#">inline link {icon}</DSLink>{' '}
+        dapibus posuere velit aliquet.
+      </p>
+    </div>
+  );
+};

package/components/Link/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['white', 'gray'];
+
+const DSLink = ({
+  className,
+  href,
+  download,
+  ariaLabel,
+  onClick,
+  children,
+  variant,
+  ...rest
+}) => {
+  let linkClass = 'qpp-c-link';
+  if (VARIANTS.includes(variant)) {
+    variant === 'gray'
+      ? (linkClass = linkClass.concat(' ', 'qpp-u-color--gray-60'))
+      : (linkClass = linkClass.concat(' ', `qpp-u-color--${variant}`));
+  }
+
+  if (className) {
+    linkClass = linkClass.concat(' ', className);
+  }
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={linkClass || ''}
+      href={href}
+      download={download}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+DSLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  download: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+DSLink.defaultProps = {
+  children: null,
+  className: '',
+  href: '',
+  ariaLabel: null,
+  onClick: () => null,
+  download: false,
+  variant: null,
+};
+
+export default DSLink;

package/components/index.js

@@ -17,6 +17,7 @@ import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
+import DSLink from './Link';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -121,4 +122,5 @@ export {
   TextInput,
   Dropdown,
   Tooltip,
+  DSLink,
 };