@pingux/astro 2.37.1-alpha.1 → 2.37.1-alpha.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 (5) hide show
  1. package/lib/cjs/components/Card/Card.stories.js +3 -8
  2. package/lib/cjs/components/Card/Card.styles.js +35 -1
  3. package/lib/components/Card/Card.stories.js +4 -9
  4. package/lib/components/Card/Card.styles.js +35 -1
  5. package/package.json +1 -1
package/lib/cjs/components/Card/Card.stories.js CHANGED
@@ -97,7 +97,7 @@ var InteractiveCard = function InteractiveCard() {
97
97
  height: '221px',
98
98
  justifyContent: 'center',
99
99
  textAlign: 'center',
100
- width: '233px'
100
+ maxWidth: '233px'
101
101
  };
102
102
  return (0, _react2.jsx)(_index.Card, {
103
103
  onPress: function onPress() {
@@ -107,14 +107,9 @@ var InteractiveCard = function InteractiveCard() {
107
107
  return console.log('card hovered');
108
108
  },
109
109
  tabIndex: "0",
110
+ variant: "cards.interactive",
110
111
  sx: sx
111
- }, "Interactive Card", (0, _react2.jsx)(_index.Button, {
112
- variant: "inline",
113
- mt: "md",
114
- onPress: function onPress() {
115
- return console.log('button pressed');
116
- }
117
- }, "Explore"));
112
+ }, "Interactive Card");
118
113
  };
119
114
  exports.InteractiveCard = InteractiveCard;
120
115
  InteractiveCard.parameters = {
package/lib/cjs/components/Card/Card.styles.js CHANGED
@@ -1,10 +1,22 @@
1
1
  "use strict";
2
2
 
3
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
+ var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
5
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
+ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
8
+ var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
9
+ var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
3
10
  var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
11
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
12
  _Object$defineProperty(exports, "__esModule", {
5
13
  value: true
6
14
  });
7
15
  exports["default"] = void 0;
16
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
17
+ var _Buttons = require("../Button/Buttons.styles");
18
+ 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; }
19
+ 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; }
8
20
  var container = {
9
21
  display: 'flex',
10
22
  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
@@ -15,7 +27,29 @@ var container = {
15
27
  flex: '1 1 0',
16
28
  p: 'lg'
17
29
  };
30
+ var interactive = _objectSpread(_objectSpread({}, container), {}, {
31
+ boxShadow: '0px 1px 14px 0px rgba(37, 55, 70, 0.15)',
32
+ '&.is-hovered': {
33
+ bg: 'accent.99',
34
+ cursor: 'pointer'
35
+ },
36
+ '&.is-focused': _objectSpread({
37
+ bg: 'white'
38
+ }, _Buttons.defaultFocus),
39
+ '&.is-pressed': {
40
+ border: '1px solid',
41
+ borderColor: 'active',
42
+ boxShadow: '0 0 0 0 !important',
43
+ outline: 'none'
44
+ },
45
+ ':focus-visible:not(.is-focused)': {
46
+ outline: 'none',
47
+ border: '1px solid',
48
+ borderColor: 'active'
49
+ }
50
+ });
18
51
  var _default = {
19
- container: container
52
+ container: container,
53
+ interactive: interactive
20
54
  };
21
55
  exports["default"] = _default;
package/lib/components/Card/Card.stories.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import React from 'react';
3
3
  import { withDesign } from 'storybook-addon-designs';
4
4
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
5
- import { Box, Button, Card } from '../../index';
5
+ import { Box, Card } from '../../index';
6
6
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
7
7
  import CardReadme from './Card.mdx';
8
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -86,7 +86,7 @@ export var InteractiveCard = function InteractiveCard() {
86
86
  height: '221px',
87
87
  justifyContent: 'center',
88
88
  textAlign: 'center',
89
- width: '233px'
89
+ maxWidth: '233px'
90
90
  };
91
91
  return ___EmotionJSX(Card, {
92
92
  onPress: function onPress() {
@@ -96,14 +96,9 @@ export var InteractiveCard = function InteractiveCard() {
96
96
  return console.log('card hovered');
97
97
  },
98
98
  tabIndex: "0",
99
+ variant: "cards.interactive",
99
100
  sx: sx
100
- }, "Interactive Card", ___EmotionJSX(Button, {
101
- variant: "inline",
102
- mt: "md",
103
- onPress: function onPress() {
104
- return console.log('button pressed');
105
- }
106
- }, "Explore"));
101
+ }, "Interactive Card");
107
102
  };
108
103
  InteractiveCard.parameters = {
109
104
  design: {
package/lib/components/Card/Card.styles.js CHANGED
@@ -1,3 +1,15 @@
1
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
+ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
+ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
+ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
+ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
+ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ 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; }
11
+ 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; }
12
+ import { defaultFocus } from '../Button/Buttons.styles';
1
13
  var container = {
2
14
  display: 'flex',
3
15
  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
@@ -8,6 +20,28 @@ var container = {
8
20
  flex: '1 1 0',
9
21
  p: 'lg'
10
22
  };
23
+ var interactive = _objectSpread(_objectSpread({}, container), {}, {
24
+ boxShadow: '0px 1px 14px 0px rgba(37, 55, 70, 0.15)',
25
+ '&.is-hovered': {
26
+ bg: 'accent.99',
27
+ cursor: 'pointer'
28
+ },
29
+ '&.is-focused': _objectSpread({
30
+ bg: 'white'
31
+ }, defaultFocus),
32
+ '&.is-pressed': {
33
+ border: '1px solid',
34
+ borderColor: 'active',
35
+ boxShadow: '0 0 0 0 !important',
36
+ outline: 'none'
37
+ },
38
+ ':focus-visible:not(.is-focused)': {
39
+ outline: 'none',
40
+ border: '1px solid',
41
+ borderColor: 'active'
42
+ }
43
+ });
11
44
  export default {
12
- container: container
45
+ container: container,
46
+ interactive: interactive
13
47
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.37.1-alpha.1",
3
+ "version": "2.37.1-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",