npm - @desynova-digital/components - Versions diffs - 9.3.11 → 9.3.12 - Mend

@desynova-digital/components 9.3.11 → 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.

Files changed (4) hide show

package/atoms/cardV2/cardV2.js CHANGED Viewed

@@ -5,53 +5,83 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DivStyles = exports.CommonStyles = exports.BaseParaStyles = exports.BaseButtonStyles = void 0;
+exports["default"] = exports.DivStyles = exports.CommonStyles = exports.CategorySelectionCheckbox = exports.BaseParaStyles = exports.BaseButtonStyles = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
 var _thumbnail = _interopRequireDefault(require("./thumbnail"));
 var _content = _interopRequireDefault(require("./content"));
 var _timeline = _interopRequireDefault(require("./timeline"));
 var _contentV = _interopRequireDefault(require("./contentV2"));
 var _thumbnailV = _interopRequireDefault(require("./thumbnailV2"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // components
+var _excluded = ["selectionAvailable", "selected", "onSelectionChange"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // components
 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); }
-var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref) {
-  var margin = _ref.margin,
-    padding = _ref.padding,
-    display = _ref.display,
-    justify = _ref.justify,
-    align = _ref.align,
-    fontSize = _ref.fontSize,
-    color = _ref.color,
-    position = _ref.position,
-    border = _ref.border,
-    zIndex = _ref.zIndex,
-    cursor = _ref.cursor,
-    borderRadius = _ref.borderRadius,
-    height = _ref.height,
-    width = _ref.width,
-    bgColor = _ref.bgColor,
-    marginLeft = _ref.marginLeft;
-  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);
+/**
+ * Shared card selection checkbox, also exported for list and Select All controls.
+ * Supports checked and indeterminate states; each placement overrides its position.
+ */
+var CategorySelectionCheckbox = exports.CategorySelectionCheckbox = _styledComponents["default"].input.attrs({
+  type: 'checkbox'
+})(_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) {
+  var accentColor = _ref.accentColor;
+  return accentColor || '#00cec6';
 });
-var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), CommonStyles);
-var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
-var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
-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) {
-  var width = _ref2.width;
+var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
+  var margin = _ref2.margin,
+    padding = _ref2.padding,
+    display = _ref2.display,
+    justify = _ref2.justify,
+    align = _ref2.align,
+    fontSize = _ref2.fontSize,
+    color = _ref2.color,
+    position = _ref2.position,
+    border = _ref2.border,
+    zIndex = _ref2.zIndex,
+    cursor = _ref2.cursor,
+    borderRadius = _ref2.borderRadius,
+    height = _ref2.height,
+    width = _ref2.width,
+    bgColor = _ref2.bgColor,
+    marginLeft = _ref2.marginLeft;
+  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);
+});
+var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), CommonStyles);
+var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
+var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
+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) {
+  var width = _ref3.width;
   return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
-}, function (_ref3) {
-  var upload_type = _ref3.upload_type;
-  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        ";
 }, function (_ref4) {
-  var upload_type = _ref4.upload_type,
-    ingest_db_id = _ref4.ingest_db_id;
+  var upload_type = _ref4.upload_type;
+  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        ";
+}, function (_ref5) {
+  var upload_type = _ref5.upload_type,
+    ingest_db_id = _ref5.ingest_db_id;
   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)';
+}, function (_ref6) {
+  var _colors$theme, _colors$theme$label;
+  var theme = _ref6.theme;
+  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';
 });
-var CardV2 = function CardV2(props) {
+var CardContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  z-index: 0;\n"])));
+var CardSelectionCheckbox = (0, _styledComponents["default"])(CategorySelectionCheckbox)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  top: 12px;\n  transform: none;\n"])));
+/**
+ * Renders card content with an optional selection checkbox.
+ * selectionAvailable enables selection UI; selected and onSelectionChange keep it
+ * controlled by the page. Checkbox clicks do not trigger card navigation.
+ */
+var CardV2 = function CardV2(_ref7) {
+  var _colors$props$theme, _colors$props$theme$l;
+  var selectionAvailable = _ref7.selectionAvailable,
+    selected = _ref7.selected,
+    onSelectionChange = _ref7.onSelectionChange,
+    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded);
   var width = props.width,
     type = props.type,
     isCardv2 = props.isCardv2;
@@ -72,11 +102,33 @@ var CardV2 = function CardV2(props) {
       }, content());
     } else return content();
   }, [props]);
+  // Preserve the original card markup for consumers that do not enable selection.
+  if (!selectionAvailable) {
+    return /*#__PURE__*/_react["default"].createElement(CardStyles, (0, _extends2["default"])({}, props, {
+      title: undefined
+    }), renderBasedOnWidth());
+  }
   return /*#__PURE__*/_react["default"].createElement(CardStyles, (0, _extends2["default"])({}, props, {
-    title: undefined
-  }), renderBasedOnWidth());
+    title: undefined,
+    "data-selected": Boolean(selectionAvailable && selected)
+  }), selectionAvailable && /*#__PURE__*/_react["default"].createElement(CardSelectionCheckbox, {
+    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,
+    "aria-label": "Select ".concat(props.h1 || props.title || 'collateral'),
+    checked: selected,
+    disabled: !onSelectionChange,
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    onChange: function onChange(event) {
+      return onSelectionChange(event.target.checked);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(CardContent, null, renderBasedOnWidth()));
 };
 CardV2.propTypes = {
+  selectionAvailable: _propTypes["default"].bool,
+  selected: _propTypes["default"].bool,
+  onSelectionChange: _propTypes["default"].func,
   h1: _propTypes["default"].string.isRequired,
   h2: _propTypes["default"].string,
   h3: _propTypes["default"].string,
@@ -109,6 +161,8 @@ CardV2.propTypes = {
   })
 };
 CardV2.defaultProps = {
+  selectionAvailable: false,
+  selected: false,
   isSegment: false,
   theme: 'dark',
   width: 'lg',

package/atoms/cardV2/index.js CHANGED Viewed

@@ -1,9 +1,16 @@
 "use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CategorySelectionCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _cardV.CategorySelectionCheckbox;
+  }
+});
 exports["default"] = void 0;
-var _cardV = _interopRequireDefault(require("./cardV2"));
+var _cardV = _interopRequireWildcard(require("./cardV2"));
+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); }
 var _default = exports["default"] = _cardV["default"];

package/index.js CHANGED Viewed

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Carousel", {
     return _components.Carousel;
   }
 });
+Object.defineProperty(exports, "CategorySelectionCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _cardV.CategorySelectionCheckbox;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
@@ -369,4 +375,5 @@ Object.defineProperty(exports, "VideoPlayer", {
     return _components.VideoPlayer;
   }
 });
-var _components = require("./components");
+var _components = require("./components");
+var _cardV = require("./atoms/cardV2");

package/package.json CHANGED Viewed

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.3.11",
+  "version": "9.3.12",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.3.11",
+    "@desynova-digital/tokens": "9.3.12",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },