@7shifts/sous-chef 3.37.0 → 3.38.0

package/README.md

@@ -48,7 +48,6 @@ class Example extends Component {
 ## Documentation
 
 You can find the components documentation in [here](https://zeroheight.com/31613d024/p/94f423-introducing-sous-chef--components).
-just to trigger a CI
 
 ## Contributing
 

package/dist/empty_states/EmptyState/EmptyState.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EmptyStateProps } from '../EmptyStateContainer/types';
-type Props = Omit<EmptyStateProps, 'isPaywall'>;
-declare const EmptyState: ({ header, title, children, mediaUrl, actions, caption, size, testId }: Props) => React.JSX.Element;
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const EmptyState: (props: Props) => React.JSX.Element;
 export default EmptyState;

package/dist/empty_states/EmptyStateContainer/types.d.ts

@@ -22,3 +22,10 @@ export type EmptyStateProps = {
     /** This is used for setting a data-testid on the component*/
     testId?: string;
 };
+export type EmptyStateAsCard = {
+    as?: 'card';
+    onClose?: () => void;
+} & EmptyStateProps;
+export type EmptyStateAsBanner = {
+    as?: 'banner';
+} & EmptyStateProps;

package/dist/empty_states/Paywall/Paywall.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { EmptyStateProps } from '../EmptyStateContainer/types';
-declare const Paywall: ({ header, title, children, mediaUrl, actions, size, caption, testId }: Omit<EmptyStateProps, 'isPaywall'>) => React.JSX.Element;
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const Paywall: (props: Props) => React.JSX.Element;
 export default Paywall;

package/dist/i18n/locales/en.json

@@ -33,5 +33,8 @@
         "october": "October",
         "november": "November",
         "december": "December"
+    },
+    "Card": {
+        "dismiss": "Dismiss"
     }
 }

package/dist/i18n/locales/es.json

@@ -33,5 +33,8 @@
         "october": "Octubre",
         "november": "Noviembre",
         "december": "Diciembre"
+    },
+    "Card": {
+        "dismiss": "Descartar"
     }
 }

package/dist/i18n/locales/fr.json

@@ -33,5 +33,8 @@
         "october": "Octobre",
         "november": "Novembre",
         "december": "Décembre"
+    },
+    "Card": {
+        "dismiss": "Rejeter"
     }
 }

package/dist/index.css

@@ -1410,7 +1410,7 @@ h5._32amZ {
   box-sizing: border-box;
   background: white;
   border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
+  border-radius: 20px;
   width: 100%;
   height: 100%;
   padding: 24px 20px;
@@ -1447,12 +1447,22 @@ h5._32amZ {
 ._L9ZA7 {
   position: absolute;
   z-index: var(--z-index-base);
-  right: 8px;
-  top: 8px;
+  right: 6px;
+  top: 6px;
 }
 ._5YidV {
   pointer-events: none;
 }
+._37yla {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  top: 6px;
+  right: 6px;
+}
+._3J4FP {
+  pointer-events: none;
+}
 ._cQT44 {
   position: absolute;
   width: 38px;
@@ -4521,7 +4531,6 @@ input._1zowl {
   }
 }
 ._1AdW7 {
-  max-width: 1000px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -4559,4 +4568,18 @@ input._1zowl {
     text-align: center;
     flex-direction: column-reverse;
   }
+}
+._3kFM9 {
+  padding: 12px 16px;
+}
+._3kmTB {
+  display: flex;
+  justify-content: center;
+}
+._DrBEi {
+  padding: 12px 16px;
+}
+._3YbH7 {
+  display: flex;
+  justify-content: center;
 }

package/dist/index.js

@@ -5694,12 +5694,16 @@ var Calendar = {
 	november: "November",
 	december: "December"
 };
+var Card = {
+	dismiss: "Dismiss"
+};
 var en = {
 	PaginationControls: PaginationControls,
 	AsyncSelectField: AsyncSelectField,
 	SelectField: SelectField,
 	HintModal: HintModal,
-	Calendar: Calendar
+	Calendar: Calendar,
+	Card: Card
 };
 
 var initialValue = {
@@ -7246,13 +7250,14 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-var styles$q = {"card":"_2o1ez","card__body":"_1PFiJ","card__body--interactive":"_3dQzA","card--focus":"_5dJZO","card__body--focus":"_DWgI_","card__body--disabled":"_24dNX","card__body--with-kebab":"_2LVaD","card__kebab":"_L9ZA7","card__kebab--disabled":"_5YidV"};
+var styles$q = {"card":"_2o1ez","card__body":"_1PFiJ","card__body--interactive":"_3dQzA","card--focus":"_5dJZO","card__body--focus":"_DWgI_","card__body--disabled":"_24dNX","card__body--with-kebab":"_2LVaD","card__kebab":"_L9ZA7","card__kebab--disabled":"_5YidV","card__close":"_37yla","card__close--disabled":"_3J4FP"};
 
-var _excluded$2w = ["children", "onClick", "isSelected", "disabled", "actions", "testId"];
-var Card = function Card(_ref) {
-  var _classnames, _classnames2, _classnames3;
+var _excluded$2w = ["children", "onClick", "onClose", "isSelected", "disabled", "actions", "testId"];
+var Card$1 = function Card(_ref) {
+  var _classnames, _classnames2, _classnames3, _classnames4;
   var children = _ref.children,
     onClick = _ref.onClick,
+    onClose = _ref.onClose,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$disabled = _ref.disabled,
@@ -7260,6 +7265,7 @@ var Card = function Card(_ref) {
     actions = _ref.actions,
     testId = _ref.testId,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
+  var translate = useTranslation('Card');
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
@@ -7281,8 +7287,17 @@ var Card = function Card(_ref) {
   }, children), actions && React__default.createElement("div", {
     className: classnames(styles$q['card__kebab'], (_classnames3 = {}, _classnames3[styles$q['card__kebab--disabled']] = disabled, _classnames3))
   }, React__default.createElement(KebabMenu, {
-    actions: actions
-  })));
+    actions: onClose ? actions.concat({
+      action: 'dismiss',
+      label: translate('dismiss'),
+      onAction: onClose
+    }) : actions
+  })), !actions && onClose && React__default.createElement("div", {
+    className: classnames(styles$q['card__close'], (_classnames4 = {}, _classnames4[styles$q['card__close--disabled']] = disabled, _classnames4))
+  }, React__default.createElement(Button, {
+    theme: "link-icon",
+    onClick: onClose
+  }, React__default.createElement(IconTimes, null))));
 };
 
 var styles$r = {"callout-card__close":"_cQT44","callout-card__header":"_rSzMg"};
@@ -7295,7 +7310,7 @@ var CalloutCard = function CalloutCard(_ref) {
     onClose = _ref.onClose,
     actions = _ref.actions,
     testId = _ref.testId;
-  return React__default.createElement(Card, {
+  return React__default.createElement(Card$1, {
     testId: testId
   }, React__default.createElement(Inline, null, React__default.createElement(Inline, {
     alignItems: "center"
@@ -12834,16 +12849,21 @@ var EmptyStateContainer = function EmptyStateContainer(_ref) {
   });
 };
 
-var Paywall = function Paywall(_ref) {
-  var header = _ref.header,
-    title = _ref.title,
-    children = _ref.children,
-    mediaUrl = _ref.mediaUrl,
-    actions = _ref.actions,
-    size = _ref.size,
-    caption = _ref.caption,
-    testId = _ref.testId;
-  return React__default.createElement(EmptyStateContainer, {
+var styles$1f = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
+
+var Paywall = function Paywall(props) {
+  var header = props.header,
+    title = props.title,
+    children = props.children,
+    mediaUrl = props.mediaUrl,
+    actions = props.actions,
+    size = props.size,
+    caption = props.caption,
+    testId = props.testId,
+    _props$as = props.as,
+    as = _props$as === void 0 ? 'banner' : _props$as;
+  var onClose = props.as === 'card' ? props.onClose : undefined;
+  var emptyStateContainer = React__default.createElement(EmptyStateContainer, {
     header: header,
     title: title,
     mediaUrl: mediaUrl,
@@ -12853,18 +12873,32 @@ var Paywall = function Paywall(_ref) {
     isPaywall: true,
     testId: testId
   }, children);
-};
-
-var EmptyState = function EmptyState(_ref) {
-  var header = _ref.header,
-    title = _ref.title,
-    children = _ref.children,
-    mediaUrl = _ref.mediaUrl,
-    actions = _ref.actions,
-    caption = _ref.caption,
-    size = _ref.size,
-    testId = _ref.testId;
-  return React__default.createElement(EmptyStateContainer, {
+  if (as === 'card') {
+    var _classnames;
+    return React__default.createElement(Card$1, {
+      onClose: onClose
+    }, React__default.createElement("div", {
+      className: classnames(styles$1f['paywall--as-card'], (_classnames = {}, _classnames[styles$1f['paywall--as-card--centered']] = size === 'small', _classnames))
+    }, emptyStateContainer));
+  }
+  return emptyStateContainer;
+};
+
+var styles$1g = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
+
+var EmptyState = function EmptyState(props) {
+  var header = props.header,
+    title = props.title,
+    children = props.children,
+    mediaUrl = props.mediaUrl,
+    actions = props.actions,
+    caption = props.caption,
+    size = props.size,
+    testId = props.testId,
+    _props$as = props.as,
+    as = _props$as === void 0 ? 'banner' : _props$as;
+  var onClose = props.as === 'card' ? props.onClose : undefined;
+  var emptyStateContainer = React__default.createElement(EmptyStateContainer, {
     header: size !== EMPTY_STATE_SIZE.SMALL ? header : undefined,
     title: title,
     mediaUrl: mediaUrl,
@@ -12873,6 +12907,15 @@ var EmptyState = function EmptyState(_ref) {
     size: size,
     testId: testId
   }, children);
+  if (as === 'card') {
+    var _classnames;
+    return React__default.createElement(Card$1, {
+      onClose: onClose
+    }, React__default.createElement("div", {
+      className: classnames(styles$1g['empty-state--as-card'], (_classnames = {}, _classnames[styles$1g['empty-state--as-card--centered']] = size === 'small', _classnames))
+    }, emptyStateContainer));
+  }
+  return emptyStateContainer;
 };
 
 exports.AsyncSelectField = AsyncSelectField$1;
@@ -12885,7 +12928,7 @@ exports.Button = Button;
 exports.COLORS = COLORS;
 exports.Calendar = Calendar$1;
 exports.CalloutCard = CalloutCard;
-exports.Card = Card;
+exports.Card = Card$1;
 exports.CheckboxField = CheckboxField;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;