@sendoutcards/quantum-design-ui 1.6.8 → 1.6.9

package/dist/index.es.js

@@ -8,7 +8,7 @@ import LazyLoad from 'react-lazyload';
 import useResizeObserver from 'use-resize-observer';
 import ContentLoader from 'react-content-loader';
 import InfiniteScroll from 'react-infinite-scroller';
-import { Page as Page$1 } from 'framer';
+import { Page as Page$1, AnimatePresence as AnimatePresence$1 } from 'framer';
 import { HexColorPicker } from 'react-colorful';
 import { EyeDropper } from 'react-eyedrop';
 
@@ -11718,7 +11718,8 @@ var Tooltip = function (_a) {
       direction = _a.direction,
       _b = _a.background,
       background = _b === void 0 ? 'light' : _b,
-      repositionTooltip = _a.repositionTooltip;
+      repositionTooltip = _a.repositionTooltip,
+      zIndex = _a.zIndex;
   var tooltip = useEntities().tooltip;
   var backgroundColor = background === 'light' ? tooltip.lightBackgroundColor : tooltip.darkBackgroundColor ? tooltip.darkBackgroundColor : tooltip.lightBackgroundColor; // TODO this is because the dark bg color is set from a color swatch which can alter through the theme, come up with fix when colors get sorted out
 
@@ -11729,7 +11730,8 @@ var Tooltip = function (_a) {
       vertical: 'x_5',
       horizontal: 'x1'
     },
-    boxShadow: tooltip.boxShadow
+    boxShadow: tooltip.boxShadow,
+    zIndex: zIndex
   }, jsx(Text, {
     type: "footnote",
     color: background === 'light' ? 'primaryBody' : 'inverseBody',
@@ -12108,7 +12110,8 @@ var Overlay = function (_a) {
       exit = _a.exit,
       variants = _a.variants,
       transition = _a.transition,
-      motionKey = _a.motionKey;
+      motionKey = _a.motionKey,
+      position = _a.position;
   var hocs = useEntities().hocs;
   return jsx(Div, {
     motionKey: motionKey,
@@ -12121,7 +12124,7 @@ var Overlay = function (_a) {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    position: "fixed",
+    position: position !== null && position !== void 0 ? position : 'fixed',
     top: "0",
     left: "0",
     width: "100%",
@@ -16046,13 +16049,9 @@ var DownloadButton = function (_a) {
 var StackedCards = function (_a) {
   var size = _a.size,
       _b = _a.stackCount,
-      stackCount = _b === void 0 ? 7 : _b,
+      stackCount = _b === void 0 ? 3 : _b,
       children = _a.children;
   var stackCountArr = Array.from(Array(stackCount).keys());
-  var cardPositionStyles = {
-    position: 'absolute',
-    transformOrigin: 'center top'
-  };
 
   var getDimensionsFromSize = function () {
     if (typeof size === 'object') {
@@ -16082,95 +16081,98 @@ var StackedCards = function (_a) {
 
   return jsx(Flex, {
     position: "relative",
-    justifyContent: 'center',
-    alignContent: "center"
+    justifyContent: 'flex-start',
+    alignContent: "center",
+    width: getDimensionsFromSize().width + stackCountArr.length * 8 + "px",
+    height: getDimensionsFromSize().height + "px"
   }, stackCountArr.map(function (_, index) {
-    var offset = 11 - stackCountArr.length;
-    return jsx(Card, _extends({
+    index += 1;
+    return jsx(Card, {
       key: index,
       backgroundColor: "foreground",
-      style: {
-        padding: 0
-      },
       width: getDimensionsFromSize().width + "px",
       height: getDimensionsFromSize().height + "px",
-      transform: "scale(" + (index + offset) / 10 + ") translate(100%, -50%)"
-    }, cardPositionStyles), index === stackCountArr.length - 1 && children);
+      style: {
+        scale: 1 - index / 10,
+        translateY: '-50%'
+      },
+      position: "absolute",
+      left: index * 8 + "px",
+      top: '50%',
+      boxShadow: "mediumLight",
+      zIndex: stackCountArr.length - index
+    }, index === stackCountArr.length - 1 && children);
   }));
 };
 
 var ConfigurationCard = function (_a) {
-  var _b = _a.graphic,
-      graphic = _b === void 0 ? 'addressed' : _b,
-      _c = _a.title,
-      title = _c === void 0 ? 'Blank Envelopes' : _c,
-      _d = _a.description,
-      description = _d === void 0 ? 'Address and send yourself' : _d,
-      _e = _a.cost,
-      cost = _e === void 0 ? 0.29 : _e,
+  var graphic = _a.graphic,
+      title = _a.title,
+      description = _a.description,
+      cost = _a.cost,
       isSelected = _a.isSelected,
       onSelect = _a.onSelect,
-      _f = _a.layout,
-      layout = _f === void 0 ? 'horizontal' : _f,
+      _b = _a.layout,
+      layout = _b === void 0 ? 'horizontal' : _b,
       configurationId = _a.configurationId,
-      _g = _a.itemTitle,
-      itemTitle = _g === void 0 ? 'per envelope' : _g;
-
-  var handleIsSelected = function () {
-    onSelect(configurationId);
-  };
-
-  return jsx(Flex, {
-    onClick: handleIsSelected,
+      itemPriceTitle = _a.itemPriceTitle;
+  var hasNoGraphic = graphic !== 'none';
+  return jsx(Card, {
+    onClick: function () {
+      return onSelect(configurationId);
+    },
     width: layout === 'horizontal' ? '100%' : 'initial',
     flexDirection: layout === 'vertical' ? 'column' : 'row',
     position: "relative",
-    cursor: "pointer"
-  }, isSelected && jsx(Div, {
-    right: "x1",
-    position: "absolute",
-    top: "x1"
-  }, jsx(AnimatedCheckMark, null)), jsx(Div, {
+    boxShadow: "mediumDark",
+    backgroundColor: graphic === 'none' ? 'background' : 'foreground',
+    cursor: "pointer",
+    inset: {
+      vertical: 'x4',
+      horizontal: 'x1'
+    },
+    borderWidth: "default",
+    borderRadius: "default",
     borderStyle: "solid",
     borderColor: isSelected ? {
       swatch: 'success',
       shade: 'base'
     } : 'transparent',
-    borderWidth: "default",
-    borderRadius: "default",
-    width: "100%",
-    height: "100%",
-    boxShadow: "mediumDark",
-    inset: {
-      left: 'x2',
-      vertical: 'x4'
-    }
-  }, jsx(Flex, {
-    justifyContent: "space-between",
-    height: "100%"
-  }, jsx(HStack, {
-    justify: "flex-start",
-    gap: "x3"
+    minWidth: "420px"
   }, jsx(Div, {
-    height: "100%"
-  }, jsx(Card, {
-    width: "75px",
-    height: "50px"
-  }, graphic)), jsx(Div, null, jsx(Text, {
+    right: "x1",
+    position: "absolute",
+    top: "x1"
+  }, isSelected && hasNoGraphic ? jsx(AnimatedCheckMark, null) : (graphic === 'none' && !isSelected || isSelected) && jsx(Icon, {
+    name: "information",
+    size: "small",
+    primaryColor: "secondaryBrand"
+  })), jsx(Flex, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    flexDirection: layout === 'horizontal' ? 'row' : 'column'
+  }, jsx(StackedCards, {
+    size: "small",
+    stackCount: 3
+  }), jsx(Text, {
     weight: "bold",
-    type: "largeBody"
+    type: {
+      xSmall: 'body',
+      medium: 'largeBody'
+    },
+    whiteSpace: "nowrap"
   }, title, jsx(Text, {
-    type: "footnote"
-  }, description)))), jsx(Div, {
-    outset: "x2",
-    position: "relative",
-    justifyContent: "flex-end"
-  }, cost && jsx(Div, {
-    width: "100%"
-  }, jsx(Text, {
-    type: "caption",
-    content: " $" + (typeof cost === 'number' ? "" + cost.toFixed(2) : cost) + " " + itemTitle
-  }))))));
+    type: {
+      xSmall: 'footnote',
+      medium: 'caption'
+    },
+    whiteSpace: "nowrap"
+  }, description)), cost && jsx(Text, {
+    type: "footnote",
+    whiteSpace: "nowrap",
+    content: " $" + (typeof cost === 'number' ? "" + cost.toFixed(2) : cost) + " " + itemPriceTitle
+  })));
 };
 
 var _emotionSourceMap2$a = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHVzZXJDYXJkQ29udGFpbmVyOiBjc3ModGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICBcIl0sIFtcIlxcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICBcIl0pKSksXHJcbiAgICB1c2VySW5mb0NvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xcbiAgXCJdLCBbXCJcXG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xcbiAgXCJdKSkpLFxyXG59O1xyXG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */";
@@ -20146,7 +20148,10 @@ var QuantitySlider = function (_a) {
       quantityDescription = _a.quantityDescription,
       width = _a.width,
       hasIncrement = _a.hasIncrement;
-  return jsx(Div, null, jsx(Text, {
+  return jsx(Flex, {
+    justifyContent: "center",
+    flexDirection: "column"
+  }, jsx(Text, {
     type: "subtitle",
     weight: "bold",
     color: "primaryHeading",
@@ -20198,7 +20203,9 @@ var QuantitySlider = function (_a) {
     style: {
       letterSpacing: '1px'
     }
-  }), hasIncrement ? jsx(React.Fragment, null, jsx(Spacer, {
+  }), hasIncrement ? jsx(Div, {
+    width: "370px"
+  }, jsx(Spacer, {
     orientation: "vertical",
     space: "x2"
   }), jsx(IncrementSetting, {
@@ -20206,11 +20213,12 @@ var QuantitySlider = function (_a) {
     min: min,
     max: max,
     value: quantity,
-    layout: "inlineBlock",
+    layout: "inline",
     setValue: function (quantity) {
       return setQuantity(quantity);
     },
-    activeColor: sliderFill
+    activeColor: sliderFill,
+    inputWidth: width
   })) : jsx(Slider, {
     min: min,
     max: max,
@@ -20644,7 +20652,9 @@ var BulkSend = function (_a) {
       setIsActive = _a.setIsActive,
       addDialog = _a.addDialog,
       removeDialog = _a.removeDialog,
-      hasIncrement = _a.hasIncrement;
+      hasIncrement = _a.hasIncrement,
+      isConfigurable = _a.isConfigurable,
+      disableMessage = _a.disableMessage;
 
   var _b = React.useState(false),
       isAddDialogOpen = _b[0],
@@ -20669,6 +20679,14 @@ var BulkSend = function (_a) {
     setIsAddDialogOpen(true);
   };
 
+  var overlayVariants = {
+    open: {
+      opacity: 0.5
+    },
+    closed: {
+      opacity: 0
+    }
+  };
   return jsx(Flex, {
     inset: "x3",
     flexDirection: {
@@ -20735,11 +20753,41 @@ var BulkSend = function (_a) {
       xSmall: 2,
       medium: 0
     }
-  }, jsx(Div, {
+  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Overlay, {
+    variants: overlayVariants,
+    initial: 'closed',
+    animate: !isConfigurable ? 'open' : 'closed',
+    exit: 'closed',
+    zIndex: 1
+  })), jsx(Div, {
     outset: {
       bottom: 'x3'
+    },
+    position: "relative"
+  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Flex, {
+    position: "absolute",
+    top: "-32px",
+    initial: {
+      opacity: 0
+    },
+    animate: !isConfigurable ? {
+      opacity: 1
+    } : {
+      opacity: 0
+    },
+    exit: {
+      opacity: 0
+    },
+    transition: {
+      delay: 0.3,
+      duration: 0.3
     }
-  }, jsx(Text, {
+  }, jsx(Tooltip, {
+    title: disableMessage,
+    direction: "bottom",
+    background: "light",
+    zIndex: 2
+  }))), jsx(Text, {
     type: {
       xSmall: 'largeBody',
       medium: 'subtitle',
@@ -20755,10 +20803,10 @@ var BulkSend = function (_a) {
       large: 'largeBody'
     },
     content: description
-  })), isActive && jsx(React.Fragment, null, configurationSections.map(function (section, index) {
+  })), isActive && isConfigurable ? jsx(React.Fragment, null, configurationSections.map(function (section, index) {
     return jsx(React.Fragment, null, jsx(Flex, {
       flexDirection: "column",
-      maxWidth: "450px",
+      maxWidth: "480px",
       key: index
     }, jsx(Div, {
       outset: {
@@ -20789,8 +20837,10 @@ var BulkSend = function (_a) {
         large: 'largeBody'
       },
       content: section.description
-    })), section.configurationList.map(function (config, index) {
-      return jsx(React.Fragment, null, jsx(ConfigurationCard, {
+    })), jsx(VStack, {
+      gap: "x1"
+    }, section.configurationList.map(function (config, index) {
+      return jsx(ConfigurationCard, {
         key: index,
         graphic: config.graphicType,
         title: config.configurationTitle,
@@ -20799,20 +20849,18 @@ var BulkSend = function (_a) {
         onSelect: function () {
           section.setActiveConfigurationId(config.configurationId);
         },
-        isSelected: config.configurationId === section.activeConfigurationId,
-        cost: config.configurationPrice
-      }), jsx(Spacer, {
-        orientation: "vertical",
-        space: "x2"
-      }));
-    }), index !== configurationSections.length - 1 && jsx(Div, {
+        isSelected: false,
+        cost: config.configurationPrice,
+        itemPriceTitle: config.configurationItemPriceTitle
+      });
+    })), index !== configurationSections.length - 1 && jsx(Div, {
       outset: {
         vertical: 'x2'
       }
     }, jsx(Separator, {
       orientation: "horizontal"
     }))));
-  }))), jsx(Flex, {
+  })) : !isConfigurable && undefined), jsx(Flex, {
     width: {
       xSmall: '100%',
       medium: '50%'
@@ -20824,7 +20872,7 @@ var BulkSend = function (_a) {
       xSmall: 1,
       medium: 0
     }
-  }, jsx(Flex, null, jsx(QuantitySlider, {
+  }, jsx(QuantitySlider, {
     unitPrice: unitPrice,
     salePrice: salePrice,
     quantityDescription: quantityDescription,
@@ -20837,7 +20885,7 @@ var BulkSend = function (_a) {
     },
     sliderFill: sliderFill,
     hasIncrement: hasIncrement
-  })), jsx(Flex, {
+  }), jsx(Flex, {
     outset: {
       top: 'x4'
     }
@@ -20845,7 +20893,7 @@ var BulkSend = function (_a) {
     type: "secondary",
     size: "medium",
     title: isActive ? 'Remove Bulk Option' : 'Add Bulk Option',
-    onClick: isActive ? handleSetRemoveDialog : handleSetAddDialog,
+    onClick: isActive && isConfigurable ? handleSetRemoveDialog : !isConfigurable ? undefined : handleSetAddDialog,
     fullWidth: true,
     outlined: true
   }))));

package/dist/src/molecules/configurationCard/configurationCard.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 export declare type ConfigurationCardProps = {
-    graphic: 'blank' | 'addressed' | 'withStamp';
+    graphic: 'blank' | 'addressed' | 'withStamp' | 'none';
     title: string;
     description: string;
     cost?: number | string;
@@ -8,6 +8,6 @@ export declare type ConfigurationCardProps = {
     onSelect: (configurationId: string) => void;
     layout?: 'horizontal' | 'vertical';
     configurationId: string;
-    itemTitle?: string;
+    itemPriceTitle?: string;
 };
 export declare const ConfigurationCard: FC<ConfigurationCardProps>;

package/dist/src/molecules/overlay/overlay.d.ts

@@ -1,6 +1,9 @@
 import { FC } from 'react';
 import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
+import { Responsive } from "../../helpers/hoc-types/entityValueTypes";
+import { Position } from "../../helpers/hoc-types/cssValueTypes";
 export declare type OverlayPropTypes = {
     zIndex?: number;
+    position?: Responsive<Position> | Position;
 } & HOCMotionProps;
 export declare const Overlay: FC<OverlayPropTypes>;

package/dist/src/molecules/tooltip/tooltip.d.ts

@@ -5,6 +5,7 @@ export declare type TooltipProps = {
     direction: DirectionType;
     background?: ColorModeType;
     repositionTooltip?: boolean;
+    zIndex?: number;
 };
 export declare type DirectionType = 'left' | 'right' | 'top' | 'bottom';
 export declare const Tooltip: FC<TooltipProps>;

package/dist/src/portfolios/soc/components/bulkSend/bulkSend.d.ts

@@ -10,11 +10,12 @@ export declare type ConfigurationOptionSection = {
     configurationList: ConfigurationListOption[];
 };
 declare type ConfigurationListOption = {
-    graphicType: 'blank' | 'addressed' | 'withStamp';
+    graphicType: 'blank' | 'addressed' | 'withStamp' | 'none';
     configurationId: string;
     configurationTitle: string;
     configurationDescription: string;
     configurationPrice?: number;
+    configurationItemPriceTitle?: string;
 };
 export declare type BulkSendProps = {
     quantity: number;
@@ -35,6 +36,8 @@ export declare type BulkSendProps = {
     addDialog?: ConfirmDialogProps;
     removeDialog?: ConfirmDialogProps;
     hasIncrement?: boolean;
+    isConfigurable?: boolean;
+    disableMessage: string;
 };
 export declare const BulkSend: FC<BulkSendProps>;
 export {};

package/dist/src/stories/molecules/ConfigurationCard.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react/types-6-0';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
 export declare const ConfigurationCardWithCallback: any;
+export declare const ConfigurationInfoCard: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",