@popmenu/ordering-ui 0.98.0 → 0.99.1

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/index.es.js

@@ -1878,8 +1878,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 +1914,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 +1929,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) {