@7shifts/sous-chef 3.42.1 → 3.43.0

package/dist/foundation/tokens/color/color-codes.d.ts

@@ -43,4 +43,10 @@ export declare const COLOR_CODES: {
     readonly 'grey-400': " #767676";
     readonly 'grey-500': " #464646";
     readonly 'grey-600': " #323232";
+    readonly 'oat-100': " #f1f0ec";
+    readonly 'oat-200': " #e2ded6";
+    readonly 'oat-300': " #c7c0b2";
+    readonly 'oat-400': " #6e6d6c";
+    readonly 'oat-500': " #4c4b49";
+    readonly 'oat-600': " #383430";
 };

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -43,4 +43,10 @@ export declare const COLORS: {
     readonly 'grey-400': "var(--color-grey-400)";
     readonly 'grey-500': "var(--color-grey-500)";
     readonly 'grey-600': "var(--color-grey-600)";
+    readonly 'oat-100': "var(--color-oat-100)";
+    readonly 'oat-200': "var(--color-oat-200)";
+    readonly 'oat-300': "var(--color-oat-300)";
+    readonly 'oat-400': "var(--color-oat-400)";
+    readonly 'oat-500': "var(--color-oat-500)";
+    readonly 'oat-600': "var(--color-oat-600)";
 };

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600';

package/dist/index.css

@@ -108,6 +108,18 @@
   --color-grey-500-rgb: 70, 70, 70;
   --color-grey-600: #323232;
   --color-grey-600-rgb: 50, 50, 50;
+  --color-oat-100: #f1f0ec;
+  --color-oat-100-rgb: 241, 240, 236;
+  --color-oat-200: #e2ded6;
+  --color-oat-200-rgb: 226, 222, 214;
+  --color-oat-300: #c7c0b2;
+  --color-oat-300-rgb: 199, 192, 178;
+  --color-oat-400: #6e6d6c;
+  --color-oat-400-rgb: 110, 109, 108;
+  --color-oat-500: #4c4b49;
+  --color-oat-500-rgb: 76, 75, 73;
+  --color-oat-600: #383430;
+  --color-oat-600-rgb: 56, 52, 48;
 }
 :root {
   --z-index-base: 1;
@@ -369,6 +381,7 @@ Just for future references:
   opacity: 0;
   transition: visibility 0s, opacity 0.05s linear;
   max-width: 340px;
+  overflow: auto;
 }
 ._1NSQY {
   visibility: visible;
@@ -2551,9 +2564,9 @@ input:disabled + ._2W10t::after {
 }
 ._3uthQ {
   border-bottom: 1px solid var(--color-grey-200);
-  margin-top: 24px;
-  padding-left: 20px;
-  padding-right: 20px;
+  margin-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 ._23CMa {
   all: unset;
@@ -2574,12 +2587,12 @@ input:disabled + ._2W10t::after {
   visibility: hidden;
   transition: 0.2s ease-in-out;
   transition-property: margin-top;
-  height: 24px;
+  height: 16px;
 }
 ._fCEkR {
   font-weight: 400;
-  margin-top: 24px;
-  margin-bottom: 24px;
+  margin-top: 16px;
+  margin-bottom: 16px;
   transition: 0.2s ease-in-out;
   transition-property: margin-top;
 }

package/dist/index.js

@@ -65,7 +65,13 @@ var COLORS = {
   'grey-300': 'var(--color-grey-300)',
   'grey-400': 'var(--color-grey-400)',
   'grey-500': 'var(--color-grey-500)',
-  'grey-600': 'var(--color-grey-600)'
+  'grey-600': 'var(--color-grey-600)',
+  'oat-100': 'var(--color-oat-100)',
+  'oat-200': 'var(--color-oat-200)',
+  'oat-300': 'var(--color-oat-300)',
+  'oat-400': 'var(--color-oat-400)',
+  'oat-500': 'var(--color-oat-500)',
+  'oat-600': 'var(--color-oat-600)'
 };
 
 var ZINDEX = {
@@ -565,7 +571,8 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
     onFocusIn = _ref.onFocusIn,
     onFocusOut = _ref.onFocusOut,
     extraClass = _ref.extraClass,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    maxHeight = _ref.maxHeight;
   var _useState = React.useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
@@ -590,6 +597,7 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
   }, React__default.createElement("div", {
     ref: tooltipRef,
     style: _extends({}, position.overlay, {
+      maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
     className: classnames(styles$4['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$4['tooltip-overlay--visible']] = isVisible, _classnames[styles$4['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$4['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
@@ -624,7 +632,8 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     onClose = _ref.onClose,
     onVisibleChange = _ref.onVisibleChange,
     children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    maxHeight = _ref.maxHeight;
   var checkIsMounted = useIsMounted();
   var internalRef = React.useRef(null);
   var containerRef = forwardedRef || internalRef;
@@ -697,7 +706,8 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
         closeTooltip();
       },
       extraClass: extraClass,
-      testId: testId
+      testId: testId,
+      maxHeight: maxHeight
     }, theme === TOOLTIP_THEME.BLACK && !header ? null : overlay) : null;
   };
   if (React__default.Children.count(children) === 1) {
@@ -8919,11 +8929,12 @@ var DataTable$1 = function DataTable(_ref) {
 var styles$P = {"accordion-item":"_3uthQ","accordion-item__link":"_23CMa","accordion-item__header":"_3LzWR","accordion-item__icon":"_34Ht7","accordion-item__icon--active":"_1D8Hh","accordion-item__content":"_1Ocs0","accordion-item__content--active":"_fCEkR"};
 
 var AccordionItem = function AccordionItem(props) {
-  var title = props.title,
-    content = props.content,
-    id = props.id,
+  var item = props.item,
     isOpen = props.isOpen,
     handleAccordionItemOpen = props.handleAccordionItemOpen;
+  var id = item.id,
+    title = item.title,
+    content = item.content;
   var isFocusedByClickRef = React__default.useRef(false);
   return React__default.createElement("div", {
     className: styles$P['accordion-item']
@@ -8933,13 +8944,13 @@ var AccordionItem = function AccordionItem(props) {
       if (isOpen) {
         handleAccordionItemOpen(null);
       } else {
-        handleAccordionItemOpen(id);
+        handleAccordionItemOpen(item);
       }
     },
     id: id,
     onFocus: function onFocus() {
       if (!isFocusedByClickRef.current) {
-        handleAccordionItemOpen(id);
+        handleAccordionItemOpen(item);
       }
     },
     onBlur: function onBlur() {
@@ -8953,7 +8964,6 @@ var AccordionItem = function AccordionItem(props) {
     justifyContent: "space-between",
     alignItems: "center"
   }, React__default.createElement(Text, {
-    as: "h3",
     color: "grey-500",
     emphasis: "bold"
   }, title), React__default.createElement(IconChevronDown, {
@@ -8963,7 +8973,6 @@ var AccordionItem = function AccordionItem(props) {
     "data-testid": "" + (isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'),
     className: styles$P["accordion-item__content" + (isOpen ? '--active' : '')]
   }, React__default.createElement(Text, {
-    as: "h4",
     color: "grey-500"
   }, content)));
 };
@@ -8971,12 +8980,14 @@ var AccordionItem = function AccordionItem(props) {
 var styles$Q = {"accordion":"_31JZJ"};
 
 var Accordion = function Accordion(props) {
-  var items = props.items;
+  var items = props.items,
+    onExpand = props.onExpand;
   var _useState = React.useState(),
     activeId = _useState[0],
     setActiveId = _useState[1];
-  var handleAccordionItemOpen = function handleAccordionItemOpen(id) {
-    setActiveId(id);
+  var handleAccordionItemOpen = function handleAccordionItemOpen(item) {
+    setActiveId(item ? item.id : null);
+    item && onExpand && onExpand(item);
   };
   if (items.length < 1) {
     return null;
@@ -8984,11 +8995,13 @@ var Accordion = function Accordion(props) {
   return React__default.createElement("div", {
     className: styles$Q['accordion']
   }, items.map(function (item, index) {
+    var id = item.id || index.toString();
     return React__default.createElement(AccordionItem, {
-      title: item.title,
-      content: item.content,
-      id: item.id ? item.id : index.toString(),
-      isOpen: (item.id ? item.id : index.toString()) == activeId,
+      key: id,
+      item: _extends({}, item, {
+        id: id
+      }),
+      isOpen: id == activeId,
       handleAccordionItemOpen: handleAccordionItemOpen
     });
   }));