@elliemae/ds-ribbon 3.1.0-next.0 → 3.1.0-next.3
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 +26 -26
- package/dist/cjs/DSRibbon.js.map +2 -2
- package/dist/esm/DSRibbon.js +2 -2
- package/dist/esm/DSRibbon.js.map +1 -1
- package/package.json +12 -10
package/dist/cjs/DSRibbon.js
CHANGED
|
@@ -41,9 +41,9 @@ __export(DSRibbon_exports, {
|
|
|
41
41
|
module.exports = __toCommonJS(DSRibbon_exports);
|
|
42
42
|
var React = __toESM(require("react"));
|
|
43
43
|
var import_react = __toESM(require("react"));
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
const RibbonRow =
|
|
44
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
45
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
46
|
+
const RibbonRow = import_ds_system.styled.div`
|
|
47
47
|
width: 100%;
|
|
48
48
|
display: flex;
|
|
49
49
|
flex-direction: row;
|
|
@@ -87,7 +87,7 @@ const RibbonRow = import_styled_components.default.div`
|
|
|
87
87
|
return "";
|
|
88
88
|
}};
|
|
89
89
|
`;
|
|
90
|
-
const RibbonCol =
|
|
90
|
+
const RibbonCol = import_ds_system.styled.div`
|
|
91
91
|
display: flex;
|
|
92
92
|
flex-direction: column;
|
|
93
93
|
padding: 0.25rem 0.5rem;
|
|
@@ -107,7 +107,7 @@ const RibbonCol = import_styled_components.default.div`
|
|
|
107
107
|
align-items: flex-start;
|
|
108
108
|
}
|
|
109
109
|
`;
|
|
110
|
-
const RibbonWrapper =
|
|
110
|
+
const RibbonWrapper = import_ds_system.styled.div`
|
|
111
111
|
width: 100%;
|
|
112
112
|
display: flex;
|
|
113
113
|
flex-direction: column;
|
|
@@ -129,7 +129,7 @@ const RibbonWrapper = import_styled_components.default.div`
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
`;
|
|
132
|
-
const RibbonBlockIcon =
|
|
132
|
+
const RibbonBlockIcon = import_ds_system.styled.div`
|
|
133
133
|
padding-right: 0.5rem;
|
|
134
134
|
padding-top: 0.1rem;
|
|
135
135
|
svg,
|
|
@@ -147,13 +147,13 @@ const RibbonBlockIcon = import_styled_components.default.div`
|
|
|
147
147
|
}};
|
|
148
148
|
}
|
|
149
149
|
`;
|
|
150
|
-
const RibbonBlockLabel =
|
|
150
|
+
const RibbonBlockLabel = import_ds_system.styled.div`
|
|
151
151
|
padding: 0.25rem 0.5rem;
|
|
152
152
|
color: #697489;
|
|
153
153
|
font-size: 0.9rem;
|
|
154
154
|
line-height: 1.2rem;
|
|
155
155
|
`;
|
|
156
|
-
const RibbonBlockValue =
|
|
156
|
+
const RibbonBlockValue = import_ds_system.styled.div`
|
|
157
157
|
flex: 2;
|
|
158
158
|
font-weight: bold;
|
|
159
159
|
padding: 0.25rem 0.5rem 0.25rem 0rem;
|
|
@@ -162,7 +162,7 @@ const RibbonBlockValue = import_styled_components.default.div`
|
|
|
162
162
|
flex-wrap: nowrap;
|
|
163
163
|
white-space: nowrap;
|
|
164
164
|
`;
|
|
165
|
-
const RibbonBlockValueLabel =
|
|
165
|
+
const RibbonBlockValueLabel = import_ds_system.styled.div`
|
|
166
166
|
flex: 2;
|
|
167
167
|
padding: 0.25rem 0.5rem 0.25rem 0rem;
|
|
168
168
|
font-size: 0.9rem;
|
|
@@ -170,7 +170,7 @@ const RibbonBlockValueLabel = import_styled_components.default.div`
|
|
|
170
170
|
flex-wrap: nowrap;
|
|
171
171
|
white-space: nowrap;
|
|
172
172
|
`;
|
|
173
|
-
const RibbonBlockCol =
|
|
173
|
+
const RibbonBlockCol = import_ds_system.styled.div`
|
|
174
174
|
display: flex;
|
|
175
175
|
flex-direction: column;
|
|
176
176
|
flex: 2;
|
|
@@ -182,7 +182,7 @@ const RibbonBlockCol = import_styled_components.default.div`
|
|
|
182
182
|
}};
|
|
183
183
|
height: 100%;
|
|
184
184
|
`;
|
|
185
|
-
const RibbonBlockRow =
|
|
185
|
+
const RibbonBlockRow = import_ds_system.styled.div`
|
|
186
186
|
display: flex;
|
|
187
187
|
flex-direction: row;
|
|
188
188
|
flex-wrap: nowrap;
|
|
@@ -194,7 +194,7 @@ const RibbonBlockRow = import_styled_components.default.div`
|
|
|
194
194
|
return "";
|
|
195
195
|
}};
|
|
196
196
|
`;
|
|
197
|
-
const RibbonBlock =
|
|
197
|
+
const RibbonBlock = import_ds_system.styled.div`
|
|
198
198
|
flex: 1;
|
|
199
199
|
height: 100%;
|
|
200
200
|
`;
|
|
@@ -247,26 +247,26 @@ const DSRibbon = {
|
|
|
247
247
|
};
|
|
248
248
|
RibbonWrapper.propTypes = {};
|
|
249
249
|
RibbonRow.propTypes = {
|
|
250
|
-
alignLeft:
|
|
250
|
+
alignLeft: import_ds_utilities.PropTypes.bool.description("align left")
|
|
251
251
|
};
|
|
252
252
|
RibbonCol.propTypes = {};
|
|
253
253
|
const cardprops = {
|
|
254
|
-
containerProps:
|
|
255
|
-
icon:
|
|
256
|
-
label:
|
|
257
|
-
value:
|
|
258
|
-
additionalValue:
|
|
259
|
-
additionalLabel:
|
|
260
|
-
info:
|
|
261
|
-
error:
|
|
262
|
-
warning:
|
|
263
|
-
success:
|
|
264
|
-
center:
|
|
265
|
-
solid:
|
|
254
|
+
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to wrapper"),
|
|
255
|
+
icon: import_ds_utilities.PropTypes.element.description("icon for ribbon card"),
|
|
256
|
+
label: import_ds_utilities.PropTypes.string.description("label for ribbon card"),
|
|
257
|
+
value: import_ds_utilities.PropTypes.string.description("value for ribbon"),
|
|
258
|
+
additionalValue: import_ds_utilities.PropTypes.string.description("additional value"),
|
|
259
|
+
additionalLabel: import_ds_utilities.PropTypes.string.description("additional label"),
|
|
260
|
+
info: import_ds_utilities.PropTypes.bool.description("for main label"),
|
|
261
|
+
error: import_ds_utilities.PropTypes.bool.description("error state toggle"),
|
|
262
|
+
warning: import_ds_utilities.PropTypes.bool.description("warning state toggle"),
|
|
263
|
+
success: import_ds_utilities.PropTypes.bool.description("success state toggle"),
|
|
264
|
+
center: import_ds_utilities.PropTypes.bool.description("align center"),
|
|
265
|
+
solid: import_ds_utilities.PropTypes.bool.description("solid style")
|
|
266
266
|
};
|
|
267
267
|
RibbonCard.propTypes = cardprops;
|
|
268
268
|
RibbonCard.displayName = "RibbonCard";
|
|
269
|
-
const DSRibbonCardWithSchema = (0,
|
|
269
|
+
const DSRibbonCardWithSchema = (0, import_ds_utilities.describe)(RibbonCard);
|
|
270
270
|
DSRibbonCardWithSchema.propTypes = cardprops;
|
|
271
271
|
var DSRibbon_default = DSRibbon;
|
|
272
272
|
//# 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 from 'react';\nimport { PropTypes, describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,
|
|
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 & > ${RibbonCol} {\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 // flex:1;\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.solid) {\n return `\n & > ${RibbonCol} {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n`;\n\nconst RibbonCol = 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 & > ${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\nfunction 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\n error={error}\n info={info}\n success={success}\n warning={warning}\n >\n {icon}\n </RibbonBlockIcon>\n ) : (\n <RibbonBlockLabel>{label}</RibbonBlockLabel>\n );\n if (additionalValue || additionalLabel) {\n let additionalInformation;\n if (additionalValue) {\n additionalInformation = additionalValue && (\n <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n );\n } else if (additionalLabel) {\n additionalInformation = additionalLabel && (\n <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n );\n }\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow\n className=\"ribbon-block-row\"\n solid={solid}\n style={{ alignItems: 'flex-start' }}\n >\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};\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};\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
|
@@ -16,8 +16,8 @@ var __spreadValues = (a, b) => {
|
|
|
16
16
|
};
|
|
17
17
|
import * as React from "react";
|
|
18
18
|
import React2 from "react";
|
|
19
|
-
import { PropTypes, describe } from "
|
|
20
|
-
import styled from "
|
|
19
|
+
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
20
|
+
import { styled } from "@elliemae/ds-system";
|
|
21
21
|
const RibbonRow = styled.div`
|
|
22
22
|
width: 100%;
|
|
23
23
|
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 from 'react';\nimport { PropTypes, describe } from '
|
|
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 & > ${RibbonCol} {\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 // flex:1;\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.solid) {\n return `\n & > ${RibbonCol} {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n`;\n\nconst RibbonCol = 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 & > ${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\nfunction 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\n error={error}\n info={info}\n success={success}\n warning={warning}\n >\n {icon}\n </RibbonBlockIcon>\n ) : (\n <RibbonBlockLabel>{label}</RibbonBlockLabel>\n );\n if (additionalValue || additionalLabel) {\n let additionalInformation;\n if (additionalValue) {\n additionalInformation = additionalValue && (\n <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n );\n } else if (additionalLabel) {\n additionalInformation = additionalLabel && (\n <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n );\n }\n return (\n <RibbonBlock {...containerProps}>\n <RibbonBlockRow\n className=\"ribbon-block-row\"\n solid={solid}\n style={{ alignItems: 'flex-start' }}\n >\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};\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};\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-ribbon",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Ribbon",
|
|
6
6
|
"files": [
|
|
@@ -38,15 +38,9 @@
|
|
|
38
38
|
"reportFile": "tests.xml",
|
|
39
39
|
"indent": 4
|
|
40
40
|
},
|
|
41
|
-
"scripts": {
|
|
42
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
43
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
44
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
45
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
46
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
47
|
-
},
|
|
48
41
|
"dependencies": {
|
|
49
|
-
"
|
|
42
|
+
"@elliemae/ds-system": "3.1.0-next.3",
|
|
43
|
+
"@elliemae/ds-utilities": "3.1.0-next.3"
|
|
50
44
|
},
|
|
51
45
|
"devDependencies": {
|
|
52
46
|
"styled-components": "~5.3.3"
|
|
@@ -60,5 +54,13 @@
|
|
|
60
54
|
"publishConfig": {
|
|
61
55
|
"access": "public",
|
|
62
56
|
"typeSafety": false
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
60
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
61
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
62
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
63
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
64
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
63
65
|
}
|
|
64
|
-
}
|
|
66
|
+
}
|