@pingux/astro 2.89.0-alpha.2 → 2.90.0-alpha.0

package/lib/components/Card/Card.styles.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { checkIcon } from '../../utils/devUtils/constants/images';
 import { defaultFocus } from '../Button/Buttons.styles';
 var container = {
   display: 'flex',
@@ -61,11 +62,35 @@ var footer = {
 var body = {
   p: 24
 };
+var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
+  position: 'relative',
+  cursor: 'pointer',
+  '&.is-selected': {
+    border: '1px solid',
+    borderColor: 'active',
+    ':before': {
+      content: '""',
+      backgroundColor: 'active',
+      backgroundImage: "url(".concat(checkIcon, ")"),
+      backgroundSize: '16px 16px',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center center',
+      transition: 'background-image 0.25s ease-in-out',
+      position: 'absolute',
+      top: '-8px',
+      right: '-8px',
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%'
+    }
+  }
+});
 export default {
   container: container,
   interactive: interactive,
   header: header,
   footer: footer,
   flat: flat,
-  body: body
+  body: body,
+  activeCard: activeCard
 };

package/lib/components/Card/Card.test.js

@@ -82,7 +82,7 @@ test('allows focus within card', function () {
   expect(button).toHaveClass('is-focused');
 });
 test('renders Card component with text selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-  var children, card, range, selection, textField;
+  var children, card, range, selection, selectedText, textField;
   return _regeneratorRuntime().wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -97,18 +97,32 @@ test('renders Card component with text selection', /*#__PURE__*/_asyncToGenerato
         range = document.createRange();
         range.selectNodeContents(card);
         selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
 
-        // Verify that the selection was successful
-        expect(selection.toString()).toBe('Select this text.Interactive TextField');
-        textField = screen.getByLabelText('Interactive TextField');
-        userEvent.click(textField);
-        userEvent.type(textField, selection.toString());
-        expect(textField).toHaveValue('Select this text.Interactive TextField');
-      case 13:
+          // Verify that the selection was successful
+          selectedText = selection.toString();
+          expect(selectedText).toBe('Select this text.Interactive TextField');
+
+          // Interact with the TextField
+          textField = screen.getByLabelText('Interactive TextField');
+          userEvent.click(textField);
+          userEvent.type(textField, selectedText);
+          expect(textField).toHaveValue(selectedText);
+        }
+      case 7:
       case "end":
         return _context.stop();
     }
   }, _callee);
-})));
+})));
+test('is-select class added when isSelected pass to it', function () {
+  getComponent({
+    variant: 'cards.activeCard',
+    isSelected: true
+  });
+  var card = screen.getByTestId(testId);
+  userEvent.click(card);
+  expect(card).toHaveClass('is-selected');
+});

package/lib/styles/themes/next-gen/variants/cards.js

@@ -1,3 +1,14 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
@@ -15,6 +26,14 @@ var interactive = {
     bg: 'default'
   }
 };
+var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
+  borderColor: 'border.base',
+  '&.is-hovered': {
+    borderColor: 'active',
+    bg: 'default'
+  }
+});
 export default {
-  interactive: interactive
+  interactive: interactive,
+  activeCard: activeCard
 };