@mailstep/design-system 0.6.89-beta.1 → 0.6.89-beta.3
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/README.md +0 -2
- package/package.json +1 -3
- package/ui/Blocks/CommonGrid/types.d.ts +1 -0
- package/ui/Elements/Button/styles.js +2 -2
- package/ui/Elements/Select/themes/selectStyles.js +1 -1
- package/ui/index.es.js +7759 -7770
- package/ui/index.umd.js +362 -363
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mailstep/design-system",
|
|
3
|
-
"version": "0.6.89-beta.
|
|
3
|
+
"version": "0.6.89-beta.3",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./ui/index.js",
|
|
@@ -17,7 +17,6 @@
|
|
|
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 --exit-zero-on-changes",
|
|
21
20
|
"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
|
|
22
21
|
},
|
|
23
22
|
"devDependencies": {
|
|
@@ -63,7 +62,6 @@
|
|
|
63
62
|
"babel-loader": "^9.1.3",
|
|
64
63
|
"babel-plugin-macros": "^3.1.0",
|
|
65
64
|
"babel-plugin-named-exports-order": "^0.0.2",
|
|
66
|
-
"chromatic": "^11.3.5",
|
|
67
65
|
"eslint": "^8.41.0",
|
|
68
66
|
"eslint-config-prettier": "^8.8.0",
|
|
69
67
|
"eslint-config-standard-with-typescript": "^34.0.1",
|
|
@@ -112,6 +112,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
|
|
|
112
112
|
comparators?: Comparator[];
|
|
113
113
|
filterTime?: boolean;
|
|
114
114
|
decimals?: number;
|
|
115
|
+
isFloat?: boolean;
|
|
115
116
|
isBigInt?: boolean;
|
|
116
117
|
isUuid?: boolean;
|
|
117
118
|
defaultComparator?: string;
|
|
@@ -16,7 +16,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
@@ -27,6 +27,6 @@ export var StyledButton = styled.button(templateObject_4 || (templateObject_4 =
|
|
|
27
27
|
return (disabled ? 0.6 : 1);
|
|
28
28
|
}, function (_a) {
|
|
29
29
|
var disabled = _a.disabled;
|
|
30
|
-
return (disabled ? '
|
|
30
|
+
return (disabled ? 'not-allowed' : 'pointer');
|
|
31
31
|
});
|
|
32
32
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|