@popmenu/ordering-ui 0.99.1 → 0.101.0

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" })),