@elliemae/ds-typography 3.16.0 → 3.16.1
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/DSTypographyDatatestId.js +4 -0
- package/dist/cjs/DSTypographyDatatestId.js.map +1 -1
- package/dist/cjs/Typography.js +10 -5
- package/dist/cjs/Typography.js.map +2 -2
- package/dist/cjs/config/useDefaultProps.js +4 -0
- package/dist/cjs/config/useDefaultProps.js.map +2 -2
- package/dist/cjs/config/useTypography.js +7 -3
- package/dist/cjs/config/useTypography.js.map +2 -2
- package/dist/cjs/index.js +5 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +11 -1
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/Typography.js +6 -5
- package/dist/esm/Typography.js.map +2 -2
- package/dist/esm/config/useDefaultProps.js.map +2 -2
- package/dist/esm/config/useTypography.js +3 -3
- package/dist/esm/config/useTypography.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +7 -1
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/Typography.d.ts +2 -2
- package/dist/types/config/useDefaultProps.d.ts +1 -1
- package/dist/types/config/useTypography.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +11 -7
- package/dist/types/styled.d.ts +5 -2
- package/package.json +6 -6
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSTypographyDatatestId.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSTypographyName = 'DSTypography';\n\nexport const DSTypographyDataTestId = {\n TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAEzB,MAAM,yBAAyB;AAAA,EACpC,oBAAoB;AACtB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/Typography.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -31,15 +35,15 @@ module.exports = __toCommonJS(Typography_exports);
|
|
|
31
35
|
var React = __toESM(require("react"));
|
|
32
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
|
-
var import_useTypography = require("./config/useTypography");
|
|
35
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
36
|
-
var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
|
|
37
|
-
var import_styled = require("./styled");
|
|
38
|
+
var import_useTypography = require("./config/useTypography.js");
|
|
39
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
|
+
var import_DSTypographyDatatestId = require("./DSTypographyDatatestId.js");
|
|
41
|
+
var import_styled = require("./styled.js");
|
|
38
42
|
const DSTypography = (props) => {
|
|
39
43
|
const {
|
|
40
44
|
globalAttributes: { ...othersGlobalAttributes },
|
|
41
45
|
xstyledProps,
|
|
42
|
-
propsWithDefault: {
|
|
46
|
+
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis }
|
|
43
47
|
} = (0, import_useTypography.useTypography)(props);
|
|
44
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
49
|
import_styled.StyledTypography,
|
|
@@ -51,6 +55,7 @@ const DSTypography = (props) => {
|
|
|
51
55
|
variant,
|
|
52
56
|
fontSize,
|
|
53
57
|
ref: innerRef,
|
|
58
|
+
$truncateWithEllipsis: truncateWithEllipsis,
|
|
54
59
|
children: props.children
|
|
55
60
|
}
|
|
56
61
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Typography.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\nimport { StyledTypography } from './styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\n $truncateWithEllipsis={truncateWithEllipsis}\n >\n {props.children}\n </StyledTypography>\n );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,8BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,IAAI,WAAW,SAAS,UAAU,UAAU,qBAAqB;AAAA,EACvF,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,uBAAuB;AAAA,MAEtB,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useDefaultProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types';\n\nconst VariantToAsMap: Record<DSTypographyT.
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof JSX.IntrinsicElements> = {\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};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAA6E;AAAA,EACjF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AACR;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe,OAAO;AAClD,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -30,9 +34,9 @@ module.exports = __toCommonJS(useTypography_exports);
|
|
|
30
34
|
var React = __toESM(require("react"));
|
|
31
35
|
var import_react = __toESM(require("react"));
|
|
32
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
|
-
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
34
|
-
var import_useDefaultProps = require("./useDefaultProps");
|
|
35
|
-
var import_DSTypographyDatatestId = require("../DSTypographyDatatestId");
|
|
37
|
+
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
|
+
var import_useDefaultProps = require("./useDefaultProps.js");
|
|
39
|
+
var import_DSTypographyDatatestId = require("../DSTypographyDatatestId.js");
|
|
36
40
|
const useTypography = (props) => {
|
|
37
41
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSTypographyPropTypes, import_DSTypographyDatatestId.DSTypographyName);
|
|
38
42
|
const defaultProps = (0, import_useDefaultProps.useDefaultProps)(props);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useTypography.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types';\nimport { useDefaultProps } from './useDefaultProps';\nimport { DSTypographyName } from '../DSTypographyDatatestId';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../DSTypographyDatatestId.js';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AAEP,mCAAsC;AACtC,6BAAgC;AAChC,oCAAiC;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,8DAA+B,OAAO,oDAAuB,8CAAgB;AAC7E,QAAM,mBAAe,wCAAgB,KAAK;AAC1C,QAAM,uBAAmB,sDAA0D,OAAO,YAAY;AACtG,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -29,5 +33,5 @@ __export(src_exports, {
|
|
|
29
33
|
});
|
|
30
34
|
module.exports = __toCommonJS(src_exports);
|
|
31
35
|
var React = __toESM(require("react"));
|
|
32
|
-
var import_Typography = require("./Typography");
|
|
36
|
+
var import_Typography = require("./Typography.js");
|
|
33
37
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -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 {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n export type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\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;ADEvB,8BAAuE;AA2ChE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,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,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -31,7 +35,7 @@ __export(styled_exports, {
|
|
|
31
35
|
module.exports = __toCommonJS(styled_exports);
|
|
32
36
|
var React = __toESM(require("react"));
|
|
33
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
34
|
-
var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
|
|
38
|
+
var import_DSTypographyDatatestId = require("./DSTypographyDatatestId.js");
|
|
35
39
|
const styleMap = {
|
|
36
40
|
h1: {
|
|
37
41
|
fontSize: "2.62rem",
|
|
@@ -221,5 +225,11 @@ const StyledTypography = (0, import_ds_system.styled)("div", {
|
|
|
221
225
|
padding: 0;
|
|
222
226
|
${(props) => mapper[props.variant]}
|
|
223
227
|
${import_ds_system.xStyledCommonProps}
|
|
228
|
+
|
|
229
|
+
${(props) => props.$truncateWithEllipsis ? `text-overflow: ellipsis;
|
|
230
|
+
white-space: nowrap;
|
|
231
|
+
overflow: hidden;
|
|
232
|
+
display: inline-block;
|
|
233
|
+
max-width: 100%;` : ``}
|
|
224
234
|
`;
|
|
225
235
|
//# sourceMappingURL=styled.js.map
|
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": ["/* 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 =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\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 = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\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 ${(props: StyleIProp) =>\n props.$truncateWithEllipsis\n ? `text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;`\n : ``}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Typography.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { useTypography } from "./config/useTypography";
|
|
5
|
-
import { DSTypographyPropTypes } from "./react-desc-prop-types";
|
|
6
|
-
import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
|
|
7
|
-
import { StyledTypography } from "./styled";
|
|
4
|
+
import { useTypography } from "./config/useTypography.js";
|
|
5
|
+
import { DSTypographyPropTypes } from "./react-desc-prop-types.js";
|
|
6
|
+
import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId.js";
|
|
7
|
+
import { StyledTypography } from "./styled.js";
|
|
8
8
|
const DSTypography = (props) => {
|
|
9
9
|
const {
|
|
10
10
|
globalAttributes: { ...othersGlobalAttributes },
|
|
11
11
|
xstyledProps,
|
|
12
|
-
propsWithDefault: {
|
|
12
|
+
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis }
|
|
13
13
|
} = useTypography(props);
|
|
14
14
|
return /* @__PURE__ */ jsx(
|
|
15
15
|
StyledTypography,
|
|
@@ -21,6 +21,7 @@ const DSTypography = (props) => {
|
|
|
21
21
|
variant,
|
|
22
22
|
fontSize,
|
|
23
23
|
ref: innerRef,
|
|
24
|
+
$truncateWithEllipsis: truncateWithEllipsis,
|
|
24
25
|
children: props.children
|
|
25
26
|
}
|
|
26
27
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Typography.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,6BAA6B;AAC1D,SAAS,kBAAkB,8BAA8B;AACzD,SAAS,wBAAwB;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\nimport { StyledTypography } from './styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\n $truncateWithEllipsis={truncateWithEllipsis}\n >\n {props.children}\n </StyledTypography>\n );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,6BAA6B;AAC1D,SAAS,kBAAkB,8BAA8B;AACzD,SAAS,wBAAwB;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,IAAI,WAAW,SAAS,UAAU,UAAU,qBAAqB;AAAA,EACvF,IAAI,cAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,uBAAuB;AAAA,MAEtB,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
|
|
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/config/useDefaultProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types';\n\nconst VariantToAsMap: Record<DSTypographyT.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof JSX.IntrinsicElements> = {\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};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAA6E;AAAA,EACjF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AACR;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe,OAAO;AAClD,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -6,9 +6,9 @@ import {
|
|
|
6
6
|
useMemoMergePropsWithDefault,
|
|
7
7
|
useValidateTypescriptPropTypes
|
|
8
8
|
} from "@elliemae/ds-props-helpers";
|
|
9
|
-
import { DSTypographyPropTypes } from "../react-desc-prop-types";
|
|
10
|
-
import { useDefaultProps } from "./useDefaultProps";
|
|
11
|
-
import { DSTypographyName } from "../DSTypographyDatatestId";
|
|
9
|
+
import { DSTypographyPropTypes } from "../react-desc-prop-types.js";
|
|
10
|
+
import { useDefaultProps } from "./useDefaultProps.js";
|
|
11
|
+
import { DSTypographyName } from "../DSTypographyDatatestId.js";
|
|
12
12
|
const useTypography = (props) => {
|
|
13
13
|
useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);
|
|
14
14
|
const defaultProps = useDefaultProps(props);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTypography.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types';\nimport { useDefaultProps } from './useDefaultProps';\nimport { DSTypographyName } from '../DSTypographyDatatestId';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../DSTypographyDatatestId.js';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,iCAA+B,OAAO,uBAAuB,gBAAgB;AAC7E,QAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAM,mBAAmB,6BAA0D,OAAO,YAAY;AACtG,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,cAAc,8BAA8B;",
|
|
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 {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n export type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\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;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2ChE,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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
-
import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
|
|
3
|
+
import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId.js";
|
|
4
4
|
const styleMap = {
|
|
5
5
|
h1: {
|
|
6
6
|
fontSize: "2.62rem",
|
|
@@ -190,6 +190,12 @@ const StyledTypography = styled("div", {
|
|
|
190
190
|
padding: 0;
|
|
191
191
|
${(props) => mapper[props.variant]}
|
|
192
192
|
${xStyledCommonProps}
|
|
193
|
+
|
|
194
|
+
${(props) => props.$truncateWithEllipsis ? `text-overflow: ellipsis;
|
|
195
|
+
white-space: nowrap;
|
|
196
|
+
overflow: hidden;
|
|
197
|
+
display: inline-block;
|
|
198
|
+
max-width: 100%;` : ``}
|
|
193
199
|
`;
|
|
194
200
|
export {
|
|
195
201
|
StyledTypography,
|
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", "/* 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 =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\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 = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\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 ${(props: StyleIProp) =>\n props.$truncateWithEllipsis\n ? `text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;`\n : ``}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type DSTypographyT } from './react-desc-prop-types';
|
|
2
|
+
import { type DSTypographyT } from './react-desc-prop-types.js';
|
|
3
3
|
declare const DSTypography: React.FC<DSTypographyT.Props>;
|
|
4
|
-
declare const DSTypographyWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSTypographyT.Props>;
|
|
4
|
+
declare const DSTypographyWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSTypographyT.Props>;
|
|
5
5
|
export { DSTypography, DSTypographyWithSchema };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
2
|
-
import type { DSTypographyT } from '../react-desc-prop-types';
|
|
2
|
+
import type { DSTypographyT } from '../react-desc-prop-types.js';
|
|
3
3
|
interface UseTypographyT {
|
|
4
4
|
propsWithDefault: DSTypographyT.InternalProps;
|
|
5
5
|
globalAttributes: GlobalAttributesT;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { DSTypography, DSTypographyWithSchema } from './Typography';
|
|
1
|
+
export { DSTypography, DSTypographyWithSchema } from './Typography.js';
|
|
@@ -2,18 +2,22 @@ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers
|
|
|
2
2
|
import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';
|
|
3
3
|
import type { WeakValidationMap } from 'react';
|
|
4
4
|
export declare namespace DSTypographyT {
|
|
5
|
-
type
|
|
6
|
-
interface
|
|
7
|
-
variant:
|
|
5
|
+
type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';
|
|
6
|
+
interface RequiredProps {
|
|
7
|
+
variant: Variant;
|
|
8
|
+
children: React.ReactNode | React.ReactNode[];
|
|
9
|
+
}
|
|
10
|
+
interface OptionalProps {
|
|
8
11
|
as?: keyof JSX.IntrinsicElements;
|
|
9
12
|
component?: keyof JSX.IntrinsicElements;
|
|
10
|
-
children: React.ReactNode | React.ReactNode[];
|
|
11
13
|
innerRef?: React.RefObject<HTMLElement>;
|
|
12
14
|
}
|
|
13
|
-
interface
|
|
15
|
+
interface DefaultProps {
|
|
16
|
+
truncateWithEllipsis: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>, XstyledProps, FontSizeProps, LineHeightProps, ColorProps, RequiredProps {
|
|
14
19
|
}
|
|
15
|
-
interface InternalProps extends
|
|
16
|
-
as: keyof JSX.IntrinsicElements;
|
|
20
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>, XstyledProps, FontSizeProps, LineHeightProps, ColorProps, RequiredProps {
|
|
17
21
|
}
|
|
18
22
|
}
|
|
19
23
|
export declare const DSTypographyPropTypes: WeakValidationMap<unknown>;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';
|
|
2
|
+
import type { DSTypographyT } from './react-desc-prop-types.js';
|
|
2
3
|
export declare const styleMap: {
|
|
3
4
|
h1: {
|
|
4
5
|
fontSize: string;
|
|
@@ -91,8 +92,10 @@ export declare const styleMapMobile: {
|
|
|
91
92
|
lineHeight: string;
|
|
92
93
|
};
|
|
93
94
|
};
|
|
94
|
-
type StyleIProp =
|
|
95
|
+
type StyleIProp = FontSizeProps & LineHeightProps & ColorProps & {
|
|
95
96
|
children: DSTypographyT.InternalProps['children'];
|
|
97
|
+
variant: DSTypographyT.Variant;
|
|
98
|
+
$truncateWithEllipsis?: boolean;
|
|
96
99
|
};
|
|
97
100
|
export declare const StyledTypography: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyleIProp, never>;
|
|
98
101
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-typography",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Typography",
|
|
6
6
|
"files": [
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-props-helpers": "3.16.
|
|
39
|
-
"@elliemae/ds-system": "3.16.
|
|
40
|
-
"@elliemae/ds-utilities": "3.16.
|
|
38
|
+
"@elliemae/ds-props-helpers": "3.16.1",
|
|
39
|
+
"@elliemae/ds-system": "3.16.1",
|
|
40
|
+
"@elliemae/ds-utilities": "3.16.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@testing-library/jest-dom": "~5.16.
|
|
43
|
+
"@testing-library/jest-dom": "~5.16.5",
|
|
44
44
|
"@testing-library/react": "~12.1.3",
|
|
45
45
|
"@testing-library/user-event": "~13.5.0",
|
|
46
46
|
"react": "^17.0.2",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public",
|
|
56
|
-
"typeSafety":
|
|
56
|
+
"typeSafety": false
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|