@popmenu/ordering-ui 0.85.0 → 0.85.1

package/build/components/MenuItem/MenuItemPrice.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { MenuItemProps } from './MenuItemProps';
-export declare const MenuItemPrice: (props: Pick<MenuItemProps, 'price'>) => JSX.Element;
+export declare const MenuItemPrice: (props: Pick<MenuItemProps, 'price' | 'available'>) => JSX.Element;

package/build/components/MenuItem/MenuItemProps.d.ts

@@ -26,6 +26,6 @@ export interface MenuItemProps {
     reviewCount?: Maybe<number>;
     /** Callback for when the DishCard is clicked */
     onClick: (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Boolean for whether or not the view is in mobile */
-    isMobile: boolean;
+    /** Whether or not the menu item is available for ordering */
+    available: boolean;
 }

package/build/index.es.js

@@ -104,50 +104,60 @@ var Button$1 = forwardRef(function (props, ref) {
 });
 Button$1.displayName = 'Button';
 
-var useDishCardStyles = makeStyles(function (theme) { return ({
-    cardActionArea: {
-        display: 'flex',
-        gridGap: 16,
-        height: '100%',
-    },
-    card: {
-        // TODO: https://app.shortcut.com/popmenu/story/92467/hide-menuitem-borders-in-2-column-view-widths
-        '&:after': {
-            content: '""',
-            position: 'absolute',
-            backgroundColor: '#E0E0E0',
-            width: '100%',
-            height: 1,
-            bottom: -16,
-            left: 0,
+var useDishCardStyles = makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        cardActionArea: (_a = {
+                display: 'flex',
+                gridGap: 16,
+                height: '100%'
+            },
+            _a[theme.breakpoints.up('lg')] = {
+                border: '1px solid #E0E0E0',
+                borderRadius: theme.spacing(2),
+                padding: theme.spacing(2),
+            },
+            _a),
+        card: (_b = {},
+            _b[theme.breakpoints.down('md')] = {
+                '&:after': {
+                    content: '""',
+                    position: 'absolute',
+                    backgroundColor: '#E0E0E0',
+                    width: '100%',
+                    height: 1,
+                    bottom: -16,
+                    left: 0,
+                },
+            },
+            _b.height = 185,
+            _b.position = 'relative',
+            _b.overflow = 'visible',
+            _b),
+        cardTitle: {
+            fontWeight: 500,
+            fontSize: 18,
+            lineHeight: '27px',
+            color: theme.palette.grey[900],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
         },
-        height: 185,
-        position: 'relative',
-        overflow: 'visible',
-    },
-    cardTitle: {
-        fontWeight: 500,
-        fontSize: 18,
-        lineHeight: '27px',
-        color: theme.palette.grey[900],
-        '-webkit-line-clamp': 2,
-        display: '-webkit-box',
-        '-webkit-box-orient': 'vertical',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-    },
-    cardDescription: {
-        fontWeight: 400,
-        fontSize: 14,
-        lineHeight: '20px',
-        color: theme.palette.grey[700],
-        '-webkit-line-clamp': 2,
-        display: '-webkit-box',
-        '-webkit-box-orient': 'vertical',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-    },
-}); });
+        cardDescription: {
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: '20px',
+            color: theme.palette.grey[700],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+    });
+});
 
 var useStyles$6 = makeStyles$1(function () { return ({
     img: {
@@ -312,6 +322,27 @@ function SvgHeart(props) {
   })));
 }
 
+var _g$1c;
+
+function _extends$2d() { _extends$2d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2d.apply(this, arguments); }
+
+function SvgLock(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2d({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1c || (_g$1c = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.667 7.333H3.333C2.597 7.333 2 7.93 2 8.668v4.667c0 .736.597 1.333 1.333 1.333h9.334c.736 0 1.333-.597 1.333-1.333V8.667c0-.737-.597-1.333-1.333-1.333z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.667 7.333V4.668a3.333 3.333 0 116.666 0v2.667"
+  }))));
+}
+
 var _g$19, _defs$C;
 
 function _extends$24() { _extends$24 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$24.apply(this, arguments); }
@@ -1181,18 +1212,18 @@ var useStyles$4 = makeStyles$1(function (_a) {
         plusIcon: {
             height: '100%',
             padding: spacing(0.25),
-            background: palette.info.main,
-            color: palette.info.contrastText,
+            background: function (props) { return (props.available ? palette.info.main : 'none'); },
+            color: function (props) { return (props.available ? palette.info.contrastText : palette.warning.main); },
             borderRadius: '30px',
             marginRight: spacing(1),
         },
     });
 });
 var MenuItemPrice = function (props) {
-    var classes = useStyles$4();
+    var classes = useStyles$4(props);
     return (React__default.createElement(Box, { display: "flex", alignItems: "center" },
         React__default.createElement(Box, { display: "flex", className: classes.plusIcon },
-            React__default.createElement(Icon, { icon: SvgPlus, size: "medium" })),
+            React__default.createElement(Icon, { icon: props.available ? SvgPlus : SvgLock, size: "medium" })),
         React__default.createElement(Typography$1, null, props.price)));
 };
 
@@ -1247,7 +1278,7 @@ var MenuItem = forwardRef(function (props, ref) {
                 React__default.createElement(Typography$1, { className: classes.cardDescription, paragraph: true }, description),
                 React__default.createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }),
                 React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
-                    React__default.createElement(MenuItemPrice, { price: props.price }),
+                    React__default.createElement(MenuItemPrice, { price: props.price, available: props.available }),
                     React__default.createElement(MenuItemTags, { itemTags: props.itemTags }))),
             React__default.createElement(MenuItemImg, { image: props.image }))));
 });
@@ -1744,21 +1775,29 @@ function SvgRestaurantMenuIcon(props) {
   })))));
 }
 
-var useMenuDropdownStyles = makeStyles(function (theme) { return ({
-    select: {
-        '& .MuiSelect-root': {
-            color: '#212121',
-            padding: theme.spacing(1, 0.5, 1, 0.5),
-            zIndex: 10,
+var useMenuDropdownStyles = makeStyles(function (theme) {
+    var _a;
+    return ({
+        formControl: (_a = {},
+            _a[theme.breakpoints.up('lg')] = {
+                alignSelf: 'start',
+            },
+            _a),
+        select: {
+            '& .MuiSelect-root': {
+                color: '#212121',
+                padding: theme.spacing(1, 0.5, 1, 0.5),
+                zIndex: 10,
+            },
         },
-    },
-}); });
+    });
+});
 
 var MenuDropdown = function (props) {
     var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
     var classes = useMenuDropdownStyles(props);
     var _a = useState(false), open = _a[0], setOpen = _a[1];
-    return (React__default.createElement(FormControl, { hiddenLabel: true },
+    return (React__default.createElement(FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
         React__default.createElement(Select, { open: open, value: selectedOptionId, labelId: "menu-dropdown-select", onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
                 React__default.createElement(Icon, { icon: SvgRestaurantMenuIcon, size: "large" })), IconComponent: function () { return (React__default.createElement(InputAdornment, { position: "end" },
                 React__default.createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
@@ -1924,25 +1963,29 @@ var SelectableChip = function (props) {
         } }, props)));
 };
 
-var useSelectableChipGroupStyles = makeStyles(function (theme) { return ({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    flexContainer: {
-        gridGap: theme.spacing(1.5),
-    },
-}); });
+var useSelectableChipGroupStyles = makeStyles(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints, spacing = _a.spacing;
+    return ({
+        flexContainer: (_b = {},
+            _b[breakpoints.down('md')] = {
+                padding: spacing(0, 2),
+            },
+            _b[breakpoints.up('lg')] = {
+                alignItems: 'flex-start',
+                flexDirection: 'column',
+            },
+            _b.gridGap = spacing(1.5),
+            _b),
+    });
+});
 
 var SelectableChipGroup = function (props) {
     var children = props.children, muiProps = __rest$1(props, ["children"]);
     var classes = useSelectableChipGroupStyles(props);
     return (React__default.createElement(Tabs, __assign$1({ TabIndicatorProps: {
             hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps),
-        React__default.createElement(Box, { minWidth: "1px" }),
-        children,
-        React__default.createElement(Box, { minWidth: "1px" })));
+        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
 };
 
 var useStyles$3 = makeStyles$1(function (_a) {
@@ -1993,14 +2036,22 @@ var MenuSection = forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles$1 = makeStyles$1(function () { return ({
-    main: {
-        display: 'grid',
-        // tune so that 2x columns hit at the md breakpoint
-        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-        gridGap: 32,
-    },
-}); });
+var useStyles$1 = makeStyles$1(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints;
+    return ({
+        main: (_b = {},
+            _b[breakpoints.down('md')] = {
+                gridTemplateColumns: '1fr',
+            },
+            _b[breakpoints.up('lg')] = {
+                gridTemplateColumns: 'repeat(2, minmax(280px, 1fr))',
+            },
+            _b.display = 'grid',
+            _b.gridGap = 32,
+            _b),
+    });
+});
 
 var MenuItemGroup = forwardRef(function (props, ref) {
     var classes = useStyles$1();
@@ -2074,6 +2125,9 @@ var overrides = {
         outlined: {
             padding: 'inherit',
         },
+        textPrimary: {
+            color: '#0076CB',
+        },
     },
     MuiDialogTitle: {
         root: {
@@ -2101,6 +2155,17 @@ var overrides = {
             boxShadow: '-4px 0px 8px 0px #0000001A',
         },
     },
+    MuiDialog: {
+        paper: {
+            minWidth: 500,
+        },
+        paperWidthMd: {
+            minWidth: 640,
+        },
+        paperFullScreen: {
+            minWidth: 'unset',
+        },
+    },
 };
 
 var props = {