@deque/cauldron-react 1.0.0 → 2.0.0-canary.14b73b8d

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { TooltipProps } from '../Tooltip';
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: string;
     label: string;
-    tooltipPlacement?: Placement;
-    variant?: 'light' | 'dark' | 'primary' | 'secondary' | 'error';
+    tooltipPlacement?: TooltipProps['placement'];
+    tooltipVariant?: TooltipProps['variant'];
+    tooltipPortal?: TooltipProps['portal'];
+    variant?: 'primary' | 'secondary' | 'error';
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { DialogProps } from '../Dialog';
 interface ModalProps extends Omit<DialogProps, 'forceAction'> {
+    variant?: 'info';
 }
-declare const Modal: ({ children, className, ...other }: ModalProps) => JSX.Element;
+declare const Modal: ({ children, className, variant, ...other }: ModalProps) => JSX.Element;
 declare const ModalContent: {
     ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
     displayName: string;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface BaseStepProps {
+    status: 'current' | 'complete' | 'future';
+    className?: string;
+}
+interface StepWithChildren extends BaseStepProps {
+    children: React.ReactNode;
+}
+interface StepWithTooltip extends BaseStepProps {
+    tooltip: React.ReactNode;
+}
+declare type StepProps = StepWithChildren | StepWithTooltip;
+export declare const Step: {
+    (props: StepProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+interface StepperProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Stepper: {
+    ({ children, className, ...other }: StepperProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default Stepper;

package/lib/components/TopBar/TopBar.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    variant?: 'light' | 'dark';
 }
 declare const TopBar: (props: TopBarProps) => JSX.Element;
 export default TopBar;

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export { default as Line } from './components/Line';
 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';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -472,11 +472,10 @@ var TopBar = /** @class */ (function (_super) {
 }(React__default.Component));
 
 var TopBar$1 = function (props) {
-    var children = props.children, className = props.className, _a = props.variant, variant = _a === void 0 ? 'dark' : _a, other = tslib.__rest(props, ["children", "className", "variant"]);
+    var children = props.children, className = props.className, other = tslib.__rest(props, ["children", "className"]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
             // TopBar's default style is dark mode
-            TopBar: true,
-            'TopBar--light': variant === 'light'
+            TopBar: true
         }) }, other), children));
 };
 
@@ -1224,8 +1223,10 @@ var AlertContent = DialogContent;
 var AlertActions = DialogFooter;
 
 var Modal = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement(Dialog, tslib.__assign({ className: classNames('Modal', className) }, other, { forceAction: false }), children));
+    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
+    return (React__default.createElement(Dialog, tslib.__assign({ className: classNames('Modal', className, {
+            'Modal--info': variant === 'info'
+        }) }, other, { forceAction: false }), children));
 };
 var ModalContent = DialogContent;
 var ModalFooter = DialogFooter;
@@ -1249,6 +1250,7 @@ var SkipLink = /** @class */ (function (_super) {
         return (React__default.createElement("nav", tslib.__assign({ className: classNames('SkipLink', currentClass) }, other),
             React__default.createElement("a", { href: target, className: "SkipLink__link", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
                 React__default.createElement("span", { className: "SkipLink__item--first" }, skipText),
+                "\u00A0",
                 React__default.createElement("span", { className: "SkipLink__item--second" }, targetText))));
     };
     SkipLink.prototype.onClick = function () {
@@ -1469,20 +1471,18 @@ var TooltipContent = function (_a) {
 };
 
 var IconButton = React.forwardRef(function (_a, ref) {
-    var icon = _a.icon, label = _a.label, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b, className = _a.className, _c = _a.variant, variant = _c === void 0 ? 'secondary' : _c, other = tslib.__rest(_a, ["icon", "label", "tooltipPlacement", "className", "variant"]);
+    var icon = _a.icon, label = _a.label, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, className = _a.className, _c = _a.variant, variant = _c === void 0 ? 'secondary' : _c, disabled = _a.disabled, other = tslib.__rest(_a, ["icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled"]);
     var buttonRef = React.useRef();
     React.useImperativeHandle(ref, function () { return buttonRef.current; });
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("button", tslib.__assign({ type: 'button', className: classNames(className, {
                 IconButton: true,
-                'IconButton--light': variant === 'light',
-                'IconButton--dark': variant === 'dark',
                 'IconButton--primary': variant === 'primary',
                 'IconButton--secondary': variant === 'secondary',
                 'IconButton--error': variant === 'error'
-            }), ref: buttonRef }, other),
+            }), ref: buttonRef, disabled: disabled }, other),
             React__default.createElement(Icon, { type: icon })),
-        React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, association: "aria-labelledby", hideElementOnHidden: true }, label)));
+        !disabled && (React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
 IconButton.propTypes = {
     icon: PropTypes.string.isRequired,
@@ -1490,6 +1490,9 @@ IconButton.propTypes = {
     // @ts-ignore
     tooltipPlacement: PropTypes.string,
     // @ts-ignore
+    tooltipVariant: PropTypes.string,
+    tooltipPortal: PropTypes.any,
+    // @ts-ignore
     variant: PropTypes.string
 };
 IconButton.displayName = 'IconButton';
@@ -7900,6 +7903,40 @@ var DescriptionDetails = function (_a) {
 DescriptionDetails.displayName = 'DescriptionDetails';
 DescriptionDetails.propTypes = commonPropTypes;
 
+var isTooltip = function (props) {
+    return !!props.tooltip;
+};
+var Step = function (props) {
+    var status = props.status, className = props.className, other = tslib.__rest(props, ["status", "className"]);
+    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, other),
+        React__default.createElement("div", { className: "Stepper__step-line" }),
+        React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip(props) ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: props.tooltip, 
+            // the pseudo content (ex: "1") is conveyed
+            // by the list item's position in the set of
+            // list items, therefore it is safe to clobber
+            // it with the contents of the tooltip in the
+            // tab stop's accessible name.
+            association: "aria-labelledby" },
+            React__default.createElement("div", { className: "Stepper__step-indicator" }))) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "Stepper__step-indicator" }),
+            'children' in props && (React__default.createElement("div", { className: "Stepper__step-label" }, props.children)))))));
+};
+Step.displayName = 'Step';
+Step.propTypes = {
+    children: PropTypes.node,
+    tooltip: PropTypes.node,
+    className: PropTypes.string
+};
+var Stepper = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return (React__default.createElement("ol", tslib.__assign({ className: classNames('Stepper', className) }, other), children));
+};
+Stepper.displayName = 'Stepper';
+Stepper.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({});
@@ -7997,6 +8034,8 @@ exports.SideBar = SideBar;
 exports.SideBarItem = SideBarItem;
 exports.Sidebar = SideBar;
 exports.SkipLink = SkipLink;
+exports.Step = Step;
+exports.Stepper = Stepper;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "1.0.0",
+  "version": "2.0.0-canary.14b73b8d",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -123,4 +123,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}