@elliemae/ds-ribbon 3.15.0 → 3.16.0-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSRibbon.js +15 -15
- package/dist/cjs/DSRibbon.js.map +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/package.json +7 -0
- package/dist/esm/DSRibbon.js +1 -1
- package/dist/esm/DSRibbon.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/types/DSRibbon.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +5 -4
package/dist/cjs/DSRibbon.js
CHANGED
|
@@ -32,7 +32,7 @@ __export(DSRibbon_exports, {
|
|
|
32
32
|
module.exports = __toCommonJS(DSRibbon_exports);
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var
|
|
35
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
37
|
const RibbonColSimple = import_ds_system.styled.div`
|
|
38
38
|
display: flex;
|
|
@@ -233,26 +233,26 @@ const DSRibbon = {
|
|
|
233
233
|
};
|
|
234
234
|
RibbonWrapper.propTypes = {};
|
|
235
235
|
RibbonRow.propTypes = {
|
|
236
|
-
alignLeft:
|
|
236
|
+
alignLeft: import_ds_props_helpers.PropTypes.bool.description("align left")
|
|
237
237
|
};
|
|
238
238
|
RibbonCol.propTypes = {};
|
|
239
239
|
const cardprops = {
|
|
240
|
-
containerProps:
|
|
241
|
-
icon:
|
|
242
|
-
label:
|
|
243
|
-
value:
|
|
244
|
-
additionalValue:
|
|
245
|
-
additionalLabel:
|
|
246
|
-
info:
|
|
247
|
-
error:
|
|
248
|
-
warning:
|
|
249
|
-
success:
|
|
250
|
-
center:
|
|
251
|
-
solid:
|
|
240
|
+
containerProps: import_ds_props_helpers.PropTypes.object.description("props to inject to wrapper"),
|
|
241
|
+
icon: import_ds_props_helpers.PropTypes.element.description("icon for ribbon card"),
|
|
242
|
+
label: import_ds_props_helpers.PropTypes.string.description("label for ribbon card"),
|
|
243
|
+
value: import_ds_props_helpers.PropTypes.string.description("value for ribbon"),
|
|
244
|
+
additionalValue: import_ds_props_helpers.PropTypes.string.description("additional value"),
|
|
245
|
+
additionalLabel: import_ds_props_helpers.PropTypes.string.description("additional label"),
|
|
246
|
+
info: import_ds_props_helpers.PropTypes.bool.description("for main label"),
|
|
247
|
+
error: import_ds_props_helpers.PropTypes.bool.description("error state toggle"),
|
|
248
|
+
warning: import_ds_props_helpers.PropTypes.bool.description("warning state toggle"),
|
|
249
|
+
success: import_ds_props_helpers.PropTypes.bool.description("success state toggle"),
|
|
250
|
+
center: import_ds_props_helpers.PropTypes.bool.description("align center"),
|
|
251
|
+
solid: import_ds_props_helpers.PropTypes.bool.description("solid style")
|
|
252
252
|
};
|
|
253
253
|
RibbonCard.propTypes = cardprops;
|
|
254
254
|
RibbonCard.displayName = "RibbonCard";
|
|
255
|
-
const DSRibbonCardWithSchema = (0,
|
|
255
|
+
const DSRibbonCardWithSchema = (0, import_ds_props_helpers.describe)(RibbonCard);
|
|
256
256
|
DSRibbonCardWithSchema.propTypes = cardprops;
|
|
257
257
|
var DSRibbon_default = DSRibbon;
|
|
258
258
|
//# sourceMappingURL=DSRibbon.js.map
|
package/dist/cjs/DSRibbon.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSRibbon.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqLnB;AAjLJ,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\n\nconst RibbonColSimple = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0.25rem 0.5rem;\n height: 100%;\n justify-content: center;\n flex: 1;\n position: relative;\n &:after {\n position: absolute;\n top: 10%;\n right: 0;\n height: 80%;\n content: '';\n border-right: dashed 1px #ebedf0;\n }\n`;\n\nconst RibbonRow = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n flex-wrap: nowrap;\n overflow-x: auto;\n ${(props) => {\n if (props.alignLeft) {\n return `\n align-items: stretch;\n & > ${RibbonColSimple} {\n align-items: flex-start;\n align-self: stretch; \n flex: 0;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex: 1;\n }\n `;\n }\n return `\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.solid) {\n return `\n & > ${RibbonColSimple} {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n`;\n\nexport const RibbonCol = styled(RibbonColSimple)`\n & > ${RibbonRow} {\n align-items: flex-start;\n }\n`;\n\nconst RibbonWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n padding: 0.62rem 1.22rem;\n border-bottom: solid 1px #cfcfd7;\n background: #fff;\n & > ${RibbonRow} {\n border-bottom: solid 1px #ebedf0;\n width: auto;\n &:last-child {\n border: none;\n }\n & > ${RibbonCol} {\n &:last-child {\n &:after {\n display: none;\n }\n }\n }\n }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n padding-right: 0.5rem;\n padding-top: 0.1rem;\n svg,\n svg:not([fill]) {\n fill: ${(props) => {\n if (props.info) return '#1e79c2';\n if (props.error) return '#E34256';\n if (props.warning) return '#FBB431';\n if (props.success) return '#32B87C';\n return '#1e79c2';\n }};\n }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n padding: 0.25rem 0.5rem;\n color: #697489;\n font-size: 0.9rem;\n line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n flex: 2;\n font-weight: 600;\n padding: 0.25rem 0.5rem 0.25rem 0rem;\n font-size: 1.1rem;\n color: #333333;\n flex-wrap: nowrap;\n white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n flex: 2;\n padding: 0.25rem 0.5rem 0.25rem 0rem;\n font-size: 0.9rem;\n color: #697489;\n flex-wrap: nowrap;\n white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n display: flex;\n flex-direction: column;\n flex: 2;\n flex-wrap: nowrap;\n align-items: ${(props) => {\n if (props.center) return 'center';\n return '';\n }};\n height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n flex: 1;\n height: 100%;\n align-items: ${(props) => {\n if (props.center) return 'center';\n return '';\n }};\n`;\nconst RibbonBlock = styled.div`\n flex: 1;\n height: 100%;\n`;\n\nconst RibbonCard = ({\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 solid = false,\n}) => {\n const labelPlace = icon ? (\n <RibbonBlockIcon error={error} info={info} success={success} warning={warning}>\n {icon}\n </RibbonBlockIcon>\n ) : (\n <RibbonBlockLabel>{label}</RibbonBlockLabel>\n );\n if (additionalValue || additionalLabel) {\n let additionalInformation;\n if (additionalValue) {\n additionalInformation = additionalValue && <RibbonBlockValue>{additionalValue}</RibbonBlockValue>;\n } else if (additionalLabel) {\n additionalInformation = additionalLabel && <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>;\n }\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow className=\"ribbon-block-row\" solid={solid} style={{ alignItems: 'flex-start' }}>\n {labelPlace}\n <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n <RibbonBlockValue>{value}</RibbonBlockValue>\n {additionalInformation}\n </RibbonBlockCol>\n </RibbonBlockRow>\n </RibbonBlock>\n );\n }\n\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow center={center} solid={solid}>\n {labelPlace}\n <RibbonBlockValue>{value}</RibbonBlockValue>\n </RibbonBlockRow>\n </RibbonBlock>\n );\n};\n\nconst DSRibbon = {\n RibbonWrapper,\n RibbonRow,\n RibbonCol,\n RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n /** align left */\n alignLeft: PropTypes.bool.description('align left'),\n} as WeakValidationMap<unknown>;\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n /** props to inject to wrapper */\n containerProps: PropTypes.object.description('props to inject to wrapper'),\n /** icon for ribbon card */\n icon: PropTypes.element.description('icon for ribbon card'),\n /** label for ribbon card */\n label: PropTypes.string.description('label for ribbon card'),\n /** value for ribbon */\n value: PropTypes.string.description('value for ribbon'),\n /** additional value */\n additionalValue: PropTypes.string.description('additional value'),\n /** additional label */\n additionalLabel: PropTypes.string.description('additional label'),\n /** for main label */\n info: PropTypes.bool.description('for main label'),\n /** error state toggle */\n error: PropTypes.bool.description('error state toggle'),\n /** warning state toggle */\n warning: PropTypes.bool.description('warning state toggle'),\n /** success state toggle */\n success: PropTypes.bool.description('success state toggle'),\n /** align center */\n center: PropTypes.bool.description('align center'),\n /** solid style */\n solid: PropTypes.bool.description('solid style'),\n} as WeakValidationMap<unknown>;\n\nRibbonCard.propTypes = cardprops;\nRibbonCard.displayName = 'RibbonCard';\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema, DSRibbon };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -30,5 +30,5 @@ __export(src_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(src_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_DSRibbon = __toESM(require("./DSRibbon"));
|
|
33
|
+
var import_DSRibbon = __toESM(require("./DSRibbon.js"));
|
|
34
34
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAA0D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSRibbon.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { PropTypes, describe } from "@elliemae/ds-
|
|
3
|
+
import { PropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
const RibbonColSimple = styled.div`
|
|
6
6
|
display: flex;
|
package/dist/esm/DSRibbon.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSRibbon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\n\nconst RibbonColSimple = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0.25rem 0.5rem;\n height: 100%;\n justify-content: center;\n flex: 1;\n position: relative;\n &:after {\n position: absolute;\n top: 10%;\n right: 0;\n height: 80%;\n content: '';\n border-right: dashed 1px #ebedf0;\n }\n`;\n\nconst RibbonRow = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n flex-wrap: nowrap;\n overflow-x: auto;\n ${(props) => {\n if (props.alignLeft) {\n return `\n align-items: stretch;\n & > ${RibbonColSimple} {\n align-items: flex-start;\n align-self: stretch; \n flex: 0;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex: 1;\n }\n `;\n }\n return `\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.solid) {\n return `\n & > ${RibbonColSimple} {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n`;\n\nexport const RibbonCol = styled(RibbonColSimple)`\n & > ${RibbonRow} {\n align-items: flex-start;\n }\n`;\n\nconst RibbonWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n padding: 0.62rem 1.22rem;\n border-bottom: solid 1px #cfcfd7;\n background: #fff;\n & > ${RibbonRow} {\n border-bottom: solid 1px #ebedf0;\n width: auto;\n &:last-child {\n border: none;\n }\n & > ${RibbonCol} {\n &:last-child {\n &:after {\n display: none;\n }\n }\n }\n }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n padding-right: 0.5rem;\n padding-top: 0.1rem;\n svg,\n svg:not([fill]) {\n fill: ${(props) => {\n if (props.info) return '#1e79c2';\n if (props.error) return '#E34256';\n if (props.warning) return '#FBB431';\n if (props.success) return '#32B87C';\n return '#1e79c2';\n }};\n }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n padding: 0.25rem 0.5rem;\n color: #697489;\n font-size: 0.9rem;\n line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n flex: 2;\n font-weight: 600;\n padding: 0.25rem 0.5rem 0.25rem 0rem;\n font-size: 1.1rem;\n color: #333333;\n flex-wrap: nowrap;\n white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n flex: 2;\n padding: 0.25rem 0.5rem 0.25rem 0rem;\n font-size: 0.9rem;\n color: #697489;\n flex-wrap: nowrap;\n white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n display: flex;\n flex-direction: column;\n flex: 2;\n flex-wrap: nowrap;\n align-items: ${(props) => {\n if (props.center) return 'center';\n return '';\n }};\n height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n flex: 1;\n height: 100%;\n align-items: ${(props) => {\n if (props.center) return 'center';\n return '';\n }};\n`;\nconst RibbonBlock = styled.div`\n flex: 1;\n height: 100%;\n`;\n\nconst RibbonCard = ({\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 solid = false,\n}) => {\n const labelPlace = icon ? (\n <RibbonBlockIcon error={error} info={info} success={success} warning={warning}>\n {icon}\n </RibbonBlockIcon>\n ) : (\n <RibbonBlockLabel>{label}</RibbonBlockLabel>\n );\n if (additionalValue || additionalLabel) {\n let additionalInformation;\n if (additionalValue) {\n additionalInformation = additionalValue && <RibbonBlockValue>{additionalValue}</RibbonBlockValue>;\n } else if (additionalLabel) {\n additionalInformation = additionalLabel && <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>;\n }\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow className=\"ribbon-block-row\" solid={solid} style={{ alignItems: 'flex-start' }}>\n {labelPlace}\n <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n <RibbonBlockValue>{value}</RibbonBlockValue>\n {additionalInformation}\n </RibbonBlockCol>\n </RibbonBlockRow>\n </RibbonBlock>\n );\n }\n\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow center={center} solid={solid}>\n {labelPlace}\n <RibbonBlockValue>{value}</RibbonBlockValue>\n </RibbonBlockRow>\n </RibbonBlock>\n );\n};\n\nconst DSRibbon = {\n RibbonWrapper,\n RibbonRow,\n RibbonCol,\n RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n /** align left */\n alignLeft: PropTypes.bool.description('align left'),\n} as WeakValidationMap<unknown>;\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n /** props to inject to wrapper */\n containerProps: PropTypes.object.description('props to inject to wrapper'),\n /** icon for ribbon card */\n icon: PropTypes.element.description('icon for ribbon card'),\n /** label for ribbon card */\n label: PropTypes.string.description('label for ribbon card'),\n /** value for ribbon */\n value: PropTypes.string.description('value for ribbon'),\n /** additional value */\n additionalValue: PropTypes.string.description('additional value'),\n /** additional label */\n additionalLabel: PropTypes.string.description('additional label'),\n /** for main label */\n info: PropTypes.bool.description('for main label'),\n /** error state toggle */\n error: PropTypes.bool.description('error state toggle'),\n /** warning state toggle */\n warning: PropTypes.bool.description('warning state toggle'),\n /** success state toggle */\n success: PropTypes.bool.description('success state toggle'),\n /** align center */\n center: PropTypes.bool.description('align center'),\n /** solid style */\n solid: PropTypes.bool.description('solid style'),\n} as WeakValidationMap<unknown>;\n\nRibbonCard.propTypes = cardprops;\nRibbonCard.displayName = 'RibbonCard';\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema, DSRibbon };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,UAAU,8BAA8B;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
package/dist/types/DSRibbon.d.ts
CHANGED
|
@@ -50,7 +50,7 @@ declare const DSRibbon: {
|
|
|
50
50
|
displayName: string;
|
|
51
51
|
};
|
|
52
52
|
};
|
|
53
|
-
declare const DSRibbonCardWithSchema: import("@elliemae/ds-
|
|
53
|
+
declare const DSRibbonCardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
|
|
54
54
|
containerProps?: {} | undefined;
|
|
55
55
|
icon?: null | undefined;
|
|
56
56
|
label?: string | undefined;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon';
|
|
1
|
+
export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-ribbon",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Ribbon",
|
|
6
6
|
"files": [
|
|
@@ -39,8 +39,9 @@
|
|
|
39
39
|
"indent": 4
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.10",
|
|
43
|
+
"@elliemae/ds-system": "3.16.0-next.10",
|
|
44
|
+
"@elliemae/ds-utilities": "3.16.0-next.10"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"styled-components": "~5.3.6"
|
|
@@ -62,7 +63,7 @@
|
|
|
62
63
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
63
64
|
"dts": "node ../../scripts/dts.mjs",
|
|
64
65
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
65
|
-
"dev:build": "pnpm --filter {.}... build
|
|
66
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
66
67
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
67
68
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
68
69
|
}
|