@7shifts/sous-chef 3.40.3 → 3.41.0

package/dist/forms/FormSection/FormSection.d.ts

@@ -5,6 +5,8 @@ type Props = {
     subtitle?: React.ReactNode;
     noMargin?: boolean;
     testId?: string;
+    /** When set `as="card"` it will render the form section in a card */
+    as?: 'card';
 };
-declare const FormSection: ({ children, title, subtitle, noMargin, testId }: Props) => React.JSX.Element;
+declare const FormSection: ({ children, title, subtitle, noMargin, testId, as }: Props) => React.JSX.Element;
 export default FormSection;

package/dist/index.js

@@ -8861,6 +8861,7 @@ var DataTable$1 = function DataTable(_ref) {
   };
   var state = getDataTableState(isLoading, content.length);
   var skeletonRows = Array.from(Array(AMOUNT_OF_SKELETON_ROWS).keys());
+  var isShowingContent = state === DATA_TABLE_STATES.CONTENT || state === DATA_TABLE_STATES.BACKGROUND_LOADING;
   return React__default.createElement(Context.Provider, {
     value: {
       columns: columns,
@@ -8888,11 +8889,11 @@ var DataTable$1 = function DataTable(_ref) {
   }, dataProps), columns && isShowingColumns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
-    showActionMenu: showActionMenu
+    showActionMenu: isShowingContent && showActionMenu
   }), React__default.createElement("tbody", {
-    className: classnames(styles$b['data-table__body'], (_classNames3 = {}, _classNames3[styles$b['data-table__body--no-bottom-radius']] = isShowingFooter, _classNames3)),
+    className: classnames(styles$b['data-table__body'], (_classNames3 = {}, _classNames3[styles$b['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
     "data-testid": testId
-  }, (state === DATA_TABLE_STATES.CONTENT || state === DATA_TABLE_STATES.BACKGROUND_LOADING) && content.map(function (item, index) {
+  }, isShowingContent && content.map(function (item, index) {
     return React__default.createElement(RowItem, {
       item: item,
       columns: columns,
@@ -8907,7 +8908,7 @@ var DataTable$1 = function DataTable(_ref) {
     return React__default.createElement(SkeletonRow, {
       key: index
     });
-  }))), isShowingFooter && (state === DATA_TABLE_STATES.CONTENT || state === DATA_TABLE_STATES.BACKGROUND_LOADING) && React__default.createElement("tfoot", {
+  }))), isShowingFooter && isShowingContent && React__default.createElement("tfoot", {
     className: styles$b['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
@@ -9641,17 +9642,21 @@ var FormSection = function FormSection(_ref) {
     subtitle = _ref.subtitle,
     _ref$noMargin = _ref.noMargin,
     noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
-    testId = _ref.testId;
-  return React__default.createElement("div", {
-    className: classnames(styles$W['form-section'], (_classnames = {}, _classnames[styles$W['form-section--no-margin']] = noMargin, _classnames)),
-    "data-testid": testId
-  }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
+    testId = _ref.testId,
+    as = _ref.as;
+  var content = React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
     className: classnames(styles$W['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
     className: classnames(styles$W['form-section__subtitle'])
-  }, subtitle)), children));
+  }, subtitle)), children);
+  return React__default.createElement("div", {
+    className: classnames(styles$W['form-section'], (_classnames = {}, _classnames[styles$W['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    "data-testid": testId
+  }, as === 'card' ? React__default.createElement(Card$1, {
+    testId: testId && testId + "-card"
+  }, content) : content);
 };
 
 var updateButtonProps$1 = function updateButtonProps(child, newProps) {