@elliemae/ds-typography 3.27.0-next.1 → 3.27.0-next.11
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/index.js.map +1 -1
- package/dist/cjs/parts/styled.js +2 -0
- package/dist/cjs/parts/styled.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/typescript-testing/typescript-typography-valid.js +88 -0
- package/dist/cjs/typescript-testing/typescript-typography-valid.js.map +7 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/styled.js +2 -0
- package/dist/esm/parts/styled.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/typescript-testing/typescript-typography-valid.js +65 -0
- package/dist/esm/typescript-testing/typescript-typography-valid.js.map +7 -0
- package/dist/types/config/useDefaultProps.d.ts +0 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/parts/styled.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/dist/types/typescript-testing/typescript-typography-valid.d.ts +1 -0
- package/package.json +6 -6
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.js';\nexport { TYPOGRAPHY_VARIANTS } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
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';\nexport { TYPOGRAPHY_VARIANTS } from './constants/index.js';\nexport type { DSTypographyT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;AACrD,uBAAoC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/styled.js
CHANGED
|
@@ -72,6 +72,8 @@ 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)
|
|
75
77
|
})`
|
|
76
78
|
margin: 0;
|
|
77
79
|
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})<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;",
|
|
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}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\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,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,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
|
}
|
|
@@ -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, DSPropTypesSchema } 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 // we need to declare the type here even if it's already part of `common-types.d.ts` because\n // third parties don't have `common-types.d.ts` in their node_modules and we don't have company-wide shared types utilities\n // as such, if we use the type in a variable that other third parties use, they would get an error if we don't share it somehow\n // for now we're sharing it by (re)declaring it here\n // we explicitly don't want to export it because this should not be the place third party developers get the type from,\n // it's generic, not specific to this component\n type KebabToSnakeCase<S extends string> = S extends `${infer T}-${infer U}` ? `${T}_${KebabToSnakeCase<U>}` : S;\n type SnakeToKebabCase<S extends string> = S extends `${infer T}_${infer U}` ? `${T}-${KebabToSnakeCase<U>}` : S;\n\n export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4';\n export type ButtonVariants = 'button';\n export type LinkVariants = 'link';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants;\n\n export type VariantsMap = {\n [key in Uppercase<KebabToSnakeCase<Variant>>]: Lowercase<SnakeToKebabCase<key>>;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\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.
|
|
4
|
+
"sourcesContent": ["import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 // we need to declare the type here even if it's already part of `common-types.d.ts` because\n // third parties don't have `common-types.d.ts` in their node_modules and we don't have company-wide shared types utilities\n // as such, if we use the type in a variable that other third parties use, they would get an error if we don't share it somehow\n // for now we're sharing it by (re)declaring it here\n // we explicitly don't want to export it because this should not be the place third party developers get the type from,\n // it's generic, not specific to this component\n type KebabToSnakeCase<S extends string> = S extends `${infer T}-${infer U}` ? `${T}_${KebabToSnakeCase<U>}` : S;\n type SnakeToKebabCase<S extends string> = S extends `${infer T}_${infer U}` ? `${T}-${KebabToSnakeCase<U>}` : S;\n\n export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4';\n export type ButtonVariants = 'button';\n export type LinkVariants = 'link';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants;\n\n export type VariantsMap = {\n [key in Uppercase<KebabToSnakeCase<Variant>>]: Lowercase<SnakeToKebabCase<key>>;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\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.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\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: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'button',\n 'link',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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};\n\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA0FhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,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;AAEO,MAAM,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import__ = require("../index.js");
|
|
27
|
+
const testRequiredProps = {
|
|
28
|
+
variant: "h1",
|
|
29
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})
|
|
30
|
+
};
|
|
31
|
+
const testOptionalProps = {
|
|
32
|
+
truncateWithReadMore: {
|
|
33
|
+
lines: 2,
|
|
34
|
+
expanded: false
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const testPartialDefaults = {};
|
|
38
|
+
const testProps = {
|
|
39
|
+
...testRequiredProps,
|
|
40
|
+
...testOptionalProps,
|
|
41
|
+
...testPartialDefaults
|
|
42
|
+
};
|
|
43
|
+
const testPropsAsSyntax = {
|
|
44
|
+
...testRequiredProps,
|
|
45
|
+
...testOptionalProps,
|
|
46
|
+
...testPartialDefaults
|
|
47
|
+
};
|
|
48
|
+
const testCompleteDefaults = {
|
|
49
|
+
truncateWithEllipsis: true
|
|
50
|
+
};
|
|
51
|
+
const testInternalProps = {
|
|
52
|
+
...testRequiredProps,
|
|
53
|
+
...testOptionalProps,
|
|
54
|
+
...testCompleteDefaults
|
|
55
|
+
};
|
|
56
|
+
const testInternalPropsAsSyntax = {
|
|
57
|
+
...testRequiredProps,
|
|
58
|
+
...testOptionalProps,
|
|
59
|
+
...testCompleteDefaults
|
|
60
|
+
};
|
|
61
|
+
const testExplicitDefinition = {
|
|
62
|
+
variant: "h1",
|
|
63
|
+
fontSize: "16px",
|
|
64
|
+
lineHeight: "20px",
|
|
65
|
+
color: "brand-200",
|
|
66
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})
|
|
67
|
+
};
|
|
68
|
+
const testInferedTypeCompatibility = {
|
|
69
|
+
variant: "b1",
|
|
70
|
+
fontSize: "16px",
|
|
71
|
+
lineHeight: "20px",
|
|
72
|
+
color: "info-500",
|
|
73
|
+
textDecoration: "underline",
|
|
74
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})
|
|
75
|
+
};
|
|
76
|
+
const testDefinitionAsConst = {
|
|
77
|
+
variant: "link",
|
|
78
|
+
href: "something.com",
|
|
79
|
+
color: "neutral-300",
|
|
80
|
+
children: "Some children value"
|
|
81
|
+
};
|
|
82
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTypography, { ...testExplicitDefinition }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTypography, { ...testInferedTypeCompatibility }),
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTypography, { ...testDefinitionAsConst }),
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTypography, { variant: "button", children: "Button" })
|
|
87
|
+
] });
|
|
88
|
+
//# sourceMappingURL=typescript-typography-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-typography-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTypography } from '../index.js';\nimport type { DSTypographyT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTypographyT.Props;\ntype ComponentPropsInternals = DSTypographyT.InternalProps;\ntype ComponentPropsDefaultProps = DSTypographyT.DefaultProps;\ntype ComponentPropsOptionalProps = DSTypographyT.OptionalProps;\ntype ComponentPropsRequiredProps = DSTypographyT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n variant: 'h1',\n children: <></>,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n truncateWithReadMore: {\n lines: 2,\n expanded: false,\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n truncateWithEllipsis: true,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n variant: 'h1',\n fontSize: '16px',\n lineHeight: '20px',\n color: 'brand-200',\n children: <></>,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n variant: 'b1',\n fontSize: '16px',\n lineHeight: '20px',\n color: 'info-500',\n textDecoration: 'underline',\n children: <></>,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n variant: 'link',\n href: 'something.com',\n color: 'neutral-300',\n children: 'Some children value',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTypography {...testExplicitDefinition} />\n <DSTypography {...testInferedTypeCompatibility} />\n <DSTypography {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSTypography variant=\"button\">Button</DSTypography>\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACaX;AAZZ,eAA6B;AAU7B,MAAM,oBAAiD;AAAA,EACrD,SAAS;AAAA,EACT,UAAU,2EAAE;AACd;AACA,MAAM,oBAAiD;AAAA,EACrD,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AACF;AAIA,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,sBAAsB;AACxB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU,2EAAE;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU,2EAAE;AACd;AAEA,MAAM,wBAAwB;AAAA,EAC5B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,yBAAc,GAAG,wBAAwB;AAAA,EAC1C,4CAAC,yBAAc,GAAG,8BAA8B;AAAA,EAChD,4CAAC,yBAAc,GAAG,uBAAuB;AAAA,EAEzC,4CAAC,yBAAa,SAAQ,UAAS,oBAAM;AAAA,GACvC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
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.js';\nexport { TYPOGRAPHY_VARIANTS } from './constants/index.js';\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';\nexport { TYPOGRAPHY_VARIANTS } from './constants/index.js';\nexport type { DSTypographyT } from './react-desc-prop-types.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,cAAc,8BAA8B;AACrD,SAAS,2BAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/styled.js
CHANGED
|
@@ -39,6 +39,8 @@ 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)
|
|
42
44
|
})`
|
|
43
45
|
margin: 0;
|
|
44
46
|
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})<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;",
|
|
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}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\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,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,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
|
}
|
|
@@ -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, DSPropTypesSchema } 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 // we need to declare the type here even if it's already part of `common-types.d.ts` because\n // third parties don't have `common-types.d.ts` in their node_modules and we don't have company-wide shared types utilities\n // as such, if we use the type in a variable that other third parties use, they would get an error if we don't share it somehow\n // for now we're sharing it by (re)declaring it here\n // we explicitly don't want to export it because this should not be the place third party developers get the type from,\n // it's generic, not specific to this component\n type KebabToSnakeCase<S extends string> = S extends `${infer T}-${infer U}` ? `${T}_${KebabToSnakeCase<U>}` : S;\n type SnakeToKebabCase<S extends string> = S extends `${infer T}_${infer U}` ? `${T}-${KebabToSnakeCase<U>}` : S;\n\n export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4';\n export type ButtonVariants = 'button';\n export type LinkVariants = 'link';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants;\n\n export type VariantsMap = {\n [key in Uppercase<KebabToSnakeCase<Variant>>]: Lowercase<SnakeToKebabCase<key>>;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\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.
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 // we need to declare the type here even if it's already part of `common-types.d.ts` because\n // third parties don't have `common-types.d.ts` in their node_modules and we don't have company-wide shared types utilities\n // as such, if we use the type in a variable that other third parties use, they would get an error if we don't share it somehow\n // for now we're sharing it by (re)declaring it here\n // we explicitly don't want to export it because this should not be the place third party developers get the type from,\n // it's generic, not specific to this component\n type KebabToSnakeCase<S extends string> = S extends `${infer T}-${infer U}` ? `${T}_${KebabToSnakeCase<U>}` : S;\n type SnakeToKebabCase<S extends string> = S extends `${infer T}_${infer U}` ? `${T}-${KebabToSnakeCase<U>}` : S;\n\n export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4';\n export type ButtonVariants = 'button';\n export type LinkVariants = 'link';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants;\n\n export type VariantsMap = {\n [key in Uppercase<KebabToSnakeCase<Variant>>]: Lowercase<SnakeToKebabCase<key>>;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\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.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\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: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'button',\n 'link',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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};\n\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA0FhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,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;AAEO,MAAM,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DSTypography } from "../index.js";
|
|
4
|
+
const testRequiredProps = {
|
|
5
|
+
variant: "h1",
|
|
6
|
+
children: /* @__PURE__ */ jsx(Fragment, {})
|
|
7
|
+
};
|
|
8
|
+
const testOptionalProps = {
|
|
9
|
+
truncateWithReadMore: {
|
|
10
|
+
lines: 2,
|
|
11
|
+
expanded: false
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const testPartialDefaults = {};
|
|
15
|
+
const testProps = {
|
|
16
|
+
...testRequiredProps,
|
|
17
|
+
...testOptionalProps,
|
|
18
|
+
...testPartialDefaults
|
|
19
|
+
};
|
|
20
|
+
const testPropsAsSyntax = {
|
|
21
|
+
...testRequiredProps,
|
|
22
|
+
...testOptionalProps,
|
|
23
|
+
...testPartialDefaults
|
|
24
|
+
};
|
|
25
|
+
const testCompleteDefaults = {
|
|
26
|
+
truncateWithEllipsis: true
|
|
27
|
+
};
|
|
28
|
+
const testInternalProps = {
|
|
29
|
+
...testRequiredProps,
|
|
30
|
+
...testOptionalProps,
|
|
31
|
+
...testCompleteDefaults
|
|
32
|
+
};
|
|
33
|
+
const testInternalPropsAsSyntax = {
|
|
34
|
+
...testRequiredProps,
|
|
35
|
+
...testOptionalProps,
|
|
36
|
+
...testCompleteDefaults
|
|
37
|
+
};
|
|
38
|
+
const testExplicitDefinition = {
|
|
39
|
+
variant: "h1",
|
|
40
|
+
fontSize: "16px",
|
|
41
|
+
lineHeight: "20px",
|
|
42
|
+
color: "brand-200",
|
|
43
|
+
children: /* @__PURE__ */ jsx(Fragment, {})
|
|
44
|
+
};
|
|
45
|
+
const testInferedTypeCompatibility = {
|
|
46
|
+
variant: "b1",
|
|
47
|
+
fontSize: "16px",
|
|
48
|
+
lineHeight: "20px",
|
|
49
|
+
color: "info-500",
|
|
50
|
+
textDecoration: "underline",
|
|
51
|
+
children: /* @__PURE__ */ jsx(Fragment, {})
|
|
52
|
+
};
|
|
53
|
+
const testDefinitionAsConst = {
|
|
54
|
+
variant: "link",
|
|
55
|
+
href: "something.com",
|
|
56
|
+
color: "neutral-300",
|
|
57
|
+
children: "Some children value"
|
|
58
|
+
};
|
|
59
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
60
|
+
/* @__PURE__ */ jsx(DSTypography, { ...testExplicitDefinition }),
|
|
61
|
+
/* @__PURE__ */ jsx(DSTypography, { ...testInferedTypeCompatibility }),
|
|
62
|
+
/* @__PURE__ */ jsx(DSTypography, { ...testDefinitionAsConst }),
|
|
63
|
+
/* @__PURE__ */ jsx(DSTypography, { variant: "button", children: "Button" })
|
|
64
|
+
] });
|
|
65
|
+
//# sourceMappingURL=typescript-typography-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-typography-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTypography } from '../index.js';\nimport type { DSTypographyT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTypographyT.Props;\ntype ComponentPropsInternals = DSTypographyT.InternalProps;\ntype ComponentPropsDefaultProps = DSTypographyT.DefaultProps;\ntype ComponentPropsOptionalProps = DSTypographyT.OptionalProps;\ntype ComponentPropsRequiredProps = DSTypographyT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n variant: 'h1',\n children: <></>,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n truncateWithReadMore: {\n lines: 2,\n expanded: false,\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n truncateWithEllipsis: true,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n variant: 'h1',\n fontSize: '16px',\n lineHeight: '20px',\n color: 'brand-200',\n children: <></>,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n variant: 'b1',\n fontSize: '16px',\n lineHeight: '20px',\n color: 'info-500',\n textDecoration: 'underline',\n children: <></>,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n variant: 'link',\n href: 'something.com',\n color: 'neutral-300',\n children: 'Some children value',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTypography {...testExplicitDefinition} />\n <DSTypography {...testInferedTypeCompatibility} />\n <DSTypography {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSTypography variant=\"button\">Button</DSTypography>\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACaX,wBAgEV,YAhEU;AAZZ,SAAS,oBAAoB;AAU7B,MAAM,oBAAiD;AAAA,EACrD,SAAS;AAAA,EACT,UAAU,gCAAE;AACd;AACA,MAAM,oBAAiD;AAAA,EACrD,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AACF;AAIA,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,sBAAsB;AACxB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU,gCAAE;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU,gCAAE;AACd;AAEA,MAAM,wBAAwB;AAAA,EAC5B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,gBAAc,GAAG,wBAAwB;AAAA,EAC1C,oBAAC,gBAAc,GAAG,8BAA8B;AAAA,EAChD,oBAAC,gBAAc,GAAG,uBAAuB;AAAA,EAEzC,oBAAC,gBAAa,SAAQ,UAAS,oBAAM;AAAA,GACvC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -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
|
+
}, string | number | symbol>;
|
|
@@ -29,7 +29,7 @@ export declare namespace DSTypographyT {
|
|
|
29
29
|
interface OptionalProps {
|
|
30
30
|
as?: keyof JSX.IntrinsicElements;
|
|
31
31
|
component?: keyof JSX.IntrinsicElements;
|
|
32
|
-
innerRef?: React.
|
|
32
|
+
innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;
|
|
33
33
|
truncateWithReadMore?: {
|
|
34
34
|
lines: number;
|
|
35
35
|
expanded: boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-typography",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.11",
|
|
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.27.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.11",
|
|
41
|
+
"@elliemae/ds-system": "3.27.0-next.11",
|
|
42
|
+
"@elliemae/ds-utilities": "3.27.0-next.11"
|
|
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.27.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.11"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^17.0.2",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
},
|
|
56
56
|
"publishConfig": {
|
|
57
57
|
"access": "public",
|
|
58
|
-
"typeSafety":
|
|
58
|
+
"typeSafety": true
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"test": "pui-cli test --passWithNoTests",
|