@deque/cauldron-react 5.8.1-canary.338509e3 → 5.8.1-canary.35635051

package/README.md

@@ -1,19 +1,29 @@
-# cauldron react
+# Cauldron React
 
-## installation
+Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron's React components are designed to include full screen reader and keyboard navigation support.
 
-```sh
-$ npm install @deque/cauldron-react --save
+## Installation
+
+To start using Cauldron React, install the packages with your package manager of choice:
+
+### npm
+
+```js
+npm install @deque/cauldron-react @deque/cauldron-styles
 ```
 
-and pull in the styles:
+### yarn
 
-```sh
-$ npm install @deque/cauldron-styles --save
+```js
+yarn add @deque/cauldron-react @deque/cauldron-styles
 ```
 
-## server-side rendering
+## Getting Started
+
+To get started, follow our [usage guide](https://cauldron.dequelabs.com/#usage) that includes setup instructions and necessary dependencies. Further documentation is also available at [cauldron.dequelabs.com](https://cauldron.dequelabs.com) that includes documentation for every available Cauldron component.
+
+## Contribute
 
-Avoid referencing `window` properties, such as `document`, unless you are sure the code will only be executed in a browser environment. For instance, it is safe to reference `document` in an [Effect Hook](https://reactjs.org/docs/hooks-effect.html) or a lifecycle method like `componentDidMount()`, but not in the `render()` method of a class component.
+If you're interested in contributing to Cauldron, you can check out our [contribution guide](https://github.com/dequelabs/cauldron/blob/develop/CONTRIBUTING.md) as well as our [code of conduct](https://github.com/dequelabs/cauldron/blob/develop/CODE_OF_CONDUCT.md).
 
-Ensuring you only reference these objects when it is safe to do so will ensure that library consumers can use Cauldron with platforms that use an SSR engine, such as GatsbyJS and NextJS.
+Did you find a bug or have a feature request? [Open an issue!](https://github.com/dequelabs/cauldron/issues/new/choose)

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

@@ -5,19 +5,21 @@ interface AlertProps extends Omit<DialogProps, 'forceAction' | 'closeButtonText'
 }
 declare const Alert: ({ children, className, variant, heading, ...other }: AlertProps) => React.JSX.Element;
 declare const AlertContent: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: import("../Dialog").DialogContentProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        align: import("prop-types").Requireable<string>;
     };
 };
 declare const AlertActions: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: import("../Dialog").DialogFooterProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        align: import("prop-types").Requireable<string>;
     };
 };
 export default Alert;

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

@@ -48,20 +48,27 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     handleClickOutside(): void;
     focusHeading(): void;
 }
+interface DialogAlignmentProps {
+    align?: 'left' | 'center' | 'right';
+}
+export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & DialogAlignmentProps;
 declare const DialogContent: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: DialogContentProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        align: PropTypes.Requireable<string>;
     };
 };
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> & DialogAlignmentProps;
 declare const DialogFooter: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: DialogFooterProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        align: PropTypes.Requireable<string>;
     };
 };
 export { Dialog, DialogContent, DialogFooter };

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

@@ -5,19 +5,21 @@ interface ModalProps extends Omit<DialogProps, 'forceAction'> {
 }
 declare const Modal: ({ children, className, variant, ...other }: ModalProps) => React.JSX.Element;
 declare const ModalContent: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: import("../Dialog").DialogContentProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        align: import("prop-types").Requireable<string>;
     };
 };
 declare const ModalFooter: {
-    ({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ children, className, align, ...other }: import("../Dialog").DialogFooterProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        align: import("prop-types").Requireable<string>;
     };
 };
 export default Modal;

package/lib/index.js

@@ -1664,22 +1664,32 @@ var Dialog = /** @class */ (function (_super) {
     return Dialog;
 }(React__default["default"].Component));
 var DialogContent = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className) }, other), children));
+    var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className, {
+            'text--align-left': align === 'left',
+            'text--align-center': align === 'center',
+            'text--align-right': align === 'right'
+        }) }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 DialogContent.propTypes = {
     className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node
+    children: PropTypes__default["default"].node,
+    align: PropTypes__default["default"].string
 };
 var DialogFooter = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__footer', className) }, other), children));
+    var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__footer', className, {
+            'text--align-left': align === 'left',
+            'text--align-center': align === 'center',
+            'text--align-right': align === 'right'
+        }) }, other), children));
 };
 DialogFooter.displayName = 'DialogFooter';
 DialogFooter.propTypes = {
     className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node
+    children: PropTypes__default["default"].node,
+    align: PropTypes__default["default"].string
 };
 
 var Alert = function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.8.1-canary.338509e3",
+  "version": "5.8.1-canary.35635051",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",