Merge branch 'development'

Author: vine77

CHANGELOG.md

@@ -1,3 +1,10 @@
+# react-components 5.26.0 (2021-01-07)
+
+- [Drawer] Add Drawer component (by [@Lukeaber](https://github.com/Lukeaber) in [#343](https://github.com/puppetlabs/design-system/pull/343))
+- [Icon] Add new chevron icons ("chevron-double-down" and "chevron-double-up") (by [@Lukeaber](https://github.com/Lukeaber) in [#343](https://github.com/puppetlabs/design-system/pull/343))
+- [Form] Add ability to choose cancel button type in Form actions (by [@jilliankeenan](https://github.com/jilliankeenan) in [#372](https://github.com/puppetlabs/design-system/pull/372))
+- [Security] Remove fast-csv dependency (by [@vine77](https://github.com/vine77) in [#369](https://github.com/puppetlabs/design-system/pull/369))
+
 # data-grid 0.5.1 (2020-11-10)
 
 - Use new version of react-components to get colored up and down icons in table headers (by [@Lukeaber](https://github.com/Lukeaber) in [#363](https://github.com/puppetlabs/design-system/pull/363))

packages/data-grid/package-lock.json

@@ -30,7 +30,6 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.3",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fast-csv": "^3.7.0",
     "file-loader": "^4.3.0",
     "jsdom": "^15.2.1",
     "mocha": "^6.2.3",

packages/design-system-website/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.25.1",
+  "version": "5.26.0",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",
@@ -55,7 +55,6 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fast-csv": "^3.7.0",
     "file-loader": "^4.3.0",
     "jsdom": "^15.2.1",
     "mocha": "^6.2.3",

packages/design-system-website/package.json

@@ -14,6 +14,7 @@ import Code from './react/library/code';
 import Copy from './react/library/copy';
 import ConfirmationModal from './react/library/confirmation-modal';
 import Content from './react/library/content';
+import Drawer from './react/library/drawer';
 import Filters from './react/library/filters';
 import Form from './react/library/form';
 import Heading from './react/library/heading';
@@ -50,6 +51,7 @@ export {
   ConfirmationModal,
   Content,
   Copy,
+  Drawer,
   Filters,
   Form,
   Heading,

packages/react-components/package-lock.json

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import {
+  bool,
+  string,
+  element,
+  node,
+  oneOf,
+  elementType,
+  func,
+} from 'prop-types';
+import Button from '../button';
+
+const propTypes = {
+  /** Selector with determines whether the drawer is open on first render, this prop will be overwritten by the open prop */
+  defaultOpen: bool,
+  /** Control whether the body content is open or closed with the open boolean prop. */
+  open: bool,
+  /** Callback which returns the new open prop value when the expand button is clicked */
+  onToggle: func,
+  /** Button text used when the drawer is toggled open. */
+  buttonTextOpen: string,
+  /** Button text used when the drawer is toggled closed. */
+  buttonTextClosed: string,
+  /** Content that is displayed within the drawer header and is always visible */
+  headerContent: element,
+  /** Lets you pick between transparent and text. */
+  buttonType: oneOf(['transparent', 'text']),
+  children: node,
+  /** React component / element to render */
+  as: elementType,
+};
+
+const defaultProps = {
+  defaultOpen: undefined,
+  open: undefined,
+  onToggle: () => {},
+  buttonTextOpen: 'Hide details',
+  buttonTextClosed: 'Details',
+  headerContent: undefined,
+  buttonType: 'transparent',
+  children: undefined,
+  as: Button,
+};
+
+function Drawer({
+  defaultOpen,
+  open,
+  onToggle,
+  buttonTextOpen,
+  buttonTextClosed,
+  headerContent,
+  buttonType,
+  children,
+  as: Element,
+}) {
+  const [isOpen, setIsOpen] = useState(open !== undefined ? open : defaultOpen);
+
+  const shouldSetIsOpen = () =>
+    open === undefined ? setIsOpen(!isOpen) : onToggle(!open);
+
+  return (
+    <div className="rc-drawer-container">
+      <div
+        className={classnames('rc-drawer-header', {
+          'rc-drawer-header-closed': !isOpen,
+        })}
+      >
+        <div
+          className={classnames('rc-drawer-header-content-container', {
+            'rc-drawer-header-content-container-open': isOpen,
+          })}
+        >
+          <div className="rc-drawer-header-content">{headerContent}</div>
+        </div>
+        <div className="rc-drawer-toggle-container">
+          <Element
+            className={classnames('rc-drawer-toggle-button', {
+              'rc-drawer-toggle-button-open': isOpen,
+              'rc-drawer-toggle-button-closed': !isOpen,
+            })}
+            type={buttonType}
+            trailingIcon={isOpen ? 'chevron-double-up' : 'chevron-double-down'}
+            onClick={() => shouldSetIsOpen()}
+          >
+            {isOpen ? buttonTextOpen : buttonTextClosed}
+          </Element>
+        </div>
+      </div>
+      {isOpen && <div className="rc-drawer-body">{children}</div>}
+    </div>
+  );
+}
+
+Drawer.propTypes = propTypes;
+Drawer.defaultProps = defaultProps;
+
+export default Drawer;