@7shifts/sous-chef 2.15.8 → 2.16.0

package/dist/actions/Button/Button.d.ts

@@ -14,6 +14,7 @@ declare type Props = {
     title?: string;
     href?: string;
     target?: '_blank' | '_self';
+    testId?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default _default;

package/dist/actions/PaginationControls/PaginationControls.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     hasNext?: boolean;
     onPreviousClick: () => void;
     onNextClick: () => void;
+    testId?: string;
 };
 /**
  * `PaginationControls` are two buttons side by side.

package/dist/actions/Toggle/Toggle.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     caption?: React.ReactNode;
     disabled?: boolean;
     id?: string;
+    testId?: string;
 };
 /**
  * Used when you want to allow the user to turn some information ON and OFF.

package/dist/controls/ToolbarSelect/ToolbarSelect.d.ts

@@ -10,7 +10,8 @@ declare type Props<T> = {
     disabled?: boolean;
     /** Use a prefix for things like icons or symbols (“$”, “¥”, “£”). */
     prefix: React.ReactNode;
+    testId?: string;
 };
 /** Toolbar component to make a possible selection from predefined options. */
-declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, disabled, prefix, }: Props<T>) => JSX.Element;
+declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, disabled, prefix, testId }: Props<T>) => JSX.Element;
 export default ToolbarSelect;

package/dist/core/DataTable/DataTable.d.ts

@@ -24,6 +24,8 @@ declare type Props<T> = {
     footerComponent?: React.ReactNode;
     /** Will render vertical borders between columns if true */
     hasVerticalBorders?: boolean;
+    /** Used to override the default data-testid */
+    testId?: string;
 };
-declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footerComponent, hasVerticalBorders }: Props<T>) => JSX.Element;
+declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footerComponent, hasVerticalBorders, testId }: Props<T>) => JSX.Element;
 export default DataTable;

package/dist/core/DataTableEditableCell/DataTableEditableCell.d.ts

@@ -16,6 +16,7 @@ declare type Props = {
     suffix?: React.ReactNode;
     defaultValue?: string;
     type?: 'text' | 'currency';
+    testId?: string;
 };
-declare const DataTableEditableCell: ({ name, columnIndex, rowIndex, id: inputId, value, onChange, onBlur, placeholder, disabled, error, prefix, suffix, defaultValue, type }: Props) => JSX.Element;
+declare const DataTableEditableCell: ({ name, columnIndex, rowIndex, id: inputId, value, onChange, onBlur, placeholder, disabled, error, prefix, suffix, defaultValue, type, testId }: Props) => JSX.Element;
 export default DataTableEditableCell;

package/dist/core/DataTableRow/DataTableRow.d.ts

@@ -7,5 +7,5 @@ declare type Props = {
     actions?: Action[];
     hasDefaultPadding?: boolean;
 } & Omit<React.HTMLProps<HTMLDivElement>, 'css'>;
-declare const DataTableRow: React.ForwardRefExoticComponent<Pick<Props, "children" | "type" | "default" | "disabled" | "onClick" | "id" | "title" | "href" | "target" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "key" | "contextMenu" | "list" | "className" | "start" | "wrap" | "dir" | "checked" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "prefix" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "size" | "open" | "multiple" | "aria-label" | "aria-labelledby" | "autoFocus" | "onFocus" | "onKeyDown" | "tabIndex" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "lang" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isSelected" | "actions" | "hasDefaultPadding"> & React.RefAttributes<HTMLDivElement>>;
+declare const DataTableRow: React.ForwardRefExoticComponent<Pick<Props, "children" | "type" | "default" | "disabled" | "onClick" | "id" | "title" | "href" | "target" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "key" | "size" | "color" | "className" | "height" | "lang" | "max" | "media" | "method" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contextMenu" | "list" | "start" | "wrap" | "dir" | "checked" | "value" | "placeholder" | "prefix" | "content" | "translate" | "hidden" | "open" | "multiple" | "autoFocus" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "isSelected" | "actions" | "hasDefaultPadding"> & React.RefAttributes<HTMLDivElement>>;
 export default DataTableRow;

package/dist/core/Flex/Flex.d.ts

@@ -11,6 +11,7 @@ declare type Props = {
     direction?: 'row' | 'column';
     flexItems?: boolean;
     flexWrap?: FlexWrap;
+    testId?: string;
 };
 /**
  * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef

package/dist/core/Inline/Inline.d.ts

@@ -12,6 +12,7 @@ declare type Props = {
     justifyContent?: JustifyContent;
     inlineFlex?: boolean;
     flexWrap?: FlexWrap;
+    testId?: string;
 };
 /**
  * Layout component to easily line elements up in a row.

package/dist/core/Stack/Stack.d.ts

@@ -11,6 +11,7 @@ declare type Props = {
     /** One of: `start`, `end`, `center`, `space-between` */
     justifyContent?: JustifyContent;
     flexItems?: boolean;
+    testId?: string;
 };
 /**
  * Layout component to easily stack elements up in a column.

package/dist/feedback/InlineBanner/InlineBanner.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     caption?: string;
     primaryButton?: React.ReactElement;
     secondaryButton?: React.ReactElement;
+    testId?: string;
 };
 declare const InlineBanner: React.FC<Props>;
 export default InlineBanner;

package/dist/feedback/Spinner/Spinner.d.ts

@@ -3,6 +3,7 @@ declare type Props = {
     size?: number;
     theme?: 'mint' | 'disabled' | 'contrast' | 'pride';
     block?: boolean;
+    testId?: string;
 };
 declare const Spinner: React.FC<Props>;
 export default Spinner;

package/dist/forms/CheckboxField/CheckboxField.d.ts

@@ -10,6 +10,8 @@ declare type Props = {
     caption?: React.ReactNode;
     error?: React.ReactNode;
     disabled?: boolean;
+    /** This is used for setting the data-testid */
+    testId?: string;
 };
 /** CheckboxField form element. */
 declare const CheckboxField: React.FC<Props>;

package/dist/forms/CurrencyField/CurrencyField.d.ts

@@ -7,5 +7,5 @@ import type { Props as TextFieldProps } from '../TextField/TextField';
  */
 declare const CurrencyField: React.ForwardRefExoticComponent<TextFieldProps & {
     currencySymbol: string;
-} & Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+} & Pick<TextFieldProps, "disabled" | "id" | "testId" | "caption" | "label" | "name" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "error" | "value" | "placeholder" | "autoFocus" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
 export default CurrencyField;

package/dist/forms/DateField/DateField.d.ts

@@ -18,6 +18,7 @@ declare type Props = {
     defaultValue?: Date;
     readOnly?: boolean;
     onMonthChange?: (month: Date) => void;
+    testId: string;
 };
 /** DateField form element. */
 declare const DateField: React.FC<Props>;

package/dist/forms/DatePickerCalendar/DatePickerCalendar.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
     children: React.ReactNode;
     showCalendar: boolean;
     onClickOutside: () => void;
+    testId?: string;
 };
 declare const DatePickerCalendar: React.FC<Props>;
 export default DatePickerCalendar;

package/dist/forms/DateRangeField/DateRangeField.d.ts

@@ -18,6 +18,7 @@ declare type Props = {
     disabled?: boolean;
     readOnly?: boolean;
     weekStart?: WeekStart;
+    testId?: string;
 };
 /** DateRangeField form element. */
 declare const DateRangeField: React.FC<Props>;

package/dist/forms/Field/Field.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     caption?: React.ReactNode;
     error?: React.ReactNode;
     children: React.ReactNode;
+    testId?: string;
 };
 declare const Field: React.FC<Props>;
 export default Field;

package/dist/forms/Form/Form.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     /** If set it will controll the state of the form using `Formik` */
     formik?: FormikType;
     stackContent?: boolean;
+    testId?: string;
 };
 declare const Form: React.FC<Props>;
 export default Form;

package/dist/forms/FormRow/FormRow.d.ts

@@ -14,6 +14,7 @@ declare type Props = {
     children: React.ReactNode;
     columns?: number;
     sizes?: Size[];
+    testId?: string;
 };
 /** Easily add form fields side by side with equal size. */
 declare const FormRow: React.FC<Props>;

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -21,7 +21,8 @@ declare type Props<T> = {
     closeOnSelect?: boolean;
     /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `MultiSelectField` inside a modal. */
     menuShouldScrollIntoView?: boolean;
+    testId?: string;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId }: Props<T>) => JSX.Element;
 export default MultiSelectField;

package/dist/forms/PasswordField/PasswordField.d.ts

@@ -13,6 +13,7 @@ declare type Props = {
     disabled?: boolean;
     defaultValue?: string;
     criterias?: PasswordCriteria[];
+    testId?: string;
 };
 /** It allows show and hide the password as well as displaying the criteria. */
 declare const PasswordField: React.FC<Props>;

package/dist/forms/PercentageField/PercentageField.d.ts

@@ -9,5 +9,5 @@ declare const PercentageField: React.ForwardRefExoticComponent<{
     min?: number | undefined;
     precision?: number | undefined;
     stepSize?: number | undefined;
-} & Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "prefix" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete"> & React.RefAttributes<HTMLInputElement>>;
+} & Pick<TextFieldProps, "disabled" | "id" | "testId" | "caption" | "label" | "name" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "error" | "value" | "placeholder" | "prefix" | "autoFocus" | "defaultValue" | "autoComplete"> & React.RefAttributes<HTMLInputElement>>;
 export default PercentageField;

package/dist/forms/PillSelectField/PillSelectField.d.ts

@@ -11,7 +11,9 @@ declare type Props<T> = {
     caption?: React.ReactNode;
     error?: React.ReactNode;
     disabled?: boolean;
+    /** This is used for setting the data-testid */
+    testId?: string;
 };
 /** PillSelectField form element. */
-declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled }: Props<T>) => JSX.Element;
+declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId }: Props<T>) => JSX.Element;
 export default PillSelectField;

package/dist/forms/RadioGroupField/RadioGroupField.d.ts

@@ -9,6 +9,8 @@ declare type Props = {
     inline?: boolean;
     disabled?: boolean;
     children: React.ReactNode;
+    /** This is used for setting the data-testid */
+    testId?: string;
 };
 /** RadioGroupField form element. */
 declare const RadioGroupField: React.FC<Props>;

package/dist/forms/RadioGroupOption/RadioGroupOption.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     id?: string;
     label?: React.ReactNode;
     caption?: React.ReactNode;
+    testId?: string;
 };
 /** RadioGroupField form element. */
 declare const RadioGroupOption: React.FC<Props>;

package/dist/forms/SelectField/SelectField.d.ts

@@ -26,6 +26,8 @@ export declare type Props<T> = {
     defaultValue?: SelectOption<T>;
     CustomOption?: React.ElementType;
     SelectedOptionPrefix?: React.ElementType;
+    /** This is used for setting the data-testid */
+    testId?: string;
 };
 /** Component to make possible choose from a predefined options. */
 declare const SelectField: <T extends unknown>(props: Props<T>) => JSX.Element;

package/dist/forms/SelectField/useSelectField.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props } from './SelectField';
-export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix }: Props<T>) => {
+export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId }: Props<T>) => {
     selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, React.ReactText> & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>;
     fieldProps: {
         caption: React.ReactNode;

package/dist/forms/TextAreaField/TextAreaField.d.ts

@@ -20,6 +20,7 @@ declare type Props = {
     maxHeight?: number;
     /** A JSX containing the toolbar elements. You can use `Inline` to place the buttons properly on the toolbar space. */
     toolbar?: React.ReactNode;
+    testId?: string;
 };
 declare const TextAreaField: React.FC<Props>;
 export default TextAreaField;

package/dist/forms/TextField/TextField.d.ts

@@ -22,6 +22,7 @@ export declare type Props = {
     /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
     suffix?: React.ReactNode;
     value?: string;
+    testId?: string;
 };
 declare const TextField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/forms/TextField/useTextField.d.ts

@@ -4,7 +4,7 @@ import type { Props } from './TextField';
 declare type UseTextFieldProps = Props & {
     ref: RefType<HTMLInputElement>;
 };
-export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, onFocus, onKeyDown, placeholder, value, ref }: UseTextFieldProps) => {
+export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, onFocus, onKeyDown, placeholder, value, ref, testId }: UseTextFieldProps) => {
     inputProps: {
         'aria-describedby': string;
         'aria-invalid': boolean;

package/dist/forms/TimeField/TimeField.d.ts

@@ -5,5 +5,5 @@ import type { Props as TextFieldProps } from '../TextField/TextField';
  *
  * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
-declare const TimeField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+declare const TimeField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "id" | "testId" | "caption" | "label" | "name" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "error" | "value" | "placeholder" | "autoFocus" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
 export default TimeField;

package/dist/forms/WeekField/WeekField.d.ts

@@ -19,6 +19,7 @@ declare type Props = {
     defaultValue?: Date;
     readOnly?: boolean;
     weekStart?: WeekStart;
+    testId?: string;
 };
 /** WeekField form element. */
 declare const WeekField: React.FC<Props>;

package/dist/foundation/colors.d.ts

@@ -6,44 +6,38 @@ export declare const TANGERINE300: '#fcab91';
 export declare const TANGERINE400: '#fb7448';
 export declare const TANGERINE500: '#e16840';
 export declare const TANGERINE600: '#96452b';
-export declare const TANGERINE700: '#4a2215';
 export declare const EGGPLANT100: '#f0f3fb';
 export declare const EGGPLANT200: '#d3dbf4';
 export declare const EGGPLANT300: '#a7b7ea';
 export declare const EGGPLANT400: '#6d87dd';
 export declare const EGGPLANT500: '#6179c6';
 export declare const EGGPLANT600: '#415184';
-export declare const EGGPLANT700: '#32295c';
 export declare const MINT100: '#ecfaf8';
 export declare const MINT200: '#c6f1eb';
 export declare const MINT300: '#8de4d7';
 export declare const MINT400: '#3abda9';
 export declare const MINT500: '#35ac9a';
 export declare const MINT600: '#277e71';
-export declare const MINT700: '#133e38';
 export declare const RADISH100: '#fcf0f0';
 export declare const RADISH200: '#f7d1d1';
 export declare const RADISH300: '#f0a3a3';
 export declare const RADISH400: '#e76767';
 export declare const RADISH500: '#cf5c5c';
 export declare const RADISH600: '#8a3d3d';
-export declare const RADISH700: '#441e1e';
 export declare const BLUEBERRY100: '#f6fdff';
 export declare const BLUEBERRY200: '#ceecf5';
 export declare const BLUEBERRY300: '#9cd9eb';
 export declare const BLUEBERRY400: '#5bc0de';
 export declare const BLUEBERRY500: '#51acc7';
 export declare const BLUEBERRY600: '#367385';
-export declare const BLUEBERRY700: '#1b3942';
 export declare const BANANA100: '#fff9ed';
 export declare const BANANA200: '#ffeec9';
 export declare const BANANA300: '#ffdd92';
 export declare const BANANA400: '#ffc74a';
 export declare const BANANA500: '#e5b242';
 export declare const BANANA600: '#99772c';
-export declare const BANANA700: '#4c3b16';
 export declare const GREY100: '#F3F3F3';
-export declare const GREY200: '#C8C8C8';
+export declare const GREY200: '#D5D5D5';
 export declare const GREY300: '#949494';
 export declare const GREY400: '#767676';
 export declare const GREY500: '#464646';
@@ -56,4 +50,4 @@ export declare const COLORS: {
     BLUEBERRY: string;
     BANANA: string;
 };
-export declare type Color = typeof WHITE | typeof BLACK | typeof TANGERINE100 | typeof TANGERINE200 | typeof TANGERINE300 | typeof TANGERINE400 | typeof TANGERINE500 | typeof TANGERINE600 | typeof TANGERINE700 | typeof EGGPLANT100 | typeof EGGPLANT200 | typeof EGGPLANT300 | typeof EGGPLANT400 | typeof EGGPLANT500 | typeof EGGPLANT600 | typeof EGGPLANT700 | typeof MINT100 | typeof MINT200 | typeof MINT300 | typeof MINT400 | typeof MINT500 | typeof MINT600 | typeof MINT700 | typeof RADISH100 | typeof RADISH200 | typeof RADISH300 | typeof RADISH400 | typeof RADISH500 | typeof RADISH600 | typeof RADISH700 | typeof BLUEBERRY100 | typeof BLUEBERRY200 | typeof BLUEBERRY300 | typeof BLUEBERRY400 | typeof BLUEBERRY500 | typeof BLUEBERRY600 | typeof BLUEBERRY700 | typeof BANANA100 | typeof BANANA200 | typeof BANANA300 | typeof BANANA400 | typeof BANANA500 | typeof BANANA600 | typeof BANANA700 | typeof GREY100 | typeof GREY200 | typeof GREY300 | typeof GREY400 | typeof GREY500 | typeof GREY600;
+export declare type Color = typeof WHITE | typeof BLACK | typeof TANGERINE100 | typeof TANGERINE200 | typeof TANGERINE300 | typeof TANGERINE400 | typeof TANGERINE500 | typeof TANGERINE600 | typeof EGGPLANT100 | typeof EGGPLANT200 | typeof EGGPLANT300 | typeof EGGPLANT400 | typeof EGGPLANT500 | typeof EGGPLANT600 | typeof MINT100 | typeof MINT200 | typeof MINT300 | typeof MINT400 | typeof MINT500 | typeof MINT600 | typeof RADISH100 | typeof RADISH200 | typeof RADISH300 | typeof RADISH400 | typeof RADISH500 | typeof RADISH600 | typeof BLUEBERRY100 | typeof BLUEBERRY200 | typeof BLUEBERRY300 | typeof BLUEBERRY400 | typeof BLUEBERRY500 | typeof BLUEBERRY600 | typeof BANANA100 | typeof BANANA200 | typeof BANANA300 | typeof BANANA400 | typeof BANANA500 | typeof BANANA600 | typeof GREY100 | typeof GREY200 | typeof GREY300 | typeof GREY400 | typeof GREY500 | typeof GREY600;

package/dist/icons/components/IconAnalytics.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconAnalytics: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconAnalytics;

package/dist/icons/components/IconArrowDown.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconArrowDown: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconArrowDown;

package/dist/icons/components/IconArrowLeft.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconArrowLeft: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconArrowLeft;

package/dist/icons/components/IconArrowRight.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconArrowRight: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconArrowRight;

package/dist/icons/components/IconArrowToTop.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconArrowToTop: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconArrowToTop;

package/dist/icons/components/IconArrowUp.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconArrowUp: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconArrowUp;

package/dist/icons/components/IconAward.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconAward: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconAward;

package/dist/icons/components/IconBalanceScale.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBalanceScale: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBalanceScale;

package/dist/icons/components/IconBalanceScaleLeft.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBalanceScaleLeft: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBalanceScaleLeft;

package/dist/icons/components/IconBan.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBan: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBan;

package/dist/icons/components/IconBarsH.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBarsH: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBarsH;

package/dist/icons/components/IconBarsV.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBarsV: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBarsV;

package/dist/icons/components/IconBell.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBell: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBell;

package/dist/icons/components/IconBirthdayCake.d.ts

@@ -3,9 +3,10 @@ import { IconSize } from '../types';
 declare type Props = {
     size?: IconSize;
     color?: string;
+    testId?: string;
 } & React.SVGProps<SVGSVGElement>;
 declare const IconBirthdayCake: {
-    (props: Props): JSX.Element;
+    ({ testId, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default IconBirthdayCake;