@deque/cauldron-react 2.0.0-canary.22e43f33 → 2.0.0-canary.4fab7c98

package/lib/cauldron.css

@@ -1,28 +1,66 @@
+:root {
+  --expandcollapse-trigger-background-color: transparent;
+  --expandcollapse-trigger-color: var(--gray-90);
+  --expandcollapse-panel-background-color: transparent;
+  --expandcollapse-panel-color: var(--gray-90);
+}
+
 .ExpandCollapse__trigger {
   font-size: inherit;
   display: flex;
   align-items: center;
+  background-color: var(--expandcollapse-trigger-background-color);
+  color: var(--expandcollapse-trigger-color);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.ExpandCollapse__trigger-title {
+  flex-grow: 1;
+  text-align: left;
+}
+
+.ExpandCollapse__panel {
+  background-color: var(--expandcollapse-panel-background-color);
+  color: var(--expandcollapse-panel-color);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --expandcollapse-trigger-color: var(--white);
+  --expandcollapse-panel-color: var(--accent-light);
 }
+
 a.Button--primary {
   text-decoration: none;
   padding: 9px 18px;
 }
+
 .Icon {
   display: inline-block;
   vertical-align: middle;
 }
+
 .Icon svg {
   display: block;
 }
+
 /* Icon--right is the default orientation */
+
 .Icon__right {
 }
+
 .Icon__left {
   transform: scaleX(-1);
 }
+
 .Icon__up {
   transform: rotate(-90deg);
 }
+
 .Icon__down {
   transform: rotate(90deg);
 }

package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts

@@ -5,9 +5,10 @@ export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
         open: boolean;
     }) => React.ReactNode) | React.ReactNode;
     open?: boolean;
+    fullWidth?: string;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare function PanelTrigger({ children, className, open, onClick, ...other }: PanelTriggerProps): JSX.Element;
+declare function PanelTrigger({ children, className, open, fullWidth, onClick, ...other }: PanelTriggerProps): JSX.Element;
 declare namespace PanelTrigger {
     var propTypes: {
         children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/components/IconButton/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TooltipProps } from '../Tooltip';
-interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: string;
     label: string;
     tooltipPlacement?: TooltipProps['placement'];

package/lib/components/Panel/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+declare const Panel: {
+    ({ className, title, actions, children }: {
+        className?: string | undefined;
+        title?: string | undefined;
+        actions?: React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>[] | undefined;
+        children: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default Panel;

package/lib/index.d.ts

@@ -39,6 +39,7 @@ export { default as Tag, TagLabel } from './components/Tag';
 export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
 export { default as Stepper, Step } from './components/Stepper';
+export { default as Panel } from './components/Panel';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -2380,10 +2380,9 @@ var TextField = /** @class */ (function (_super) {
 }(React__default.Component));
 
 function PanelTrigger(_a) {
-    var children = _a.children, className = _a.className, open = _a.open, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "onClick"]);
-    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', className), type: "button", "aria-expanded": open, onClick: onClick }),
-        typeof children === 'function' ? children({ open: !!open }) : children,
-        ' ',
+    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick"]);
+    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
+        React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
         React__default.createElement(Icon, { type: "chevron-" + (open ? 'down' : 'right') })));
 }
 PanelTrigger.propTypes = {
@@ -2506,7 +2505,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
                     open: isOpen,
                     onClick: this.handleToggle
                 }),
-            React__default.createElement("div", tslib.__assign({}, other, { className: classNames(animationClass, className, {
+            React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
                     'is--hidden': !isOpen && !isAnimating
                 }), ref: this.panel }), panelElements)));
     };
@@ -7937,6 +7936,20 @@ Stepper.propTypes = {
     className: PropTypes.string
 };
 
+var Panel = function (_a) {
+    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
+    return (React__default.createElement("div", { className: classNames('Panel', className) },
+        React__default.createElement("div", { className: "Panel__Header" },
+            title && React__default.createElement("div", { className: "Panel__Header-title" }, title),
+            actions && React__default.createElement("div", { className: "Panel__Header-actions" }, actions)),
+        React__default.createElement("div", { className: "Panel__Content" }, children)));
+};
+Panel.displayName = 'Panel';
+Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
@@ -8025,6 +8038,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
 exports.RadioGroup = RadioGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "2.0.0-canary.22e43f33",
+  "version": "2.0.0-canary.4fab7c98",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"