@elliemae/ds-ribbon 2.3.1 → 3.0.0-alpha.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.
Files changed (15) hide show
  1. package/dist/cjs/DSRibbon.js +277 -0
  2. package/dist/cjs/DSRibbon.js.map +7 -0
  3. package/dist/cjs/index.js +36 -0
  4. package/dist/cjs/index.js.map +7 -0
  5. package/dist/esm/DSRibbon.js +250 -0
  6. package/dist/esm/DSRibbon.js.map +7 -0
  7. package/dist/esm/index.js +7 -0
  8. package/dist/esm/index.js.map +7 -0
  9. package/package.json +29 -17
  10. package/cjs/DSRibbon.js +0 -193
  11. package/cjs/index.js +0 -10
  12. package/esm/DSRibbon.js +0 -182
  13. package/esm/index.js +0 -1
  14. package/types/DSRibbon.d.ts +0 -117
  15. package/types/index.d.ts +0 -1
package/dist/cjs/DSRibbon.js ADDED
@@ -0,0 +1,277 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
22
+ var __export = (target, all) => {
23
+ for (var name in all)
24
+ __defProp(target, name, { get: all[name], enumerable: true });
25
+ };
26
+ var __reExport = (target, module2, copyDefault, desc) => {
27
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
28
+ for (let key of __getOwnPropNames(module2))
29
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
30
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
31
+ }
32
+ return target;
33
+ };
34
+ var __toESM = (module2, isNodeMode) => {
35
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
36
+ };
37
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
38
+ return (module2, temp) => {
39
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
40
+ };
41
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
42
+ var DSRibbon_exports = {};
43
+ __export(DSRibbon_exports, {
44
+ DSRibbonCardWithSchema: () => DSRibbonCardWithSchema,
45
+ default: () => DSRibbon_default
46
+ });
47
+ var React = __toESM(require("react"));
48
+ var import_react = __toESM(require("react"));
49
+ var import_react_desc = require("react-desc");
50
+ var import_styled_components = __toESM(require("styled-components"));
51
+ const RibbonRow = import_styled_components.default.div`
52
+ width: 100%;
53
+ display: flex;
54
+ flex-direction: row;
55
+ align-items: center;
56
+ min-height: 4rem;
57
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
58
+ height: 5rem;
59
+ overflow-y: hidden;
60
+ }
61
+ flex-wrap: nowrap;
62
+ overflow-x: auto;
63
+ ${(props) => {
64
+ if (props.alignLeft) {
65
+ return `
66
+ align-items: stretch;
67
+ & > ${RibbonCol} {
68
+ align-items: flex-start;
69
+ align-self: stretch;
70
+ flex: 0;
71
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
72
+ flex: 1;
73
+ }
74
+ `;
75
+ }
76
+ return `
77
+ // flex:1;
78
+ align-items: center;
79
+ `;
80
+ }};
81
+ ${(props) => {
82
+ if (props.solid) {
83
+ return `
84
+ & > ${RibbonCol} {
85
+ &:after{
86
+ top: 0%;
87
+ height: 100%;
88
+ border-right: solid 1px #CBCFD7;
89
+ }
90
+ `;
91
+ }
92
+ return "";
93
+ }};
94
+ `;
95
+ const RibbonCol = import_styled_components.default.div`
96
+ display: flex;
97
+ flex-direction: column;
98
+ padding: 0.25rem 0.5rem;
99
+ height: 100%;
100
+ justify-content: center;
101
+ flex: 1;
102
+ position: relative;
103
+ &:after {
104
+ position: absolute;
105
+ top: 10%;
106
+ right: 0;
107
+ height: 80%;
108
+ content: '';
109
+ border-right: dashed 1px #ebedf0;
110
+ }
111
+ & > ${RibbonRow} {
112
+ align-items: flex-start;
113
+ }
114
+ `;
115
+ const RibbonWrapper = import_styled_components.default.div`
116
+ width: 100%;
117
+ display: flex;
118
+ flex-direction: column;
119
+ padding: 0.62rem 1.22rem;
120
+ border-bottom: solid 1px #cfcfd7;
121
+ background: #fff;
122
+ & > ${RibbonRow} {
123
+ border-bottom: solid 1px #ebedf0;
124
+ width: auto;
125
+ &:last-child {
126
+ border: none;
127
+ }
128
+ & > ${RibbonCol} {
129
+ &:last-child {
130
+ &:after {
131
+ display: none;
132
+ }
133
+ }
134
+ }
135
+ }
136
+ `;
137
+ const RibbonBlockIcon = import_styled_components.default.div`
138
+ padding-right: 0.5rem;
139
+ padding-top: 0.1rem;
140
+ svg,
141
+ svg:not([fill]) {
142
+ fill: ${(props) => {
143
+ if (props.info)
144
+ return "#1e79c2";
145
+ if (props.error)
146
+ return "#E34256";
147
+ if (props.warning)
148
+ return "#FBB431";
149
+ if (props.success)
150
+ return "#32B87C";
151
+ return "#1e79c2";
152
+ }};
153
+ }
154
+ `;
155
+ const RibbonBlockLabel = import_styled_components.default.div`
156
+ padding: 0.25rem 0.5rem;
157
+ color: #697489;
158
+ font-size: 0.9rem;
159
+ line-height: 1.2rem;
160
+ `;
161
+ const RibbonBlockValue = import_styled_components.default.div`
162
+ flex: 2;
163
+ font-weight: bold;
164
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
165
+ font-size: 1.1rem;
166
+ color: #333333;
167
+ flex-wrap: nowrap;
168
+ white-space: nowrap;
169
+ `;
170
+ const RibbonBlockValueLabel = import_styled_components.default.div`
171
+ flex: 2;
172
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
173
+ font-size: 0.9rem;
174
+ color: #697489;
175
+ flex-wrap: nowrap;
176
+ white-space: nowrap;
177
+ `;
178
+ const RibbonBlockCol = import_styled_components.default.div`
179
+ display: flex;
180
+ flex-direction: column;
181
+ flex: 2;
182
+ flex-wrap: nowrap;
183
+ align-items: ${(props) => {
184
+ if (props.center)
185
+ return "center";
186
+ return "";
187
+ }};
188
+ height: 100%;
189
+ `;
190
+ const RibbonBlockRow = import_styled_components.default.div`
191
+ display: flex;
192
+ flex-direction: row;
193
+ flex-wrap: nowrap;
194
+ flex: 1;
195
+ height: 100%;
196
+ align-items: ${(props) => {
197
+ if (props.center)
198
+ return "center";
199
+ return "";
200
+ }};
201
+ `;
202
+ const RibbonBlock = import_styled_components.default.div`
203
+ flex: 1;
204
+ height: 100%;
205
+ `;
206
+ function RibbonCard({
207
+ containerProps = {},
208
+ icon = null,
209
+ label = "",
210
+ value = "",
211
+ additionalValue = "",
212
+ additionalLabel = "",
213
+ info = false,
214
+ error = false,
215
+ warning = false,
216
+ success = false,
217
+ center = false,
218
+ solid = false
219
+ }) {
220
+ const labelPlace = icon ? /* @__PURE__ */ import_react.default.createElement(RibbonBlockIcon, {
221
+ error,
222
+ info,
223
+ success,
224
+ warning
225
+ }, icon) : /* @__PURE__ */ import_react.default.createElement(RibbonBlockLabel, null, label);
226
+ if (additionalValue || additionalLabel) {
227
+ let additionalInformation;
228
+ if (additionalValue) {
229
+ additionalInformation = additionalValue && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, additionalValue);
230
+ } else if (additionalLabel) {
231
+ additionalInformation = additionalLabel && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValueLabel, null, additionalLabel);
232
+ }
233
+ return /* @__PURE__ */ import_react.default.createElement(RibbonBlock, __spreadValues({}, containerProps), /* @__PURE__ */ import_react.default.createElement(RibbonBlockRow, {
234
+ className: "ribbon-block-row",
235
+ solid,
236
+ style: { alignItems: "flex-start" }
237
+ }, labelPlace, /* @__PURE__ */ import_react.default.createElement(RibbonBlockCol, {
238
+ center,
239
+ className: "ribbon-block-col"
240
+ }, /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, value), additionalInformation)));
241
+ }
242
+ return /* @__PURE__ */ import_react.default.createElement(RibbonBlock, __spreadValues({}, containerProps), /* @__PURE__ */ import_react.default.createElement(RibbonBlockRow, {
243
+ center,
244
+ solid
245
+ }, labelPlace, /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, value)));
246
+ }
247
+ const DSRibbon = {
248
+ RibbonWrapper,
249
+ RibbonRow,
250
+ RibbonCol,
251
+ RibbonCard
252
+ };
253
+ RibbonWrapper.propTypes = {};
254
+ RibbonRow.propTypes = {
255
+ alignLeft: import_react_desc.PropTypes.bool.description("align left")
256
+ };
257
+ RibbonCol.propTypes = {};
258
+ const cardprops = {
259
+ containerProps: import_react_desc.PropTypes.object.description("props to inject to wrapper"),
260
+ icon: import_react_desc.PropTypes.element.description("icon for ribbon card"),
261
+ label: import_react_desc.PropTypes.string.description("label for ribbon card"),
262
+ value: import_react_desc.PropTypes.string.description("value for ribbon"),
263
+ additionalValue: import_react_desc.PropTypes.string.description("additional value"),
264
+ additionalLabel: import_react_desc.PropTypes.string.description("additional label"),
265
+ info: import_react_desc.PropTypes.bool.description("for main label"),
266
+ error: import_react_desc.PropTypes.bool.description("error state toggle"),
267
+ warning: import_react_desc.PropTypes.bool.description("warning state toggle"),
268
+ success: import_react_desc.PropTypes.bool.description("success state toggle"),
269
+ center: import_react_desc.PropTypes.bool.description("align center"),
270
+ solid: import_react_desc.PropTypes.bool.description("solid style")
271
+ };
272
+ RibbonCard.propTypes = cardprops;
273
+ const DSRibbonCardWithSchema = (0, import_react_desc.describe)(RibbonCard);
274
+ DSRibbonCardWithSchema.propTypes = cardprops;
275
+ var DSRibbon_default = DSRibbon;
276
+ module.exports = __toCommonJS(DSRibbon_exports);
277
+ //# sourceMappingURL=DSRibbon.js.map
package/dist/cjs/DSRibbon.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 'react-desc';\nimport styled from 'styled-components';\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;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/dist/cjs/index.js ADDED
@@ -0,0 +1,36 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var src_exports = {};
29
+ __export(src_exports, {
30
+ DSRibbonCardWithSchema: () => import_DSRibbon.DSRibbonCardWithSchema,
31
+ default: () => import_DSRibbon.default
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_DSRibbon = __toESM(require("./DSRibbon"));
35
+ module.exports = __toCommonJS(src_exports);
36
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["export { default, DSRibbonCardWithSchema } from './DSRibbon';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAgD;",
6
+ "names": []
7
+ }
package/dist/esm/DSRibbon.js ADDED
@@ -0,0 +1,250 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
4
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
+ var __spreadValues = (a, b) => {
7
+ for (var prop in b || (b = {}))
8
+ if (__hasOwnProp.call(b, prop))
9
+ __defNormalProp(a, prop, b[prop]);
10
+ if (__getOwnPropSymbols)
11
+ for (var prop of __getOwnPropSymbols(b)) {
12
+ if (__propIsEnum.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ }
15
+ return a;
16
+ };
17
+ import * as React from "react";
18
+ import React2 from "react";
19
+ import { PropTypes, describe } from "react-desc";
20
+ import styled from "styled-components";
21
+ const RibbonRow = styled.div`
22
+ width: 100%;
23
+ display: flex;
24
+ flex-direction: row;
25
+ align-items: center;
26
+ min-height: 4rem;
27
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
28
+ height: 5rem;
29
+ overflow-y: hidden;
30
+ }
31
+ flex-wrap: nowrap;
32
+ overflow-x: auto;
33
+ ${(props) => {
34
+ if (props.alignLeft) {
35
+ return `
36
+ align-items: stretch;
37
+ & > ${RibbonCol} {
38
+ align-items: flex-start;
39
+ align-self: stretch;
40
+ flex: 0;
41
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
42
+ flex: 1;
43
+ }
44
+ `;
45
+ }
46
+ return `
47
+ // flex:1;
48
+ align-items: center;
49
+ `;
50
+ }};
51
+ ${(props) => {
52
+ if (props.solid) {
53
+ return `
54
+ & > ${RibbonCol} {
55
+ &:after{
56
+ top: 0%;
57
+ height: 100%;
58
+ border-right: solid 1px #CBCFD7;
59
+ }
60
+ `;
61
+ }
62
+ return "";
63
+ }};
64
+ `;
65
+ const RibbonCol = styled.div`
66
+ display: flex;
67
+ flex-direction: column;
68
+ padding: 0.25rem 0.5rem;
69
+ height: 100%;
70
+ justify-content: center;
71
+ flex: 1;
72
+ position: relative;
73
+ &:after {
74
+ position: absolute;
75
+ top: 10%;
76
+ right: 0;
77
+ height: 80%;
78
+ content: '';
79
+ border-right: dashed 1px #ebedf0;
80
+ }
81
+ & > ${RibbonRow} {
82
+ align-items: flex-start;
83
+ }
84
+ `;
85
+ const RibbonWrapper = styled.div`
86
+ width: 100%;
87
+ display: flex;
88
+ flex-direction: column;
89
+ padding: 0.62rem 1.22rem;
90
+ border-bottom: solid 1px #cfcfd7;
91
+ background: #fff;
92
+ & > ${RibbonRow} {
93
+ border-bottom: solid 1px #ebedf0;
94
+ width: auto;
95
+ &:last-child {
96
+ border: none;
97
+ }
98
+ & > ${RibbonCol} {
99
+ &:last-child {
100
+ &:after {
101
+ display: none;
102
+ }
103
+ }
104
+ }
105
+ }
106
+ `;
107
+ const RibbonBlockIcon = styled.div`
108
+ padding-right: 0.5rem;
109
+ padding-top: 0.1rem;
110
+ svg,
111
+ svg:not([fill]) {
112
+ fill: ${(props) => {
113
+ if (props.info)
114
+ return "#1e79c2";
115
+ if (props.error)
116
+ return "#E34256";
117
+ if (props.warning)
118
+ return "#FBB431";
119
+ if (props.success)
120
+ return "#32B87C";
121
+ return "#1e79c2";
122
+ }};
123
+ }
124
+ `;
125
+ const RibbonBlockLabel = styled.div`
126
+ padding: 0.25rem 0.5rem;
127
+ color: #697489;
128
+ font-size: 0.9rem;
129
+ line-height: 1.2rem;
130
+ `;
131
+ const RibbonBlockValue = styled.div`
132
+ flex: 2;
133
+ font-weight: bold;
134
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
135
+ font-size: 1.1rem;
136
+ color: #333333;
137
+ flex-wrap: nowrap;
138
+ white-space: nowrap;
139
+ `;
140
+ const RibbonBlockValueLabel = styled.div`
141
+ flex: 2;
142
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
143
+ font-size: 0.9rem;
144
+ color: #697489;
145
+ flex-wrap: nowrap;
146
+ white-space: nowrap;
147
+ `;
148
+ const RibbonBlockCol = styled.div`
149
+ display: flex;
150
+ flex-direction: column;
151
+ flex: 2;
152
+ flex-wrap: nowrap;
153
+ align-items: ${(props) => {
154
+ if (props.center)
155
+ return "center";
156
+ return "";
157
+ }};
158
+ height: 100%;
159
+ `;
160
+ const RibbonBlockRow = styled.div`
161
+ display: flex;
162
+ flex-direction: row;
163
+ flex-wrap: nowrap;
164
+ flex: 1;
165
+ height: 100%;
166
+ align-items: ${(props) => {
167
+ if (props.center)
168
+ return "center";
169
+ return "";
170
+ }};
171
+ `;
172
+ const RibbonBlock = styled.div`
173
+ flex: 1;
174
+ height: 100%;
175
+ `;
176
+ function RibbonCard({
177
+ containerProps = {},
178
+ icon = null,
179
+ label = "",
180
+ value = "",
181
+ additionalValue = "",
182
+ additionalLabel = "",
183
+ info = false,
184
+ error = false,
185
+ warning = false,
186
+ success = false,
187
+ center = false,
188
+ solid = false
189
+ }) {
190
+ const labelPlace = icon ? /* @__PURE__ */ React2.createElement(RibbonBlockIcon, {
191
+ error,
192
+ info,
193
+ success,
194
+ warning
195
+ }, icon) : /* @__PURE__ */ React2.createElement(RibbonBlockLabel, null, label);
196
+ if (additionalValue || additionalLabel) {
197
+ let additionalInformation;
198
+ if (additionalValue) {
199
+ additionalInformation = additionalValue && /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, additionalValue);
200
+ } else if (additionalLabel) {
201
+ additionalInformation = additionalLabel && /* @__PURE__ */ React2.createElement(RibbonBlockValueLabel, null, additionalLabel);
202
+ }
203
+ return /* @__PURE__ */ React2.createElement(RibbonBlock, __spreadValues({}, containerProps), /* @__PURE__ */ React2.createElement(RibbonBlockRow, {
204
+ className: "ribbon-block-row",
205
+ solid,
206
+ style: { alignItems: "flex-start" }
207
+ }, labelPlace, /* @__PURE__ */ React2.createElement(RibbonBlockCol, {
208
+ center,
209
+ className: "ribbon-block-col"
210
+ }, /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, value), additionalInformation)));
211
+ }
212
+ return /* @__PURE__ */ React2.createElement(RibbonBlock, __spreadValues({}, containerProps), /* @__PURE__ */ React2.createElement(RibbonBlockRow, {
213
+ center,
214
+ solid
215
+ }, labelPlace, /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, value)));
216
+ }
217
+ const DSRibbon = {
218
+ RibbonWrapper,
219
+ RibbonRow,
220
+ RibbonCol,
221
+ RibbonCard
222
+ };
223
+ RibbonWrapper.propTypes = {};
224
+ RibbonRow.propTypes = {
225
+ alignLeft: PropTypes.bool.description("align left")
226
+ };
227
+ RibbonCol.propTypes = {};
228
+ const cardprops = {
229
+ containerProps: PropTypes.object.description("props to inject to wrapper"),
230
+ icon: PropTypes.element.description("icon for ribbon card"),
231
+ label: PropTypes.string.description("label for ribbon card"),
232
+ value: PropTypes.string.description("value for ribbon"),
233
+ additionalValue: PropTypes.string.description("additional value"),
234
+ additionalLabel: PropTypes.string.description("additional label"),
235
+ info: PropTypes.bool.description("for main label"),
236
+ error: PropTypes.bool.description("error state toggle"),
237
+ warning: PropTypes.bool.description("warning state toggle"),
238
+ success: PropTypes.bool.description("success state toggle"),
239
+ center: PropTypes.bool.description("align center"),
240
+ solid: PropTypes.bool.description("solid style")
241
+ };
242
+ RibbonCard.propTypes = cardprops;
243
+ const DSRibbonCardWithSchema = describe(RibbonCard);
244
+ DSRibbonCardWithSchema.propTypes = cardprops;
245
+ var DSRibbon_default = DSRibbon;
246
+ export {
247
+ DSRibbonCardWithSchema,
248
+ DSRibbon_default as default
249
+ };
250
+ //# sourceMappingURL=DSRibbon.js.map
package/dist/esm/DSRibbon.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 'react-desc';\nimport styled from 'styled-components';\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;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/dist/esm/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ import { default as default2, DSRibbonCardWithSchema } from "./DSRibbon";
3
+ export {
4
+ DSRibbonCardWithSchema,
5
+ default2 as default
6
+ };
7
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSRibbonCardWithSchema } from './DSRibbon';\n"],
5
+ "mappings": "AAAA;ACAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,19 +1,22 @@
1
1
  {
2
2
  "name": "@elliemae/ds-ribbon",
3
- "version": "2.3.1",
3
+ "version": "3.0.0-alpha.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Ribbon",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
9
12
  "exports": {
10
13
  ".": {
11
- "import": "./esm/index.js",
12
- "require": "./cjs/index.js"
14
+ "import": "./dist/esm/index.js",
15
+ "require": "./dist/cjs/index.js"
13
16
  },
14
17
  "./DSRibbon": {
15
- "import": "./esm/DSRibbon.js",
16
- "require": "./cjs/DSRibbon.js"
18
+ "import": "./dist/esm/DSRibbon.js",
19
+ "require": "./dist/cjs/DSRibbon.js"
17
20
  }
18
21
  },
19
22
  "sideEffects": [
@@ -25,19 +28,22 @@
25
28
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
26
29
  },
27
30
  "engines": {
28
- "npm": ">=7",
29
- "node": ">=14"
31
+ "pnpm": ">=6",
32
+ "node": ">=16"
30
33
  },
31
34
  "author": "ICE MT",
32
- "scripts": {
33
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
34
- "prebuild": "exit 0",
35
- "predev": "exit 0",
36
- "build": "node ../../scripts/build/build.js"
35
+ "jestSonar": {
36
+ "sonar56x": true,
37
+ "reportPath": "reports",
38
+ "reportFile": "tests.xml",
39
+ "indent": 4
37
40
  },
38
41
  "dependencies": {
39
42
  "react-desc": "~4.1.3"
40
43
  },
44
+ "devDependencies": {
45
+ "styled-components": "~5.3.3"
46
+ },
41
47
  "peerDependencies": {
42
48
  "lodash": "^4.17.21",
43
49
  "react": "~17.0.2",
@@ -46,7 +52,13 @@
46
52
  },
47
53
  "publishConfig": {
48
54
  "access": "public",
49
- "directory": "dist",
50
- "generateSubmodules": true
55
+ "typeSafety": false
56
+ },
57
+ "scripts": {
58
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
59
+ "test": "node ../../scripts/testing/test.mjs",
60
+ "lint": "node ../../scripts/lint.mjs",
61
+ "dts": "node ../../scripts/dts.mjs",
62
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
51
63
  }
52
64
  }
package/cjs/DSRibbon.js DELETED
@@ -1,193 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- var _jsx = require('@babel/runtime/helpers/jsx');
12
- require('react');
13
- var reactDesc = require('react-desc');
14
- var styled = require('styled-components');
15
- var jsxRuntime = require('react/jsx-runtime');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
21
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
22
-
23
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
24
-
25
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
26
- const RibbonRow = /*#__PURE__*/styled__default["default"].div.withConfig({
27
- componentId: "sc-9boes5-0"
28
- })(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], props => {
29
- if (props.alignLeft) {
30
- return "\n align-items: stretch;\n & > ".concat(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 ");
31
- }
32
-
33
- return "\n // flex:1;\n align-items: center;\n ";
34
- }, props => {
35
- if (props.solid) {
36
- return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
37
- }
38
-
39
- return '';
40
- });
41
- const RibbonCol = /*#__PURE__*/styled__default["default"].div.withConfig({
42
- componentId: "sc-9boes5-1"
43
- })(["display:flex;flex-direction:column;padding:0.25rem 0.5rem;height:100%;justify-content:center;flex:1;position:relative;&:after{position:absolute;top:10%;right:0;height:80%;content:'';border-right:dashed 1px #ebedf0;}& > ", "{align-items:flex-start;}"], RibbonRow);
44
- const RibbonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
45
- componentId: "sc-9boes5-2"
46
- })(["width:100%;display:flex;flex-direction:column;padding:0.62rem 1.22rem;border-bottom:solid 1px #cfcfd7;background:#fff;& > ", "{border-bottom:solid 1px #ebedf0;width:auto;&:last-child{border:none;}& > ", "{&:last-child{&:after{display:none;}}}}"], RibbonRow, RibbonCol);
47
- /* eslint-disable indent */
48
-
49
- const RibbonBlockIcon = /*#__PURE__*/styled__default["default"].div.withConfig({
50
- componentId: "sc-9boes5-3"
51
- })(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], props => {
52
- if (props.info) return '#1e79c2';
53
- if (props.error) return '#E34256';
54
- if (props.warning) return '#FBB431';
55
- if (props.success) return '#32B87C';
56
- return '#1e79c2';
57
- });
58
- /* eslint-enable indent */
59
-
60
- const RibbonBlockLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
61
- componentId: "sc-9boes5-4"
62
- })(["padding:0.25rem 0.5rem;color:#697489;font-size:0.9rem;line-height:1.2rem;"]);
63
- const RibbonBlockValue = /*#__PURE__*/styled__default["default"].div.withConfig({
64
- componentId: "sc-9boes5-5"
65
- })(["flex:2;font-weight:bold;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:1.1rem;color:#333333;flex-wrap:nowrap;white-space:nowrap;"]);
66
- const RibbonBlockValueLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
67
- componentId: "sc-9boes5-6"
68
- })(["flex:2;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:0.9rem;color:#697489;flex-wrap:nowrap;white-space:nowrap;"]);
69
- const RibbonBlockCol = /*#__PURE__*/styled__default["default"].div.withConfig({
70
- componentId: "sc-9boes5-7"
71
- })(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], props => {
72
- if (props.center) return 'center';
73
- return '';
74
- });
75
- const RibbonBlockRow = /*#__PURE__*/styled__default["default"].div.withConfig({
76
- componentId: "sc-9boes5-8"
77
- })(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], props => {
78
- if (props.center) return 'center';
79
- return '';
80
- });
81
- const RibbonBlock = /*#__PURE__*/styled__default["default"].div.withConfig({
82
- componentId: "sc-9boes5-9"
83
- })(["flex:1;height:100%;"]);
84
-
85
- function RibbonCard(_ref) {
86
- var _RibbonBlockValue;
87
-
88
- let {
89
- containerProps = {},
90
- icon = null,
91
- label = '',
92
- value = '',
93
- additionalValue = '',
94
- additionalLabel = '',
95
- info = false,
96
- error = false,
97
- warning = false,
98
- success = false,
99
- center = false,
100
- solid = false
101
- } = _ref;
102
- const labelPlace = icon ? /*#__PURE__*/_jsx__default["default"](RibbonBlockIcon, {
103
- error: error,
104
- info: info,
105
- success: success,
106
- warning: warning
107
- }, void 0, icon) : /*#__PURE__*/_jsx__default["default"](RibbonBlockLabel, {}, void 0, label);
108
-
109
- if (additionalValue || additionalLabel) {
110
- let additionalInformation;
111
-
112
- if (additionalValue) {
113
- additionalInformation = additionalValue && /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, additionalValue);
114
- } else if (additionalLabel) {
115
- additionalInformation = additionalLabel && /*#__PURE__*/_jsx__default["default"](RibbonBlockValueLabel, {}, void 0, additionalLabel);
116
- }
117
-
118
- return /*#__PURE__*/jsxRuntime.jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
119
- children: /*#__PURE__*/_jsx__default["default"](RibbonBlockRow, {
120
- className: "ribbon-block-row",
121
- solid: solid,
122
- style: {
123
- alignItems: 'flex-start'
124
- }
125
- }, void 0, labelPlace, /*#__PURE__*/_jsx__default["default"](RibbonBlockCol, {
126
- center: center,
127
- className: "ribbon-block-col"
128
- }, void 0, _RibbonBlockValue || (_RibbonBlockValue = /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, value)), additionalInformation))
129
- }));
130
- }
131
-
132
- return /*#__PURE__*/jsxRuntime.jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
133
- children: /*#__PURE__*/_jsx__default["default"](RibbonBlockRow, {
134
- center: center,
135
- solid: solid
136
- }, void 0, labelPlace, /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, value))
137
- }));
138
- }
139
-
140
- const DSRibbon = {
141
- RibbonWrapper,
142
- RibbonRow,
143
- RibbonCol,
144
- RibbonCard
145
- };
146
- RibbonWrapper.propTypes = {};
147
- RibbonRow.propTypes = {
148
- /** align left */
149
- alignLeft: reactDesc.PropTypes.bool.description('align left')
150
- };
151
- RibbonCol.propTypes = {};
152
- const cardprops = {
153
- /** props to inject to wrapper */
154
- containerProps: reactDesc.PropTypes.object.description('props to inject to wrapper'),
155
-
156
- /** icon for ribbon card */
157
- icon: reactDesc.PropTypes.element.description('icon for ribbon card'),
158
-
159
- /** label for ribbon card */
160
- label: reactDesc.PropTypes.string.description('label for ribbon card'),
161
-
162
- /** value for ribbon */
163
- value: reactDesc.PropTypes.string.description('value for ribbon'),
164
-
165
- /** additional value */
166
- additionalValue: reactDesc.PropTypes.string.description('additional value'),
167
-
168
- /** additional label */
169
- additionalLabel: reactDesc.PropTypes.string.description('additional label'),
170
-
171
- /** for main label */
172
- info: reactDesc.PropTypes.bool.description('for main label'),
173
-
174
- /** error state toggle */
175
- error: reactDesc.PropTypes.bool.description('error state toggle'),
176
-
177
- /** warning state toggle */
178
- warning: reactDesc.PropTypes.bool.description('warning state toggle'),
179
-
180
- /** success state toggle */
181
- success: reactDesc.PropTypes.bool.description('success state toggle'),
182
-
183
- /** align center */
184
- center: reactDesc.PropTypes.bool.description('align center'),
185
-
186
- /** solid style */
187
- solid: reactDesc.PropTypes.bool.description('solid style')
188
- };
189
- const DSRibbonCardWithSchema = reactDesc.describe(RibbonCard);
190
- DSRibbonCardWithSchema.propTypes = cardprops;
191
-
192
- exports.DSRibbonCardWithSchema = DSRibbonCardWithSchema;
193
- exports["default"] = DSRibbon;
package/cjs/index.js DELETED
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var DSRibbon = require('./DSRibbon.js');
6
-
7
-
8
-
9
- exports.DSRibbonCardWithSchema = DSRibbon.DSRibbonCardWithSchema;
10
- exports["default"] = DSRibbon["default"];
package/esm/DSRibbon.js DELETED
@@ -1,182 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import 'react';
9
- import { PropTypes, describe } from 'react-desc';
10
- import styled from 'styled-components';
11
- import { jsx } from 'react/jsx-runtime';
12
-
13
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
-
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
16
- const RibbonRow = /*#__PURE__*/styled.div.withConfig({
17
- componentId: "sc-9boes5-0"
18
- })(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], props => {
19
- if (props.alignLeft) {
20
- return "\n align-items: stretch;\n & > ".concat(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 ");
21
- }
22
-
23
- return "\n // flex:1;\n align-items: center;\n ";
24
- }, props => {
25
- if (props.solid) {
26
- return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
27
- }
28
-
29
- return '';
30
- });
31
- const RibbonCol = /*#__PURE__*/styled.div.withConfig({
32
- componentId: "sc-9boes5-1"
33
- })(["display:flex;flex-direction:column;padding:0.25rem 0.5rem;height:100%;justify-content:center;flex:1;position:relative;&:after{position:absolute;top:10%;right:0;height:80%;content:'';border-right:dashed 1px #ebedf0;}& > ", "{align-items:flex-start;}"], RibbonRow);
34
- const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
35
- componentId: "sc-9boes5-2"
36
- })(["width:100%;display:flex;flex-direction:column;padding:0.62rem 1.22rem;border-bottom:solid 1px #cfcfd7;background:#fff;& > ", "{border-bottom:solid 1px #ebedf0;width:auto;&:last-child{border:none;}& > ", "{&:last-child{&:after{display:none;}}}}"], RibbonRow, RibbonCol);
37
- /* eslint-disable indent */
38
-
39
- const RibbonBlockIcon = /*#__PURE__*/styled.div.withConfig({
40
- componentId: "sc-9boes5-3"
41
- })(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], props => {
42
- if (props.info) return '#1e79c2';
43
- if (props.error) return '#E34256';
44
- if (props.warning) return '#FBB431';
45
- if (props.success) return '#32B87C';
46
- return '#1e79c2';
47
- });
48
- /* eslint-enable indent */
49
-
50
- const RibbonBlockLabel = /*#__PURE__*/styled.div.withConfig({
51
- componentId: "sc-9boes5-4"
52
- })(["padding:0.25rem 0.5rem;color:#697489;font-size:0.9rem;line-height:1.2rem;"]);
53
- const RibbonBlockValue = /*#__PURE__*/styled.div.withConfig({
54
- componentId: "sc-9boes5-5"
55
- })(["flex:2;font-weight:bold;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:1.1rem;color:#333333;flex-wrap:nowrap;white-space:nowrap;"]);
56
- const RibbonBlockValueLabel = /*#__PURE__*/styled.div.withConfig({
57
- componentId: "sc-9boes5-6"
58
- })(["flex:2;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:0.9rem;color:#697489;flex-wrap:nowrap;white-space:nowrap;"]);
59
- const RibbonBlockCol = /*#__PURE__*/styled.div.withConfig({
60
- componentId: "sc-9boes5-7"
61
- })(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], props => {
62
- if (props.center) return 'center';
63
- return '';
64
- });
65
- const RibbonBlockRow = /*#__PURE__*/styled.div.withConfig({
66
- componentId: "sc-9boes5-8"
67
- })(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], props => {
68
- if (props.center) return 'center';
69
- return '';
70
- });
71
- const RibbonBlock = /*#__PURE__*/styled.div.withConfig({
72
- componentId: "sc-9boes5-9"
73
- })(["flex:1;height:100%;"]);
74
-
75
- function RibbonCard(_ref) {
76
- var _RibbonBlockValue;
77
-
78
- let {
79
- containerProps = {},
80
- icon = null,
81
- label = '',
82
- value = '',
83
- additionalValue = '',
84
- additionalLabel = '',
85
- info = false,
86
- error = false,
87
- warning = false,
88
- success = false,
89
- center = false,
90
- solid = false
91
- } = _ref;
92
- const labelPlace = icon ? /*#__PURE__*/_jsx(RibbonBlockIcon, {
93
- error: error,
94
- info: info,
95
- success: success,
96
- warning: warning
97
- }, void 0, icon) : /*#__PURE__*/_jsx(RibbonBlockLabel, {}, void 0, label);
98
-
99
- if (additionalValue || additionalLabel) {
100
- let additionalInformation;
101
-
102
- if (additionalValue) {
103
- additionalInformation = additionalValue && /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, additionalValue);
104
- } else if (additionalLabel) {
105
- additionalInformation = additionalLabel && /*#__PURE__*/_jsx(RibbonBlockValueLabel, {}, void 0, additionalLabel);
106
- }
107
-
108
- return /*#__PURE__*/jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
109
- children: /*#__PURE__*/_jsx(RibbonBlockRow, {
110
- className: "ribbon-block-row",
111
- solid: solid,
112
- style: {
113
- alignItems: 'flex-start'
114
- }
115
- }, void 0, labelPlace, /*#__PURE__*/_jsx(RibbonBlockCol, {
116
- center: center,
117
- className: "ribbon-block-col"
118
- }, void 0, _RibbonBlockValue || (_RibbonBlockValue = /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, value)), additionalInformation))
119
- }));
120
- }
121
-
122
- return /*#__PURE__*/jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
123
- children: /*#__PURE__*/_jsx(RibbonBlockRow, {
124
- center: center,
125
- solid: solid
126
- }, void 0, labelPlace, /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, value))
127
- }));
128
- }
129
-
130
- const DSRibbon = {
131
- RibbonWrapper,
132
- RibbonRow,
133
- RibbonCol,
134
- RibbonCard
135
- };
136
- RibbonWrapper.propTypes = {};
137
- RibbonRow.propTypes = {
138
- /** align left */
139
- alignLeft: PropTypes.bool.description('align left')
140
- };
141
- RibbonCol.propTypes = {};
142
- const cardprops = {
143
- /** props to inject to wrapper */
144
- containerProps: PropTypes.object.description('props to inject to wrapper'),
145
-
146
- /** icon for ribbon card */
147
- icon: PropTypes.element.description('icon for ribbon card'),
148
-
149
- /** label for ribbon card */
150
- label: PropTypes.string.description('label for ribbon card'),
151
-
152
- /** value for ribbon */
153
- value: PropTypes.string.description('value for ribbon'),
154
-
155
- /** additional value */
156
- additionalValue: PropTypes.string.description('additional value'),
157
-
158
- /** additional label */
159
- additionalLabel: PropTypes.string.description('additional label'),
160
-
161
- /** for main label */
162
- info: PropTypes.bool.description('for main label'),
163
-
164
- /** error state toggle */
165
- error: PropTypes.bool.description('error state toggle'),
166
-
167
- /** warning state toggle */
168
- warning: PropTypes.bool.description('warning state toggle'),
169
-
170
- /** success state toggle */
171
- success: PropTypes.bool.description('success state toggle'),
172
-
173
- /** align center */
174
- center: PropTypes.bool.description('align center'),
175
-
176
- /** solid style */
177
- solid: PropTypes.bool.description('solid style')
178
- };
179
- const DSRibbonCardWithSchema = describe(RibbonCard);
180
- DSRibbonCardWithSchema.propTypes = cardprops;
181
-
182
- export { DSRibbonCardWithSchema, DSRibbon as default };
package/esm/index.js DELETED
@@ -1 +0,0 @@
1
- export { DSRibbonCardWithSchema, default } from './DSRibbon.js';
package/types/DSRibbon.d.ts DELETED
@@ -1,117 +0,0 @@
1
- /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
- /// <reference types="react" />
3
- declare function RibbonCard({ containerProps, icon, label, value, additionalValue, additionalLabel, info, error, warning, success, center, solid, }: {
4
- containerProps?: {} | undefined;
5
- icon?: null | undefined;
6
- label?: string | undefined;
7
- value?: string | undefined;
8
- additionalValue?: string | undefined;
9
- additionalLabel?: string | undefined;
10
- info?: boolean | undefined;
11
- error?: boolean | undefined;
12
- warning?: boolean | undefined;
13
- success?: boolean | undefined;
14
- center?: boolean | undefined;
15
- solid?: boolean | undefined;
16
- }): JSX.Element;
17
- declare namespace RibbonCard {
18
- var propTypes: {
19
- /** props to inject to wrapper */
20
- containerProps: {
21
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
22
- deprecated: import("react-desc").PropTypesDescValidator;
23
- };
24
- isRequired: import("react-desc").PropTypesDescValue;
25
- };
26
- /** icon for ribbon card */
27
- icon: {
28
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
29
- deprecated: import("react-desc").PropTypesDescValidator;
30
- };
31
- isRequired: import("react-desc").PropTypesDescValue;
32
- };
33
- /** label for ribbon card */
34
- label: {
35
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
36
- deprecated: import("react-desc").PropTypesDescValidator;
37
- };
38
- isRequired: import("react-desc").PropTypesDescValue;
39
- };
40
- /** value for ribbon */
41
- value: {
42
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
43
- deprecated: import("react-desc").PropTypesDescValidator;
44
- };
45
- isRequired: import("react-desc").PropTypesDescValue;
46
- };
47
- /** additional value */
48
- additionalValue: {
49
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
50
- deprecated: import("react-desc").PropTypesDescValidator;
51
- };
52
- isRequired: import("react-desc").PropTypesDescValue;
53
- };
54
- /** additional label */
55
- additionalLabel: {
56
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
57
- deprecated: import("react-desc").PropTypesDescValidator;
58
- };
59
- isRequired: import("react-desc").PropTypesDescValue;
60
- };
61
- /** for main label */
62
- info: {
63
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
64
- deprecated: import("react-desc").PropTypesDescValidator;
65
- };
66
- isRequired: import("react-desc").PropTypesDescValue;
67
- };
68
- /** error state toggle */
69
- error: {
70
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
71
- deprecated: import("react-desc").PropTypesDescValidator;
72
- };
73
- isRequired: import("react-desc").PropTypesDescValue;
74
- };
75
- /** warning state toggle */
76
- warning: {
77
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
78
- deprecated: import("react-desc").PropTypesDescValidator;
79
- };
80
- isRequired: import("react-desc").PropTypesDescValue;
81
- };
82
- /** success state toggle */
83
- success: {
84
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
85
- deprecated: import("react-desc").PropTypesDescValidator;
86
- };
87
- isRequired: import("react-desc").PropTypesDescValue;
88
- };
89
- /** align center */
90
- center: {
91
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
92
- deprecated: import("react-desc").PropTypesDescValidator;
93
- };
94
- isRequired: import("react-desc").PropTypesDescValue;
95
- };
96
- /** solid style */
97
- solid: {
98
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
99
- deprecated: import("react-desc").PropTypesDescValidator;
100
- };
101
- isRequired: import("react-desc").PropTypesDescValue;
102
- };
103
- };
104
- }
105
- declare const DSRibbon: {
106
- RibbonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
107
- RibbonRow: any;
108
- RibbonCol: any;
109
- RibbonCard: typeof RibbonCard;
110
- };
111
- declare const DSRibbonCardWithSchema: {
112
- (props?: unknown): JSX.Element;
113
- propTypes: unknown;
114
- toTypescript: () => import("react-desc").TypescriptSchema;
115
- };
116
- export default DSRibbon;
117
- export { DSRibbonCardWithSchema };
package/types/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { default, DSRibbonCardWithSchema } from './DSRibbon';