@auth0/quantum-product 2.5.5 → 2.5.6

package/esm/promo-banner/promo-banner-classes.js

@@ -14,4 +14,5 @@ export var promoBannerClasses = generateUtilityClasses(promoBannerComponentName,
     'secondaryAction',
     'imageContainer',
     'image',
+    'demoComponentContainer',
 ]);

package/esm/promo-banner/promo-banner.js

@@ -133,6 +133,28 @@ var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'Imag
         display: 'flex',
     }, _b), imagePositionClass);
 });
+var DemoComponentContainer = styled('div', { name: promoBannerComponentName, slot: 'DemoComponentContainer' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var imageContainerPositionTop = {
+        alignSelf: 'flex-start',
+        paddingTop: 0,
+        paddingBottom: theme.spacing(2),
+    };
+    var imageContainerPositionCenter = {
+        alignSelf: 'center',
+        paddingTop: 0,
+        paddingBottom: 0,
+    };
+    var imagePositionClass = ownerState.imagePosition === 'top'
+        ? imageContainerPositionTop
+        : ownerState.imagePosition === 'center'
+            ? imageContainerPositionCenter
+            : {};
+    return __assign((_b = { flex: 5, paddingRight: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: 0, alignSelf: 'flex-start', display: 'none' }, _b[theme.breakpoints.up('md')] = {
+        display: 'flex',
+    }, _b), imagePositionClass);
+});
 var Img = styled(Image, { name: promoBannerComponentName, slot: 'Image' })(function (_a) {
     var ownerState = _a.ownerState;
     var imageFullWidthClass = {
@@ -154,7 +176,7 @@ var Content = styled(RowLayout, { name: promoBannerComponentName, slot: 'Content
         _b;
 });
 export var PromoBanner = React.forwardRef(function (props, ref) {
-    var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes"]);
+    var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, demoComponent = props.demoComponent, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes", "demoComponent"]);
     var classes = useMergedClasses(promoBannerClasses, getPromoBannerUtilityClass, propClasses);
     return (React.createElement(Root, __assign({ ref: ref, sx: sx, elevation: color === 'default' ? 0 : 5, ownerState: { color: color }, forwardedAs: "section", className: clsx(classes.root, className) }, rootProps),
         React.createElement(Content, { className: classes.content },
@@ -163,5 +185,6 @@ export var PromoBanner = React.forwardRef(function (props, ref) {
             React.createElement(StackLayout, { gutter: 1, className: classes.actions },
                 React.createElement(StackLayoutItem, null, action && (React.createElement(PrimaryActionButton, __assign({ variant: "contained", size: "medium", color: "primary", className: clsx(classes.action, classes.primaryAction), ownerState: { color: color } }, action)))),
                 React.createElement(StackLayoutItem, null, actionSecondary && (React.createElement(SecondaryActionButton, __assign({ className: clsx(classes.action, classes.secondaryAction), color: color === 'default' ? 'primary' : undefined, ownerState: { color: color }, variant: "link", size: "medium" }, actionSecondary)))))),
-        React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))));
+        !demoComponent && (React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))),
+        !image && !!demoComponent && (React.createElement(DemoComponentContainer, { className: classes.demoComponentContainer, ownerState: { imagePosition: imagePosition } }, demoComponent))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {

package/promo-banner/promo-banner-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const promoBannerComponentName: "QuantumPromoBanner";
 export declare function getPromoBannerUtilityClass(slot: string): string;
-export declare const promoBannerClasses: Record<"title" | "image" | "action" | "content" | "root" | "secondaryAction" | "actions" | "description" | "primaryAction" | "imageContainer", string>;
+export declare const promoBannerClasses: Record<"title" | "image" | "action" | "content" | "root" | "secondaryAction" | "actions" | "description" | "primaryAction" | "imageContainer" | "demoComponentContainer", string>;
 export type PromoBannerClasses = typeof promoBannerClasses;
 export type PromoBannerClassKey = keyof PromoBannerClasses;

package/promo-banner/promo-banner-classes.js

@@ -18,4 +18,5 @@ exports.promoBannerClasses = (0, classes_1.generateUtilityClasses)(exports.promo
     'secondaryAction',
     'imageContainer',
     'image',
+    'demoComponentContainer',
 ]);

package/promo-banner/promo-banner.d.ts

@@ -17,5 +17,6 @@ export interface IPromoBannerProps extends Omit<IPaperProps, 'title'> {
     imageFullWidth?: boolean;
     image?: Pick<IImageProps, 'src' | 'alt'>;
     classes?: Partial<PromoBannerClasses>;
+    demoComponent?: React.ReactNode;
 }
 export declare const PromoBanner: React.ForwardRefExoticComponent<Omit<IPromoBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/promo-banner/promo-banner.js

@@ -162,6 +162,28 @@ var ImageContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.
         display: 'flex',
     }, _b), imagePositionClass);
 });
+var DemoComponentContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.promoBannerComponentName, slot: 'DemoComponentContainer' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var imageContainerPositionTop = {
+        alignSelf: 'flex-start',
+        paddingTop: 0,
+        paddingBottom: theme.spacing(2),
+    };
+    var imageContainerPositionCenter = {
+        alignSelf: 'center',
+        paddingTop: 0,
+        paddingBottom: 0,
+    };
+    var imagePositionClass = ownerState.imagePosition === 'top'
+        ? imageContainerPositionTop
+        : ownerState.imagePosition === 'center'
+            ? imageContainerPositionCenter
+            : {};
+    return __assign((_b = { flex: 5, paddingRight: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: 0, alignSelf: 'flex-start', display: 'none' }, _b[theme.breakpoints.up('md')] = {
+        display: 'flex',
+    }, _b), imagePositionClass);
+});
 var Img = (0, styled_1.styled)(image_1.Image, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'Image' })(function (_a) {
     var ownerState = _a.ownerState;
     var imageFullWidthClass = {
@@ -183,7 +205,7 @@ var Content = (0, styled_1.styled)(row_layout_1.RowLayout, { name: promo_banner_
         _b;
 });
 exports.PromoBanner = React.forwardRef(function (props, ref) {
-    var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes"]);
+    var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, demoComponent = props.demoComponent, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes", "demoComponent"]);
     var classes = (0, classes_1.useMergedClasses)(promo_banner_classes_1.promoBannerClasses, promo_banner_classes_1.getPromoBannerUtilityClass, propClasses);
     return (React.createElement(Root, __assign({ ref: ref, sx: sx, elevation: color === 'default' ? 0 : 5, ownerState: { color: color }, forwardedAs: "section", className: (0, clsx_1.default)(classes.root, className) }, rootProps),
         React.createElement(Content, { className: classes.content },
@@ -192,5 +214,6 @@ exports.PromoBanner = React.forwardRef(function (props, ref) {
             React.createElement(stack_layout_1.StackLayout, { gutter: 1, className: classes.actions },
                 React.createElement(stack_layout_1.StackLayoutItem, null, action && (React.createElement(PrimaryActionButton, __assign({ variant: "contained", size: "medium", color: "primary", className: (0, clsx_1.default)(classes.action, classes.primaryAction), ownerState: { color: color } }, action)))),
                 React.createElement(stack_layout_1.StackLayoutItem, null, actionSecondary && (React.createElement(SecondaryActionButton, __assign({ className: (0, clsx_1.default)(classes.action, classes.secondaryAction), color: color === 'default' ? 'primary' : undefined, ownerState: { color: color }, variant: "link", size: "medium" }, actionSecondary)))))),
-        React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))));
+        !demoComponent && (React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))),
+        !image && !!demoComponent && (React.createElement(DemoComponentContainer, { className: classes.demoComponentContainer, ownerState: { imagePosition: imagePosition } }, demoComponent))));
 });