@popmenu/ordering-ui 0.84.2 → 0.85.0

package/build/components/DialogSection/DialogSection.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface DialogSectionProps {
+    edgeToEdge?: boolean;
+    borderBottom?: boolean;
+}
+export declare const DialogSection: (props: PropsWithChildren<DialogSectionProps>) => JSX.Element;
+export {};

package/build/components/DialogSection/index.d.ts

@@ -0,0 +1 @@
+export { DialogSection } from './DialogSection';

package/build/components/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface DialogTitleProps {
+    title: string;
+    Icon?: ReactNode;
+    onClose: () => void;
+}
+export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
+export {};

package/build/components/DialogTitle/index.d.ts

@@ -0,0 +1 @@
+export { DialogTitle } from './DialogTitle';

package/build/components/DishCheckoutCard/DishCheckoutCardProps.d.ts

@@ -1,4 +1,6 @@
 export interface DishCheckoutCardProps {
+    /** Adds a border to the bottom of the card */
+    borderBottom?: boolean;
     /** Modifiers of the dish in tuple format */
     modifiers?: [string, string][];
     /** Id of the dish */

package/build/components/DishDetailsReview/DishDetailsReviewProps.d.ts

@@ -1,10 +1,10 @@
 export interface DishDetailsReviewProps {
     /** name of the restaurant follower user who posted the review */
-    userName: string;
+    userName?: string;
     /** url information for follower profile picture that may be provided */
-    userAvatarUrl: string | undefined;
+    userAvatarUrl?: string;
     /** the text of the review */
     content: string;
-    /** the text represeantation of the relative current time since the review was created */
-    timeSinceCreated: string;
+    /** time since the review was created */
+    createdAgo: string;
 }

package/build/components/DishModifierCard/DishModifierCardProps.d.ts

@@ -1,12 +1,12 @@
 declare type ModifierValue = {
-    id: number | string;
-    price?: number | null;
+    id: number;
+    price?: number;
     quantity?: number;
 };
 declare type Modifier = {
     id: number;
     name: string;
-    price: string | null;
+    price?: string;
 };
 declare type OnChange = (value: Array<ModifierValue>, checked?: boolean) => void;
 interface Base {

package/build/components/LocationCard/LocationCardProps.d.ts

@@ -5,7 +5,7 @@ export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
     /** Renders the name of the restaurant location */
     name: string;
     /** Renders the address of the restaurant location */
-    address: string;
+    address?: string;
     /** Renders the appropriate availability of the restaurant location */
     availability?: string | ReactNode;
     /** Renders the distance of the restaurant location (if applicable) */

package/build/components/index.d.ts

@@ -21,3 +21,5 @@ export { MenuSectionGroup } from './MenuSectionGroup';
 export { MenuSection, MenuSectionProps } from './MenuSection';
 export { MenuItemGroup } from './MenuItemGroup';
 export { PageSection } from './PageSection';
+export { DialogTitle } from './DialogTitle';
+export { DialogSection } from './DialogSection';

package/build/index.es.js

@@ -1,4 +1,4 @@
-import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField, Tabs, Chip } from '@material-ui/core';
+import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1 } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, createContext, useContext, useState } from 'react';
@@ -149,7 +149,7 @@ var useDishCardStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
-var useStyles$5 = makeStyles$1(function () { return ({
+var useStyles$6 = makeStyles$1(function () { return ({
     img: {
         objectFit: 'cover',
         width: '100%',
@@ -159,7 +159,7 @@ var useStyles$5 = makeStyles$1(function () { return ({
 var MenuItemImg = function (props) {
     var _a = props.image, image = _a === void 0 ? {} : _a;
     var src = image.src, alt = image.alt;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     if (!src || !alt) {
         return null;
     }
@@ -251,6 +251,24 @@ function SvgClock(props) {
   })))));
 }
 
+var _path$13;
+
+function _extends$2r() { _extends$2r = 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$2r.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2r({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$1m, _defs$J;
 
 function _extends$2q() { _extends$2q = 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$2q.apply(this, arguments); }
@@ -969,7 +987,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$4 = makeStyles$1(function (_a) {
+var useStyles$5 = makeStyles$1(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -983,7 +1001,7 @@ var useStyles$4 = makeStyles$1(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4(props);
+    var classes = useStyles$5(props);
     return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1157,7 +1175,7 @@ var MenuItemReactions = function (props) {
         showReviews && React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0 })));
 };
 
-var useStyles$3 = makeStyles$1(function (_a) {
+var useStyles$4 = makeStyles$1(function (_a) {
     var palette = _a.palette, spacing = _a.spacing;
     return ({
         plusIcon: {
@@ -1171,7 +1189,7 @@ var useStyles$3 = makeStyles$1(function (_a) {
     });
 });
 var MenuItemPrice = function (props) {
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     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" })),
@@ -1237,13 +1255,23 @@ MenuItem.displayName = 'MenuItem';
 
 var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
         color: theme.palette.grey[900],
         padding: theme.spacing(2, 0),
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        border: '1px',
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -1251,6 +1279,11 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     editButton: {
         color: theme.palette.info.main,
     },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
     price: {
         fontSize: '18px',
     },
@@ -1258,10 +1291,10 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         paddingLeft: 'unset',
         borderRadius: '25px',
         '& fieldset': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
             borderWidth: '1px',
         },
         '& .MuiSelect-root': {
@@ -1308,7 +1341,7 @@ var DishCheckoutCard = function (props) {
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default.createElement(Box, null,
-                React__default.createElement(Typography, { variant: "h6" }, name),
+                React__default.createElement(Typography, { variant: "h6", className: classes.name }, name),
                 modifiers &&
                     modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
@@ -1342,14 +1375,14 @@ var DishCheckoutCard = function (props) {
 };
 
 var DishDetailsReview = forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, timeSinceCreated = props.timeSinceCreated;
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo;
     return (React__default.createElement(Box, { display: "flex" },
         React__default.createElement(Box, { mr: 1 },
             React__default.createElement(Avatar, { size: "small", src: userAvatarUrl })),
         React__default.createElement(Box, { width: "100%" },
             React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
                 React__default.createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, timeSinceCreated)),
+                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
             React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
@@ -1672,11 +1705,11 @@ var LocationCard = function (props) {
                     React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
                         React__default.createElement(Typography, { className: classes.name }, name),
                         selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address),
+                    address && (React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default.createElement(Typography, { className: classes.distance }, distance)),
-                React__default.createElement(Box, { className: classes.availability },
+                availability && (React__default.createElement(Box, { className: classes.availability },
                     React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
-                    React__default.createElement(Typography, { variant: "body2" }, availability))))));
+                    React__default.createElement(Typography, { variant: "body2" }, availability)))))));
 };
 
 var _g, _defs;
@@ -1742,8 +1775,9 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id }, option.name)); }))));
 };
 
-var useMenuFilterStyles = makeStyles(function () { return ({
+var useMenuFilterStyles = makeStyles(function (theme) { return ({
     triggerLabel: {
+        color: theme.palette.info.main,
         whiteSpace: 'nowrap',
     },
 }); });
@@ -1911,7 +1945,7 @@ var SelectableChipGroup = function (props) {
         React__default.createElement(Box, { minWidth: "1px" })));
 };
 
-var useStyles$2 = makeStyles$1(function (_a) {
+var useStyles$3 = makeStyles$1(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1929,7 +1963,7 @@ var useStyles$2 = makeStyles$1(function (_a) {
 });
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     return (React__default.createElement(React__default.Fragment, null, filters.map(function (filter, index) { return (React__default.createElement(Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default.createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default.createElement(React__default.Fragment, null,
             React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
             React__default.createElement(Typography$1, { variant: "caption" }, filter.name)) })); })));
@@ -1941,7 +1975,7 @@ var MenuSectionGroup = forwardRef(function (props, ref) {
 });
 MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-var useStyles$1 = makeStyles$1(function () { return ({
+var useStyles$2 = makeStyles$1(function () { return ({
     title: {
         fontWeight: 400,
         fontSize: 20,
@@ -1951,7 +1985,7 @@ var useStyles$1 = makeStyles$1(function () { return ({
 
 var MenuSection = forwardRef(function (props, ref) {
     var name = props.name, children = props.children, restProps = __rest$1(props, ["name", "children"]);
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     return (React__default.createElement(Box, __assign$1({}, restProps, { ref: ref }, { "data-component-type": "menu-section" }),
         React__default.createElement(Box, { marginTop: 1, marginBottom: 4 },
             React__default.createElement(Typography$1, { className: classes.title }, name)),
@@ -1959,7 +1993,7 @@ var MenuSection = forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles = makeStyles$1(function () { return ({
+var useStyles$1 = makeStyles$1(function () { return ({
     main: {
         display: 'grid',
         // tune so that 2x columns hit at the md breakpoint
@@ -1969,13 +2003,33 @@ var useStyles = makeStyles$1(function () { return ({
 }); });
 
 var MenuItemGroup = forwardRef(function (props, ref) {
-    var classes = useStyles();
+    var classes = useStyles$1();
     return (React__default.createElement(Box, __assign$1({ className: classes.main }, { ref: ref }, { "data-component-type": "menu-item-group" }), props.children));
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
 var PageSection = function (props) { return (React__default.createElement(Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
 
+var useStyles = makeStyles$1(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, onClose = props.onClose;
+    var classes = useStyles();
+    return (React__default.createElement(DialogTitle$1, null,
+        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React__default.createElement(Typography$1, { variant: "h6" }, title)),
+        React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React__default.createElement(SvgX, null))));
+};
+
+var DialogSection = function (props) {
+    return (React__default.createElement(Box, { paddingTop: 4, paddingBottom: props.borderBottom ? 4 : 0, paddingX: props.edgeToEdge ? 0 : 2, borderBottom: props.borderBottom ? '1px solid #E0E0E0' : undefined }, props.children));
+};
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2015,6 +2069,36 @@ var overrides = {
         root: {
             borderRadius: 32,
             textTransform: 'none',
+            padding: '18px 16px',
+        },
+        outlined: {
+            padding: 'inherit',
+        },
+    },
+    MuiDialogTitle: {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #E0E0E0',
+        },
+    },
+    MuiDialogContent: {
+        root: {
+            '&:first-child': {
+                paddingTop: 0,
+            },
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    MuiDialogActions: {
+        root: {
+            padding: 16,
+            boxShadow: '-4px 0px 8px 0px #0000001A',
         },
     },
 };
@@ -2023,6 +2107,9 @@ var props = {
     MuiButton: {
         disableElevation: true,
     },
+    MuiDialogTitle: {
+        disableTypography: true,
+    },
 };
 
 var fonts = ['"Poppins"', '"sans-serif"'];
@@ -2090,5 +2177,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme, useOrderingAppContext };
+export { Button$1 as Button, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme, useOrderingAppContext };
 //# sourceMappingURL=index.es.js.map