@m4l/components 9.1.51 → 9.1.52
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/components/PrintingSystem/types.d.ts +2 -2
- package/components/mui_extended/TextField/TextField.js +7 -13
- package/components/mui_extended/TextField/TextField.styles.js +16 -16
- package/components/mui_extended/TextField/constants.js +2 -3
- package/components/mui_extended/TextField/types.d.ts +9 -17
- package/components/mui_extended/Typography/types.d.ts +2 -2
- package/components/mui_extended/Typography/typography.styles.js +6 -298
- package/package.json +2 -2
- package/utils/getTypographyStyles.d.ts +11 -0
- package/utils/getTypographyStyles.js +8 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TypographyVariants } from '@m4l/styles';
|
|
2
2
|
import { CSSProperties, ReactNode } from 'react';
|
|
3
3
|
import { PageNodeProps } from './subcomponents/PageNode/types';
|
|
4
4
|
import { SectionNodeProps } from './subcomponents/SectionNode/types';
|
|
@@ -99,7 +99,7 @@ export interface SectionNode extends BaseNode, PaddingProperties, SizeProperty {
|
|
|
99
99
|
*/
|
|
100
100
|
export interface TextBoxNode extends Omit<BaseNode, 'children'> {
|
|
101
101
|
type: 'textBox';
|
|
102
|
-
variant:
|
|
102
|
+
variant: TypographyVariants;
|
|
103
103
|
textAlign: 'start' | 'center' | 'end' | 'justify';
|
|
104
104
|
children: string;
|
|
105
105
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useModuleSkeleton } from "@m4l/core";
|
|
3
3
|
import { useTheme } from "@mui/material";
|
|
4
4
|
import { S as SkeletonStyled, T as TextFieldRootStyled } from "./slots/TextFieldSlots.js";
|
|
5
5
|
import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
6
|
-
import { T as TEXT_FIELD_KEY_COMPONENT
|
|
6
|
+
import { T as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
|
|
7
7
|
import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
|
|
8
|
-
import { clsx } from "clsx";
|
|
9
8
|
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
10
9
|
const TextField = (props) => {
|
|
11
10
|
const {
|
|
@@ -23,17 +22,13 @@ const TextField = (props) => {
|
|
|
23
22
|
const { currentSize } = useComponentSize(size);
|
|
24
23
|
const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
|
|
25
24
|
const theme = useTheme();
|
|
26
|
-
const paletteColor =
|
|
27
|
-
theme.palette,
|
|
28
|
-
disabled ? "default" : error ? "error" : color,
|
|
29
|
-
theme.palette.default
|
|
30
|
-
);
|
|
25
|
+
const paletteColor = disabled && theme.palette.default || error && theme.palette.error || theme.palette[color] || theme.palette.default;
|
|
31
26
|
const ownerState = {
|
|
32
27
|
size: adjustedSize,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
disabled,
|
|
29
|
+
paletteColor,
|
|
30
|
+
variants: variant,
|
|
31
|
+
error
|
|
37
32
|
};
|
|
38
33
|
const isSkeleton = useModuleSkeleton();
|
|
39
34
|
if (isSkeleton) {
|
|
@@ -52,7 +47,6 @@ const TextField = (props) => {
|
|
|
52
47
|
{
|
|
53
48
|
ownerState: { ...ownerState },
|
|
54
49
|
...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
|
|
55
|
-
className: clsx(TEXT_FIELD_CLASSES.root, className),
|
|
56
50
|
autoComplete,
|
|
57
51
|
inputMode: "numeric",
|
|
58
52
|
inputProps: {
|
|
@@ -32,7 +32,7 @@ const textFieldStyles = {
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
// Variant Outlined TextField
|
|
35
|
-
...ownerState.
|
|
35
|
+
...ownerState.variants === "outlined" && {
|
|
36
36
|
"& .MuiInputBase-root": {
|
|
37
37
|
padding: 0,
|
|
38
38
|
minHeight: 0,
|
|
@@ -48,11 +48,11 @@ const textFieldStyles = {
|
|
|
48
48
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
49
49
|
minHeight: 0,
|
|
50
50
|
border: theme.vars.size.borderStroke.actionInput,
|
|
51
|
-
borderColor: ownerState.
|
|
51
|
+
borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default
|
|
52
52
|
},
|
|
53
53
|
//Estilo Hover para primary para el Icono e IconButton
|
|
54
54
|
"&:hover": {
|
|
55
|
-
backgroundColor: ownerState.
|
|
55
|
+
backgroundColor: ownerState.error ? "inherit" : theme.palette.primary.hoverOpacity
|
|
56
56
|
},
|
|
57
57
|
//Estilo Focus para primary para el Icono e IconButton
|
|
58
58
|
":focus-within": {
|
|
@@ -83,13 +83,13 @@ const textFieldStyles = {
|
|
|
83
83
|
height: "inherit",
|
|
84
84
|
//Estilos del InputBase en hover
|
|
85
85
|
"&:hover ~ .MuiOutlinedInput-notchedOutline": {
|
|
86
|
-
...ownerState.
|
|
87
|
-
borderColor: ownerState.
|
|
86
|
+
...ownerState.error && {
|
|
87
|
+
borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
// Estilos del InputBase en Focus
|
|
91
91
|
"&:focus ~ .MuiOutlinedInput-notchedOutline": {
|
|
92
|
-
borderColor: ownerState.
|
|
92
|
+
borderColor: ownerState.error ? theme.vars.palette.border.error : ownerState.paletteColor?.selected
|
|
93
93
|
},
|
|
94
94
|
//Estilos del InputBase en placeholder default
|
|
95
95
|
"&::placeholder": {
|
|
@@ -101,11 +101,11 @@ const textFieldStyles = {
|
|
|
101
101
|
padding: 0
|
|
102
102
|
},
|
|
103
103
|
// Historia Disabled para Outlined
|
|
104
|
-
...ownerState.
|
|
104
|
+
...ownerState.disabled && {
|
|
105
105
|
borderColor: theme.palette.border.disabled,
|
|
106
|
-
pointerEvents: ownerState.
|
|
106
|
+
pointerEvents: ownerState.disabled ? "none" : "auto",
|
|
107
107
|
"&:hover": {
|
|
108
|
-
pointerEvents: ownerState.
|
|
108
|
+
pointerEvents: ownerState.disabled ? "none" : "auto"
|
|
109
109
|
},
|
|
110
110
|
"& .MuiInputBase-input::placeholder": {
|
|
111
111
|
color: theme.palette.text.disabled
|
|
@@ -120,7 +120,7 @@ const textFieldStyles = {
|
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
122
|
// Variant Text TextField
|
|
123
|
-
...ownerState.
|
|
123
|
+
...ownerState.variants === "text" && {
|
|
124
124
|
borderColor: "transparent",
|
|
125
125
|
"& .MuiInputBase-root": {
|
|
126
126
|
padding: 0,
|
|
@@ -139,14 +139,14 @@ const textFieldStyles = {
|
|
|
139
139
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
140
140
|
minHeight: 0,
|
|
141
141
|
border: theme.vars.size.borderStroke.actionInput,
|
|
142
|
-
borderColor: ownerState.
|
|
142
|
+
borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default,
|
|
143
143
|
borderLeft: "transparent",
|
|
144
144
|
borderTop: "transparent",
|
|
145
145
|
borderRight: "transparent"
|
|
146
146
|
},
|
|
147
147
|
//Estilo Hover para primary para el Icono e IconButton
|
|
148
148
|
"&:hover": {
|
|
149
|
-
backgroundColor: ownerState.
|
|
149
|
+
backgroundColor: ownerState.error ? "inherit" : theme.palette.primary.hoverOpacity,
|
|
150
150
|
'.MuiIconButton-root [class*="M4LIcon-icon"]': {
|
|
151
151
|
backgroundColor: theme.vars.palette.text.primary
|
|
152
152
|
}
|
|
@@ -179,7 +179,7 @@ const textFieldStyles = {
|
|
|
179
179
|
height: "inherit",
|
|
180
180
|
//Estilo Focus del InputBase
|
|
181
181
|
"&:focus ~ .MuiOutlinedInput-notchedOutline": {
|
|
182
|
-
borderColor: ownerState.
|
|
182
|
+
borderColor: ownerState.error ? theme.vars.palette.border.error : ownerState.paletteColor?.selected
|
|
183
183
|
},
|
|
184
184
|
// Estilos del InputBase en placeholder default
|
|
185
185
|
"&::placeholder": {
|
|
@@ -191,16 +191,16 @@ const textFieldStyles = {
|
|
|
191
191
|
padding: 0
|
|
192
192
|
},
|
|
193
193
|
// Historia Disabled
|
|
194
|
-
...ownerState.
|
|
194
|
+
...ownerState.disabled && {
|
|
195
195
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
196
196
|
borderColor: theme.palette.border.disabled,
|
|
197
197
|
borderTop: theme.palette.border.disabled,
|
|
198
198
|
borderLeft: "transparent",
|
|
199
199
|
borderRight: "transparent"
|
|
200
200
|
},
|
|
201
|
-
pointerEvents: ownerState.
|
|
201
|
+
pointerEvents: ownerState.disabled ? "none" : "auto",
|
|
202
202
|
"&:hover": {
|
|
203
|
-
pointerEvents: ownerState.
|
|
203
|
+
pointerEvents: ownerState.disabled ? "none" : "auto"
|
|
204
204
|
},
|
|
205
205
|
"& .MuiInputBase-input::placeholder": {
|
|
206
206
|
color: theme.palette.text.disabled
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
|
|
2
2
|
import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
|
|
3
3
|
const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
|
|
4
|
-
|
|
4
|
+
getComponentClasses(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots);
|
|
5
5
|
export {
|
|
6
|
-
TEXT_FIELD_KEY_COMPONENT as T
|
|
7
|
-
TEXT_FIELD_CLASSES as a
|
|
6
|
+
TEXT_FIELD_KEY_COMPONENT as T
|
|
8
7
|
};
|
|
@@ -41,6 +41,10 @@ export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color'
|
|
|
41
41
|
* color="primary"
|
|
42
42
|
*/
|
|
43
43
|
color?: Extract<ComponentPalletColor, 'default' | 'primary'>;
|
|
44
|
+
/**
|
|
45
|
+
* Indica si el campo de texto debe aceptar solo texto.
|
|
46
|
+
*/
|
|
47
|
+
type?: string;
|
|
44
48
|
}
|
|
45
49
|
/**
|
|
46
50
|
* Estado del propietario del campo de texto.
|
|
@@ -49,19 +53,15 @@ export interface TextFieldOwnerState {
|
|
|
49
53
|
/**
|
|
50
54
|
* Indica si el campo de texto está deshabilitado.
|
|
51
55
|
*/
|
|
52
|
-
|
|
56
|
+
disabled?: boolean;
|
|
53
57
|
/**
|
|
54
58
|
* Color de la paleta del campo de texto.
|
|
55
59
|
*/
|
|
56
|
-
|
|
60
|
+
paletteColor: PaletteColor;
|
|
57
61
|
/**
|
|
58
62
|
* Variante del campo de texto.
|
|
59
63
|
*/
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Color de la paleta del componente del campo de texto.
|
|
63
|
-
*/
|
|
64
|
-
textFieldComponentPaletteColor?: ComponentPalletColor;
|
|
64
|
+
variants?: TextFieldVariants;
|
|
65
65
|
/**
|
|
66
66
|
* Tamaño del campo de texto.
|
|
67
67
|
*/
|
|
@@ -69,15 +69,7 @@ export interface TextFieldOwnerState {
|
|
|
69
69
|
/**
|
|
70
70
|
* Indica si el campo de texto es error.
|
|
71
71
|
*/
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Color del campo de texto.
|
|
75
|
-
*/
|
|
76
|
-
textFieldColor?: Extract<ComponentPalletColor, 'primary'>;
|
|
77
|
-
/**
|
|
78
|
-
* Indica si el campo de texto debe aceptar solo texto.
|
|
79
|
-
*/
|
|
80
|
-
type?: string;
|
|
72
|
+
error?: boolean;
|
|
81
73
|
}
|
|
82
74
|
export type TextFieldSlotsType = keyof typeof TextFieldSlots;
|
|
83
|
-
export type TextFieldStyles =
|
|
75
|
+
export type TextFieldStyles = OverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
2
2
|
import { TypographyProps as MUITypographyProps, Theme } from '@mui/material';
|
|
3
|
-
import { Sizes,
|
|
3
|
+
import { Sizes, TypographyVariants } from '@m4l/styles';
|
|
4
4
|
import { TypographySlots } from './slots/typographyEnum';
|
|
5
5
|
import { TYPOGRAPHY_KEY_COMPONENT } from './constants';
|
|
6
6
|
/**
|
|
@@ -30,7 +30,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
|
|
|
30
30
|
/**
|
|
31
31
|
* Listas de variantes de tipografía disponibles para la aplicación web.
|
|
32
32
|
*/
|
|
33
|
-
variant?:
|
|
33
|
+
variant?: TypographyVariants;
|
|
34
34
|
/**
|
|
35
35
|
* Contenido del componente.
|
|
36
36
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
|
|
1
2
|
const typographyStyles = {
|
|
2
3
|
/**
|
|
3
4
|
* Slot: root
|
|
@@ -29,304 +30,11 @@ const typographyStyles = {
|
|
|
29
30
|
...ownerState.typographyColor === "text.disabled" && {
|
|
30
31
|
color: theme.vars.palette.text.disabled
|
|
31
32
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
...ownerState.typographyVariant === "h1" && {
|
|
38
|
-
fontSize: theme.size.typography.mobile.small.h1.fontSize,
|
|
39
|
-
fontWeight: theme.size.typography.mobile.small.h1.weight,
|
|
40
|
-
lineHeight: theme.size.typography.mobile.small.h1.lineHeight,
|
|
41
|
-
letterSpacing: theme.size.typography.mobile.small.h1.letterSpacing
|
|
42
|
-
},
|
|
43
|
-
// mobile - »small - »variant (h2) 💅
|
|
44
|
-
...ownerState.typographyVariant === "h2" && {
|
|
45
|
-
fontSize: theme.size.typography.mobile.small.h2.fontSize,
|
|
46
|
-
fontWeight: theme.size.typography.mobile.small.h2.weight,
|
|
47
|
-
lineHeight: theme.size.typography.mobile.small.h2.lineHeight,
|
|
48
|
-
letterSpacing: theme.size.typography.mobile.small.h2.letterSpacing
|
|
49
|
-
},
|
|
50
|
-
// mobile - »small - »variant (h3) 💅
|
|
51
|
-
...ownerState.typographyVariant === "h3" && {
|
|
52
|
-
fontSize: theme.size.typography.mobile.small.h3.fontSize,
|
|
53
|
-
fontWeight: theme.size.typography.mobile.small.h3.weight,
|
|
54
|
-
lineHeight: theme.size.typography.mobile.small.h3.lineHeight,
|
|
55
|
-
letterSpacing: theme.size.typography.mobile.small.h3.letterSpacing
|
|
56
|
-
},
|
|
57
|
-
// mobile - »small - »variant(h5) 💅
|
|
58
|
-
...ownerState.typographyVariant === "h5" && {
|
|
59
|
-
fontSize: theme.size.typography.mobile.small.h5.fontSize,
|
|
60
|
-
fontWeight: theme.size.typography.mobile.small.h5.weight,
|
|
61
|
-
lineHeight: theme.size.typography.mobile.small.h5.lineHeight,
|
|
62
|
-
letterSpacing: theme.size.typography.mobile.small.h5.letterSpacing
|
|
63
|
-
},
|
|
64
|
-
// mobile - »small - »variant (subtitle) 💅
|
|
65
|
-
...ownerState.typographyVariant === "subtitle" && {
|
|
66
|
-
fontSize: theme.size.typography.mobile.small.subtitle.fontSize,
|
|
67
|
-
fontWeight: theme.size.typography.mobile.small.subtitle.weight,
|
|
68
|
-
lineHeight: theme.size.typography.mobile.small.subtitle.lineHeight,
|
|
69
|
-
letterSpacing: theme.size.typography.mobile.small.subtitle.letterSpacing
|
|
70
|
-
},
|
|
71
|
-
// mobile - »small - »variant (subtitleDens) 💅
|
|
72
|
-
...ownerState.typographyVariant === "subtitleDens" && {
|
|
73
|
-
fontSize: theme.size.typography.mobile.small.subtitleDens.fontSize,
|
|
74
|
-
fontWeight: theme.size.typography.mobile.small.subtitleDens.weight,
|
|
75
|
-
lineHeight: theme.size.typography.mobile.small.subtitleDens.lineHeight,
|
|
76
|
-
letterSpacing: theme.size.typography.mobile.small.subtitleDens.letterSpacing
|
|
77
|
-
},
|
|
78
|
-
// mobile - »small - »variant (paragraph) 💅
|
|
79
|
-
...ownerState.typographyVariant === "paragraph" && {
|
|
80
|
-
fontSize: theme.size.typography.mobile.small.paragraph.fontSize,
|
|
81
|
-
fontWeight: theme.size.typography.mobile.small.paragraph.weight,
|
|
82
|
-
lineHeight: theme.size.typography.mobile.small.paragraph.lineHeight,
|
|
83
|
-
letterSpacing: theme.size.typography.mobile.small.paragraph.letterSpacing
|
|
84
|
-
},
|
|
85
|
-
// mobile - »small - »variant (paragraphDens) 💅
|
|
86
|
-
...ownerState.typographyVariant === "paragraphDens" && {
|
|
87
|
-
fontSize: theme.size.typography.mobile.small.paragraphDens.fontSize,
|
|
88
|
-
fontWeight: theme.size.typography.mobile.small.paragraphDens.weight,
|
|
89
|
-
lineHeight: theme.size.typography.mobile.small.paragraphDens.lineHeight,
|
|
90
|
-
letterSpacing: theme.size.typography.mobile.small.paragraphDens.letterSpacing
|
|
91
|
-
},
|
|
92
|
-
// mobile - »small - »variant (body) 💅
|
|
93
|
-
...ownerState.typographyVariant === "body" && {
|
|
94
|
-
fontSize: theme.size.typography.mobile.small.body.fontSize,
|
|
95
|
-
fontWeight: theme.size.typography.mobile.small.body.weight,
|
|
96
|
-
lineHeight: theme.size.typography.mobile.small.body.lineHeight,
|
|
97
|
-
letterSpacing: theme.size.typography.mobile.small.body.letterSpacing
|
|
98
|
-
},
|
|
99
|
-
// mobile - »small - »variant (bodyDens) 💅
|
|
100
|
-
...ownerState.typographyVariant === "body" && {
|
|
101
|
-
fontSize: theme.size.typography.mobile.small.bodyDens.fontSize,
|
|
102
|
-
fontWeight: theme.size.typography.mobile.small.bodyDens.weight,
|
|
103
|
-
lineHeight: theme.size.typography.mobile.small.bodyDens.lineHeight,
|
|
104
|
-
letterSpacing: theme.size.typography.mobile.small.bodyDens.letterSpacing
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
// mobile - »medium - 👑 Predeterminado
|
|
108
|
-
...ownerState.typographySize === "medium" && {
|
|
109
|
-
// mobile - medium - »variant (h1) 💅
|
|
110
|
-
...ownerState.typographyVariant === "h1" && {
|
|
111
|
-
fontSize: theme.size.typography.mobile.medium.h1.fontSize,
|
|
112
|
-
fontWeight: theme.size.typography.mobile.medium.h1.weight,
|
|
113
|
-
lineHeight: theme.size.typography.mobile.medium.h1.lineHeight,
|
|
114
|
-
letterSpacing: theme.size.typography.mobile.medium.h1.letterSpacing
|
|
115
|
-
},
|
|
116
|
-
// mobile - medium - »variant (h2) 💅
|
|
117
|
-
...ownerState.typographyVariant === "h2" && {
|
|
118
|
-
fontSize: theme.size.typography.mobile.medium.h2.fontSize,
|
|
119
|
-
fontWeight: theme.size.typography.mobile.medium.h2.weight,
|
|
120
|
-
lineHeight: theme.size.typography.mobile.medium.h2.lineHeight,
|
|
121
|
-
letterSpacing: theme.size.typography.mobile.medium.h2.letterSpacing
|
|
122
|
-
},
|
|
123
|
-
// mobile - medium - »variant (h3) 💅
|
|
124
|
-
...ownerState.typographyVariant === "h3" && {
|
|
125
|
-
fontSize: theme.size.typography.mobile.medium.h3.fontSize,
|
|
126
|
-
fontWeight: theme.size.typography.mobile.medium.h3.weight,
|
|
127
|
-
lineHeight: theme.size.typography.mobile.medium.h3.lineHeight,
|
|
128
|
-
letterSpacing: theme.size.typography.mobile.medium.h3.letterSpacing
|
|
129
|
-
},
|
|
130
|
-
// mobile - medium - »variant(h5) 💅
|
|
131
|
-
...ownerState.typographyVariant === "h5" && {
|
|
132
|
-
fontSize: theme.size.typography.mobile.medium.h5.fontSize,
|
|
133
|
-
fontWeight: theme.size.typography.mobile.medium.h5.weight,
|
|
134
|
-
lineHeight: theme.size.typography.mobile.medium.h5.lineHeight,
|
|
135
|
-
letterSpacing: theme.size.typography.mobile.medium.h5.letterSpacing
|
|
136
|
-
},
|
|
137
|
-
// mobile - medium - »variant (subtitle) 💅
|
|
138
|
-
...ownerState.typographyVariant === "subtitle" && {
|
|
139
|
-
fontSize: theme.size.typography.mobile.medium.subtitle.fontSize,
|
|
140
|
-
fontWeight: theme.size.typography.mobile.medium.subtitle.weight,
|
|
141
|
-
lineHeight: theme.size.typography.mobile.medium.subtitle.lineHeight,
|
|
142
|
-
letterSpacing: theme.size.typography.mobile.medium.subtitle.letterSpacing
|
|
143
|
-
},
|
|
144
|
-
// mobile - medium - »variant (subtitleDens) 💅
|
|
145
|
-
...ownerState.typographyVariant === "subtitleDens" && {
|
|
146
|
-
fontSize: theme.size.typography.mobile.medium.subtitleDens.fontSize,
|
|
147
|
-
fontWeight: theme.size.typography.mobile.medium.subtitleDens.weight,
|
|
148
|
-
lineHeight: theme.size.typography.mobile.medium.subtitleDens.lineHeight,
|
|
149
|
-
letterSpacing: theme.size.typography.mobile.medium.subtitleDens.letterSpacing
|
|
150
|
-
},
|
|
151
|
-
// mobile - medium - »variant (paragraph) 💅
|
|
152
|
-
...ownerState.typographyVariant === "paragraph" && {
|
|
153
|
-
fontSize: theme.size.typography.mobile.medium.paragraph.fontSize,
|
|
154
|
-
fontWeight: theme.size.typography.mobile.medium.paragraph.weight,
|
|
155
|
-
lineHeight: theme.size.typography.mobile.medium.paragraph.lineHeight,
|
|
156
|
-
letterSpacing: theme.size.typography.mobile.medium.paragraph.letterSpacing
|
|
157
|
-
},
|
|
158
|
-
// mobile - medium - »variant (paragraphDens) 💅
|
|
159
|
-
...ownerState.typographyVariant === "paragraphDens" && {
|
|
160
|
-
fontSize: theme.size.typography.mobile.medium.paragraphDens.fontSize,
|
|
161
|
-
fontWeight: theme.size.typography.mobile.medium.paragraphDens.weight,
|
|
162
|
-
lineHeight: theme.size.typography.mobile.medium.paragraphDens.lineHeight,
|
|
163
|
-
letterSpacing: theme.size.typography.mobile.medium.paragraphDens.letterSpacing
|
|
164
|
-
},
|
|
165
|
-
// mobile - medium - »variant (body) 💅
|
|
166
|
-
...ownerState.typographyVariant === "body" && {
|
|
167
|
-
fontSize: theme.size.typography.mobile.medium.body.fontSize,
|
|
168
|
-
fontWeight: theme.size.typography.mobile.medium.body.weight,
|
|
169
|
-
lineHeight: theme.size.typography.mobile.medium.body.lineHeight,
|
|
170
|
-
letterSpacing: theme.size.typography.mobile.medium.body.letterSpacing
|
|
171
|
-
},
|
|
172
|
-
// mobile - medium - »variant (bodyDens) 💅
|
|
173
|
-
...ownerState.typographyVariant === "body" && {
|
|
174
|
-
fontSize: theme.size.typography.mobile.medium.bodyDens.fontSize,
|
|
175
|
-
fontWeight: theme.size.typography.mobile.medium.bodyDens.weight,
|
|
176
|
-
lineHeight: theme.size.typography.mobile.medium.bodyDens.lineHeight,
|
|
177
|
-
letterSpacing: theme.size.typography.mobile.medium.bodyDens.letterSpacing
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
// Dispositivo »desktop 💻
|
|
182
|
-
...theme.generalSettings.isMobile === false && {
|
|
183
|
-
// desktop - »small
|
|
184
|
-
...ownerState.typographySize === "small" && {
|
|
185
|
-
// desktop - »small - »variant (h1) 💅
|
|
186
|
-
...ownerState.typographyVariant === "h1" && {
|
|
187
|
-
fontSize: theme.size.typography.desktop.small.h1.fontSize,
|
|
188
|
-
fontWeight: theme.size.typography.desktop.small.h1.weight,
|
|
189
|
-
lineHeight: theme.size.typography.desktop.small.h1.lineHeight,
|
|
190
|
-
letterSpacing: theme.size.typography.desktop.small.h1.letterSpacing
|
|
191
|
-
},
|
|
192
|
-
// desktop - »small - »variant (h2) 💅
|
|
193
|
-
...ownerState.typographyVariant === "h2" && {
|
|
194
|
-
fontSize: theme.size.typography.desktop.small.h2.fontSize,
|
|
195
|
-
fontWeight: theme.size.typography.desktop.small.h2.weight,
|
|
196
|
-
lineHeight: theme.size.typography.desktop.small.h2.lineHeight,
|
|
197
|
-
letterSpacing: theme.size.typography.desktop.small.h2.letterSpacing
|
|
198
|
-
},
|
|
199
|
-
// desktop - »small - »variant (h3) 💅
|
|
200
|
-
...ownerState.typographyVariant === "h3" && {
|
|
201
|
-
fontSize: theme.size.typography.desktop.small.h3.fontSize,
|
|
202
|
-
fontWeight: theme.size.typography.desktop.small.h3.weight,
|
|
203
|
-
lineHeight: theme.size.typography.desktop.small.h3.lineHeight,
|
|
204
|
-
letterSpacing: theme.size.typography.desktop.small.h3.letterSpacing
|
|
205
|
-
},
|
|
206
|
-
// desktop - »small - »variant(h5) 💅
|
|
207
|
-
...ownerState.typographyVariant === "h5" && {
|
|
208
|
-
fontSize: theme.size.typography.desktop.small.h5.fontSize,
|
|
209
|
-
fontWeight: theme.size.typography.desktop.small.h5.weight,
|
|
210
|
-
lineHeight: theme.size.typography.desktop.small.h5.lineHeight,
|
|
211
|
-
letterSpacing: theme.size.typography.desktop.small.h5.letterSpacing
|
|
212
|
-
},
|
|
213
|
-
// desktop - »small - »variant (subtitle) 💅
|
|
214
|
-
...ownerState.typographyVariant === "subtitle" && {
|
|
215
|
-
fontSize: theme.size.typography.desktop.small.subtitle.fontSize,
|
|
216
|
-
fontWeight: theme.size.typography.desktop.small.subtitle.weight,
|
|
217
|
-
lineHeight: theme.size.typography.desktop.small.subtitle.lineHeight,
|
|
218
|
-
letterSpacing: theme.size.typography.desktop.small.subtitle.letterSpacing
|
|
219
|
-
},
|
|
220
|
-
// desktop - »small - »variant (subtitleDens) 💅
|
|
221
|
-
...ownerState.typographyVariant === "subtitleDens" && {
|
|
222
|
-
fontSize: theme.size.typography.desktop.small.subtitleDens.fontSize,
|
|
223
|
-
fontWeight: theme.size.typography.desktop.small.subtitleDens.weight,
|
|
224
|
-
lineHeight: theme.size.typography.desktop.small.subtitleDens.lineHeight,
|
|
225
|
-
letterSpacing: theme.size.typography.desktop.small.subtitleDens.letterSpacing
|
|
226
|
-
},
|
|
227
|
-
// desktop - »small - »variant (paragraph) 💅
|
|
228
|
-
...ownerState.typographyVariant === "paragraph" && {
|
|
229
|
-
fontSize: theme.size.typography.desktop.small.paragraph.fontSize,
|
|
230
|
-
fontWeight: theme.size.typography.desktop.small.paragraph.weight,
|
|
231
|
-
lineHeight: theme.size.typography.desktop.small.paragraph.lineHeight,
|
|
232
|
-
letterSpacing: theme.size.typography.desktop.small.paragraph.letterSpacing
|
|
233
|
-
},
|
|
234
|
-
// desktop - »small - »variant (paragraphDens) 💅
|
|
235
|
-
...ownerState.typographyVariant === "paragraphDens" && {
|
|
236
|
-
fontSize: theme.size.typography.desktop.small.paragraphDens.fontSize,
|
|
237
|
-
fontWeight: theme.size.typography.desktop.small.paragraphDens.weight,
|
|
238
|
-
lineHeight: theme.size.typography.desktop.small.paragraphDens.lineHeight,
|
|
239
|
-
letterSpacing: theme.size.typography.desktop.small.paragraphDens.letterSpacing
|
|
240
|
-
},
|
|
241
|
-
// desktop - »small - »variant (body) 💅
|
|
242
|
-
...ownerState.typographyVariant === "body" && {
|
|
243
|
-
fontSize: theme.size.typography.desktop.small.body.fontSize,
|
|
244
|
-
fontWeight: theme.size.typography.desktop.small.body.weight,
|
|
245
|
-
lineHeight: theme.size.typography.desktop.small.body.lineHeight,
|
|
246
|
-
letterSpacing: theme.size.typography.desktop.small.body.letterSpacing
|
|
247
|
-
},
|
|
248
|
-
// desktop - »small - »variant (bodyDens) 💅
|
|
249
|
-
...ownerState.typographyVariant === "bodyDens" && {
|
|
250
|
-
fontSize: theme.size.typography.desktop.small.bodyDens.fontSize,
|
|
251
|
-
fontWeight: theme.size.typography.desktop.small.bodyDens.weight,
|
|
252
|
-
lineHeight: theme.size.typography.desktop.small.bodyDens.lineHeight,
|
|
253
|
-
letterSpacing: theme.size.typography.desktop.small.bodyDens.letterSpacing
|
|
254
|
-
}
|
|
255
|
-
},
|
|
256
|
-
// desktop - »medium - 👑 Predeterminado
|
|
257
|
-
...ownerState.typographySize === "medium" && {
|
|
258
|
-
// desktop - medium - »variant (h1) 💅
|
|
259
|
-
...ownerState.typographyVariant === "h1" && {
|
|
260
|
-
fontSize: theme.size.typography.desktop.medium.h1.fontSize,
|
|
261
|
-
fontWeight: theme.size.typography.desktop.medium.h1.weight,
|
|
262
|
-
lineHeight: theme.size.typography.desktop.medium.h1.lineHeight,
|
|
263
|
-
letterSpacing: theme.size.typography.desktop.medium.h1.letterSpacing
|
|
264
|
-
},
|
|
265
|
-
// desktop - medium - »variant (h2) 💅
|
|
266
|
-
...ownerState.typographyVariant === "h2" && {
|
|
267
|
-
fontSize: theme.size.typography.desktop.medium.h2.fontSize,
|
|
268
|
-
fontWeight: theme.size.typography.desktop.medium.h2.weight,
|
|
269
|
-
lineHeight: theme.size.typography.desktop.medium.h2.lineHeight,
|
|
270
|
-
letterSpacing: theme.size.typography.desktop.medium.h2.letterSpacing
|
|
271
|
-
},
|
|
272
|
-
// desktop - medium - »variant (h3) 💅
|
|
273
|
-
...ownerState.typographyVariant === "h3" && {
|
|
274
|
-
fontSize: theme.size.typography.desktop.medium.h3.fontSize,
|
|
275
|
-
fontWeight: theme.size.typography.desktop.medium.h3.weight,
|
|
276
|
-
lineHeight: theme.size.typography.desktop.medium.h3.lineHeight,
|
|
277
|
-
letterSpacing: theme.size.typography.desktop.medium.h3.letterSpacing
|
|
278
|
-
},
|
|
279
|
-
// desktop - medium - »variant(h5) 💅
|
|
280
|
-
...ownerState.typographyVariant === "h5" && {
|
|
281
|
-
fontSize: theme.size.typography.desktop.medium.h5.fontSize,
|
|
282
|
-
fontWeight: theme.size.typography.desktop.medium.h5.weight,
|
|
283
|
-
lineHeight: theme.size.typography.desktop.medium.h5.lineHeight,
|
|
284
|
-
letterSpacing: theme.size.typography.desktop.medium.h5.letterSpacing
|
|
285
|
-
},
|
|
286
|
-
// desktop - medium - »variant (subtitle) 💅
|
|
287
|
-
...ownerState.typographyVariant === "subtitle" && {
|
|
288
|
-
fontSize: theme.size.typography.desktop.medium.subtitle.fontSize,
|
|
289
|
-
fontWeight: theme.size.typography.desktop.medium.subtitle.weight,
|
|
290
|
-
lineHeight: theme.size.typography.desktop.medium.subtitle.lineHeight,
|
|
291
|
-
letterSpacing: theme.size.typography.desktop.medium.subtitle.letterSpacing
|
|
292
|
-
},
|
|
293
|
-
// desktop - medium - »variant (subtitleDens) 💅
|
|
294
|
-
...ownerState.typographyVariant === "subtitleDens" && {
|
|
295
|
-
fontSize: theme.size.typography.desktop.medium.subtitleDens.fontSize,
|
|
296
|
-
fontWeight: theme.size.typography.desktop.medium.subtitleDens.weight,
|
|
297
|
-
lineHeight: theme.size.typography.desktop.medium.subtitleDens.lineHeight,
|
|
298
|
-
letterSpacing: theme.size.typography.desktop.medium.subtitleDens.letterSpacing
|
|
299
|
-
},
|
|
300
|
-
// desktop - medium - »variant (paragraph) 💅
|
|
301
|
-
...ownerState.typographyVariant === "paragraph" && {
|
|
302
|
-
fontSize: theme.size.typography.desktop.medium.paragraph.fontSize,
|
|
303
|
-
fontWeight: theme.size.typography.desktop.medium.paragraph.weight,
|
|
304
|
-
lineHeight: theme.size.typography.desktop.medium.paragraph.lineHeight,
|
|
305
|
-
letterSpacing: theme.size.typography.desktop.medium.paragraph.letterSpacing
|
|
306
|
-
},
|
|
307
|
-
// desktop - medium - »variant (paragraphDens) 💅
|
|
308
|
-
...ownerState.typographyVariant === "paragraphDens" && {
|
|
309
|
-
fontSize: theme.size.typography.desktop.medium.paragraphDens.fontSize,
|
|
310
|
-
fontWeight: theme.size.typography.desktop.medium.paragraphDens.weight,
|
|
311
|
-
lineHeight: theme.size.typography.desktop.medium.paragraphDens.lineHeight,
|
|
312
|
-
letterSpacing: theme.size.typography.desktop.medium.paragraphDens.letterSpacing
|
|
313
|
-
},
|
|
314
|
-
// desktop - medium - »variant (body) 💅
|
|
315
|
-
...ownerState.typographyVariant === "body" && {
|
|
316
|
-
fontSize: theme.size.typography.desktop.medium.body.fontSize,
|
|
317
|
-
fontWeight: theme.size.typography.desktop.medium.body.weight,
|
|
318
|
-
lineHeight: theme.size.typography.desktop.medium.body.lineHeight,
|
|
319
|
-
letterSpacing: theme.size.typography.desktop.medium.body.letterSpacing
|
|
320
|
-
},
|
|
321
|
-
// desktop - medium - »variant (bodyDens) 💅
|
|
322
|
-
...ownerState.typographyVariant === "bodyDens" && {
|
|
323
|
-
fontSize: theme.size.typography.desktop.medium.bodyDens.fontSize,
|
|
324
|
-
fontWeight: theme.size.typography.desktop.medium.bodyDens.weight,
|
|
325
|
-
lineHeight: theme.size.typography.desktop.medium.bodyDens.lineHeight,
|
|
326
|
-
letterSpacing: theme.size.typography.desktop.medium.bodyDens.letterSpacing
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
}
|
|
33
|
+
...getTypographyStyles(
|
|
34
|
+
theme.generalSettings.isMobile,
|
|
35
|
+
ownerState.typographySize || "medium",
|
|
36
|
+
ownerState.typographyVariant || "body"
|
|
37
|
+
)
|
|
330
38
|
}
|
|
331
39
|
}),
|
|
332
40
|
skeleton: {}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m4l/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.52",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"lint-staged": {
|
|
6
6
|
"*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@m4l/core": "^2.0.15",
|
|
57
|
-
"@m4l/graphics": "7.0.8",
|
|
57
|
+
"@m4l/graphics": "^7.0.8",
|
|
58
58
|
"@m4l/styles": "^7.1.18",
|
|
59
59
|
"@mui/lab": "5.0.0-alpha.173",
|
|
60
60
|
"@mui/material": "5.16.7",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FontProperties, Sizes, TypographyVariants } from '@m4l/styles';
|
|
2
|
+
/**
|
|
3
|
+
* Utilidad que se encarga de obtener los estilos de tipografía para ser usados en el css de los componentes.
|
|
4
|
+
*
|
|
5
|
+
* [variant]: Variante de tipografía que se desea aplicar al componente.
|
|
6
|
+
* [isMobile]: Modalidad de dispositivo en el que se encuentra la aplicación (Escritorio y móvil). se espera que se obtenga del objeto
|
|
7
|
+
* theme.generalSettings.isMobile.
|
|
8
|
+
* [size]: Formato de tamaño definido por el componente o el contexto de AppearanceComponentProvider, puede ser small,
|
|
9
|
+
* medium o large.
|
|
10
|
+
*/
|
|
11
|
+
export declare const getTypographyStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variant: TypographyVariants) => FontProperties;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TYPOGRAPHY_SIZES_MOBILE, TYPOGRAPHY_SIZES_DESKTOP } from "@m4l/styles";
|
|
2
|
+
const getTypographyStyles = (isMobile, size, variant) => {
|
|
3
|
+
const typographySource = isMobile ? TYPOGRAPHY_SIZES_MOBILE : TYPOGRAPHY_SIZES_DESKTOP;
|
|
4
|
+
return typographySource[size][variant];
|
|
5
|
+
};
|
|
6
|
+
export {
|
|
7
|
+
getTypographyStyles as g
|
|
8
|
+
};
|