@elliemae/ds-ribbon 3.80.0-next.13 → 3.80.0-next.18

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.
Files changed (23) hide show
  1. package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js +13 -4
  2. package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js.map +2 -2
  3. package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js +24 -5
  4. package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map +2 -2
  5. package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js +23 -5
  6. package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map +2 -2
  7. package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js +34 -1
  8. package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js.map +2 -2
  9. package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js +2 -0
  10. package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js.map +2 -2
  11. package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js +13 -4
  12. package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js.map +2 -2
  13. package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js +24 -5
  14. package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map +2 -2
  15. package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js +23 -5
  16. package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map +2 -2
  17. package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js +34 -1
  18. package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js.map +2 -2
  19. package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js +2 -0
  20. package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js.map +2 -2
  21. package/dist/types/parts/DSRibbonCard/PureLabelPlace.d.ts +2 -0
  22. package/dist/types/parts/DSRibbonCard/react-desc-prop-types.d.ts +1 -0
  23. package/package.json +7 -7
package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js CHANGED
@@ -44,8 +44,9 @@ var import_styled = require("./styled.js");
44
44
  var import_DSRibbonCardWithAdditionalLabel = require("./DSRibbonCardWithAdditionalLabel.js");
45
45
  const DSRibbonCard = (props) => {
46
46
  const ribbonCardConfig = (0, import_useRibbonCard.useRibbonCard)(props);
47
- const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;
48
- const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;
47
+ const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
48
+ const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
49
+ const labelId = `${instanceUid}-label`;
49
50
  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
50
51
  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
51
52
  if (additionalValue)
@@ -61,8 +62,16 @@ const DSRibbonCard = (props) => {
61
62
  getOwnerProps,
62
63
  getOwnerPropsArguments,
63
64
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledBlockRow, { center, getOwnerProps, getOwnerPropsArguments, children: [
64
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
65
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value })
65
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
66
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67
+ import_styled.StyledBlockValue,
68
+ {
69
+ "aria-labelledby": label ? labelId : void 0,
70
+ getOwnerProps,
71
+ getOwnerPropsArguments,
72
+ children: value
73
+ }
74
+ )
66
75
  ] })
67
76
  }
68
77
  );
package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBZ;AAjBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI;AACxD,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,OAAO,IAAI;AAC5E,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,QACpE,4CAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n aria-labelledby={label ? labelId : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBZ;AAlBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js CHANGED
@@ -39,10 +39,13 @@ var import_styled = require("./styled.js");
39
39
  const DSRibbonCardWithAdditionalLabel = (props) => {
40
40
  const {
41
41
  getOwnerProps,
42
- ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
42
+ ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
43
43
  } = props;
44
- const { containerProps, value, additionalLabel, center } = propsWithDefault;
44
+ const { containerProps, value, additionalLabel, center, label } = propsWithDefault;
45
45
  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
46
+ const labelId = `${instanceUid}-label`;
47
+ const additionalLabelId = `${instanceUid}-additional-label`;
48
+ const labelledBy = label && labelId || additionalLabel && additionalLabelId || void 0;
46
49
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
47
50
  import_styled.StyledBlock,
48
51
  {
@@ -59,7 +62,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
59
62
  getOwnerProps,
60
63
  getOwnerPropsArguments,
61
64
  children: [
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
65
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
63
66
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
64
67
  import_styled.StyledBlockCol,
65
68
  {
@@ -68,8 +71,24 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
68
71
  getOwnerProps,
69
72
  getOwnerPropsArguments,
70
73
  children: [
71
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValueLabel, { getOwnerProps, getOwnerPropsArguments, children: additionalLabel })
74
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
+ import_styled.StyledBlockValue,
76
+ {
77
+ "aria-labelledby": labelledBy,
78
+ getOwnerProps,
79
+ getOwnerPropsArguments,
80
+ children: value
81
+ }
82
+ ),
83
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
+ import_styled.StyledBlockValueLabel,
85
+ {
86
+ id: additionalLabelId,
87
+ getOwnerProps,
88
+ getOwnerPropsArguments,
89
+ children: additionalLabel
90
+ }
91
+ )
73
92
  ]
74
93
  }
75
94
  )
package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n } = props;\n const { containerProps, value, additionalLabel, center } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,8DAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,4CAAC,uCAAsB,eAA8B,wBAClD,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AAnCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js CHANGED
@@ -39,10 +39,12 @@ var import_styled = require("./styled.js");
39
39
  const DSRibbonCardWithAdditionalValue = (props) => {
40
40
  const {
41
41
  getOwnerProps,
42
- ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
42
+ ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
43
43
  } = props;
44
- const { containerProps, value, additionalValue, center } = propsWithDefault;
44
+ const { containerProps, value, additionalValue, center, label } = propsWithDefault;
45
45
  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
46
+ const labelId = `${instanceUid}-label`;
47
+ const labelledBy = label ? labelId : void 0;
46
48
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
47
49
  import_styled.StyledBlock,
48
50
  {
@@ -59,7 +61,7 @@ const DSRibbonCardWithAdditionalValue = (props) => {
59
61
  getOwnerProps,
60
62
  getOwnerPropsArguments,
61
63
  children: [
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
64
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
63
65
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
64
66
  import_styled.StyledBlockCol,
65
67
  {
@@ -68,8 +70,24 @@ const DSRibbonCardWithAdditionalValue = (props) => {
68
70
  getOwnerProps,
69
71
  getOwnerPropsArguments,
70
72
  children: [
71
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_styled.StyledBlockValue,
75
+ {
76
+ "aria-labelledby": labelledBy,
77
+ getOwnerProps,
78
+ getOwnerPropsArguments,
79
+ children: value
80
+ }
81
+ ),
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
83
+ import_styled.StyledBlockValue,
84
+ {
85
+ "aria-labelledby": labelledBy,
86
+ getOwnerProps,
87
+ getOwnerPropsArguments,
88
+ children: additionalValue
89
+ }
90
+ )
73
91
  ]
74
92
  }
75
93
  )
package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n } = props;\n const { containerProps, value, additionalValue, center } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,8DAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,4CAAC,kCAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // One label, two values: it names both.\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCf;AAjCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js CHANGED
@@ -35,18 +35,51 @@ var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_styled = require("./styled.js");
38
+ const srOnlyStyle = {
39
+ position: "absolute",
40
+ width: "1px",
41
+ height: "1px",
42
+ padding: 0,
43
+ margin: "-1px",
44
+ overflow: "hidden",
45
+ clip: "rect(0, 0, 0, 0)",
46
+ whiteSpace: "nowrap",
47
+ border: 0
48
+ };
49
+ const STATUS_TEXT = {
50
+ info: "Information",
51
+ error: "Error",
52
+ warning: "Warning",
53
+ success: "Success"
54
+ };
55
+ const resolveStatusText = ({
56
+ info,
57
+ error,
58
+ warning,
59
+ success
60
+ }) => {
61
+ if (info) return STATUS_TEXT.info;
62
+ if (error) return STATUS_TEXT.error;
63
+ if (warning) return STATUS_TEXT.warning;
64
+ if (success) return STATUS_TEXT.success;
65
+ return "";
66
+ };
38
67
  const PureLabelPlace = ({
39
68
  icon,
40
69
  error,
41
70
  info,
42
71
  success,
43
72
  warning,
73
+ statusText,
44
74
  label,
75
+ labelId,
45
76
  getOwnerProps
46
77
  }) => {
47
78
  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
48
79
  const showLabel = !icon || Boolean(label);
80
+ const announcedStatus = resolveStatusText({ info, error, warning, success });
49
81
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
82
+ announcedStatus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: srOnlyStyle, children: statusText || announcedStatus }) : null,
50
83
  icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
84
  import_styled.StyledBlockIcon,
52
85
  {
@@ -59,7 +92,7 @@ const PureLabelPlace = ({
59
92
  children: icon
60
93
  }
61
94
  ) : null,
62
- showLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockLabel, { getOwnerProps, getOwnerPropsArguments, children: label }) : null
95
+ showLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockLabel, { id: labelId, getOwnerProps, getOwnerPropsArguments, children: label }) : null
63
96
  ] });
64
97
  };
65
98
  //# sourceMappingURL=PureLabelPlace.js.map
package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/PureLabelPlace.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n icon,\n error,\n info,\n success,\n warning,\n label,\n getOwnerProps,\n}) => {\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n // would take away an element consumers can already select.\n const showLabel = !icon || Boolean(label);\n return (\n <>\n {icon ? (\n <StyledBlockIcon\n error={error}\n info={info}\n success={success}\n warning={warning}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {icon}\n </StyledBlockIcon>\n ) : null}\n {showLabel ? (\n <StyledBlockLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyledBlockLabel>\n ) : null}\n </>\n );\n};\ntype PureLabelPlaceProps = {\n icon?: DSRibbonCardT.Props['icon'];\n label?: DSRibbonCardT.Props['label'];\n error?: DSRibbonCardT.Props['error'];\n info?: DSRibbonCardT.Props['info'];\n success?: DSRibbonCardT.Props['success'];\n warning?: DSRibbonCardT.Props['warning'];\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,mBAAkB;AAElB,oBAAkD;AAE3C,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AACxC,SACE,4EACG;AAAA,WACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,4CAAC,kCAAiB,eAA8B,wBAC7C,iBACH,IACE;AAAA,KACN;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\n// Reaches assistive technology, never painted. Same approach as ds-form-date-time-picker's\n// MeridiemList.\nconst srOnlyStyle: React.CSSProperties = {\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n};\n\nconst STATUS_TEXT = {\n info: 'Information',\n error: 'Error',\n warning: 'Warning',\n success: 'Success',\n};\n\n// Precedence matches the icon fill in styled.tsx.\nconst resolveStatusText = ({\n info,\n error,\n warning,\n success,\n}: Pick<PureLabelPlaceProps, 'info' | 'error' | 'warning' | 'success'>) => {\n if (info) return STATUS_TEXT.info;\n if (error) return STATUS_TEXT.error;\n if (warning) return STATUS_TEXT.warning;\n if (success) return STATUS_TEXT.success;\n return '';\n};\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n icon,\n error,\n info,\n success,\n warning,\n statusText,\n label,\n labelId,\n getOwnerProps,\n}) => {\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n // would take away an element consumers can already select.\n const showLabel = !icon || Boolean(label);\n // The status props otherwise reach assistive technology through nothing at all: the only thing\n // they change is the fill of an icon that ds-icons renders aria-hidden.\n const announcedStatus = resolveStatusText({ info, error, warning, success });\n return (\n <>\n {announcedStatus ? <span style={srOnlyStyle}>{statusText || announcedStatus}</span> : null}\n {icon ? (\n <StyledBlockIcon\n error={error}\n info={info}\n success={success}\n warning={warning}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {icon}\n </StyledBlockIcon>\n ) : null}\n {showLabel ? (\n <StyledBlockLabel id={labelId} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyledBlockLabel>\n ) : null}\n </>\n );\n};\ntype PureLabelPlaceProps = {\n icon?: DSRibbonCardT.Props['icon'];\n label?: DSRibbonCardT.Props['label'];\n labelId?: string;\n error?: DSRibbonCardT.Props['error'];\n info?: DSRibbonCardT.Props['info'];\n success?: DSRibbonCardT.Props['success'];\n statusText?: DSRibbonCardT.Props['statusText'];\n warning?: DSRibbonCardT.Props['warning'];\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DnB;AA1DJ,mBAAkB;AAElB,oBAAkD;AAIlD,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2E;AACzE,MAAI,KAAM,QAAO,YAAY;AAC7B,MAAI,MAAO,QAAO,YAAY;AAC9B,MAAI,QAAS,QAAO,YAAY;AAChC,MAAI,QAAS,QAAO,YAAY;AAChC,SAAO;AACT;AAEO,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AAGxC,QAAM,kBAAkB,kBAAkB,EAAE,MAAM,OAAO,SAAS,QAAQ,CAAC;AAC3E,SACE,4EACG;AAAA,sBAAkB,4CAAC,UAAK,OAAO,aAAc,wBAAc,iBAAgB,IAAU;AAAA,IACrF,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,4CAAC,kCAAiB,IAAI,SAAS,eAA8B,wBAC1D,iBACH,IACE;AAAA,KACN;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js CHANGED
@@ -47,6 +47,7 @@ const defaultProps = {
47
47
  error: false,
48
48
  warning: false,
49
49
  success: false,
50
+ statusText: "",
50
51
  center: false
51
52
  };
52
53
  const DSRibbonCardPropTypes = {
@@ -63,6 +64,7 @@ const DSRibbonCardPropTypes = {
63
64
  error: import_ds_props_helpers.PropTypes.bool.description("error state toggle").defaultValue("false"),
64
65
  warning: import_ds_props_helpers.PropTypes.bool.description("warning state toggle").defaultValue("false"),
65
66
  success: import_ds_props_helpers.PropTypes.bool.description("success state toggle").defaultValue("false"),
67
+ statusText: import_ds_props_helpers.PropTypes.string.description("overrides the text announced to assistive technology for the active status prop").defaultValue("''"),
66
68
  center: import_ds_props_helpers.PropTypes.bool.description("align center").defaultValue("false")
67
69
  };
68
70
  const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes;
package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n icon: React.ReactElement | null;\n label: string;\n value: string;\n additionalValue: string;\n additionalLabel: string;\n info: boolean;\n error: boolean;\n warning: boolean;\n success: boolean;\n center: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_CARD_SLOTS\n > {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n containerProps: {},\n icon: null,\n label: '',\n value: '',\n additionalValue: '',\n additionalLabel: '',\n info: false,\n error: false,\n warning: false,\n success: false,\n center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n info: PropTypes.bool.description('for main label').defaultValue('false'),\n error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAgD;AAyCzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,OAAG,kDAAyB,+BAAc,kCAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,kCAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,kCAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,QAAQ,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
4
+ "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n icon: React.ReactElement | null;\n label: string;\n value: string;\n additionalValue: string;\n additionalLabel: string;\n info: boolean;\n error: boolean;\n warning: boolean;\n success: boolean;\n statusText: string;\n center: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_CARD_SLOTS\n > {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n containerProps: {},\n icon: null,\n label: '',\n value: '',\n additionalValue: '',\n additionalLabel: '',\n info: false,\n error: false,\n warning: false,\n success: false,\n statusText: '',\n center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n info: PropTypes.bool.description('for main label').defaultValue('false'),\n error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n statusText: PropTypes.string\n .description('overrides the text announced to assistive technology for the active status prop')\n .defaultValue(\"''\"),\n center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAgD;AA0CzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,OAAG,kDAAyB,+BAAc,kCAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,kCAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,kCAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,YAAY,kCAAU,OACnB,YAAY,iFAAiF,EAC7F,aAAa,IAAI;AAAA,EACpB,QAAQ,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js CHANGED
@@ -10,8 +10,9 @@ import { StyledBlock, StyledBlockRow, StyledBlockValue } from "./styled.js";
10
10
  import { DSRibbonCardWithAdditionalLabel } from "./DSRibbonCardWithAdditionalLabel.js";
11
11
  const DSRibbonCard = (props) => {
12
12
  const ribbonCardConfig = useRibbonCard(props);
13
- const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;
14
- const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;
13
+ const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
14
+ const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
15
+ const labelId = `${instanceUid}-label`;
15
16
  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
16
17
  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
17
18
  if (additionalValue)
@@ -27,8 +28,16 @@ const DSRibbonCard = (props) => {
27
28
  getOwnerProps,
28
29
  getOwnerPropsArguments,
29
30
  children: /* @__PURE__ */ jsxs(StyledBlockRow, { center, getOwnerProps, getOwnerPropsArguments, children: [
30
- /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
31
- /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value })
31
+ /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
32
+ /* @__PURE__ */ jsx(
33
+ StyledBlockValue,
34
+ {
35
+ "aria-labelledby": label ? labelId : void 0,
36
+ getOwnerProps,
37
+ getOwnerPropsArguments,
38
+ children: value
39
+ }
40
+ )
32
41
  ] })
33
42
  }
34
43
  );
package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkBZ,cAYL,YAZK;AAjBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI;AACxD,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,OAAO,IAAI;AAC5E,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,QACpE,oBAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n aria-labelledby={label ? labelId : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACmBZ,cAYL,YAZK;AAlBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js CHANGED
@@ -6,10 +6,13 @@ import { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBl
6
6
  const DSRibbonCardWithAdditionalLabel = (props) => {
7
7
  const {
8
8
  getOwnerProps,
9
- ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
9
+ ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
10
10
  } = props;
11
- const { containerProps, value, additionalLabel, center } = propsWithDefault;
11
+ const { containerProps, value, additionalLabel, center, label } = propsWithDefault;
12
12
  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
13
+ const labelId = `${instanceUid}-label`;
14
+ const additionalLabelId = `${instanceUid}-additional-label`;
15
+ const labelledBy = label && labelId || additionalLabel && additionalLabelId || void 0;
13
16
  return /* @__PURE__ */ jsx(
14
17
  StyledBlock,
15
18
  {
@@ -26,7 +29,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
26
29
  getOwnerProps,
27
30
  getOwnerPropsArguments,
28
31
  children: [
29
- /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
32
+ /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
30
33
  /* @__PURE__ */ jsxs(
31
34
  StyledBlockCol,
32
35
  {
@@ -35,8 +38,24 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
35
38
  getOwnerProps,
36
39
  getOwnerPropsArguments,
37
40
  children: [
38
- /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
39
- /* @__PURE__ */ jsx(StyledBlockValueLabel, { getOwnerProps, getOwnerPropsArguments, children: additionalLabel })
41
+ /* @__PURE__ */ jsx(
42
+ StyledBlockValue,
43
+ {
44
+ "aria-labelledby": labelledBy,
45
+ getOwnerProps,
46
+ getOwnerPropsArguments,
47
+ children: value
48
+ }
49
+ ),
50
+ /* @__PURE__ */ jsx(
51
+ StyledBlockValueLabel,
52
+ {
53
+ id: additionalLabelId,
54
+ getOwnerProps,
55
+ getOwnerPropsArguments,
56
+ children: additionalLabel
57
+ }
58
+ )
40
59
  ]
41
60
  }
42
61
  )
package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n } = props;\n const { containerProps, value, additionalLabel, center } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8Bf,cACA,YADA;AA9BR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,sCAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,oBAAC,yBAAsB,eAA8B,wBAClD,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACmCf,cACA,YADA;AAnCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js CHANGED
@@ -6,10 +6,12 @@ import { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from ".
6
6
  const DSRibbonCardWithAdditionalValue = (props) => {
7
7
  const {
8
8
  getOwnerProps,
9
- ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
9
+ ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
10
10
  } = props;
11
- const { containerProps, value, additionalValue, center } = propsWithDefault;
11
+ const { containerProps, value, additionalValue, center, label } = propsWithDefault;
12
12
  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
13
+ const labelId = `${instanceUid}-label`;
14
+ const labelledBy = label ? labelId : void 0;
13
15
  return /* @__PURE__ */ jsx(
14
16
  StyledBlock,
15
17
  {
@@ -26,7 +28,7 @@ const DSRibbonCardWithAdditionalValue = (props) => {
26
28
  getOwnerProps,
27
29
  getOwnerPropsArguments,
28
30
  children: [
29
- /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
31
+ /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
30
32
  /* @__PURE__ */ jsxs(
31
33
  StyledBlockCol,
32
34
  {
@@ -35,8 +37,24 @@ const DSRibbonCardWithAdditionalValue = (props) => {
35
37
  getOwnerProps,
36
38
  getOwnerPropsArguments,
37
39
  children: [
38
- /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
39
- /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
40
+ /* @__PURE__ */ jsx(
41
+ StyledBlockValue,
42
+ {
43
+ "aria-labelledby": labelledBy,
44
+ getOwnerProps,
45
+ getOwnerPropsArguments,
46
+ children: value
47
+ }
48
+ ),
49
+ /* @__PURE__ */ jsx(
50
+ StyledBlockValue,
51
+ {
52
+ "aria-labelledby": labelledBy,
53
+ getOwnerProps,
54
+ getOwnerPropsArguments,
55
+ children: additionalValue
56
+ }
57
+ )
40
58
  ]
41
59
  }
42
60
  )
package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n } = props;\n const { containerProps, value, additionalValue, center } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8Bf,cACA,YADA;AA9BR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,sCAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,oBAAC,oBAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // One label, two values: it names both.\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACiCf,cACA,YADA;AAjCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js CHANGED
@@ -2,18 +2,51 @@ import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2 from "react";
4
4
  import { StyledBlockIcon, StyledBlockLabel } from "./styled.js";
5
+ const srOnlyStyle = {
6
+ position: "absolute",
7
+ width: "1px",
8
+ height: "1px",
9
+ padding: 0,
10
+ margin: "-1px",
11
+ overflow: "hidden",
12
+ clip: "rect(0, 0, 0, 0)",
13
+ whiteSpace: "nowrap",
14
+ border: 0
15
+ };
16
+ const STATUS_TEXT = {
17
+ info: "Information",
18
+ error: "Error",
19
+ warning: "Warning",
20
+ success: "Success"
21
+ };
22
+ const resolveStatusText = ({
23
+ info,
24
+ error,
25
+ warning,
26
+ success
27
+ }) => {
28
+ if (info) return STATUS_TEXT.info;
29
+ if (error) return STATUS_TEXT.error;
30
+ if (warning) return STATUS_TEXT.warning;
31
+ if (success) return STATUS_TEXT.success;
32
+ return "";
33
+ };
5
34
  const PureLabelPlace = ({
6
35
  icon,
7
36
  error,
8
37
  info,
9
38
  success,
10
39
  warning,
40
+ statusText,
11
41
  label,
42
+ labelId,
12
43
  getOwnerProps
13
44
  }) => {
14
45
  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
15
46
  const showLabel = !icon || Boolean(label);
47
+ const announcedStatus = resolveStatusText({ info, error, warning, success });
16
48
  return /* @__PURE__ */ jsxs(Fragment, { children: [
49
+ announcedStatus ? /* @__PURE__ */ jsx("span", { style: srOnlyStyle, children: statusText || announcedStatus }) : null,
17
50
  icon ? /* @__PURE__ */ jsx(
18
51
  StyledBlockIcon,
19
52
  {
@@ -26,7 +59,7 @@ const PureLabelPlace = ({
26
59
  children: icon
27
60
  }
28
61
  ) : null,
29
- showLabel ? /* @__PURE__ */ jsx(StyledBlockLabel, { getOwnerProps, getOwnerPropsArguments, children: label }) : null
62
+ showLabel ? /* @__PURE__ */ jsx(StyledBlockLabel, { id: labelId, getOwnerProps, getOwnerPropsArguments, children: label }) : null
30
63
  ] });
31
64
  };
32
65
  export {
package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/PureLabelPlace.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n icon,\n error,\n info,\n success,\n warning,\n label,\n getOwnerProps,\n}) => {\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n // would take away an element consumers can already select.\n const showLabel = !icon || Boolean(label);\n return (\n <>\n {icon ? (\n <StyledBlockIcon\n error={error}\n info={info}\n success={success}\n warning={warning}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {icon}\n </StyledBlockIcon>\n ) : null}\n {showLabel ? (\n <StyledBlockLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyledBlockLabel>\n ) : null}\n </>\n );\n};\ntype PureLabelPlaceProps = {\n icon?: DSRibbonCardT.Props['icon'];\n label?: DSRibbonCardT.Props['label'];\n error?: DSRibbonCardT.Props['error'];\n info?: DSRibbonCardT.Props['info'];\n success?: DSRibbonCardT.Props['success'];\n warning?: DSRibbonCardT.Props['warning'];\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkBnB,mBAEI,KAFJ;AAlBJ,OAAOA,YAAW;AAElB,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AACxC,SACE,iCACG;AAAA,WACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,oBAAC,oBAAiB,eAA8B,wBAC7C,iBACH,IACE;AAAA,KACN;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\n// Reaches assistive technology, never painted. Same approach as ds-form-date-time-picker's\n// MeridiemList.\nconst srOnlyStyle: React.CSSProperties = {\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n};\n\nconst STATUS_TEXT = {\n info: 'Information',\n error: 'Error',\n warning: 'Warning',\n success: 'Success',\n};\n\n// Precedence matches the icon fill in styled.tsx.\nconst resolveStatusText = ({\n info,\n error,\n warning,\n success,\n}: Pick<PureLabelPlaceProps, 'info' | 'error' | 'warning' | 'success'>) => {\n if (info) return STATUS_TEXT.info;\n if (error) return STATUS_TEXT.error;\n if (warning) return STATUS_TEXT.warning;\n if (success) return STATUS_TEXT.success;\n return '';\n};\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n icon,\n error,\n info,\n success,\n warning,\n statusText,\n label,\n labelId,\n getOwnerProps,\n}) => {\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n // would take away an element consumers can already select.\n const showLabel = !icon || Boolean(label);\n // The status props otherwise reach assistive technology through nothing at all: the only thing\n // they change is the fill of an icon that ds-icons renders aria-hidden.\n const announcedStatus = resolveStatusText({ info, error, warning, success });\n return (\n <>\n {announcedStatus ? <span style={srOnlyStyle}>{statusText || announcedStatus}</span> : null}\n {icon ? (\n <StyledBlockIcon\n error={error}\n info={info}\n success={success}\n warning={warning}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {icon}\n </StyledBlockIcon>\n ) : null}\n {showLabel ? (\n <StyledBlockLabel id={labelId} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyledBlockLabel>\n ) : null}\n </>\n );\n};\ntype PureLabelPlaceProps = {\n icon?: DSRibbonCardT.Props['icon'];\n label?: DSRibbonCardT.Props['label'];\n labelId?: string;\n error?: DSRibbonCardT.Props['error'];\n info?: DSRibbonCardT.Props['info'];\n success?: DSRibbonCardT.Props['success'];\n statusText?: DSRibbonCardT.Props['statusText'];\n warning?: DSRibbonCardT.Props['warning'];\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC0DnB,mBACqB,KADrB;AA1DJ,OAAOA,YAAW;AAElB,SAAS,iBAAiB,wBAAwB;AAIlD,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2E;AACzE,MAAI,KAAM,QAAO,YAAY;AAC7B,MAAI,MAAO,QAAO,YAAY;AAC9B,MAAI,QAAS,QAAO,YAAY;AAChC,MAAI,QAAS,QAAO,YAAY;AAChC,SAAO;AACT;AAEO,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AAGxC,QAAM,kBAAkB,kBAAkB,EAAE,MAAM,OAAO,SAAS,QAAQ,CAAC;AAC3E,SACE,iCACG;AAAA,sBAAkB,oBAAC,UAAK,OAAO,aAAc,wBAAc,iBAAgB,IAAU;AAAA,IACrF,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,oBAAC,oBAAiB,IAAI,SAAS,eAA8B,wBAC1D,iBACH,IACE;AAAA,KACN;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js CHANGED
@@ -17,6 +17,7 @@ const defaultProps = {
17
17
  error: false,
18
18
  warning: false,
19
19
  success: false,
20
+ statusText: "",
20
21
  center: false
21
22
  };
22
23
  const DSRibbonCardPropTypes = {
@@ -33,6 +34,7 @@ const DSRibbonCardPropTypes = {
33
34
  error: PropTypes.bool.description("error state toggle").defaultValue("false"),
34
35
  warning: PropTypes.bool.description("warning state toggle").defaultValue("false"),
35
36
  success: PropTypes.bool.description("success state toggle").defaultValue("false"),
37
+ statusText: PropTypes.string.description("overrides the text announced to assistive technology for the active status prop").defaultValue("''"),
36
38
  center: PropTypes.bool.description("align center").defaultValue("false")
37
39
  };
38
40
  const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes;
package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n icon: React.ReactElement | null;\n label: string;\n value: string;\n additionalValue: string;\n additionalLabel: string;\n info: boolean;\n error: boolean;\n warning: boolean;\n success: boolean;\n center: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_CARD_SLOTS\n > {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n containerProps: {},\n icon: null,\n label: '',\n value: '',\n additionalValue: '',\n additionalLabel: '',\n info: false,\n error: false,\n warning: false,\n success: false,\n center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n info: PropTypes.bool.description('for main label').defaultValue('false'),\n error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AAyCzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,UAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,UAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,QAAQ,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n icon: React.ReactElement | null;\n label: string;\n value: string;\n additionalValue: string;\n additionalLabel: string;\n info: boolean;\n error: boolean;\n warning: boolean;\n success: boolean;\n statusText: string;\n center: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_CARD_SLOTS\n > {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n containerProps: {},\n icon: null,\n label: '',\n value: '',\n additionalValue: '',\n additionalLabel: '',\n info: false,\n error: false,\n warning: false,\n success: false,\n statusText: '',\n center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n info: PropTypes.bool.description('for main label').defaultValue('false'),\n error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n statusText: PropTypes.string\n .description('overrides the text announced to assistive technology for the active status prop')\n .defaultValue(\"''\"),\n center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AA0CzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,UAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,UAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,YAAY,UAAU,OACnB,YAAY,iFAAiF,EAC7F,aAAa,IAAI;AAAA,EACpB,QAAQ,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
6
6
  "names": []
7
7
  }
package/dist/types/parts/DSRibbonCard/PureLabelPlace.d.ts CHANGED
@@ -4,9 +4,11 @@ export declare const PureLabelPlace: React.ComponentType<PureLabelPlaceProps>;
4
4
  type PureLabelPlaceProps = {
5
5
  icon?: DSRibbonCardT.Props['icon'];
6
6
  label?: DSRibbonCardT.Props['label'];
7
+ labelId?: string;
7
8
  error?: DSRibbonCardT.Props['error'];
8
9
  info?: DSRibbonCardT.Props['info'];
9
10
  success?: DSRibbonCardT.Props['success'];
11
+ statusText?: DSRibbonCardT.Props['statusText'];
10
12
  warning?: DSRibbonCardT.Props['warning'];
11
13
  getOwnerProps: () => DSRibbonCardT.InternalProps;
12
14
  };
package/dist/types/parts/DSRibbonCard/react-desc-prop-types.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare namespace DSRibbonCardT {
15
15
  error: boolean;
16
16
  warning: boolean;
17
17
  success: boolean;
18
+ statusText: string;
18
19
  center: boolean;
19
20
  }
20
21
  interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSRibbonName, typeof RIBBON_CARD_SLOTS> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-ribbon",
3
- "version": "3.80.0-next.13",
3
+ "version": "3.80.0-next.18",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Ribbon",
6
6
  "files": [
@@ -36,15 +36,15 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-system": "3.80.0-next.13",
40
- "@elliemae/ds-props-helpers": "3.80.0-next.13"
39
+ "@elliemae/ds-props-helpers": "3.80.0-next.18",
40
+ "@elliemae/ds-system": "3.80.0-next.18"
41
41
  },
42
42
  "devDependencies": {
43
+ "@elliemae/ds-monorepo-devops": "3.80.0-next.18",
44
+ "@elliemae/ds-test-utils": "3.80.0-next.18",
45
+ "@elliemae/ds-typescript-helpers": "3.80.0-next.18",
43
46
  "jest": "^30.0.0",
44
- "styled-components": "~5.3.11",
45
- "@elliemae/ds-monorepo-devops": "3.80.0-next.13",
46
- "@elliemae/ds-typescript-helpers": "3.80.0-next.13",
47
- "@elliemae/ds-test-utils": "3.80.0-next.13"
47
+ "styled-components": "~5.3.11"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "lodash-es": "^4.18.1",