@mailstep/design-system 0.6.18 → 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
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",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"deploy": "npm run build && npm publish ./build",
|
|
18
18
|
"dev": "yarn storybook",
|
|
19
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"
|
|
20
|
+
"chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@babel/core": "^7.20.12",
|
|
@@ -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 () {
|
|
@@ -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;
|