@elliemae/ds-typography 3.24.2 → 3.25.0-next.2
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 +1 -1
- package/dist/cjs/Typography.js.map +2 -2
- package/dist/cjs/parts/styled.js +0 -2
- package/dist/cjs/parts/styled.js.map +2 -2
- package/dist/esm/Typography.js +1 -1
- package/dist/esm/Typography.js.map +2 -2
- package/dist/esm/parts/styled.js +0 -2
- package/dist/esm/parts/styled.js.map +2 -2
- package/dist/types/parts/styled.d.ts +1 -1
- package/package.json +5 -5
package/dist/cjs/Typography.js
CHANGED
|
@@ -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, DSTypographyPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSTypographyName } from './constants/index.js';\nimport { StyledTypography } from './parts/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 {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,8BAAyB;AACzB,2BAA8B;AAC9B,mCAAgE;AAChE,uBAAiC;AACjC,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,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSTypographyName } from './constants/index.js';\nimport { StyledTypography } from './parts/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 {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n innerRef={innerRef}\n $truncateWithEllipsis={truncateWithEllipsis}\n $truncateWithReadMore={truncateWithReadMore}\n >\n {props.children}\n </StyledTypography>\n );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypesSchema;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypesSchema;\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,mCAAgE;AAChE,uBAAiC;AACjC,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,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,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
|
}
|
package/dist/cjs/parts/styled.js
CHANGED
|
@@ -72,8 +72,6 @@ const isSpecificShorthand = (color) => specificShorthands.includes(color);
|
|
|
72
72
|
const StyledTypography = (0, import_ds_system.styled)("div", {
|
|
73
73
|
name: import_constants.DSTypographyName,
|
|
74
74
|
slot: import_constants.TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT
|
|
75
|
-
}).withConfig({
|
|
76
|
-
shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(String(prop)) && defaultValidatorFn(prop)
|
|
77
75
|
})`
|
|
78
76
|
margin: 0;
|
|
79
77
|
padding: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/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.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\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 = (\n readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => 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\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n neutral: css`\n color: ${({ theme }) => theme.colors.neutral[600]};\n `,\n brand: css`\n color: ${({ theme }) => theme.colors.brand[800]};\n `,\n important: css`\n color: #853c12;\n `,\n critical: css`\n color: #c70916;\n `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n// this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n})
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,uBAAmD;AACnD,sBAAiC;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\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 = (\n readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => 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\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n neutral: css`\n color: ${({ theme }) => theme.colors.neutral[600]};\n `,\n brand: css`\n color: ${({ theme }) => theme.colors.brand[800]};\n `,\n important: css`\n color: #853c12;\n `,\n critical: css`\n color: #c70916;\n `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n// this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n})<DSTypographyT.StyledPropsInterface>`\n margin: 0;\n padding: 0;\n ${(props: DSTypographyT.StyledPropsInterface) => VARIANTS_CSS_MAP[props.variant]}\n ${xStyledCommonProps}\n ${(props) => {\n // support for color shorthands that are not available in the theme\n if (!props.color || !isSpecificShorthand(props.color)) return css``;\n\n return shortHandsColorMap[props.color];\n }}\n\n ${(props: DSTypographyT.StyledPropsInterface) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n ${(props: DSTypographyT.StyledPropsInterface) =>\n props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ''}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,uBAAmD;AACnD,sBAAiC;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAA8C,iCAAiB,MAAM,OAAO;AAAA,IAC7E;AAAA,IACA,CAAC,UAAU;AAEX,MAAI,CAAC,MAAM,SAAS,CAAC,oBAAoB,MAAM,KAAK;AAAG,WAAO;AAE9D,SAAO,mBAAmB,MAAM,KAAK;AACvC;AAAA;AAAA,IAEE,CAAC,UAA+C,MAAM,wBAAwB,cAAc;AAAA;AAAA,IAE5F,CAAC,UACD,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Typography.js
CHANGED
|
@@ -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, DSTypographyPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSTypographyName } from './constants/index.js';\nimport { StyledTypography } from './parts/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 {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,mCAAmC;AAChE,SAAS,wBAAwB;AACjC,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,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA
|
|
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, DSTypographyPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSTypographyName } from './constants/index.js';\nimport { StyledTypography } from './parts/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 {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n innerRef={innerRef}\n $truncateWithEllipsis={truncateWithEllipsis}\n $truncateWithReadMore={truncateWithReadMore}\n >\n {props.children}\n </StyledTypography>\n );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypesSchema;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypesSchema;\n\nexport { DSTypography, DSTypographyWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,mCAAmC;AAChE,SAAS,wBAAwB;AACjC,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,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,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
|
}
|
package/dist/esm/parts/styled.js
CHANGED
|
@@ -39,8 +39,6 @@ const isSpecificShorthand = (color) => specificShorthands.includes(color);
|
|
|
39
39
|
const StyledTypography = styled("div", {
|
|
40
40
|
name: DSTypographyName,
|
|
41
41
|
slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT
|
|
42
|
-
}).withConfig({
|
|
43
|
-
shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(String(prop)) && defaultValidatorFn(prop)
|
|
44
42
|
})`
|
|
45
43
|
margin: 0;
|
|
46
44
|
padding: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/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.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\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 = (\n readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => 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\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n neutral: css`\n color: ${({ theme }) => theme.colors.neutral[600]};\n `,\n brand: css`\n color: ${({ theme }) => theme.colors.brand[800]};\n `,\n important: css`\n color: #853c12;\n `,\n critical: css`\n color: #c70916;\n `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n// this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n})
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,wBAAwB;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC
|
|
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.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\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 = (\n readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => 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\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n neutral: css`\n color: ${({ theme }) => theme.colors.neutral[600]};\n `,\n brand: css`\n color: ${({ theme }) => theme.colors.brand[800]};\n `,\n important: css`\n color: #853c12;\n `,\n critical: css`\n color: #c70916;\n `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n// this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n})<DSTypographyT.StyledPropsInterface>`\n margin: 0;\n padding: 0;\n ${(props: DSTypographyT.StyledPropsInterface) => VARIANTS_CSS_MAP[props.variant]}\n ${xStyledCommonProps}\n ${(props) => {\n // support for color shorthands that are not available in the theme\n if (!props.color || !isSpecificShorthand(props.color)) return css``;\n\n return shortHandsColorMap[props.color];\n }}\n\n ${(props: DSTypographyT.StyledPropsInterface) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n ${(props: DSTypographyT.StyledPropsInterface) =>\n props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ''}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,wBAAwB;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAA8C,iBAAiB,MAAM,OAAO;AAAA,IAC7E;AAAA,IACA,CAAC,UAAU;AAEX,MAAI,CAAC,MAAM,SAAS,CAAC,oBAAoB,MAAM,KAAK;AAAG,WAAO;AAE9D,SAAO,mBAAmB,MAAM,KAAK;AACvC;AAAA;AAAA,IAEE,CAAC,UAA+C,MAAM,wBAAwB,cAAc;AAAA;AAAA,IAE5F,CAAC,UACD,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,4 +8,4 @@ export declare const StyledTypography: import("styled-components").StyledCompone
|
|
|
8
8
|
lines: number;
|
|
9
9
|
expanded: boolean;
|
|
10
10
|
} | undefined;
|
|
11
|
-
}
|
|
11
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-typography",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.25.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Typography",
|
|
6
6
|
"files": [
|
|
@@ -37,16 +37,16 @@
|
|
|
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.25.0-next.2",
|
|
41
|
+
"@elliemae/ds-system": "3.25.0-next.2",
|
|
42
|
+
"@elliemae/ds-utilities": "3.25.0-next.2"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
46
46
|
"react": "^17.0.2",
|
|
47
47
|
"react-dom": "^17.0.2",
|
|
48
48
|
"react-test-renderer": "~17.0.2",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.25.0-next.2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^17.0.2",
|