@popmenu/ordering-ui 0.75.0 → 0.76.0

package/build/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var core = require('@material-ui/core');
 var React = require('react');
 require('@material-ui/lab/Alert');
-var core = require('@material-ui/core');
 require('@material-ui/core/AppBar');
 var MuiAvatar = require('@material-ui/core/Avatar');
 var styles = require('@material-ui/core/styles');
@@ -132,6 +132,23 @@ function __rest$1(s, e) {
     return t;
 }
 
+var Button$1 = React.forwardRef(function (props, ref) {
+    var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["variation"]);
+    var variationProps = {};
+    switch (variation) {
+        case 'primary':
+            variationProps.variant = 'contained';
+            variationProps.color = 'primary';
+            break;
+        case 'secondary':
+            variationProps.variant = 'outlined';
+            variationProps.color = 'primary';
+            break;
+    }
+    return React__default['default'].createElement(core.Button, __assign$1({}, variationProps, muiProps, { ref: ref }));
+});
+Button$1.displayName = 'Button';
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -518,7 +535,7 @@ styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var useButtonStyles$1 = styles.makeStyles(function () { return ({
+var useButtonStyles = styles.makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -530,10 +547,10 @@ var useButtonStyles$1 = styles.makeStyles(function () { return ({
     },
 }); });
 
-var Button$1 = React.forwardRef(function (props, ref) {
+var Button = React.forwardRef(function (props, ref) {
     props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
     props.classes; var styleProps = __rest(props, ["classes"]);
-    var classes = useButtonStyles$1(styleProps);
+    var classes = useButtonStyles(styleProps);
     var typography = styles.useTheme().typography;
     var loadingIndicator = {
         startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
@@ -541,7 +558,7 @@ var Button$1 = React.forwardRef(function (props, ref) {
     };
     return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
-Button$1.displayName = 'Button';
+Button.displayName = 'Button';
 
 var Checkbox = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
@@ -550,7 +567,7 @@ var Checkbox = React.forwardRef(function (props, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var getBackground$1 = function (theme) { return function (props) {
+var getBackground = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var background = theme.palette.grey[100];
     var backgrounds = {
@@ -569,7 +586,7 @@ var getBackground$1 = function (theme) { return function (props) {
     }
     return background;
 }; };
-var getColor$1 = function (theme) { return function (props) {
+var getColor = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var textColor;
     if (variant === 'outlined' && severity) {
@@ -611,8 +628,8 @@ var getBorder = function (theme) { return function (props) {
 }; };
 var useChipStyles = styles.makeStyles(function (theme) { return ({
     root: {
-        background: getBackground$1(theme),
-        color: getColor$1(theme),
+        background: getBackground(theme),
+        color: getColor(theme),
         borderColor: getBorder(theme),
         borderRadius: theme.spacing(0.5),
     },
@@ -978,103 +995,6 @@ core.makeStyles(function (theme) { return ({
     },
 }); });
 
-var getColor = function (theme) { return function (props) {
-    var variant = props.variant;
-    if (variant === 'primary') {
-        return theme.palette.common.white;
-    }
-    else if (variant === 'text') {
-        return theme.palette.info.main;
-    }
-    return theme.palette.common.black;
-}; };
-var getBackground = function (theme) { return function (props) {
-    var variant = props.variant;
-    if (variant === 'primary') {
-        return '#0A202F';
-    }
-    else {
-        return theme.palette.common.white;
-    }
-}; };
-var getFontSize = function () { return function (props) {
-    var variant = props.variant;
-    if (variant === 'primary') {
-        return '1rem';
-    }
-    else {
-        return '0.875rem';
-    }
-}; };
-var buttonTypography = {
-    fontWeight: 400,
-    lineHeight: '1.25rem',
-};
-var useButtonStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        borderRadius: theme.spacing(6),
-        color: getColor(theme),
-        background: getBackground(theme),
-        fontSize: getFontSize(),
-        textTransform: 'none',
-        minWidth: 'unset',
-    },
-    disabled: {
-        '&$root': {
-            background: theme.palette.grey[300],
-        },
-    },
-    contained: {
-        padding: theme.spacing(2),
-        '&:hover': {
-            background: getBackground(theme),
-        },
-    },
-    outlined: {
-        padding: theme.spacing(2),
-    },
-    sizeSmall: {
-        padding: theme.spacing(1, 2),
-    },
-    text: {
-        padding: theme.spacing(1),
-        margin: 'auto',
-    },
-    label: __assign$1({}, buttonTypography),
-}); });
-
-var deriveButtonProps = function (buttonProps) {
-    var variant = buttonProps.variant;
-    var derived = {};
-    switch (variant) {
-        case 'primary':
-            derived.variant = 'contained';
-            break;
-        case 'secondary':
-            derived.variant = 'outlined';
-            break;
-        case 'text':
-            derived.variant = 'text';
-            break;
-        default:
-            derived.variant = variant;
-            break;
-    }
-    return derived;
-};
-
-var Button = React.forwardRef(function (props, ref) {
-    var children = props.children; props.variant; var classesOverride = props.classes, commonProps = __rest$1(props, ["children", "variant", "classes"]);
-    var classes = useButtonStyles(props);
-    var derivedProps = deriveButtonProps(props);
-    var mergedProps = __assign$1(__assign$1({}, derivedProps), commonProps);
-    return (React__default['default'].createElement(Button$1, __assign$1({ ref: ref, classes: __assign$1(__assign$1({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
-});
-Button.defaultProps = {
-    variant: 'primary',
-};
-Button.displayName = 'Button';
-
 var _path$1f;
 
 function _extends$2M() { _extends$2M = 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$2M.apply(this, arguments); }
@@ -1573,7 +1493,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%" },
-                React__default['default'].createElement(Button, { variant: "text", onClick: onEdit }, "Edit"),
+                React__default['default'].createElement(Button$1, { variant: "text", onClick: onEdit }, "Edit"),
                 React__default['default'].createElement(IconButton, { onClick: onDelete },
                     React__default['default'].createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1785,7 +1705,7 @@ DishModifierCard.displayName = 'DishModifierCard';
 var useLocationCardStyles = styles.makeStyles(function (theme) {
     var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, spacing = theme.spacing;
     var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
-    var backgroundColor = theme.palette.surface.light;
+    var backgroundColor = theme.palette.background.default;
     return {
         root: {
             background: '#FFF',
@@ -2120,7 +2040,121 @@ var SelectableChipGroup = function (props) {
         React__default['default'].createElement(core.Box, { minWidth: "1px" })));
 };
 
-exports.Button = Button;
+var palette = {
+    primary: {
+        light: '#7B7FA3',
+        main: '#2E3042',
+        dark: '#1A1D20',
+    },
+    secondary: {
+        light: '#DA777E',
+        main: '#F04649',
+        dark: '#B3212B',
+    },
+    info: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    success: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+        contrastText: '#FFFFFF',
+    },
+    error: {
+        light: '#DA777E',
+        main: '#E52021',
+        dark: '#A80005',
+    },
+    warning: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+};
+
+var overrides = {
+    MuiButton: {
+        root: {
+            borderRadius: 32,
+            textTransform: 'none',
+        },
+    },
+};
+
+var props = {
+    MuiButton: {
+        disableElevation: true,
+    },
+};
+
+var fonts = ['"Poppins"', '"sans-serif"'];
+var typography = {
+    htmlFontSize: 16,
+    fontFamily: fonts.join(', '),
+    h1: {
+        fontWeight: 400,
+        fontSize: '6rem',
+        lineHeight: '9rem',
+    },
+    h2: {
+        fontWeight: 400,
+        fontSize: '3.75rem',
+        lineHeight: '5.625rem',
+    },
+    h3: {
+        fontWeight: 400,
+        fontSize: '3rem',
+        lineHeight: '4.5rem',
+    },
+    h4: {
+        fontWeight: 400,
+        fontSize: '2.125rem',
+        lineHeight: '3.25rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.5rem',
+        lineHeight: '2.25rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    body1: {
+        fontWeight: 400,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+    },
+    body2: {
+        fontWeight: 400,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+    },
+    subtitle1: {
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        lineHeight: '1.125rem',
+        color: '#9E9E9E',
+    },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
+};
+
+var orderingTheme = {
+    typography: typography,
+    palette: palette,
+    overrides: overrides,
+    props: props,
+};
+
+exports.Button = Button$1;
 exports.DishCard = DishCard;
 exports.DishCheckoutCard = DishCheckoutCard;
 exports.DishDetailsReview = DishDetailsReview;
@@ -2136,4 +2170,13 @@ exports.ReactionCounterGroup = ReactionCounterGroup;
 exports.SelectableChip = SelectableChip;
 exports.SelectableChipGroup = SelectableChipGroup;
 exports.StatusTag = StatusTag;
+exports.orderingTheme = orderingTheme;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () {
+            return core[k];
+        }
+    });
+});
 //# sourceMappingURL=index.js.map