@elliemae/ds-typography 3.14.0-rc.7 → 3.14.0
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/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +44 -44
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +44 -44
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +2 -2
- package/package.json +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;
|
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,8BAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,8BAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -93,83 +93,83 @@ const styleMapMobile = {
|
|
|
93
93
|
};
|
|
94
94
|
const mapper = {
|
|
95
95
|
h1: import_ds_system.css`
|
|
96
|
-
font-size: ${styleMapMobile.h1.fontSize};
|
|
97
|
-
line-height: ${styleMapMobile.h1.lineHeight};
|
|
96
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};
|
|
97
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};
|
|
98
98
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
99
|
-
font-size: ${styleMap.h1.fontSize};
|
|
100
|
-
line-height: ${styleMap.h1.lineHeight};
|
|
99
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};
|
|
100
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};
|
|
101
101
|
}
|
|
102
102
|
`,
|
|
103
103
|
h2: import_ds_system.css`
|
|
104
|
-
font-size: ${styleMapMobile.h2.fontSize};
|
|
105
|
-
line-height: ${styleMapMobile.h2.lineHeight};
|
|
104
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};
|
|
105
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};
|
|
106
106
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
107
|
-
font-size: ${styleMap.h2.fontSize};
|
|
108
|
-
line-height: ${styleMap.h2.lineHeight};
|
|
107
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};
|
|
108
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};
|
|
109
109
|
}
|
|
110
110
|
`,
|
|
111
111
|
h3: import_ds_system.css`
|
|
112
|
-
font-size: ${styleMapMobile.h3.fontSize};
|
|
113
|
-
line-height: ${styleMapMobile.h3.lineHeight};
|
|
112
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};
|
|
113
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};
|
|
114
114
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
115
|
-
font-size: ${styleMap.h3.fontSize};
|
|
116
|
-
line-height: ${styleMap.h3.lineHeight};
|
|
115
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};
|
|
116
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};
|
|
117
117
|
}
|
|
118
118
|
`,
|
|
119
119
|
h4: import_ds_system.css`
|
|
120
|
-
font-size: ${styleMapMobile.h4.fontSize};
|
|
121
|
-
line-height: ${styleMapMobile.h4.lineHeight};
|
|
120
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};
|
|
121
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};
|
|
122
122
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
123
|
-
font-size: ${styleMap.h4.fontSize};
|
|
124
|
-
line-height: ${styleMap.h4.lineHeight};
|
|
123
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};
|
|
124
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};
|
|
125
125
|
}
|
|
126
126
|
`,
|
|
127
127
|
h5: import_ds_system.css`
|
|
128
|
-
font-size: ${styleMapMobile.h5.fontSize};
|
|
129
|
-
line-height: ${styleMapMobile.h5.lineHeight};
|
|
128
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};
|
|
129
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};
|
|
130
130
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
131
|
-
font-size: ${styleMap.h5.fontSize};
|
|
132
|
-
line-height: ${styleMap.h5.lineHeight};
|
|
131
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};
|
|
132
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};
|
|
133
133
|
}
|
|
134
134
|
`,
|
|
135
135
|
b1: import_ds_system.css`
|
|
136
|
-
font-size: ${styleMapMobile.b1.fontSize};
|
|
137
|
-
line-height: ${styleMapMobile.b1.lineHeight};
|
|
136
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};
|
|
137
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};
|
|
138
138
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
139
|
-
font-size: ${styleMap.b1.fontSize};
|
|
140
|
-
line-height: ${styleMap.b1.lineHeight};
|
|
139
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};
|
|
140
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};
|
|
141
141
|
}
|
|
142
142
|
`,
|
|
143
143
|
b2: import_ds_system.css`
|
|
144
|
-
font-size: ${styleMapMobile.b2.fontSize};
|
|
145
|
-
line-height: ${styleMapMobile.b2.lineHeight};
|
|
144
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};
|
|
145
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};
|
|
146
146
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
147
|
-
font-size: ${styleMap.b2.fontSize};
|
|
148
|
-
line-height: ${styleMap.b2.lineHeight};
|
|
147
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};
|
|
148
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};
|
|
149
149
|
}
|
|
150
150
|
`,
|
|
151
151
|
b3: import_ds_system.css`
|
|
152
|
-
font-size: ${styleMapMobile.b3.fontSize};
|
|
153
|
-
line-height: ${styleMapMobile.b3.lineHeight};
|
|
152
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};
|
|
153
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};
|
|
154
154
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
155
|
-
font-size: ${styleMap.b3.fontSize};
|
|
156
|
-
line-height: ${styleMap.b3.lineHeight};
|
|
155
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};
|
|
156
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};
|
|
157
157
|
}
|
|
158
158
|
`,
|
|
159
159
|
b4: import_ds_system.css`
|
|
160
|
-
font-size: ${styleMapMobile.b4.fontSize};
|
|
161
|
-
line-height: ${styleMapMobile.b4.lineHeight};
|
|
160
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};
|
|
161
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};
|
|
162
162
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
163
|
-
font-size: ${styleMap.b4.fontSize};
|
|
164
|
-
line-height: ${styleMap.b4.lineHeight};
|
|
163
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};
|
|
164
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};
|
|
165
165
|
}
|
|
166
166
|
`,
|
|
167
167
|
button: import_ds_system.css`
|
|
168
|
-
font-size: ${styleMapMobile.button.fontSize};
|
|
169
|
-
line-height: ${styleMapMobile.button.lineHeight};
|
|
168
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};
|
|
169
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};
|
|
170
170
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
171
|
-
font-size: ${styleMap.button.fontSize};
|
|
172
|
-
line-height: ${styleMap.button.lineHeight};
|
|
171
|
+
font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};
|
|
172
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};
|
|
173
173
|
}
|
|
174
174
|
text-decoration: underline;
|
|
175
175
|
color: ${(props) => props.theme.colors.brand[600]};
|
|
@@ -189,11 +189,11 @@ const mapper = {
|
|
|
189
189
|
}
|
|
190
190
|
`,
|
|
191
191
|
link: import_ds_system.css`
|
|
192
|
-
font-size: ${styleMapMobile.button.fontSize};
|
|
193
|
-
line-height: ${styleMapMobile.button.lineHeight};
|
|
192
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};
|
|
193
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};
|
|
194
194
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
195
|
-
font-size: ${styleMap.button.fontSize};
|
|
196
|
-
line-height: ${styleMap.button.lineHeight};
|
|
195
|
+
font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};
|
|
196
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};
|
|
197
197
|
}
|
|
198
198
|
text-decoration: underline;
|
|
199
199
|
color: ${(props) => props.theme.colors.brand[600]};
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,oCAAyD;AAElD,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI,EAAE,UAAU,cAAc,YAAY,wBAAwB;AAAA,EAClE,IAAI,EAAE,UAAU,eAAe,YAAY,wBAAwB;AAAA,EACnE,IAAI,EAAE,UAAU,yBAAyB,YAAY,cAAc;AAAA,EACnE,IAAI,EAAE,UAAU,eAAe,YAAY,aAAa;AAAA,EACxD,IAAI,EAAE,UAAU,yBAAyB,YAAY,cAAc;AAAA,EACnE,IAAI,EAAE,UAAU,yBAAyB,YAAY,wBAAwB;AAAA,EAC7E,IAAI,EAAE,UAAU,aAAa,YAAY,cAAc;AAAA,EACvD,IAAI,EAAE,UAAU,aAAa,YAAY,cAAc;AAAA,EACvD,IAAI,EAAE,UAAU,yBAAyB,YAAY,YAAY;AAAA,EACjE,QAAQ,EAAE,UAAU,aAAa,YAAY,cAAc;AAAA,EAC3D,MAAM,EAAE,UAAU,aAAa,YAAY,cAAc;AAC3D;AAMA,MAAM,SAAS;AAAA,EACb,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,IAAI;AAAA,iBACW,CAAC,UAAU,MAAM,YAAY,eAAe,GAAG;AAAA,mBAC7C,CAAC,UAAU,MAAM,cAAc,eAAe,GAAG;AAAA,yBAC3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,GAAG;AAAA,qBACvC,CAAC,UAAU,MAAM,cAAc,SAAS,GAAG;AAAA;AAAA;AAAA,EAG9D,QAAQ;AAAA,iBACO,CAAC,UAAU,MAAM,YAAY,eAAe,OAAO;AAAA,mBACjD,CAAC,UAAU,MAAM,cAAc,eAAe,OAAO;AAAA,yBAC/C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,OAAO;AAAA,qBAC3C,CAAC,UAAU,MAAM,cAAc,SAAS,OAAO;AAAA;AAAA;AAAA,aAGvD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,eAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,eAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGjD,MAAM;AAAA,iBACS,CAAC,UAAU,MAAM,YAAY,eAAe,OAAO;AAAA,mBACjD,CAAC,UAAU,MAAM,cAAc,eAAe,OAAO;AAAA,yBAC/C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY,SAAS,OAAO;AAAA,qBAC3C,CAAC,UAAU,MAAM,cAAc,SAAS,OAAO;AAAA;AAAA;AAAA,aAGvD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,eAKlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,eAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,eAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAGnD;AAEO,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qDAAuB;AAC/B,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,OAAO,IAAI,CAAC,KAAK,mBAAmB,IAAI;AAC7F,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA,IACpC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -62,83 +62,83 @@ const styleMapMobile = {
|
|
|
62
62
|
};
|
|
63
63
|
const mapper = {
|
|
64
64
|
h1: css`
|
|
65
|
-
font-size: ${styleMapMobile.h1.fontSize};
|
|
66
|
-
line-height: ${styleMapMobile.h1.lineHeight};
|
|
65
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};
|
|
66
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};
|
|
67
67
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
68
|
-
font-size: ${styleMap.h1.fontSize};
|
|
69
|
-
line-height: ${styleMap.h1.lineHeight};
|
|
68
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};
|
|
69
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};
|
|
70
70
|
}
|
|
71
71
|
`,
|
|
72
72
|
h2: css`
|
|
73
|
-
font-size: ${styleMapMobile.h2.fontSize};
|
|
74
|
-
line-height: ${styleMapMobile.h2.lineHeight};
|
|
73
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};
|
|
74
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};
|
|
75
75
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
76
|
-
font-size: ${styleMap.h2.fontSize};
|
|
77
|
-
line-height: ${styleMap.h2.lineHeight};
|
|
76
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};
|
|
77
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};
|
|
78
78
|
}
|
|
79
79
|
`,
|
|
80
80
|
h3: css`
|
|
81
|
-
font-size: ${styleMapMobile.h3.fontSize};
|
|
82
|
-
line-height: ${styleMapMobile.h3.lineHeight};
|
|
81
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};
|
|
82
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};
|
|
83
83
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
84
|
-
font-size: ${styleMap.h3.fontSize};
|
|
85
|
-
line-height: ${styleMap.h3.lineHeight};
|
|
84
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};
|
|
85
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};
|
|
86
86
|
}
|
|
87
87
|
`,
|
|
88
88
|
h4: css`
|
|
89
|
-
font-size: ${styleMapMobile.h4.fontSize};
|
|
90
|
-
line-height: ${styleMapMobile.h4.lineHeight};
|
|
89
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};
|
|
90
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};
|
|
91
91
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
92
|
-
font-size: ${styleMap.h4.fontSize};
|
|
93
|
-
line-height: ${styleMap.h4.lineHeight};
|
|
92
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};
|
|
93
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};
|
|
94
94
|
}
|
|
95
95
|
`,
|
|
96
96
|
h5: css`
|
|
97
|
-
font-size: ${styleMapMobile.h5.fontSize};
|
|
98
|
-
line-height: ${styleMapMobile.h5.lineHeight};
|
|
97
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};
|
|
98
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};
|
|
99
99
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
100
|
-
font-size: ${styleMap.h5.fontSize};
|
|
101
|
-
line-height: ${styleMap.h5.lineHeight};
|
|
100
|
+
font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};
|
|
101
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};
|
|
102
102
|
}
|
|
103
103
|
`,
|
|
104
104
|
b1: css`
|
|
105
|
-
font-size: ${styleMapMobile.b1.fontSize};
|
|
106
|
-
line-height: ${styleMapMobile.b1.lineHeight};
|
|
105
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};
|
|
106
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};
|
|
107
107
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
108
|
-
font-size: ${styleMap.b1.fontSize};
|
|
109
|
-
line-height: ${styleMap.b1.lineHeight};
|
|
108
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};
|
|
109
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};
|
|
110
110
|
}
|
|
111
111
|
`,
|
|
112
112
|
b2: css`
|
|
113
|
-
font-size: ${styleMapMobile.b2.fontSize};
|
|
114
|
-
line-height: ${styleMapMobile.b2.lineHeight};
|
|
113
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};
|
|
114
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};
|
|
115
115
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
116
|
-
font-size: ${styleMap.b2.fontSize};
|
|
117
|
-
line-height: ${styleMap.b2.lineHeight};
|
|
116
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};
|
|
117
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};
|
|
118
118
|
}
|
|
119
119
|
`,
|
|
120
120
|
b3: css`
|
|
121
|
-
font-size: ${styleMapMobile.b3.fontSize};
|
|
122
|
-
line-height: ${styleMapMobile.b3.lineHeight};
|
|
121
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};
|
|
122
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};
|
|
123
123
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
124
|
-
font-size: ${styleMap.b3.fontSize};
|
|
125
|
-
line-height: ${styleMap.b3.lineHeight};
|
|
124
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};
|
|
125
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};
|
|
126
126
|
}
|
|
127
127
|
`,
|
|
128
128
|
b4: css`
|
|
129
|
-
font-size: ${styleMapMobile.b4.fontSize};
|
|
130
|
-
line-height: ${styleMapMobile.b4.lineHeight};
|
|
129
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};
|
|
130
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};
|
|
131
131
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
132
|
-
font-size: ${styleMap.b4.fontSize};
|
|
133
|
-
line-height: ${styleMap.b4.lineHeight};
|
|
132
|
+
font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};
|
|
133
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};
|
|
134
134
|
}
|
|
135
135
|
`,
|
|
136
136
|
button: css`
|
|
137
|
-
font-size: ${styleMapMobile.button.fontSize};
|
|
138
|
-
line-height: ${styleMapMobile.button.lineHeight};
|
|
137
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};
|
|
138
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};
|
|
139
139
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
140
|
-
font-size: ${styleMap.button.fontSize};
|
|
141
|
-
line-height: ${styleMap.button.lineHeight};
|
|
140
|
+
font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};
|
|
141
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};
|
|
142
142
|
}
|
|
143
143
|
text-decoration: underline;
|
|
144
144
|
color: ${(props) => props.theme.colors.brand[600]};
|
|
@@ -158,11 +158,11 @@ const mapper = {
|
|
|
158
158
|
}
|
|
159
159
|
`,
|
|
160
160
|
link: css`
|
|
161
|
-
font-size: ${styleMapMobile.button.fontSize};
|
|
162
|
-
line-height: ${styleMapMobile.button.lineHeight};
|
|
161
|
+
font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};
|
|
162
|
+
line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};
|
|
163
163
|
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
164
|
-
font-size: ${styleMap.button.fontSize};
|
|
165
|
-
line-height: ${styleMap.button.lineHeight};
|
|
164
|
+
font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};
|
|
165
|
+
line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};
|
|
166
166
|
}
|
|
167
167
|
text-decoration: underline;
|
|
168
168
|
color: ${(props) => props.theme.colors.brand[600]};
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';
|
|
2
|
-
import type { FontSizeProps, ColorProps } from '@elliemae/ds-system';
|
|
2
|
+
import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';
|
|
3
3
|
import type { WeakValidationMap } from 'react';
|
|
4
4
|
export declare namespace DSTypographyT {
|
|
5
5
|
type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';
|
|
@@ -10,7 +10,7 @@ export declare namespace DSTypographyT {
|
|
|
10
10
|
children: React.ReactNode | React.ReactNode[];
|
|
11
11
|
innerRef: React.RefObject<HTMLElement>;
|
|
12
12
|
}
|
|
13
|
-
interface Props extends IProps, Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>, XstyledProps, FontSizeProps, ColorProps, Record<string, unknown> {
|
|
13
|
+
interface Props extends IProps, Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>, XstyledProps, FontSizeProps, LineHeightProps, ColorProps, Record<string, unknown> {
|
|
14
14
|
}
|
|
15
15
|
interface InternalProps extends Props {
|
|
16
16
|
as: keyof JSX.IntrinsicElements;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-typography",
|
|
3
|
-
"version": "3.14.0
|
|
3
|
+
"version": "3.14.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Typography",
|
|
6
6
|
"files": [
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.14.0
|
|
39
|
-
"@elliemae/ds-utilities": "3.14.0
|
|
38
|
+
"@elliemae/ds-system": "3.14.0",
|
|
39
|
+
"@elliemae/ds-utilities": "3.14.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@testing-library/jest-dom": "~5.16.4",
|