@mailstep/design-system 0.7.68 → 0.7.69-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.68",
+  "version": "0.7.69-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -14,7 +14,7 @@ import { useEffect } from 'react';
 import Button from '../../../../Elements/Button/Button';
 import { Settings2 } from '../../../../Elements/Icon/icons/Settings2';
 import Tag from '../../../../Elements/Tag/Tag';
-import { palletes } from '../../../../Elements/Tag/palletes';
+import { palettes } from '../../../../Elements/Tag/palettes';
 import { H6 } from '../../../../Elements/Typography';
 import useQuickFilter from '../../hooks/useQuickFilter';
 import { ExtraControlButtonPosition } from '../../types';
@@ -41,6 +41,6 @@ var ControlButtons = function (_a) {
                                     id: 'controlButtons.searchPlaceholder',
                                     message: "Search ".concat(translatedValue, " ..."),
                                     values: { translatedValue: translatedValue }
-                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onClearSettings, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }) })) })] })), withPresets && gridName && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palletes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
+                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onClearSettings, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }) })) })] })), withPresets && gridName && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palettes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
 };
 export default ControlButtons;

package/ui/Blocks/CommonGrid/components/PresetsModalBody/index.js

@@ -14,7 +14,7 @@ import { useMemo } from 'react';
 import Button from '../../../../Elements/Button/Button';
 import { Cancel } from '../../../../Elements/Icon/icons/Cancel';
 import Tag from '../../../../Elements/Tag/Tag';
-import { palletes } from '../../../../Elements/Tag/palletes';
+import { palettes } from '../../../../Elements/Tag/palettes';
 import { H6 } from '../../../../Elements/Typography/Typography';
 import { TagRemove } from './components/TagRemove';
 import { Trans } from '@lingui/react';
@@ -27,6 +27,6 @@ export var PresetsModalBody = function (_a) {
     return (_jsxs(x.div, { children: [_jsx(x.div, { display: "flex", rowGap: "12px", flexWrap: "wrap", children: hasPresets ? (presets === null || presets === void 0 ? void 0 : presets.map(function (_a, index) {
                     var presetName = _a[0], filters = _a[1];
                     var isSelected = presetName === selectedPresetName;
-                    return (_jsxs(Tag, __assign({ size: "big", onClick: handleSelectPreset(presetName, filters) }, (isSelected ? palletes.redWhite : palletes.redRed), { pointer: true, children: [_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: presetName }), _jsx(TagRemove, { onClick: handleOpenDeletePresetModal(presetName), children: _jsx(Cancel, { fill: isSelected ? 'white' : '#DB2B19', width: "11px", height: "11px" }) })] }), "".concat(presetName, "_").concat(index)));
+                    return (_jsxs(Tag, __assign({ size: "big", onClick: handleSelectPreset(presetName, filters) }, (isSelected ? palettes.redWhite : palettes.redRed), { pointer: true, children: [_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: presetName }), _jsx(TagRemove, { onClick: handleOpenDeletePresetModal(presetName), children: _jsx(Cancel, { fill: isSelected ? 'white' : '#DB2B19', width: "11px", height: "11px" }) })] }), "".concat(presetName, "_").concat(index)));
                 })) : (_jsx(Trans, { id: "dataGrid.noPresets.title", message: "No presets available" })) }), _jsx(x.input, { type: "file", accept: ".json", onChange: handleImportPresets, ref: fileInputRef, display: "none" }), _jsxs(x.div, { display: "flex", mt: "34px", gap: "12px", justifyContent: "space-between", children: [_jsxs(x.div, { display: "flex", gap: "12px", children: [hasPresets && (_jsx(Button, { onClick: handleExportPresets, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.exportPreset.title", message: "Export presets" }) })), _jsx(Button, { onClick: handleImportButtonClick, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.importPreset.title", message: "Import presets" }) })] }), _jsx(Button, { type: "button", onClick: onOpenCreatePresetModal, disabled: isEmpty(filters), children: _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }) })] })] }));
 };

package/ui/Elements/Tag/Tag.js

@@ -6,17 +6,17 @@ import styled, { th } from '@xstyled/styled-components';
 var fontSizeMap = {
     small: '14px',
     medium: '16px',
-    big: '20px',
+    big: '20px'
 };
 var paddingMap = {
     small: '2px 8px',
     medium: '7px 10px',
-    big: '12px 12px',
+    big: '12px 12px'
 };
 var borderRadiusMap = {
     small: '6px',
     medium: '20px',
-    big: '20px',
+    big: '20px'
 };
 var getTextColor = function (isNotSelected, textColor) {
     if (textColor) {
@@ -27,9 +27,12 @@ var getTextColor = function (isNotSelected, textColor) {
 var getBgColor = function (color) {
     return color ? th.color(color) : 'rgba(157, 163, 169, 0.2)';
 };
-var Tag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
+var Tag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: ", ";\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: ", ";\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
     var color = _a.color;
     return getBgColor(color);
+}, function (_a) {
+    var marginRight = _a.marginRight;
+    return marginRight || '10px';
 }, function (_a) {
     var isNotSelected = _a.isNotSelected, textColor = _a.textColor;
     return getTextColor(isNotSelected, textColor);

package/ui/Elements/Tag/index.d.ts

@@ -1,5 +1,5 @@
 import { default as Tag } from './Tag';
 
-export { palletes } from './palletes';
-export { type Pallete } from './types';
+export { palettes } from './palettes';
+export { type Palette } from './types';
 export default Tag;

package/ui/Elements/Tag/index.js

@@ -1,3 +1,3 @@
 import Tag from './Tag';
-export { palletes } from './palletes';
+export { palettes } from './palettes';
 export default Tag;

package/ui/Elements/Tag/palettes.d.ts

@@ -0,0 +1,6 @@
+import { Palette, PaletteNames } from './types';
+
+/**
+ * [string, string]: [background, text]
+ */
+export declare const palettes: Record<PaletteNames, Palette>;

package/ui/Elements/Tag/{palletes.js → palettes.js}

@@ -1,7 +1,7 @@
 /**
  * [string, string]: [background, text]
  */
-export var palletes = {
+export var palettes = {
     greenWhite: { color: 'green60', textColor: 'white' },
     greenGreen: { color: 'green30', textColor: 'green80' },
     blueBlue: { color: 'blue20', textColor: 'blue80' },

package/ui/Elements/Tag/stories/components/predefinedTags.d.ts

@@ -1,4 +1,2 @@
-import { FC } from 'react';
-
-declare const PredefinedTags: FC;
+declare const PredefinedTags: () => import("react/jsx-runtime").JSX.Element;
 export default PredefinedTags;

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../';
-import { palletes } from '../../palletes';
+import Tag from '../../Tag';
+import { palettes } from '../../palettes';
 import { x } from '@xstyled/styled-components';
 var PredefinedTags = function () {
-    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palletes).map(function (pallete, i) { return (_jsx(Tag, { color: palletes[pallete].color, textColor: palletes[pallete].textColor, children: pallete }, i)); }) }));
+    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palettes).map(function (paletteName) { return (_jsx(Tag, { color: palettes[paletteName].color, textColor: palettes[paletteName].textColor, children: paletteName }, paletteName)); }) }));
 };
 export default PredefinedTags;

package/ui/Elements/Tag/types.d.ts

@@ -9,8 +9,10 @@ export type Props = {
     size?: 'small' | 'medium' | 'big';
     children?: React.ReactNode;
     onClick?: () => void;
+    marginRight?: string;
 };
-export type Pallete = {
+export type Palette = {
     color: string;
     textColor: string;
 };
+export type PaletteNames = 'greenWhite' | 'greenGreen' | 'blueBlue' | 'magentaWhite' | 'magentaMagenta' | 'tealTeal' | 'orangeOrange' | 'grayGray' | 'redWhite' | 'redRed' | 'purplePurple';