@elliemae/ds-typography 3.25.0-next.3 → 3.25.0-next.5

package/dist/cjs/Typography.js

@@ -48,6 +48,7 @@ const DSTypography = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledTypography,
     {
+      "data-testid": import_constants.TYPOGRAPHY_DATA_TESTID[import_constants.TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT],
       ...othersGlobalAttributes,
       ...xstyledProps,
       as: as || component,

package/dist/cjs/Typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Typography.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
-  "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;",
+  "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, TYPOGRAPHY_DATA_TESTID, TYPOGRAPHY_SLOTS } 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      // we can't use the out-of-the-box data-testid because legacy reasons\n      //  check the \"constant\" file where this constant is coming from for more info\n      data-testid={TYPOGRAPHY_DATA_TESTID[TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]}\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,8BAAyB;AACzB,2BAA8B;AAC9B,mCAAgE;AAChE,uBAA2E;AAC3E,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,MAGC,eAAa,wCAAuB,kCAAiB,kBAAkB;AAAA,MACtE,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;",
   "names": []
 }

package/dist/cjs/constants/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   DSTypographyName: () => DSTypographyName,
+  LEGACY_DATA_TESTID: () => LEGACY_DATA_TESTID,
   TYPOGRAPHY_DATA_TESTID: () => TYPOGRAPHY_DATA_TESTID,
   TYPOGRAPHY_SLOTS: () => TYPOGRAPHY_SLOTS,
   TYPOGRAPHY_VARIANTS: () => TYPOGRAPHY_VARIANTS
@@ -39,14 +40,23 @@ var import_ds_system = require("@elliemae/ds-system");
 const DSTypographyName = "DSTypography";
 const TYPOGRAPHY_SLOTS = {
   // this is the only slot that was present before the slotObjectToDataTestIds function was created
-  TYPOGRAPHY_ELEMENT: "typography-element"
-  // from here on we rely on the slotObjectToDataTestIds function...
+  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,
+  // we can now freely change the "values" of this constant without implying breakign changes
+  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.
+  TYPOGRAPHY_ELEMENT: "root"
+};
+const LEGACY_DATA_TESTID = {
+  // the new "slot" value -> 'root' need to point to the "old" data-testid value -> 'ds-typography-element'
+  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: "ds-typography-element",
+  // the old "slot" value -> 'typography-element' need to point to the "old" data-testid value -> 'ds-typography-element'
+  // we are hardcoding this "typography-element" for legacy reason,
+  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,
+  //   having constant keys and changing value is literally the point of this kind of constants
+  "typography-element": "ds-typography-element"
 };
 const TYPOGRAPHY_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSTypographyName, TYPOGRAPHY_SLOTS),
-  // this component was created before the slotObjectToDataTestIds function was created
-  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds
-  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: "ds-typography-element"
+  ...LEGACY_DATA_TESTID
 };
 const TYPOGRAPHY_VARIANTS = {
   H1: "h1",

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  TYPOGRAPHY_ELEMENT: 'typography-element',\n  // from here on we rely on the slotObjectToDataTestIds function...\n} as const;\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  // this component was created before the slotObjectToDataTestIds function was created\n  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  BUTTON: 'button',\n  LINK: 'link',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA;AAAA,EAE9B,oBAAoB;AAAA;AAEtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA;AAAA;AAAA,EAG7D,CAAC,iBAAiB,kBAAkB,GAAG;AACzC;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACR;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n//  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  BUTTON: 'button',\n  LINK: 'link',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AACxB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACR;",
   "names": []
 }

package/dist/esm/Typography.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
 import { useTypography } from "./config/useTypography.js";
 import { DSTypographyPropTypesSchema } from "./react-desc-prop-types.js";
-import { DSTypographyName } from "./constants/index.js";
+import { DSTypographyName, TYPOGRAPHY_DATA_TESTID, TYPOGRAPHY_SLOTS } from "./constants/index.js";
 import { StyledTypography } from "./parts/styled.js";
 const DSTypography = (props) => {
   const {
@@ -14,6 +14,7 @@ const DSTypography = (props) => {
   return /* @__PURE__ */ jsx(
     StyledTypography,
     {
+      "data-testid": TYPOGRAPHY_DATA_TESTID[TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT],
       ...othersGlobalAttributes,
       ...xstyledProps,
       as: as || component,

package/dist/esm/Typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/Typography.tsx"],
-  "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"],
-  "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;",
+  "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, TYPOGRAPHY_DATA_TESTID, TYPOGRAPHY_SLOTS } 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      // we can't use the out-of-the-box data-testid because legacy reasons\n      //  check the \"constant\" file where this constant is coming from for more info\n      data-testid={TYPOGRAPHY_DATA_TESTID[TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,mCAAmC;AAChE,SAAS,kBAAkB,wBAAwB,wBAAwB;AAC3E,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,MAGC,eAAa,uBAAuB,iBAAiB,kBAAkB;AAAA,MACtE,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;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -3,14 +3,23 @@ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSTypographyName = "DSTypography";
 const TYPOGRAPHY_SLOTS = {
   // this is the only slot that was present before the slotObjectToDataTestIds function was created
-  TYPOGRAPHY_ELEMENT: "typography-element"
-  // from here on we rely on the slotObjectToDataTestIds function...
+  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,
+  // we can now freely change the "values" of this constant without implying breakign changes
+  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.
+  TYPOGRAPHY_ELEMENT: "root"
+};
+const LEGACY_DATA_TESTID = {
+  // the new "slot" value -> 'root' need to point to the "old" data-testid value -> 'ds-typography-element'
+  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: "ds-typography-element",
+  // the old "slot" value -> 'typography-element' need to point to the "old" data-testid value -> 'ds-typography-element'
+  // we are hardcoding this "typography-element" for legacy reason,
+  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,
+  //   having constant keys and changing value is literally the point of this kind of constants
+  "typography-element": "ds-typography-element"
 };
 const TYPOGRAPHY_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),
-  // this component was created before the slotObjectToDataTestIds function was created
-  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds
-  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: "ds-typography-element"
+  ...LEGACY_DATA_TESTID
 };
 const TYPOGRAPHY_VARIANTS = {
   H1: "h1",
@@ -41,6 +50,7 @@ const TYPOGRAPHY_VARIANTS = {
 };
 export {
   DSTypographyName,
+  LEGACY_DATA_TESTID,
   TYPOGRAPHY_DATA_TESTID,
   TYPOGRAPHY_SLOTS,
   TYPOGRAPHY_VARIANTS

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  TYPOGRAPHY_ELEMENT: 'typography-element',\n  // from here on we rely on the slotObjectToDataTestIds function...\n} as const;\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  // this component was created before the slotObjectToDataTestIds function was created\n  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  BUTTON: 'button',\n  LINK: 'link',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA;AAAA,EAE9B,oBAAoB;AAAA;AAEtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA;AAAA;AAAA,EAG7D,CAAC,iBAAiB,kBAAkB,GAAG;AACzC;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACR;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n//  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  BUTTON: 'button',\n  LINK: 'link',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AACxB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACR;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -1,9 +1,14 @@
 import type { DSTypographyT } from '../react-desc-prop-types.js';
 export declare const DSTypographyName: "DSTypography";
 export declare const TYPOGRAPHY_SLOTS: {
-    readonly TYPOGRAPHY_ELEMENT: "typography-element";
+    readonly TYPOGRAPHY_ELEMENT: "root";
+};
+export declare const LEGACY_DATA_TESTID: {
+    root: string;
+    'typography-element': string;
 };
 export declare const TYPOGRAPHY_DATA_TESTID: {
-    "typography-element": string;
+    root: string;
+    'typography-element': string;
 };
 export declare const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-typography",
-  "version": "3.25.0-next.3",
+  "version": "3.25.0-next.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Typography",
   "files": [
@@ -37,16 +37,16 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "3.7.0",
-    "@elliemae/ds-props-helpers": "3.25.0-next.3",
-    "@elliemae/ds-system": "3.25.0-next.3",
-    "@elliemae/ds-utilities": "3.25.0-next.3"
+    "@elliemae/ds-props-helpers": "3.25.0-next.5",
+    "@elliemae/ds-system": "3.25.0-next.5",
+    "@elliemae/ds-utilities": "3.25.0-next.5"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "~17.0.2",
-    "@elliemae/ds-monorepo-devops": "3.25.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.25.0-next.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",