@elliemae/ds-ribbon 3.14.0-next.1 → 3.14.0-next.2
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 +23 -21
- package/dist/cjs/DSRibbon.js.map +2 -2
- package/dist/esm/DSRibbon.js +23 -21
- package/dist/esm/DSRibbon.js.map +2 -2
- package/package.json +3 -3
package/dist/cjs/DSRibbon.js
CHANGED
|
@@ -26,6 +26,7 @@ var DSRibbon_exports = {};
|
|
|
26
26
|
__export(DSRibbon_exports, {
|
|
27
27
|
DSRibbon: () => DSRibbon,
|
|
28
28
|
DSRibbonCardWithSchema: () => DSRibbonCardWithSchema,
|
|
29
|
+
RibbonCol: () => RibbonCol,
|
|
29
30
|
default: () => DSRibbon_default
|
|
30
31
|
});
|
|
31
32
|
module.exports = __toCommonJS(DSRibbon_exports);
|
|
@@ -33,6 +34,23 @@ var React = __toESM(require("react"));
|
|
|
33
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
+
const RibbonColSimple = import_ds_system.styled.div`
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
padding: 0.25rem 0.5rem;
|
|
41
|
+
height: 100%;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
flex: 1;
|
|
44
|
+
position: relative;
|
|
45
|
+
&:after {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 10%;
|
|
48
|
+
right: 0;
|
|
49
|
+
height: 80%;
|
|
50
|
+
content: '';
|
|
51
|
+
border-right: dashed 1px #ebedf0;
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
36
54
|
const RibbonRow = import_ds_system.styled.div`
|
|
37
55
|
width: 100%;
|
|
38
56
|
display: flex;
|
|
@@ -49,7 +67,7 @@ const RibbonRow = import_ds_system.styled.div`
|
|
|
49
67
|
if (props.alignLeft) {
|
|
50
68
|
return `
|
|
51
69
|
align-items: stretch;
|
|
52
|
-
& > ${
|
|
70
|
+
& > ${RibbonColSimple} {
|
|
53
71
|
align-items: flex-start;
|
|
54
72
|
align-self: stretch;
|
|
55
73
|
flex: 0;
|
|
@@ -59,14 +77,13 @@ const RibbonRow = import_ds_system.styled.div`
|
|
|
59
77
|
`;
|
|
60
78
|
}
|
|
61
79
|
return `
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
`;
|
|
80
|
+
align-items: center;
|
|
81
|
+
`;
|
|
65
82
|
}};
|
|
66
83
|
${(props) => {
|
|
67
84
|
if (props.solid) {
|
|
68
85
|
return `
|
|
69
|
-
& > ${
|
|
86
|
+
& > ${RibbonColSimple} {
|
|
70
87
|
&:after{
|
|
71
88
|
top: 0%;
|
|
72
89
|
height: 100%;
|
|
@@ -77,22 +94,7 @@ const RibbonRow = import_ds_system.styled.div`
|
|
|
77
94
|
return "";
|
|
78
95
|
}};
|
|
79
96
|
`;
|
|
80
|
-
const RibbonCol = import_ds_system.styled
|
|
81
|
-
display: flex;
|
|
82
|
-
flex-direction: column;
|
|
83
|
-
padding: 0.25rem 0.5rem;
|
|
84
|
-
height: 100%;
|
|
85
|
-
justify-content: center;
|
|
86
|
-
flex: 1;
|
|
87
|
-
position: relative;
|
|
88
|
-
&:after {
|
|
89
|
-
position: absolute;
|
|
90
|
-
top: 10%;
|
|
91
|
-
right: 0;
|
|
92
|
-
height: 80%;
|
|
93
|
-
content: '';
|
|
94
|
-
border-right: dashed 1px #ebedf0;
|
|
95
|
-
}
|
|
97
|
+
const RibbonCol = (0, import_ds_system.styled)(RibbonColSimple)`
|
|
96
98
|
& > ${RibbonRow} {
|
|
97
99
|
align-items: flex-start;
|
|
98
100
|
}
|
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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\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 & > ${
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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-utilities';\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: bold;\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/esm/DSRibbon.js
CHANGED
|
@@ -2,6 +2,23 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
const RibbonColSimple = styled.div`
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
padding: 0.25rem 0.5rem;
|
|
9
|
+
height: 100%;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
flex: 1;
|
|
12
|
+
position: relative;
|
|
13
|
+
&:after {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: 10%;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: 80%;
|
|
18
|
+
content: '';
|
|
19
|
+
border-right: dashed 1px #ebedf0;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
5
22
|
const RibbonRow = styled.div`
|
|
6
23
|
width: 100%;
|
|
7
24
|
display: flex;
|
|
@@ -18,7 +35,7 @@ const RibbonRow = styled.div`
|
|
|
18
35
|
if (props.alignLeft) {
|
|
19
36
|
return `
|
|
20
37
|
align-items: stretch;
|
|
21
|
-
& > ${
|
|
38
|
+
& > ${RibbonColSimple} {
|
|
22
39
|
align-items: flex-start;
|
|
23
40
|
align-self: stretch;
|
|
24
41
|
flex: 0;
|
|
@@ -28,14 +45,13 @@ const RibbonRow = styled.div`
|
|
|
28
45
|
`;
|
|
29
46
|
}
|
|
30
47
|
return `
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
`;
|
|
48
|
+
align-items: center;
|
|
49
|
+
`;
|
|
34
50
|
}};
|
|
35
51
|
${(props) => {
|
|
36
52
|
if (props.solid) {
|
|
37
53
|
return `
|
|
38
|
-
& > ${
|
|
54
|
+
& > ${RibbonColSimple} {
|
|
39
55
|
&:after{
|
|
40
56
|
top: 0%;
|
|
41
57
|
height: 100%;
|
|
@@ -46,22 +62,7 @@ const RibbonRow = styled.div`
|
|
|
46
62
|
return "";
|
|
47
63
|
}};
|
|
48
64
|
`;
|
|
49
|
-
const RibbonCol = styled
|
|
50
|
-
display: flex;
|
|
51
|
-
flex-direction: column;
|
|
52
|
-
padding: 0.25rem 0.5rem;
|
|
53
|
-
height: 100%;
|
|
54
|
-
justify-content: center;
|
|
55
|
-
flex: 1;
|
|
56
|
-
position: relative;
|
|
57
|
-
&:after {
|
|
58
|
-
position: absolute;
|
|
59
|
-
top: 10%;
|
|
60
|
-
right: 0;
|
|
61
|
-
height: 80%;
|
|
62
|
-
content: '';
|
|
63
|
-
border-right: dashed 1px #ebedf0;
|
|
64
|
-
}
|
|
65
|
+
const RibbonCol = styled(RibbonColSimple)`
|
|
65
66
|
& > ${RibbonRow} {
|
|
66
67
|
align-items: flex-start;
|
|
67
68
|
}
|
|
@@ -225,6 +226,7 @@ var DSRibbon_default = DSRibbon;
|
|
|
225
226
|
export {
|
|
226
227
|
DSRibbon,
|
|
227
228
|
DSRibbonCardWithSchema,
|
|
229
|
+
RibbonCol,
|
|
228
230
|
DSRibbon_default as default
|
|
229
231
|
};
|
|
230
232
|
//# sourceMappingURL=DSRibbon.js.map
|
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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\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 & > ${
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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-utilities';\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: bold;\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
|
+
"mappings": "AAAA,YAAY,WAAW;ACqLnB,cAiBM,YAjBN;AAjLJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AAEvB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYrB,CAAC,UAAU;AACX,MAAI,MAAM,WAAW;AACnB,WAAO;AAAA;AAAA,YAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACA,SAAO;AAAA;AAAA;AAGT;AAAA,IACE,CAAC,UAAU;AACX,MAAI,MAAM,OAAO;AACf,WAAO;AAAA,YACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOR;AACA,SAAO;AACT;AAAA;AAGK,MAAM,YAAY,OAAO,eAAe;AAAA,QACvC;AAAA;AAAA;AAAA;AAKR,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWV,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKnB,CAAC,UAAU;AACjB,MAAI,MAAM;AAAM,WAAO;AACvB,MAAI,MAAM;AAAO,WAAO;AACxB,MAAI,MAAM;AAAS,WAAO;AAC1B,MAAI,MAAM;AAAS,WAAO;AAC1B,SAAO;AACT;AAAA;AAAA;AAKJ,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrC,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKb,CAAC,UAAU;AACxB,MAAI,MAAM;AAAQ,WAAO;AACzB,SAAO;AACT;AAAA;AAAA;AAGF,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMb,CAAC,UAAU;AACxB,MAAI,MAAM;AAAQ,WAAO;AACzB,SAAO;AACT;AAAA;AAEF,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,aAAa,CAAC;AAAA,EAClB,iBAAiB,CAAC;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AACV,MAAM;AACJ,QAAM,aAAa,OACjB,oBAAC,mBAAgB,OAAc,MAAY,SAAkB,SAC1D,gBACH,IAEA,oBAAC,oBAAkB,iBAAM;AAE3B,MAAI,mBAAmB,iBAAiB;AACtC,QAAI;AACJ,QAAI,iBAAiB;AACnB,8BAAwB,mBAAmB,oBAAC,oBAAkB,2BAAgB;AAAA,IAChF,WAAW,iBAAiB;AAC1B,8BAAwB,mBAAmB,oBAAC,yBAAuB,2BAAgB;AAAA,IACrF;AACA,WACE,oBAAC,eAAa,GAAG,gBACf,+BAAC,kBAAe,WAAU,oBAAmB,OAAc,OAAO,EAAE,YAAY,aAAa,GAC1F;AAAA;AAAA,MACD,qBAAC,kBAAe,QAAgB,WAAU,oBACxC;AAAA,4BAAC,oBAAkB,iBAAM;AAAA,QACxB;AAAA,SACH;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,eAAa,GAAG,gBACf,+BAAC,kBAAe,QAAgB,OAC7B;AAAA;AAAA,IACD,oBAAC,oBAAkB,iBAAM;AAAA,KAC3B,GACF;AAEJ;AAEA,MAAM,WAAW;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,cAAc,YAAY,CAAC;AAE3B,UAAU,YAAY;AAAA,EAEpB,WAAW,UAAU,KAAK,YAAY,YAAY;AACpD;AAEA,UAAU,YAAY,CAAC;AAEvB,MAAM,YAAY;AAAA,EAEhB,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAEzE,MAAM,UAAU,QAAQ,YAAY,sBAAsB;AAAA,EAE1D,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAE3D,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,iBAAiB,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEhE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEhE,MAAM,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAEjD,OAAO,UAAU,KAAK,YAAY,oBAAoB;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE1D,SAAS,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE1D,QAAQ,UAAU,KAAK,YAAY,cAAc;AAAA,EAEjD,OAAO,UAAU,KAAK,YAAY,aAAa;AACjD;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,yBAAyB,SAAS,UAAU;AAClD,uBAAuB,YAAY;AAEnC,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-ribbon",
|
|
3
|
-
"version": "3.14.0-next.
|
|
3
|
+
"version": "3.14.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Ribbon",
|
|
6
6
|
"files": [
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"indent": 4
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-system": "3.14.0-next.2",
|
|
43
|
+
"@elliemae/ds-utilities": "3.14.0-next.2"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"styled-components": "~5.3.6"
|