@desynova-digital/components 9.3.10 → 9.3.12

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.
@@ -5,53 +5,83 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.DivStyles = exports.CommonStyles = exports.BaseParaStyles = exports.BaseButtonStyles = void 0;
8
+ exports["default"] = exports.DivStyles = exports.CommonStyles = exports.CategorySelectionCheckbox = exports.BaseParaStyles = exports.BaseButtonStyles = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
11
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
12
  var _react = _interopRequireWildcard(require("react"));
12
13
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
14
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
+ var _tokens = require("@desynova-digital/tokens");
14
16
  var _thumbnail = _interopRequireDefault(require("./thumbnail"));
15
17
  var _content = _interopRequireDefault(require("./content"));
16
18
  var _timeline = _interopRequireDefault(require("./timeline"));
17
19
  var _contentV = _interopRequireDefault(require("./contentV2"));
18
20
  var _thumbnailV = _interopRequireDefault(require("./thumbnailV2"));
19
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // components
21
+ var _excluded = ["selectionAvailable", "selected", "onSelectionChange"];
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // components
20
23
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
- var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref) {
22
- var margin = _ref.margin,
23
- padding = _ref.padding,
24
- display = _ref.display,
25
- justify = _ref.justify,
26
- align = _ref.align,
27
- fontSize = _ref.fontSize,
28
- color = _ref.color,
29
- position = _ref.position,
30
- border = _ref.border,
31
- zIndex = _ref.zIndex,
32
- cursor = _ref.cursor,
33
- borderRadius = _ref.borderRadius,
34
- height = _ref.height,
35
- width = _ref.width,
36
- bgColor = _ref.bgColor,
37
- marginLeft = _ref.marginLeft;
38
- return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n margin: ", ";\n padding: ", ";\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n font-size: ", ";\n color: ", ";\n position: ", ";\n border: ", ";\n z-index: ", ";\n cursor: ", ";\n border-radius: ", ";\n height: ", ";\n width: ", ";\n margin-left: ", ";\n "])), bgColor, margin, padding, display, justify, align, fontSize, color, position, border, zIndex, cursor, borderRadius, height, width, marginLeft);
24
+ /**
25
+ * Shared card selection checkbox, also exported for list and Select All controls.
26
+ * Supports checked and indeterminate states; each placement overrides its position.
27
+ */
28
+ var CategorySelectionCheckbox = exports.CategorySelectionCheckbox = _styledComponents["default"].input.attrs({
29
+ type: 'checkbox'
30
+ })(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 3;\n width: 16px;\n height: 16px;\n margin: 0;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n -webkit-appearance: none;\n appearance: none;\n box-sizing: border-box;\n border: 1px solid currentColor;\n border-radius: 3px;\n background: transparent;\n color: ", ";\n cursor: pointer;\n transition: transform 0.25s ease;\n\n &:checked,\n &:indeterminate {\n background: currentColor;\n }\n\n &::before {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 4px;\n height: 8px;\n border: solid #0c141d;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n opacity: 0;\n }\n\n &:checked::before {\n opacity: 1;\n }\n\n &:indeterminate::before {\n left: 3px;\n top: 6px;\n width: 8px;\n height: 0;\n border-width: 0 0 2px;\n transform: none;\n opacity: 1;\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 3px;\n }\n"])), function (_ref) {
31
+ var accentColor = _ref.accentColor;
32
+ return accentColor || '#00cec6';
39
33
  });
40
- var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"])), CommonStyles);
41
- var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
42
- var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
43
- var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n width: ", ";\n\n border: 1px solid transparent;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n /* \u2705 Center pop baseline */\n transform: scale(1);\n transform-origin: 50% 50%;\n\n /* \u2705 Make it pop above siblings */\n z-index: 0;\n isolation: isolate;\n\n transition:\n transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n will-change: transform;\n\n /* \uD83D\uDD25 Glow Layer */\n &::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 10px;\n pointer-events: none;\n opacity: 0;\n transition: all 0.4s ease-out;\n\n box-shadow: ", ";\n }\n\n /* \u2705 Hover = pop from center (NO translate) */\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n border-color: ", ";\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover::after {\n opacity: 1;\n }\n"])), function (_ref2) {
44
- var width = _ref2.width;
34
+ var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
35
+ var margin = _ref2.margin,
36
+ padding = _ref2.padding,
37
+ display = _ref2.display,
38
+ justify = _ref2.justify,
39
+ align = _ref2.align,
40
+ fontSize = _ref2.fontSize,
41
+ color = _ref2.color,
42
+ position = _ref2.position,
43
+ border = _ref2.border,
44
+ zIndex = _ref2.zIndex,
45
+ cursor = _ref2.cursor,
46
+ borderRadius = _ref2.borderRadius,
47
+ height = _ref2.height,
48
+ width = _ref2.width,
49
+ bgColor = _ref2.bgColor,
50
+ marginLeft = _ref2.marginLeft;
51
+ return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n margin: ", ";\n padding: ", ";\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n font-size: ", ";\n color: ", ";\n position: ", ";\n border: ", ";\n z-index: ", ";\n cursor: ", ";\n border-radius: ", ";\n height: ", ";\n width: ", ";\n margin-left: ", ";\n "])), bgColor, margin, padding, display, justify, align, fontSize, color, position, border, zIndex, cursor, borderRadius, height, width, marginLeft);
52
+ });
53
+ var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"])), CommonStyles);
54
+ var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
55
+ var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
56
+ var CardStyles = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n width: ", ";\n\n border: 1px solid transparent;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n /* \u2705 Center pop baseline */\n transform: scale(1);\n transform-origin: 50% 50%;\n\n /* \u2705 Make it pop above siblings */\n z-index: 0;\n isolation: isolate;\n\n transition:\n transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n will-change: transform;\n\n /* \uD83D\uDD25 Glow Layer */\n &::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 10px;\n pointer-events: none;\n opacity: 0;\n transition: all 0.4s ease-out;\n\n box-shadow: ", ";\n }\n\n /* \u2705 Hover = pop from center (NO translate) */\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n border-color: ", ";\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover::after {\n opacity: 1;\n }\n\n /* Fade a separate border layer without replacing the card's hover shadow. */\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 2;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: inset 0 0 0 2px ", ";\n opacity: 0;\n transition: opacity 240ms ease;\n }\n\n &[data-selected='true']::before {\n opacity: 1;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &::before {\n transition: none;\n }\n }\n"])), function (_ref3) {
57
+ var width = _ref3.width;
45
58
  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
46
- }, function (_ref3) {
47
- var upload_type = _ref3.upload_type;
48
- return String(upload_type || '').toLowerCase() === 'rc' ? "\n 0 0 0 1px rgba(255,140,0,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(255,140,0,0.18)\n " : "\n 0 0 0 1px rgba(13,247,169,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(13,247,169,0.18)\n ";
49
59
  }, function (_ref4) {
50
- var upload_type = _ref4.upload_type,
51
- ingest_db_id = _ref4.ingest_db_id;
60
+ var upload_type = _ref4.upload_type;
61
+ return String(upload_type || '').toLowerCase() === 'rc' ? "\n 0 0 0 1px rgba(255,140,0,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(255,140,0,0.18)\n " : "\n 0 0 0 1px rgba(13,247,169,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(13,247,169,0.18)\n ";
62
+ }, function (_ref5) {
63
+ var upload_type = _ref5.upload_type,
64
+ ingest_db_id = _ref5.ingest_db_id;
52
65
  return String(upload_type || '').toLowerCase() === 'rc' ? 'rgba(255, 141, 41, 0.2)' : !ingest_db_id ? 'rgba(48, 63, 81, 0.2)' : 'rgba(24, 185, 110, 0.2)';
66
+ }, function (_ref6) {
67
+ var _colors$theme, _colors$theme$label;
68
+ var theme = _ref6.theme;
69
+ return ((_colors$theme = _tokens.colors[theme]) === null || _colors$theme === void 0 ? void 0 : (_colors$theme$label = _colors$theme.label) === null || _colors$theme$label === void 0 ? void 0 : _colors$theme$label.text) || '#00cec6';
53
70
  });
54
- var CardV2 = function CardV2(props) {
71
+ var CardContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n z-index: 0;\n"])));
72
+ var CardSelectionCheckbox = (0, _styledComponents["default"])(CategorySelectionCheckbox)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n top: 12px;\n transform: none;\n"])));
73
+
74
+ /**
75
+ * Renders card content with an optional selection checkbox.
76
+ * selectionAvailable enables selection UI; selected and onSelectionChange keep it
77
+ * controlled by the page. Checkbox clicks do not trigger card navigation.
78
+ */
79
+ var CardV2 = function CardV2(_ref7) {
80
+ var _colors$props$theme, _colors$props$theme$l;
81
+ var selectionAvailable = _ref7.selectionAvailable,
82
+ selected = _ref7.selected,
83
+ onSelectionChange = _ref7.onSelectionChange,
84
+ props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded);
55
85
  var width = props.width,
56
86
  type = props.type,
57
87
  isCardv2 = props.isCardv2;
@@ -72,11 +102,33 @@ var CardV2 = function CardV2(props) {
72
102
  }, content());
73
103
  } else return content();
74
104
  }, [props]);
105
+
106
+ // Preserve the original card markup for consumers that do not enable selection.
107
+ if (!selectionAvailable) {
108
+ return /*#__PURE__*/_react["default"].createElement(CardStyles, (0, _extends2["default"])({}, props, {
109
+ title: undefined
110
+ }), renderBasedOnWidth());
111
+ }
75
112
  return /*#__PURE__*/_react["default"].createElement(CardStyles, (0, _extends2["default"])({}, props, {
76
- title: undefined
77
- }), renderBasedOnWidth());
113
+ title: undefined,
114
+ "data-selected": Boolean(selectionAvailable && selected)
115
+ }), selectionAvailable && /*#__PURE__*/_react["default"].createElement(CardSelectionCheckbox, {
116
+ accentColor: (_colors$props$theme = _tokens.colors[props.theme]) === null || _colors$props$theme === void 0 ? void 0 : (_colors$props$theme$l = _colors$props$theme.label) === null || _colors$props$theme$l === void 0 ? void 0 : _colors$props$theme$l.text,
117
+ "aria-label": "Select ".concat(props.h1 || props.title || 'collateral'),
118
+ checked: selected,
119
+ disabled: !onSelectionChange,
120
+ onClick: function onClick(event) {
121
+ return event.stopPropagation();
122
+ },
123
+ onChange: function onChange(event) {
124
+ return onSelectionChange(event.target.checked);
125
+ }
126
+ }), /*#__PURE__*/_react["default"].createElement(CardContent, null, renderBasedOnWidth()));
78
127
  };
79
128
  CardV2.propTypes = {
129
+ selectionAvailable: _propTypes["default"].bool,
130
+ selected: _propTypes["default"].bool,
131
+ onSelectionChange: _propTypes["default"].func,
80
132
  h1: _propTypes["default"].string.isRequired,
81
133
  h2: _propTypes["default"].string,
82
134
  h3: _propTypes["default"].string,
@@ -109,6 +161,8 @@ CardV2.propTypes = {
109
161
  })
110
162
  };
111
163
  CardV2.defaultProps = {
164
+ selectionAvailable: false,
165
+ selected: false,
112
166
  isSegment: false,
113
167
  theme: 'dark',
114
168
  width: 'lg',
@@ -1,9 +1,16 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ Object.defineProperty(exports, "CategorySelectionCheckbox", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _cardV.CategorySelectionCheckbox;
11
+ }
12
+ });
7
13
  exports["default"] = void 0;
8
- var _cardV = _interopRequireDefault(require("./cardV2"));
14
+ var _cardV = _interopRequireWildcard(require("./cardV2"));
15
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
9
16
  var _default = exports["default"] = _cardV["default"];
@@ -1,17 +1,13 @@
1
1
  {
2
2
  "icons": {
3
3
  "right-arrow-chevron": {
4
- "paths": [
5
- "M3.33398 2L8.66732 6L3.33398 10"
6
- ],
4
+ "paths": ["M3.33398 2L8.66732 6L3.33398 10"],
7
5
  "width": 12,
8
6
  "height": 12,
9
7
  "strokeWidth": 1.5
10
8
  },
11
9
  "down-arrow-chevron": {
12
- "paths": [
13
- "M10 3.33594L6 8.66927L2 3.33594"
14
- ],
10
+ "paths": ["M10 3.33594L6 8.66927L2 3.33594"],
15
11
  "width": 12,
16
12
  "height": 12,
17
13
  "strokeWidth": 1.5
@@ -177,7 +173,7 @@
177
173
  "width": 16,
178
174
  "height": 16
179
175
  },
180
- "search_filter": {
176
+ "search_filter": {
181
177
  "paths": [
182
178
  "M9.6224 2.33594H6.41406",
183
179
  "M4.58333 2.33594H1.375",
@@ -2027,7 +2023,7 @@
2027
2023
  "width": 12,
2028
2024
  "height": 11
2029
2025
  },
2030
- "notes-comment":{
2026
+ "notes-comment": {
2031
2027
  "paths": [
2032
2028
  "M0 10V1C0 0.725 0.0979167 0.489583 0.29375 0.29375C0.489583 0.0979167 0.725 0 1 0H9C9.275 0 9.51042 0.0979167 9.70625 0.29375C9.90208 0.489583 10 0.725 10 1V7C10 7.275 9.90208 7.51042 9.70625 7.70625C9.51042 7.90208 9.275 8 9 8H2L0 10ZM2 6H6V5H2V6ZM2 4.5H8V3.5H2V4.5ZM2 3H8V2H2V3Z"
2033
2029
  ],
@@ -2050,13 +2046,21 @@
2050
2046
  "width": 14,
2051
2047
  "height": 14
2052
2048
  },
2053
- "unsupportedFile-icon": {
2049
+ "unsupportedFile-icon": {
2054
2050
  "viewBox": "0 -960 960 960",
2055
2051
  "paths": [
2056
2052
  "M160-160q-33 0-56.5-23.5T80-240v-120h360q33 0 56.5-23.5T520-440v-360h280q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160ZM80-400v-240q0-33 23.5-56.5T160-720h240L80-400Zm153-40 207-207v207H233Z"
2057
2053
  ],
2058
2054
  "width": 24,
2059
2055
  "height": 24
2056
+ },
2057
+ "unsupported-video": {
2058
+ "viewBox": "0 0 66 66",
2059
+ "paths": [
2060
+ "M13 18H8V53C8 55.75 10.25 58 13 58H48V53H13V18ZM53 8H23C20.25 8 18 10.25 18 13V43C18 45.75 20.25 48 23 48H53C55.75 48 58 45.75 58 43V13C58 10.25 55.75 8 53 8ZM53 43H23V13H53V43ZM33 16.75V39.25L48 28L33 16.75ZM4.4246 1.9234L1.9234 4.4246L60.9932 63.4944L63.4944 60.9932L4.4246 1.9234Z"
2061
+ ],
2062
+ "width": 66,
2063
+ "height": 66
2060
2064
  }
2061
2065
  }
2062
- }
2066
+ }
package/index.js CHANGED
@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Carousel", {
57
57
  return _components.Carousel;
58
58
  }
59
59
  });
60
+ Object.defineProperty(exports, "CategorySelectionCheckbox", {
61
+ enumerable: true,
62
+ get: function get() {
63
+ return _cardV.CategorySelectionCheckbox;
64
+ }
65
+ });
60
66
  Object.defineProperty(exports, "Checkbox", {
61
67
  enumerable: true,
62
68
  get: function get() {
@@ -369,4 +375,5 @@ Object.defineProperty(exports, "VideoPlayer", {
369
375
  return _components.VideoPlayer;
370
376
  }
371
377
  });
372
- var _components = require("./components");
378
+ var _components = require("./components");
379
+ var _cardV = require("./atoms/cardV2");
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.3.10",
3
+ "version": "9.3.12",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.3.10",
10
+ "@desynova-digital/tokens": "9.3.12",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },