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

package/lib/cjs/components/Card/Card.js

@@ -25,7 +25,7 @@ var _utils = require("@react-aria/utils");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isInteractiveWithin"];
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isInteractiveWithin", "isSelected"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -41,6 +41,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
     isInteractiveWithin = props.isInteractiveWithin,
+    isSelected = props.isSelected,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var cardRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useHover = (0, _interactions.useHover)({
@@ -71,7 +72,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isHovered,
       isPressed: isPressed,
-      isFocused: isFocusVisible || isFocusedWithin
+      isFocused: isFocusVisible || isFocusedWithin,
+      isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];

package/lib/cjs/components/Card/Card.stories.d.ts

@@ -33,3 +33,4 @@ export declare const InteractiveCard: {
     };
 };
 export declare const WithInteractiveContent: () => React.JSX.Element;
+export declare const ActiveCard: () => React.JSX.Element;

package/lib/cjs/components/Card/Card.stories.js

@@ -12,7 +12,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithInteractiveContent = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
+exports["default"] = exports.WithInteractiveContent = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = exports.ActiveCard = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -180,4 +181,27 @@ var WithInteractiveContent = function WithInteractiveContent() {
     width: "300px"
   }));
 };
-exports.WithInteractiveContent = WithInteractiveContent;
+exports.WithInteractiveContent = WithInteractiveContent;
+var ActiveCard = function ActiveCard() {
+  var sx = {
+    alignContent: 'center',
+    height: '221px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    maxWidth: '233px'
+  };
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isSelected = _React$useState2[0],
+    setIsSelected = _React$useState2[1];
+  return (0, _react2.jsx)(_index.Card, {
+    tabIndex: "0",
+    variant: "cards.activeCard",
+    sx: sx,
+    isSelected: isSelected,
+    onPress: function onPress() {
+      return setIsSelected(!isSelected);
+    }
+  }, "Active Card");
+};
+exports.ActiveCard = ActiveCard;

package/lib/cjs/components/Card/Card.styles.d.ts

@@ -65,5 +65,57 @@ declare const _default: {
     body: {
         p: number;
     };
+    activeCard: {
+        position: string;
+        cursor: string;
+        '&.is-selected': {
+            border: string;
+            borderColor: string;
+            ':before': {
+                content: string;
+                backgroundColor: string;
+                backgroundImage: string;
+                backgroundSize: string;
+                backgroundRepeat: string;
+                backgroundPosition: string;
+                transition: string;
+                position: string;
+                top: string;
+                right: string;
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+        boxShadow: string;
+        '&.is-hovered': {
+            bg: string;
+            cursor: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+            bg: string;
+        };
+        '&.is-pressed': {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            outline: string;
+        };
+        ':focus-visible:not(.is-focused)': {
+            outline: string;
+            border: string;
+            borderColor: string;
+        };
+        display: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+        p: string;
+    };
 };
 export default _default;

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _images = require("../../utils/devUtils/constants/images");
 var _Buttons = require("../Button/Buttons.styles");
 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) { (0, _defineProperty2["default"])(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; }
@@ -68,12 +69,36 @@ 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(_images.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%'
+    }
+  }
+});
 var _default = {
   container: container,
   interactive: interactive,
   header: header,
   footer: footer,
   flat: flat,
-  body: body
+  body: body,
+  activeCard: activeCard
 };
 exports["default"] = _default;

package/lib/cjs/components/Card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -85,7 +85,7 @@ test('allows focus within card', function () {
   expect(button).toHaveClass('is-focused');
 });
 test('renders Card component with text selection', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__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:
@@ -100,18 +100,32 @@ test('renders Card component with text selection', /*#__PURE__*/(0, _asyncToGene
         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 = _react2.screen.getByLabelText('Interactive TextField');
-        _userEvent["default"].click(textField);
-        _userEvent["default"].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 = _react2.screen.getByLabelText('Interactive TextField');
+          _userEvent["default"].click(textField);
+          _userEvent["default"].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 = _react2.screen.getByTestId(testId);
+  _userEvent["default"].click(card);
+  expect(card).toHaveClass('is-selected');
+});

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1486,6 +1486,22 @@ declare const _default: {
                 bg: string;
             };
         };
+        activeCard: {
+            borderColor: string;
+            '&.is-hovered': {
+                borderColor: string;
+                bg: string;
+            };
+            boxShadow: string;
+            borderRadius: string;
+            border: string;
+            transition: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     variants: {
         navBar: {

package/lib/cjs/styles/themes/next-gen/variants/cards.d.ts

@@ -16,5 +16,21 @@ declare const _default: {
             bg: string;
         };
     };
+    activeCard: {
+        borderColor: string;
+        '&.is-hovered': {
+            borderColor: string;
+            bg: string;
+        };
+        boxShadow: string;
+        borderRadius: string;
+        border: string;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
 };
 export default _default;

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

@@ -1,10 +1,21 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (0, _defineProperty2["default"])(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',
@@ -22,7 +33,15 @@ var interactive = {
     bg: 'default'
   }
 };
+var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
+  borderColor: 'border.base',
+  '&.is-hovered': {
+    borderColor: 'active',
+    bg: 'default'
+  }
+});
 var _default = {
-  interactive: interactive
+  interactive: interactive,
+  activeCard: activeCard
 };
 exports["default"] = _default;