@elliemae/ds-ribbon 2.2.0 → 2.3.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 (9) hide show
  1. package/cjs/DSRibbon.js +243 -169
  2. package/cjs/DSRibbon.js.map +7 -0
  3. package/cjs/index.js +36 -10
  4. package/cjs/index.js.map +7 -0
  5. package/esm/DSRibbon.js +213 -157
  6. package/esm/DSRibbon.js.map +7 -0
  7. package/esm/index.js +7 -1
  8. package/esm/index.js.map +7 -0
  9. package/package.json +1 -1
package/cjs/DSRibbon.js CHANGED
@@ -1,142 +1,239 @@
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 => {
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 DSRibbon_exports = {};
29
+ __export(DSRibbon_exports, {
30
+ DSRibbonCardWithSchema: () => DSRibbonCardWithSchema,
31
+ default: () => DSRibbon_default
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_react_desc = require("react-desc");
36
+ var import_styled_components = __toESM(require("styled-components"));
37
+ const RibbonRow = import_styled_components.default.div`
38
+ width: 100%;
39
+ display: flex;
40
+ flex-direction: row;
41
+ align-items: center;
42
+ min-height: 4rem;
43
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
44
+ height: 5rem;
45
+ overflow-y: hidden;
46
+ }
47
+ flex-wrap: nowrap;
48
+ overflow-x: auto;
49
+ ${(props) => {
29
50
  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 ");
51
+ return `
52
+ align-items: stretch;
53
+ & > ${RibbonCol} {
54
+ align-items: flex-start;
55
+ align-self: stretch;
56
+ flex: 0;
57
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
58
+ flex: 1;
59
+ }
60
+ `;
31
61
  }
32
-
33
- return "\n // flex:1;\n align-items: center;\n ";
34
- }, props => {
62
+ return `
63
+ // flex:1;
64
+ align-items: center;
65
+ `;
66
+ }};
67
+ ${(props) => {
35
68
  if (props.solid) {
36
- return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
69
+ return `
70
+ & > ${RibbonCol} {
71
+ &:after{
72
+ top: 0%;
73
+ height: 100%;
74
+ border-right: solid 1px #CBCFD7;
75
+ }
76
+ `;
37
77
  }
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
-
78
+ return "";
79
+ }};
80
+ `;
81
+ const RibbonCol = import_styled_components.default.div`
82
+ display: flex;
83
+ flex-direction: column;
84
+ padding: 0.25rem 0.5rem;
85
+ height: 100%;
86
+ justify-content: center;
87
+ flex: 1;
88
+ position: relative;
89
+ &:after {
90
+ position: absolute;
91
+ top: 10%;
92
+ right: 0;
93
+ height: 80%;
94
+ content: '';
95
+ border-right: dashed 1px #ebedf0;
96
+ }
97
+ & > ${RibbonRow} {
98
+ align-items: flex-start;
99
+ }
100
+ `;
101
+ const RibbonWrapper = import_styled_components.default.div`
102
+ width: 100%;
103
+ display: flex;
104
+ flex-direction: column;
105
+ padding: 0.62rem 1.22rem;
106
+ border-bottom: solid 1px #cfcfd7;
107
+ background: #fff;
108
+ & > ${RibbonRow} {
109
+ border-bottom: solid 1px #ebedf0;
110
+ width: auto;
111
+ &:last-child {
112
+ border: none;
113
+ }
114
+ & > ${RibbonCol} {
115
+ &:last-child {
116
+ &:after {
117
+ display: none;
118
+ }
119
+ }
120
+ }
121
+ }
122
+ `;
123
+ const RibbonBlockIcon = import_styled_components.default.div`
124
+ padding-right: 0.5rem;
125
+ padding-top: 0.1rem;
126
+ svg,
127
+ svg:not([fill]) {
128
+ fill: ${(props) => {
129
+ if (props.info)
130
+ return "#1e79c2";
131
+ if (props.error)
132
+ return "#E34256";
133
+ if (props.warning)
134
+ return "#FBB431";
135
+ if (props.success)
136
+ return "#32B87C";
137
+ return "#1e79c2";
138
+ }};
139
+ }
140
+ `;
141
+ const RibbonBlockLabel = import_styled_components.default.div`
142
+ padding: 0.25rem 0.5rem;
143
+ color: #697489;
144
+ font-size: 0.9rem;
145
+ line-height: 1.2rem;
146
+ `;
147
+ const RibbonBlockValue = import_styled_components.default.div`
148
+ flex: 2;
149
+ font-weight: bold;
150
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
151
+ font-size: 1.1rem;
152
+ color: #333333;
153
+ flex-wrap: nowrap;
154
+ white-space: nowrap;
155
+ `;
156
+ const RibbonBlockValueLabel = import_styled_components.default.div`
157
+ flex: 2;
158
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
159
+ font-size: 0.9rem;
160
+ color: #697489;
161
+ flex-wrap: nowrap;
162
+ white-space: nowrap;
163
+ `;
164
+ const RibbonBlockCol = import_styled_components.default.div`
165
+ display: flex;
166
+ flex-direction: column;
167
+ flex: 2;
168
+ flex-wrap: nowrap;
169
+ align-items: ${(props) => {
170
+ if (props.center)
171
+ return "center";
172
+ return "";
173
+ }};
174
+ height: 100%;
175
+ `;
176
+ const RibbonBlockRow = import_styled_components.default.div`
177
+ display: flex;
178
+ flex-direction: row;
179
+ flex-wrap: nowrap;
180
+ flex: 1;
181
+ height: 100%;
182
+ align-items: ${(props) => {
183
+ if (props.center)
184
+ return "center";
185
+ return "";
186
+ }};
187
+ `;
188
+ const RibbonBlock = import_styled_components.default.div`
189
+ flex: 1;
190
+ height: 100%;
191
+ `;
192
+ function RibbonCard({
193
+ containerProps = {},
194
+ icon = null,
195
+ label = "",
196
+ value = "",
197
+ additionalValue = "",
198
+ additionalLabel = "",
199
+ info = false,
200
+ error = false,
201
+ warning = false,
202
+ success = false,
203
+ center = false,
204
+ solid = false
205
+ }) {
206
+ const labelPlace = icon ? /* @__PURE__ */ import_react.default.createElement(RibbonBlockIcon, {
207
+ error,
208
+ info,
209
+ success,
210
+ warning
211
+ }, icon) : /* @__PURE__ */ import_react.default.createElement(RibbonBlockLabel, null, label);
109
212
  if (additionalValue || additionalLabel) {
110
213
  let additionalInformation;
111
-
112
214
  if (additionalValue) {
113
- additionalInformation = additionalValue && /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, additionalValue);
215
+ additionalInformation = additionalValue && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, additionalValue);
114
216
  } else if (additionalLabel) {
115
- additionalInformation = additionalLabel && /*#__PURE__*/_jsx__default["default"](RibbonBlockValueLabel, {}, void 0, additionalLabel);
217
+ additionalInformation = additionalLabel && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValueLabel, null, additionalLabel);
116
218
  }
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
- }));
219
+ return /* @__PURE__ */ import_react.default.createElement(RibbonBlock, {
220
+ ...containerProps
221
+ }, /* @__PURE__ */ import_react.default.createElement(RibbonBlockRow, {
222
+ className: "ribbon-block-row",
223
+ solid,
224
+ style: { alignItems: "flex-start" }
225
+ }, labelPlace, /* @__PURE__ */ import_react.default.createElement(RibbonBlockCol, {
226
+ center,
227
+ className: "ribbon-block-col"
228
+ }, /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, value), additionalInformation)));
130
229
  }
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
- }));
230
+ return /* @__PURE__ */ import_react.default.createElement(RibbonBlock, {
231
+ ...containerProps
232
+ }, /* @__PURE__ */ import_react.default.createElement(RibbonBlockRow, {
233
+ center,
234
+ solid
235
+ }, labelPlace, /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, value)));
138
236
  }
139
-
140
237
  const DSRibbon = {
141
238
  RibbonWrapper,
142
239
  RibbonRow,
@@ -145,49 +242,26 @@ const DSRibbon = {
145
242
  };
146
243
  RibbonWrapper.propTypes = {};
147
244
  RibbonRow.propTypes = {
148
- /** align left */
149
- alignLeft: reactDesc.PropTypes.bool.description('align left')
245
+ alignLeft: import_react_desc.PropTypes.bool.description("align left")
150
246
  };
151
247
  RibbonCol.propTypes = {};
152
248
  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')
249
+ containerProps: import_react_desc.PropTypes.object.description("props to inject to wrapper"),
250
+ icon: import_react_desc.PropTypes.element.description("icon for ribbon card"),
251
+ label: import_react_desc.PropTypes.string.description("label for ribbon card"),
252
+ value: import_react_desc.PropTypes.string.description("value for ribbon"),
253
+ additionalValue: import_react_desc.PropTypes.string.description("additional value"),
254
+ additionalLabel: import_react_desc.PropTypes.string.description("additional label"),
255
+ info: import_react_desc.PropTypes.bool.description("for main label"),
256
+ error: import_react_desc.PropTypes.bool.description("error state toggle"),
257
+ warning: import_react_desc.PropTypes.bool.description("warning state toggle"),
258
+ success: import_react_desc.PropTypes.bool.description("success state toggle"),
259
+ center: import_react_desc.PropTypes.bool.description("align center"),
260
+ solid: import_react_desc.PropTypes.bool.description("solid style")
188
261
  };
189
- const DSRibbonCardWithSchema = reactDesc.describe(RibbonCard);
262
+ RibbonCard.propTypes = cardprops;
263
+ const DSRibbonCardWithSchema = (0, import_react_desc.describe)(RibbonCard);
190
264
  DSRibbonCardWithSchema.propTypes = cardprops;
191
-
192
- exports.DSRibbonCardWithSchema = DSRibbonCardWithSchema;
193
- exports["default"] = DSRibbon;
265
+ var DSRibbon_default = DSRibbon;
266
+ module.exports = __toCommonJS(DSRibbon_exports);
267
+ //# sourceMappingURL=DSRibbon.js.map
package/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/cjs/index.js CHANGED
@@ -1,10 +1,36 @@
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"];
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/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/esm/DSRibbon.js CHANGED
@@ -1,132 +1,207 @@
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 => {
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { PropTypes, describe } from "react-desc";
4
+ import styled from "styled-components";
5
+ const RibbonRow = styled.div`
6
+ width: 100%;
7
+ display: flex;
8
+ flex-direction: row;
9
+ align-items: center;
10
+ min-height: 4rem;
11
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
12
+ height: 5rem;
13
+ overflow-y: hidden;
14
+ }
15
+ flex-wrap: nowrap;
16
+ overflow-x: auto;
17
+ ${(props) => {
19
18
  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 ");
19
+ return `
20
+ align-items: stretch;
21
+ & > ${RibbonCol} {
22
+ align-items: flex-start;
23
+ align-self: stretch;
24
+ flex: 0;
25
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
26
+ flex: 1;
27
+ }
28
+ `;
21
29
  }
22
-
23
- return "\n // flex:1;\n align-items: center;\n ";
24
- }, props => {
30
+ return `
31
+ // flex:1;
32
+ align-items: center;
33
+ `;
34
+ }};
35
+ ${(props) => {
25
36
  if (props.solid) {
26
- return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
37
+ return `
38
+ & > ${RibbonCol} {
39
+ &:after{
40
+ top: 0%;
41
+ height: 100%;
42
+ border-right: solid 1px #CBCFD7;
43
+ }
44
+ `;
45
+ }
46
+ return "";
47
+ }};
48
+ `;
49
+ const RibbonCol = styled.div`
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
+ & > ${RibbonRow} {
66
+ align-items: flex-start;
67
+ }
68
+ `;
69
+ const RibbonWrapper = styled.div`
70
+ width: 100%;
71
+ display: flex;
72
+ flex-direction: column;
73
+ padding: 0.62rem 1.22rem;
74
+ border-bottom: solid 1px #cfcfd7;
75
+ background: #fff;
76
+ & > ${RibbonRow} {
77
+ border-bottom: solid 1px #ebedf0;
78
+ width: auto;
79
+ &:last-child {
80
+ border: none;
81
+ }
82
+ & > ${RibbonCol} {
83
+ &:last-child {
84
+ &:after {
85
+ display: none;
86
+ }
87
+ }
88
+ }
27
89
  }
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
-
90
+ `;
91
+ const RibbonBlockIcon = styled.div`
92
+ padding-right: 0.5rem;
93
+ padding-top: 0.1rem;
94
+ svg,
95
+ svg:not([fill]) {
96
+ fill: ${(props) => {
97
+ if (props.info)
98
+ return "#1e79c2";
99
+ if (props.error)
100
+ return "#E34256";
101
+ if (props.warning)
102
+ return "#FBB431";
103
+ if (props.success)
104
+ return "#32B87C";
105
+ return "#1e79c2";
106
+ }};
107
+ }
108
+ `;
109
+ const RibbonBlockLabel = styled.div`
110
+ padding: 0.25rem 0.5rem;
111
+ color: #697489;
112
+ font-size: 0.9rem;
113
+ line-height: 1.2rem;
114
+ `;
115
+ const RibbonBlockValue = styled.div`
116
+ flex: 2;
117
+ font-weight: bold;
118
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
119
+ font-size: 1.1rem;
120
+ color: #333333;
121
+ flex-wrap: nowrap;
122
+ white-space: nowrap;
123
+ `;
124
+ const RibbonBlockValueLabel = styled.div`
125
+ flex: 2;
126
+ padding: 0.25rem 0.5rem 0.25rem 0rem;
127
+ font-size: 0.9rem;
128
+ color: #697489;
129
+ flex-wrap: nowrap;
130
+ white-space: nowrap;
131
+ `;
132
+ const RibbonBlockCol = styled.div`
133
+ display: flex;
134
+ flex-direction: column;
135
+ flex: 2;
136
+ flex-wrap: nowrap;
137
+ align-items: ${(props) => {
138
+ if (props.center)
139
+ return "center";
140
+ return "";
141
+ }};
142
+ height: 100%;
143
+ `;
144
+ const RibbonBlockRow = styled.div`
145
+ display: flex;
146
+ flex-direction: row;
147
+ flex-wrap: nowrap;
148
+ flex: 1;
149
+ height: 100%;
150
+ align-items: ${(props) => {
151
+ if (props.center)
152
+ return "center";
153
+ return "";
154
+ }};
155
+ `;
156
+ const RibbonBlock = styled.div`
157
+ flex: 1;
158
+ height: 100%;
159
+ `;
160
+ function RibbonCard({
161
+ containerProps = {},
162
+ icon = null,
163
+ label = "",
164
+ value = "",
165
+ additionalValue = "",
166
+ additionalLabel = "",
167
+ info = false,
168
+ error = false,
169
+ warning = false,
170
+ success = false,
171
+ center = false,
172
+ solid = false
173
+ }) {
174
+ const labelPlace = icon ? /* @__PURE__ */ React2.createElement(RibbonBlockIcon, {
175
+ error,
176
+ info,
177
+ success,
178
+ warning
179
+ }, icon) : /* @__PURE__ */ React2.createElement(RibbonBlockLabel, null, label);
99
180
  if (additionalValue || additionalLabel) {
100
181
  let additionalInformation;
101
-
102
182
  if (additionalValue) {
103
- additionalInformation = additionalValue && /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, additionalValue);
183
+ additionalInformation = additionalValue && /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, additionalValue);
104
184
  } else if (additionalLabel) {
105
- additionalInformation = additionalLabel && /*#__PURE__*/_jsx(RibbonBlockValueLabel, {}, void 0, additionalLabel);
185
+ additionalInformation = additionalLabel && /* @__PURE__ */ React2.createElement(RibbonBlockValueLabel, null, additionalLabel);
106
186
  }
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
- }));
187
+ return /* @__PURE__ */ React2.createElement(RibbonBlock, {
188
+ ...containerProps
189
+ }, /* @__PURE__ */ React2.createElement(RibbonBlockRow, {
190
+ className: "ribbon-block-row",
191
+ solid,
192
+ style: { alignItems: "flex-start" }
193
+ }, labelPlace, /* @__PURE__ */ React2.createElement(RibbonBlockCol, {
194
+ center,
195
+ className: "ribbon-block-col"
196
+ }, /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, value), additionalInformation)));
120
197
  }
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
- }));
198
+ return /* @__PURE__ */ React2.createElement(RibbonBlock, {
199
+ ...containerProps
200
+ }, /* @__PURE__ */ React2.createElement(RibbonBlockRow, {
201
+ center,
202
+ solid
203
+ }, labelPlace, /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, value)));
128
204
  }
129
-
130
205
  const DSRibbon = {
131
206
  RibbonWrapper,
132
207
  RibbonRow,
@@ -135,48 +210,29 @@ const DSRibbon = {
135
210
  };
136
211
  RibbonWrapper.propTypes = {};
137
212
  RibbonRow.propTypes = {
138
- /** align left */
139
- alignLeft: PropTypes.bool.description('align left')
213
+ alignLeft: PropTypes.bool.description("align left")
140
214
  };
141
215
  RibbonCol.propTypes = {};
142
216
  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')
217
+ containerProps: PropTypes.object.description("props to inject to wrapper"),
218
+ icon: PropTypes.element.description("icon for ribbon card"),
219
+ label: PropTypes.string.description("label for ribbon card"),
220
+ value: PropTypes.string.description("value for ribbon"),
221
+ additionalValue: PropTypes.string.description("additional value"),
222
+ additionalLabel: PropTypes.string.description("additional label"),
223
+ info: PropTypes.bool.description("for main label"),
224
+ error: PropTypes.bool.description("error state toggle"),
225
+ warning: PropTypes.bool.description("warning state toggle"),
226
+ success: PropTypes.bool.description("success state toggle"),
227
+ center: PropTypes.bool.description("align center"),
228
+ solid: PropTypes.bool.description("solid style")
178
229
  };
230
+ RibbonCard.propTypes = cardprops;
179
231
  const DSRibbonCardWithSchema = describe(RibbonCard);
180
232
  DSRibbonCardWithSchema.propTypes = cardprops;
181
-
182
- export { DSRibbonCardWithSchema, DSRibbon as default };
233
+ var DSRibbon_default = DSRibbon;
234
+ export {
235
+ DSRibbonCardWithSchema,
236
+ DSRibbon_default as default
237
+ };
238
+ //# sourceMappingURL=DSRibbon.js.map
package/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/esm/index.js CHANGED
@@ -1 +1,7 @@
1
- export { DSRibbonCardWithSchema, default } from './DSRibbon.js';
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/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,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-ribbon",
3
- "version": "2.2.0",
3
+ "version": "2.3.0-alpha.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Ribbon",
6
6
  "module": "./esm/index.js",