@mailstep/design-system 0.6.17 → 0.6.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -4
- package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js +1 -1
- package/ui/Blocks/CommonGrid/styles.js +7 -4
- package/ui/index.es.js +137 -130
- package/ui/index.umd.js +51 -46
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mailstep/design-system",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.19",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./ui/index.js",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"build-storybook": "storybook build",
|
|
17
17
|
"deploy": "npm run build && npm publish ./build",
|
|
18
18
|
"dev": "yarn storybook",
|
|
19
|
-
"test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
|
|
19
|
+
"test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
|
|
20
|
+
"chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|
|
22
23
|
"@babel/core": "^7.20.12",
|
|
@@ -30,8 +31,8 @@
|
|
|
30
31
|
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
31
32
|
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
32
33
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
33
|
-
"@lingui/react": "3.17.2",
|
|
34
34
|
"@lingui/core": "3.17.2",
|
|
35
|
+
"@lingui/react": "3.17.2",
|
|
35
36
|
"@popperjs/core": "^2.11.8",
|
|
36
37
|
"@storybook/addon-controls": "7.6.8",
|
|
37
38
|
"@storybook/addon-essentials": "7.6.8",
|
|
@@ -57,6 +58,7 @@
|
|
|
57
58
|
"babel-loader": "^9.1.3",
|
|
58
59
|
"babel-plugin-macros": "^3.1.0",
|
|
59
60
|
"babel-plugin-named-exports-order": "^0.0.2",
|
|
61
|
+
"chromatic": "^11.3.5",
|
|
60
62
|
"eslint-plugin-storybook": "0.6.15",
|
|
61
63
|
"faker": "^5.1.0",
|
|
62
64
|
"immer": "9.0.7",
|
|
@@ -98,8 +100,8 @@
|
|
|
98
100
|
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
99
101
|
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
100
102
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
101
|
-
"@lingui/react": "3.17.2",
|
|
102
103
|
"@lingui/core": "3.17.2",
|
|
104
|
+
"@lingui/react": "3.17.2",
|
|
103
105
|
"@popperjs/core": "^2.11.8",
|
|
104
106
|
"@xstyled/styled-components": "^3.8.0",
|
|
105
107
|
"babel-plugin-macros": "^3.1.0",
|
|
@@ -17,7 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
17
17
|
import { useMemo } from 'react';
|
|
18
18
|
import styled from '@xstyled/styled-components';
|
|
19
19
|
import HighlightBox from '../../../../Elements/HighlightBox';
|
|
20
|
-
var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n width:
|
|
20
|
+
var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n width: fit-content;\n"], ["\n display: flex;\n justify-content: flex-start;\n width: fit-content;\n"])));
|
|
21
21
|
export var EnumInCell = function (_a) {
|
|
22
22
|
var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
|
|
23
23
|
var finalLabel = useMemo(function () {
|
|
@@ -22,7 +22,7 @@ var FilterSetter = function (_a) {
|
|
|
22
22
|
};
|
|
23
23
|
var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
|
|
24
24
|
export default {
|
|
25
|
-
title: '
|
|
25
|
+
title: 'Blocks/CommonGrid',
|
|
26
26
|
decorators: [withRedux],
|
|
27
27
|
};
|
|
28
28
|
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
|
|
@@ -7,7 +7,7 @@ import withRouter from '../utils/withRouter';
|
|
|
7
7
|
import withRedux from '../utils/withRedux';
|
|
8
8
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
9
9
|
export default {
|
|
10
|
-
title: '
|
|
10
|
+
title: 'Blocks/CommonGrid',
|
|
11
11
|
decorators: [withTheme, withRouter, withRedux],
|
|
12
12
|
};
|
|
13
13
|
export var Default = function () {
|
|
@@ -4,7 +4,7 @@ import { createRandomData, gridSelectors, gridDummyActions } from '../utils/util
|
|
|
4
4
|
import { columnDefinitions } from '../utils/columnDefinition';
|
|
5
5
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: '
|
|
7
|
+
title: 'Blocks/CommonGrid',
|
|
8
8
|
};
|
|
9
9
|
export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
|
|
10
10
|
LoadingState.story = {
|
|
@@ -4,7 +4,7 @@ import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../u
|
|
|
4
4
|
import { oversizedColumnDefinition } from '../utils/columnDefinition';
|
|
5
5
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: '
|
|
7
|
+
title: 'Blocks/CommonGrid',
|
|
8
8
|
};
|
|
9
9
|
export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
|
|
10
10
|
ManyColumnsNoScrollLayout.story = {
|
|
@@ -4,7 +4,7 @@ import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../u
|
|
|
4
4
|
import { oversizedColumnDefinition } from '../utils/columnDefinition';
|
|
5
5
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: '
|
|
7
|
+
title: 'Blocks/CommonGrid',
|
|
8
8
|
};
|
|
9
9
|
export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
|
|
10
10
|
ManyColumnsNormalLayoutANoControls.story = {
|
|
@@ -7,7 +7,7 @@ import withRouter from '../utils/withRouter';
|
|
|
7
7
|
import withRedux from '../utils/withRedux';
|
|
8
8
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
9
9
|
export default {
|
|
10
|
-
title: '
|
|
10
|
+
title: 'Blocks/CommonGrid',
|
|
11
11
|
decorators: [withTheme, withRouter, withRedux],
|
|
12
12
|
};
|
|
13
13
|
export var Styled = function () {
|
|
@@ -5,7 +5,7 @@ import { columnDefinitions } from '../utils/columnDefinition';
|
|
|
5
5
|
import { onRowAction } from '../utils/actions';
|
|
6
6
|
import { LinguiContainer } from '../utils/linguiContainer';
|
|
7
7
|
export default {
|
|
8
|
-
title: '
|
|
8
|
+
title: 'Blocks/CommonGrid',
|
|
9
9
|
};
|
|
10
10
|
export var WithCustomGridActions = function () {
|
|
11
11
|
return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
|
|
@@ -2,7 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { x } from '@xstyled/styled-components';
|
|
5
|
+
import styled, { x, css } from '@xstyled/styled-components';
|
|
6
6
|
import { th } from '@xstyled/system';
|
|
7
7
|
import { Button } from '../../Elements/Button';
|
|
8
8
|
import CommonGrid from './CommonGrid';
|
|
@@ -15,9 +15,9 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
|
|
|
15
15
|
});
|
|
16
16
|
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"])));
|
|
17
17
|
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
18
|
-
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n
|
|
18
|
+
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n"])));
|
|
19
19
|
export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"], ["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"])), th('colors.blue2'));
|
|
20
|
-
export var CommonGridWithStyles = styled(CommonGrid)(
|
|
20
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
21
21
|
var theme = _a.theme;
|
|
22
22
|
return theme.colors.white;
|
|
23
23
|
}, function (_a) {
|
|
@@ -26,8 +26,11 @@ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templa
|
|
|
26
26
|
}, function (_a) {
|
|
27
27
|
var height = _a.height;
|
|
28
28
|
return (height ? '35px' : '0');
|
|
29
|
+
}, function (_a) {
|
|
30
|
+
var height = _a.height;
|
|
31
|
+
return !height && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow: scroll;\n height: 475px;\n "], ["\n overflow: scroll;\n height: 475px;\n "])));
|
|
29
32
|
}, function (_a) {
|
|
30
33
|
var height = _a.height;
|
|
31
34
|
return (height ? "".concat(height, "px") : '475px');
|
|
32
35
|
});
|
|
33
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
36
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|