qpp-style 9.24.4 → 9.25.0

package/components/Details/Details.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Details from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Details',
+  component: Details,
+  decorators: [withKnobs],
+};
+
+export const DefaultDetails = () => <Details title="default" />;
+
+export const HeaderDetails = () => <Details variant="header" title="Header" />;
+
+export const TextButtonDetails = () => (
+  <Details variant="text-button" title="Text Button" />
+);
+
+export const HeaderListDetails = () => (
+  <ul className="qpp-c-details-list">
+    <li>
+      <Details title="Header 1" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <hr />
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 2" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <ul>
+          <li>foo</li>
+          <li>bar</li>
+        </ul>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 3" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+  </ul>
+);

package/components/Details/DetailsIcons.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Add = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>{' '}
+    {iconText}
+  </>
+);
+
+Add.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Add.defaultProps = {
+  iconText: null,
+};
+
+export const Remove = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13H5v-2h14v2z" />
+    </svg>
+    {iconText}
+  </>
+);
+
+Remove.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Remove.defaultProps = {
+  iconText: null,
+};

package/components/Details/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add, Remove } from './DetailsIcons';
+
+const Details = ({ children, title, variant, className, ...rest }) => {
+  if (variant === 'header') {
+    return (
+      <details className="qpp-c-details qpp-c-details--header">
+        <summary>
+          {title}
+          <span className="qpp-c-details--icon-closed" aria-hidden="true">
+            <Add iconText="View" />
+          </span>
+          <span className="qpp-c-details--icon-open" aria-hidden="true">
+            <Remove iconText="Hide" />
+          </span>
+        </summary>
+        {children}
+      </details>
+    );
+  }
+
+  return (
+    <details className={`qpp-c-details ${className}`} {...rest}>
+      <summary
+        className={
+          variant === 'text-button' ? 'qpp-c-button qpp-c-button--text' : ''
+        }
+      >
+        <Add />
+        <Remove />
+        {title}
+      </summary>
+      {children}
+    </details>
+  );
+};
+
+Details.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.node,
+  variant: PropTypes.oneOf(['header', 'text-button']),
+  className: PropTypes.string,
+};
+
+Details.defaultProps = {
+  children: false,
+  title: null,
+  variant: null,
+  className: '',
+};
+
+export default Details;

package/components/index.js

@@ -16,6 +16,7 @@ import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
+import Details from './Details';
 import DSLink from './Link';
 import {
   MyApplicationsIcon,
@@ -121,6 +122,7 @@ export {
   TextButton,
   TextInput,
   Dropdown,
+  Details,
   Tooltip,
   DSLink,
 };