@popmenu/ordering-ui 0.99.0 → 0.100.0

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

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { CardActionAreaProps } from '@material-ui/core';
 import { CardProps as MuiCardProps } from '@material-ui/core/Card';
 export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
@@ -6,18 +5,20 @@ export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
     name: string;
     /** Renders the address of the restaurant location */
     address?: string;
-    /** Renders the appropriate availability of the restaurant location */
-    availability?: string | ReactNode;
+    /** Renders the general availability hours of the restaurant location. */
+    generalAvailability?: string;
+    /** Renders the pickup availability hours of the restaurant location */
+    pickupAvailability?: string;
+    /** Renders the delivery availability hours of the restaurant location */
+    deliveryAvailability?: string;
     /** Renders the distance of the restaurant location (if applicable) */
     distance?: string;
     /** Callback for when the LocationCard is clicked */
-    onClick: (value: string) => void;
+    onClick: (value: number) => void;
     /** Sets card selection state */
     selected?: boolean;
     /** The value of a card in respects to selection state. */
-    value: string;
+    value: number;
     /** Props passed to the CardActionArea rendered by SelectableCard. */
     CardActionAreaProps?: CardActionAreaProps;
-    /** Unique label for the location card */
-    labelId: string;
 }

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

@@ -32,4 +32,6 @@ export interface MenuItemProps {
     available: boolean;
     /** Renders out of stock tag */
     isOutOfStock?: Maybe<boolean>;
+    /** Renders the featured tag when true */
+    isFeatured?: Maybe<boolean>;
 }

package/build/components/StatusTag/StatusTagProps.d.ts

@@ -4,7 +4,7 @@ export interface StatusTagProps {
     /** Renders the message of the tag */
     label: string;
     /** Renders the color of the tag */
-    color: 'default' | 'error' | 'warning';
+    color: 'default' | 'error' | 'warning' | 'highlight';
     /** Changes the padding sizes */
     size?: 'md' | 'sm';
 }

package/build/index.es.js

@@ -1374,6 +1374,10 @@ var useStatusTagStyles = makeStyles(function (theme) { return ({
         borderColor: theme.palette.error.main,
         color: theme.palette.error.main,
     },
+    highlight: {
+        backgroundColor: theme.palette.warning.light,
+        color: theme.palette.grey[900],
+    },
 }); });
 
 var classnames = {exports: {}};
@@ -1449,7 +1453,7 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var MenuItem = forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading;
+    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured;
     var classes = useMenuItemStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
@@ -1457,6 +1461,7 @@ var MenuItem = forwardRef(function (props, ref) {
     return (React__default.createElement(Card, { className: classes.card, ref: ref, elevation: 0, "data-component-type": "menu-item" },
         React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading },
             React__default.createElement(MenuItemInfo, null,
+                isFeatured && React__default.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "outlined", size: "sm" }),
                 React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center" },
                     React__default.createElement(Typography$1, { className: classes.cardTitle }, loading ? React__default.createElement(Skeleton, null) : title),
                     isOutOfStock && React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
@@ -1878,8 +1883,12 @@ var useLocationCardStyles = makeStyles(function (theme) {
         },
         availability: {
             color: secondary.light,
-            display: 'flex',
+            display: 'grid',
             gridGap: spacing(0.5),
+            gridTemplateColumns: 'auto 1fr',
+        },
+        availabilityMessage: {
+            gridColumn: '2 / 3',
         },
         checkIcon: {
             color: info.main,
@@ -1910,13 +1919,14 @@ var useLocationCardStyles = makeStyles(function (theme) {
 });
 
 var LocationCard = function (props) {
-    var name = props.name, address = props.address, distance = props.distance, availability = props.availability, onClick = props.onClick, selected = props.selected, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "availability", "onClick", "selected", "value", "labelId", "CardActionAreaProps"]);
+    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "CardActionAreaProps"]);
     var classes = useLocationCardStyles(props);
+    var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
     var handleClick = function () {
         onClick(value);
     };
     return (React__default.createElement(Card$1, __assign$1({ className: classes.root }, muiProps),
-        React__default.createElement(CardActionArea$1, __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+        React__default.createElement(CardActionArea$1, __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected }, CardActionAreaProps),
             React__default.createElement(CardContent, { className: classes.content },
                 React__default.createElement(Box, { className: classes.locationInfo },
                     React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
@@ -1924,9 +1934,11 @@ var LocationCard = function (props) {
                         selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
                     address && (React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default.createElement(Typography, { className: classes.distance }, distance)),
-                availability && (React__default.createElement(Box, { className: classes.availability },
+                anyAvailability && (React__default.createElement(Box, { className: classes.availability },
                     React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
-                    React__default.createElement(Typography, { variant: "body2" }, availability)))))));
+                    generalAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability))))))));
 };
 
 var useMenuDropdownStyles = makeStyles(function (theme) {