@elliemae/ds-typography 3.18.1 → 3.19.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/Typography.js +2 -1
- package/dist/cjs/Typography.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +7 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +9 -0
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/Typography.js +2 -1
- package/dist/esm/Typography.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +7 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +9 -0
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +4 -0
- package/dist/types/styled.d.ts +1 -0
- package/package.json +4 -4
package/dist/cjs/Typography.js
CHANGED
|
@@ -43,7 +43,7 @@ const DSTypography = (props) => {
|
|
|
43
43
|
const {
|
|
44
44
|
globalAttributes: { ...othersGlobalAttributes },
|
|
45
45
|
xstyledProps,
|
|
46
|
-
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis }
|
|
46
|
+
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis, truncateWithReadMore }
|
|
47
47
|
} = (0, import_useTypography.useTypography)(props);
|
|
48
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
49
|
import_styled.StyledTypography,
|
|
@@ -56,6 +56,7 @@ const DSTypography = (props) => {
|
|
|
56
56
|
fontSize,
|
|
57
57
|
ref: innerRef,
|
|
58
58
|
$truncateWithEllipsis: truncateWithEllipsis,
|
|
59
|
+
$truncateWithReadMore: truncateWithReadMore,
|
|
59
60
|
children: props.children
|
|
60
61
|
}
|
|
61
62
|
);
|
|
@@ -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.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,
|
|
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, truncateWithReadMore },\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 $truncateWithReadMore={truncateWithReadMore}\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,sBAAsB,qBAAqB;AAAA,EAC7G,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,MACvB,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
|
}
|
|
@@ -58,6 +58,12 @@ const DSTypographyPropTypes = {
|
|
|
58
58
|
component: import_ds_props_helpers.PropTypes.string.description(
|
|
59
59
|
"Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`"
|
|
60
60
|
),
|
|
61
|
-
truncateWithEllipsis: import_ds_props_helpers.PropTypes.bool.description("If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.").defaultValue(false)
|
|
61
|
+
truncateWithEllipsis: import_ds_props_helpers.PropTypes.bool.description("If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.").defaultValue(false),
|
|
62
|
+
truncateWithReadMore: import_ds_props_helpers.PropTypes.shape({
|
|
63
|
+
lines: import_ds_props_helpers.PropTypes.number.description("Number of lines to truncate to."),
|
|
64
|
+
expanded: import_ds_props_helpers.PropTypes.bool.description("If true, the text will be expanded.")
|
|
65
|
+
}).description(
|
|
66
|
+
"Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook"
|
|
67
|
+
)
|
|
62
68
|
};
|
|
63
69
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -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 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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;
|
|
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 truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\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;AA+ChE,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;AAAA,EACA,sBAAsB,kCAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,kCAAU,MAAM;AAAA,IACpC,OAAO,kCAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -226,6 +226,13 @@ const wrapStyle = import_ds_system.css`
|
|
|
226
226
|
overflow-wrap: break-word;
|
|
227
227
|
white-space: pre-wrap;
|
|
228
228
|
`;
|
|
229
|
+
const truncateWithReadMoreStyle = (readMoreMeta) => import_ds_system.css`
|
|
230
|
+
display: -webkit-box;
|
|
231
|
+
-webkit-line-clamp: ${readMoreMeta.expanded ? "unset" : readMoreMeta.lines};
|
|
232
|
+
-webkit-box-orient: vertical;
|
|
233
|
+
hyphens: auto;
|
|
234
|
+
word-break: break-all;
|
|
235
|
+
`;
|
|
229
236
|
const StyledTypography = (0, import_ds_system.styled)("div", {
|
|
230
237
|
name: import_DSTypographyDatatestId.DSTypographyName,
|
|
231
238
|
slot: import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
|
|
@@ -238,5 +245,7 @@ const StyledTypography = (0, import_ds_system.styled)("div", {
|
|
|
238
245
|
${import_ds_system.xStyledCommonProps}
|
|
239
246
|
|
|
240
247
|
${(props) => props.$truncateWithEllipsis ? noWrapStyle : wrapStyle}
|
|
248
|
+
|
|
249
|
+
${(props) => props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ""}
|
|
241
250
|
`;
|
|
242
251
|
//# 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 { 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\nconst noWrapStyle = css`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst wrapStyle = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\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) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAGhD,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;
|
|
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 $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\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\nconst noWrapStyle = css`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst wrapStyle = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\nconst truncateWithReadMoreStyle = (readMoreMeta: Required<StyleIProp>['$truncateWithReadMore']) => css`\n display: -webkit-box;\n -webkit-line-clamp: ${readMoreMeta.expanded ? 'unset' : readMoreMeta.lines};\n -webkit-box-orient: vertical;\n hyphens: auto;\n word-break: break-all;\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) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n ${(props: StyleIProp) => (props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : '')}\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
|
@@ -9,7 +9,7 @@ const DSTypography = (props) => {
|
|
|
9
9
|
const {
|
|
10
10
|
globalAttributes: { ...othersGlobalAttributes },
|
|
11
11
|
xstyledProps,
|
|
12
|
-
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis }
|
|
12
|
+
propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis, truncateWithReadMore }
|
|
13
13
|
} = useTypography(props);
|
|
14
14
|
return /* @__PURE__ */ jsx(
|
|
15
15
|
StyledTypography,
|
|
@@ -22,6 +22,7 @@ const DSTypography = (props) => {
|
|
|
22
22
|
fontSize,
|
|
23
23
|
ref: innerRef,
|
|
24
24
|
$truncateWithEllipsis: truncateWithEllipsis,
|
|
25
|
+
$truncateWithReadMore: truncateWithReadMore,
|
|
25
26
|
children: props.children
|
|
26
27
|
}
|
|
27
28
|
);
|
|
@@ -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.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,
|
|
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, truncateWithReadMore },\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 $truncateWithReadMore={truncateWithReadMore}\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,sBAAsB,qBAAqB;AAAA,EAC7G,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,MACvB,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
|
}
|
|
@@ -25,7 +25,13 @@ const DSTypographyPropTypes = {
|
|
|
25
25
|
component: PropTypes.string.description(
|
|
26
26
|
"Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`"
|
|
27
27
|
),
|
|
28
|
-
truncateWithEllipsis: PropTypes.bool.description("If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.").defaultValue(false)
|
|
28
|
+
truncateWithEllipsis: PropTypes.bool.description("If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.").defaultValue(false),
|
|
29
|
+
truncateWithReadMore: PropTypes.shape({
|
|
30
|
+
lines: PropTypes.number.description("Number of lines to truncate to."),
|
|
31
|
+
expanded: PropTypes.bool.description("If true, the text will be expanded.")
|
|
32
|
+
}).description(
|
|
33
|
+
"Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook"
|
|
34
|
+
)
|
|
29
35
|
};
|
|
30
36
|
export {
|
|
31
37
|
DSTypographyPropTypes
|
|
@@ -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 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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n} as WeakValidationMap<unknown>;\n"],
|
|
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 truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n ),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA+ChE,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;AAAA,EACA,sBAAsB,UAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,MAAM;AAAA,IACpC,OAAO,UAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -191,6 +191,13 @@ const wrapStyle = css`
|
|
|
191
191
|
overflow-wrap: break-word;
|
|
192
192
|
white-space: pre-wrap;
|
|
193
193
|
`;
|
|
194
|
+
const truncateWithReadMoreStyle = (readMoreMeta) => css`
|
|
195
|
+
display: -webkit-box;
|
|
196
|
+
-webkit-line-clamp: ${readMoreMeta.expanded ? "unset" : readMoreMeta.lines};
|
|
197
|
+
-webkit-box-orient: vertical;
|
|
198
|
+
hyphens: auto;
|
|
199
|
+
word-break: break-all;
|
|
200
|
+
`;
|
|
194
201
|
const StyledTypography = styled("div", {
|
|
195
202
|
name: DSTypographyName,
|
|
196
203
|
slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
|
|
@@ -203,6 +210,8 @@ const StyledTypography = styled("div", {
|
|
|
203
210
|
${xStyledCommonProps}
|
|
204
211
|
|
|
205
212
|
${(props) => props.$truncateWithEllipsis ? noWrapStyle : wrapStyle}
|
|
213
|
+
|
|
214
|
+
${(props) => props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ""}
|
|
206
215
|
`;
|
|
207
216
|
export {
|
|
208
217
|
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 { 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\nconst noWrapStyle = css`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst wrapStyle = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\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) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAGhD,SAAS,kBAAkB,8BAA8B;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;
|
|
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 $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\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\nconst noWrapStyle = css`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\nconst wrapStyle = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\nconst truncateWithReadMoreStyle = (readMoreMeta: Required<StyleIProp>['$truncateWithReadMore']) => css`\n display: -webkit-box;\n -webkit-line-clamp: ${readMoreMeta.expanded ? 'unset' : readMoreMeta.lines};\n -webkit-box-orient: vertical;\n hyphens: auto;\n word-break: break-all;\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) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n ${(props: StyleIProp) => (props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : '')}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAGhD,SAAS,kBAAkB,8BAA8B;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;AAWA,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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,EAGpD,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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,eAKrC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAAC,iBAAgE;AAAA;AAAA,wBAE3E,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uBAAuB;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,OAAO;AAAA,IAC3C;AAAA;AAAA,IAEA,CAAC,UAAuB,MAAM,wBAAwB,cAAc;AAAA;AAAA,IAEpE,CAAC,UAAuB,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,6 +11,10 @@ export declare namespace DSTypographyT {
|
|
|
11
11
|
as?: keyof JSX.IntrinsicElements;
|
|
12
12
|
component?: keyof JSX.IntrinsicElements;
|
|
13
13
|
innerRef?: React.RefObject<HTMLElement>;
|
|
14
|
+
truncateWithReadMore?: {
|
|
15
|
+
lines: number;
|
|
16
|
+
expanded: boolean;
|
|
17
|
+
};
|
|
14
18
|
}
|
|
15
19
|
interface DefaultProps {
|
|
16
20
|
truncateWithEllipsis: boolean;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -96,4 +96,5 @@ export declare const StyledTypography: import("styled-components").StyledCompone
|
|
|
96
96
|
children: DSTypographyT.InternalProps['children'];
|
|
97
97
|
variant: DSTypographyT.Variant;
|
|
98
98
|
$truncateWithEllipsis?: boolean | undefined;
|
|
99
|
+
$truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];
|
|
99
100
|
}, string | number | symbol>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-typography",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.19.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Typography",
|
|
6
6
|
"files": [
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@xstyled/system": "~3.7.3",
|
|
39
39
|
"@xstyled/util": "3.7.0",
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.
|
|
41
|
-
"@elliemae/ds-system": "3.
|
|
42
|
-
"@elliemae/ds-utilities": "3.
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.19.0",
|
|
41
|
+
"@elliemae/ds-system": "3.19.0",
|
|
42
|
+
"@elliemae/ds-utilities": "3.19.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@testing-library/jest-dom": "~5.16.5",
|