@elliemae/ds-ribbon 2.2.0-alpha.4 → 3.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/cjs/DSRibbon.js +169 -243
  2. package/cjs/index.js +10 -36
  3. package/esm/DSRibbon.js +157 -213
  4. package/esm/index.js +1 -7
  5. package/package.json +1 -1
  6. package/cjs/DSRibbon.js.map +0 -7
  7. package/cjs/index.js.map +0 -7
  8. package/esm/DSRibbon.js.map +0 -7
  9. package/esm/index.js.map +0 -7
package/cjs/DSRibbon.js CHANGED
@@ -1,239 +1,142 @@
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) => {
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 => {
50
29
  if (props.alignLeft) {
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
- `;
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 ");
61
31
  }
62
- return `
63
- // flex:1;
64
- align-items: center;
65
- `;
66
- }};
67
- ${(props) => {
32
+
33
+ return "\n // flex:1;\n align-items: center;\n ";
34
+ }, props => {
68
35
  if (props.solid) {
69
- return `
70
- & > ${RibbonCol} {
71
- &:after{
72
- top: 0%;
73
- height: 100%;
74
- border-right: solid 1px #CBCFD7;
75
- }
76
- `;
77
- }
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;
36
+ return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
99
37
  }
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);
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
+
212
109
  if (additionalValue || additionalLabel) {
213
110
  let additionalInformation;
111
+
214
112
  if (additionalValue) {
215
- additionalInformation = additionalValue && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValue, null, additionalValue);
113
+ additionalInformation = additionalValue && /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, additionalValue);
216
114
  } else if (additionalLabel) {
217
- additionalInformation = additionalLabel && /* @__PURE__ */ import_react.default.createElement(RibbonBlockValueLabel, null, additionalLabel);
115
+ additionalInformation = additionalLabel && /*#__PURE__*/_jsx__default["default"](RibbonBlockValueLabel, {}, void 0, additionalLabel);
218
116
  }
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)));
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
+ }));
229
130
  }
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)));
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
+ }));
236
138
  }
139
+
237
140
  const DSRibbon = {
238
141
  RibbonWrapper,
239
142
  RibbonRow,
@@ -242,26 +145,49 @@ const DSRibbon = {
242
145
  };
243
146
  RibbonWrapper.propTypes = {};
244
147
  RibbonRow.propTypes = {
245
- alignLeft: import_react_desc.PropTypes.bool.description("align left")
148
+ /** align left */
149
+ alignLeft: reactDesc.PropTypes.bool.description('align left')
246
150
  };
247
151
  RibbonCol.propTypes = {};
248
152
  const cardprops = {
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")
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')
261
188
  };
262
- RibbonCard.propTypes = cardprops;
263
- const DSRibbonCardWithSchema = (0, import_react_desc.describe)(RibbonCard);
189
+ const DSRibbonCardWithSchema = reactDesc.describe(RibbonCard);
264
190
  DSRibbonCardWithSchema.propTypes = cardprops;
265
- var DSRibbon_default = DSRibbon;
266
- module.exports = __toCommonJS(DSRibbon_exports);
267
- //# sourceMappingURL=DSRibbon.js.map
191
+
192
+ exports.DSRibbonCardWithSchema = DSRibbonCardWithSchema;
193
+ exports["default"] = DSRibbon;
package/cjs/index.js CHANGED
@@ -1,36 +1,10 @@
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 = require("./DSRibbon");
35
- module.exports = __toCommonJS(src_exports);
36
- //# sourceMappingURL=index.js.map
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 CHANGED
@@ -1,207 +1,132 @@
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) => {
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 => {
18
19
  if (props.alignLeft) {
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
- `;
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 ");
29
21
  }
30
- return `
31
- // flex:1;
32
- align-items: center;
33
- `;
34
- }};
35
- ${(props) => {
22
+
23
+ return "\n // flex:1;\n align-items: center;\n ";
24
+ }, props => {
36
25
  if (props.solid) {
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
- }
26
+ return "\n & > ".concat(RibbonCol, " {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n ");
89
27
  }
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);
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
+
180
99
  if (additionalValue || additionalLabel) {
181
100
  let additionalInformation;
101
+
182
102
  if (additionalValue) {
183
- additionalInformation = additionalValue && /* @__PURE__ */ React2.createElement(RibbonBlockValue, null, additionalValue);
103
+ additionalInformation = additionalValue && /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, additionalValue);
184
104
  } else if (additionalLabel) {
185
- additionalInformation = additionalLabel && /* @__PURE__ */ React2.createElement(RibbonBlockValueLabel, null, additionalLabel);
105
+ additionalInformation = additionalLabel && /*#__PURE__*/_jsx(RibbonBlockValueLabel, {}, void 0, additionalLabel);
186
106
  }
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)));
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
+ }));
197
120
  }
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)));
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
+ }));
204
128
  }
129
+
205
130
  const DSRibbon = {
206
131
  RibbonWrapper,
207
132
  RibbonRow,
@@ -210,29 +135,48 @@ const DSRibbon = {
210
135
  };
211
136
  RibbonWrapper.propTypes = {};
212
137
  RibbonRow.propTypes = {
213
- alignLeft: PropTypes.bool.description("align left")
138
+ /** align left */
139
+ alignLeft: PropTypes.bool.description('align left')
214
140
  };
215
141
  RibbonCol.propTypes = {};
216
142
  const cardprops = {
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")
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')
229
178
  };
230
- RibbonCard.propTypes = cardprops;
231
179
  const DSRibbonCardWithSchema = describe(RibbonCard);
232
180
  DSRibbonCardWithSchema.propTypes = cardprops;
233
- var DSRibbon_default = DSRibbon;
234
- export {
235
- DSRibbonCardWithSchema,
236
- DSRibbon_default as default
237
- };
238
- //# sourceMappingURL=DSRibbon.js.map
181
+
182
+ export { DSRibbonCardWithSchema, DSRibbon as default };
package/esm/index.js CHANGED
@@ -1,7 +1 @@
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
1
+ export { DSRibbonCardWithSchema, default } from './DSRibbon.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-ribbon",
3
- "version": "2.2.0-alpha.4",
3
+ "version": "3.0.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Ribbon",
6
6
  "module": "./esm/index.js",
package/cjs/DSRibbon.js.map DELETED
@@ -1,7 +0,0 @@
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.map DELETED
@@ -1,7 +0,0 @@
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.map DELETED
@@ -1,7 +0,0 @@
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.map DELETED
@@ -1,7 +0,0 @@
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
- }