@conveyorhq/arrow-ds 1.126.0 → 1.127.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.126.0",
+  "version": "1.127.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Description/index.d.ts

@@ -1 +1 @@
-export { Description } from "./Description";
+export * from "./Description";

package/public/components/Description/index.js

@@ -1,5 +1,13 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = void 0;
-var Description_1 = require("./Description");
-Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return Description_1.Description; } });
+__exportStar(require("./Description"), exports);

package/public/components/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from "react";
-declare type HeadingProps = HTMLProps<HTMLHeadingElement>;
+export declare type HeadingProps = HTMLProps<HTMLHeadingElement>;
 export declare const Heading: {
     (props: HeadingProps): JSX.Element;
     H1: (props: HeadingProps) => JSX.Element;
@@ -9,4 +9,3 @@ export declare const Heading: {
     H5: (props: HeadingProps) => JSX.Element;
     H6: (props: HeadingProps) => JSX.Element;
 };
-export {};

package/public/components/Heading/index.d.ts

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export * from "./Heading";

package/public/components/Heading/index.js

@@ -1,5 +1,13 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = void 0;
-var Heading_1 = require("./Heading");
-Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
+__exportStar(require("./Heading"), exports);

package/public/components/Modal/Modal.d.ts

@@ -1,8 +1,10 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { PortalProps, PortalRootElementType } from "../Portal";
+import { DescriptionProps } from "../Description";
 import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
+import { HeadingProps } from "../Heading";
 export declare enum MODAL_SIZE {
     DEFAULT = "default",
     LARGE = "large",
@@ -34,6 +36,9 @@ export interface ModalFooterMultiStepProps extends BoxProps {
     rightButtonLabel?: string;
 }
 export declare const ModalHeader: (props: BoxProps) => JSX.Element;
+export declare const ModalTitle: (props: HeadingProps) => JSX.Element;
+export declare const ModalSecondaryTitle: ({ className, ...rest }: HeadingProps) => JSX.Element;
+export declare const ModalDescription: ({ className, ...rest }: DescriptionProps) => JSX.Element;
 export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
 export declare const ModalTabs: (props: StackProps) => JSX.Element;
 export declare const ModalFooter: (props: BoxProps) => JSX.Element;
@@ -81,6 +86,9 @@ export declare const Modal: {
     Screen: ({ className, style, ...rest }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
     Tabs: (props: StackProps) => JSX.Element;
     Header: (props: BoxProps) => JSX.Element;
+    Title: (props: HeadingProps) => JSX.Element;
+    SecondaryTitle: ({ className, ...rest }: HeadingProps) => JSX.Element;
+    Description: ({ className, ...rest }: DescriptionProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;
     Footer: (props: BoxProps) => JSX.Element;
     FooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;

package/public/components/Modal/Modal.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalScreen = exports.ModalContent = exports.ModalContainer = exports.ModalOverlay = exports.ModalPortal = exports.ModalRoot = exports.ModalClose = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalScreen = exports.ModalContent = exports.ModalContainer = exports.ModalOverlay = exports.ModalPortal = exports.ModalRoot = exports.ModalClose = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalDescription = exports.ModalSecondaryTitle = exports.ModalTitle = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
@@ -52,6 +52,18 @@ const ModalHeader = (props) => {
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "header" }), className]) }, rest)));
 };
 exports.ModalHeader = ModalHeader;
+const ModalTitle = (props) => {
+    return react_1.default.createElement(Heading_1.Heading.H2, Object.assign({}, props));
+};
+exports.ModalTitle = ModalTitle;
+const ModalSecondaryTitle = ({ className, ...rest }) => {
+    return (react_1.default.createElement(Heading_1.Heading.H5, Object.assign({ className: classnames_1.default("text-gray-600", className) }, rest)));
+};
+exports.ModalSecondaryTitle = ModalSecondaryTitle;
+const ModalDescription = ({ className, ...rest }) => {
+    return (react_1.default.createElement(Description_1.Description, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "description" }), className) }, rest)));
+};
+exports.ModalDescription = ModalDescription;
 const ModalBody = (props) => {
     const { padded = true, className, ...rest } = props;
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([
@@ -196,11 +208,11 @@ const Modal = (props) => {
                             className,
                         ]) }, rest),
                         !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
-                            title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                            title && react_1.default.createElement(exports.ModalTitle, null, title),
                             react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                                secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                                secondaryTitle && (react_1.default.createElement(exports.ModalSecondaryTitle, null, secondaryTitle)),
                                 !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
-                        description && (react_1.default.createElement(Description_1.Description, { className: bem_1.bem(cn, { e: "description" }) }, description)),
+                        description && (react_1.default.createElement(exports.ModalDescription, null, description)),
                         children)),
                 react_1.default.createElement(exports.ModalScreen, null)))));
 };
@@ -213,6 +225,9 @@ exports.Modal.Content = exports.ModalContent;
 exports.Modal.Screen = exports.ModalScreen;
 exports.Modal.Tabs = exports.ModalTabs;
 exports.Modal.Header = exports.ModalHeader;
+exports.Modal.Title = exports.ModalTitle;
+exports.Modal.SecondaryTitle = exports.ModalSecondaryTitle;
+exports.Modal.Description = exports.ModalDescription;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;

package/src/components/Description/index.ts

@@ -1 +1 @@
-export { Description } from "./Description";
+export * from "./Description";

package/src/components/Heading/Heading.tsx

@@ -5,7 +5,7 @@ import { bem } from "../../utilities/bem";
 
 const cn = "Heading";
 
-type HeadingProps = HTMLProps<HTMLHeadingElement>;
+export type HeadingProps = HTMLProps<HTMLHeadingElement>;
 
 export const Heading = (props: HeadingProps) => {
   const { children, className, ...rest } = props;

package/src/components/Heading/index.ts

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export * from "./Heading";

package/src/components/Modal/Modal.tsx

@@ -16,14 +16,14 @@ import mergeRefs from "react-merge-refs";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { Portal, PortalProps, PortalRootElementType } from "../Portal";
-import { Description } from "../Description";
+import { Description, DescriptionProps } from "../Description";
 import { CloseButton, CloseButtonProps } from "../CloseButton";
 import { Stack, StackProps } from "../Stack";
 import { KEY_CODE } from "../../types";
 import { useKeyPress, useOutsideClick } from "../../hooks";
 import { bem } from "../../utilities/bem";
 import { Tab } from "../Tab";
-import { Heading } from "../Heading";
+import { Heading, HeadingProps } from "../Heading";
 import { ModalContext, useModalContext } from "./context";
 
 const cn = "Modal";
@@ -166,6 +166,25 @@ export const ModalHeader = (props: BoxProps) => {
   );
 };
 
+export const ModalTitle = (props: HeadingProps) => {
+  return <Heading.H2 {...props} />;
+};
+
+export const ModalSecondaryTitle = ({ className, ...rest }: HeadingProps) => {
+  return (
+    <Heading.H5 className={classNames("text-gray-600", className)} {...rest} />
+  );
+};
+
+export const ModalDescription = ({ className, ...rest }: DescriptionProps) => {
+  return (
+    <Description
+      className={classNames(bem(cn, { e: "description" }), className)}
+      {...rest}
+    />
+  );
+};
+
 export const ModalBody = (props: ModalBodyProps) => {
   const { padded = true, className, ...rest } = props;
   return (
@@ -510,13 +529,13 @@ export const Modal = (props: ModalProps) => {
             >
               {!noHeader && showHeader && (
                 <ModalHeader>
-                  {title && <Heading.H2>{title}</Heading.H2>}
+                  {title && <ModalTitle>{title}</ModalTitle>}
 
                   <Stack className="flex-shrink-0" spacing={5}>
                     {secondaryTitle && (
-                      <Heading.H5 className="text-gray-600">
+                      <ModalSecondaryTitle>
                         {secondaryTitle}
-                      </Heading.H5>
+                      </ModalSecondaryTitle>
                     )}
 
                     {!hideCloseButton && <ModalCloseButton />}
@@ -525,9 +544,7 @@ export const Modal = (props: ModalProps) => {
               )}
 
               {description && (
-                <Description className={bem(cn, { e: "description" })}>
-                  {description}
-                </Description>
+                <ModalDescription>{description}</ModalDescription>
               )}
 
               {children}
@@ -549,6 +566,9 @@ Modal.Content = ModalContent;
 Modal.Screen = ModalScreen;
 Modal.Tabs = ModalTabs;
 Modal.Header = ModalHeader;
+Modal.Title = ModalTitle;
+Modal.SecondaryTitle = ModalSecondaryTitle;
+Modal.Description = ModalDescription;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.FooterMultiStep = ModalFooterMultiStep;