@elliemae/ds-typography 3.14.0-next.10 → 3.14.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.
@@ -39,7 +39,7 @@ const DSTypography = (props) => {
39
39
  const {
40
40
  globalAttributes: { ...othersGlobalAttributes },
41
41
  xstyledProps,
42
- propsWithDefault: { color, as, variant, fontSize }
42
+ propsWithDefault: { color, as, component, variant, fontSize, innerRef }
43
43
  } = (0, import_useTypography.useTypography)(props);
44
44
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
45
45
  import_styled.StyledTypography,
@@ -47,9 +47,10 @@ const DSTypography = (props) => {
47
47
  "data-testid": import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,
48
48
  ...othersGlobalAttributes,
49
49
  ...xstyledProps,
50
- as,
50
+ as: as || component,
51
51
  variant,
52
52
  fontSize,
53
+ ref: innerRef,
53
54
  children: props.children
54
55
  }
55
56
  );
@@ -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-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, variant, fontSize },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as}\n variant={variant}\n fontSize={fontSize}\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,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\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 >\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,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,WAAW,SAAS,UAAU,SAAS;AAAA,EACxE,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,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -50,6 +50,9 @@ const DSTypographyPropTypes = {
50
50
  `
51
51
  ).isRequired,
52
52
  children: import_ds_utilities.PropTypes.node.description("Children element").isRequired,
53
- as: import_ds_utilities.PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`")
53
+ as: import_ds_utilities.PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`"),
54
+ component: import_ds_utilities.PropTypes.string.description(
55
+ "Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`"
56
+ )
54
57
  };
55
58
  //# 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 { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AAwBhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,8BAAU,OAAO,YAAY,8DAA8D;AACjG;",
4
+ "sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AA0BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,8BAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,8BAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -70,11 +70,11 @@ const styleMap = {
70
70
  },
71
71
  button: {
72
72
  fontSize: "1rem",
73
- lineHeight: "1.31rem"
73
+ lineHeight: "1.85rem"
74
74
  },
75
75
  link: {
76
76
  fontSize: "1rem",
77
- lineHeight: "1.31rem"
77
+ lineHeight: "1.85rem"
78
78
  }
79
79
  };
80
80
  const mapper = {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -9,7 +9,7 @@ const DSTypography = (props) => {
9
9
  const {
10
10
  globalAttributes: { ...othersGlobalAttributes },
11
11
  xstyledProps,
12
- propsWithDefault: { color, as, variant, fontSize }
12
+ propsWithDefault: { color, as, component, variant, fontSize, innerRef }
13
13
  } = useTypography(props);
14
14
  return /* @__PURE__ */ jsx(
15
15
  StyledTypography,
@@ -17,9 +17,10 @@ const DSTypography = (props) => {
17
17
  "data-testid": DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,
18
18
  ...othersGlobalAttributes,
19
19
  ...xstyledProps,
20
- as,
20
+ as: as || component,
21
21
  variant,
22
22
  fontSize,
23
+ ref: innerRef,
23
24
  children: props.children
24
25
  }
25
26
  );
@@ -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-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, variant, fontSize },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as}\n variant={variant}\n fontSize={fontSize}\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,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,IAAI,cAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\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 >\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,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,WAAW,SAAS,UAAU,SAAS;AAAA,EACxE,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,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -21,7 +21,10 @@ const DSTypographyPropTypes = {
21
21
  `
22
22
  ).isRequired,
23
23
  children: PropTypes.node.description("Children element").isRequired,
24
- as: PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`")
24
+ as: PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`"),
25
+ component: PropTypes.string.description(
26
+ "Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`"
27
+ )
25
28
  };
26
29
  export {
27
30
  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 { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n} as WeakValidationMap<unknown>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAwBhE,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;AACjG;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AA0BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -40,11 +40,11 @@ const styleMap = {
40
40
  },
41
41
  button: {
42
42
  fontSize: "1rem",
43
- lineHeight: "1.31rem"
43
+ lineHeight: "1.85rem"
44
44
  },
45
45
  link: {
46
46
  fontSize: "1rem",
47
- lineHeight: "1.31rem"
47
+ lineHeight: "1.85rem"
48
48
  }
49
49
  };
50
50
  const mapper = {
@@ -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", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.14.0-next.10",
3
+ "version": "3.14.0-next.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -35,8 +35,8 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.14.0-next.10",
39
- "@elliemae/ds-utilities": "3.14.0-next.10"
38
+ "@elliemae/ds-system": "3.14.0-next.11",
39
+ "@elliemae/ds-utilities": "3.14.0-next.11"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "~5.16.4",