@pingux/astro 2.74.0-alpha.1 → 2.74.0-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 (7) hide show
  1. package/lib/cjs/components/Card/Card.stories.d.ts +1 -0
  2. package/lib/cjs/components/Card/Card.stories.js +32 -1
  3. package/lib/cjs/components/Card/Card.styles.d.ts +25 -0
  4. package/lib/cjs/components/Card/Card.styles.js +25 -1
  5. package/lib/components/Card/Card.stories.js +31 -1
  6. package/lib/components/Card/Card.styles.js +25 -1
  7. package/package.json +1 -1
package/lib/cjs/components/Card/Card.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const Default: {
12
12
  };
13
13
  };
14
14
  };
15
+ export declare const HeaderAndFooter: (args: any) => React.JSX.Element;
15
16
  export declare const CardWidth: {
16
17
  (args: any): React.JSX.Element;
17
18
  parameters: {
package/lib/cjs/components/Card/Card.stories.js CHANGED
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = exports.InteractiveCard = exports.Default = exports.CardWidth = exports.CardRow = void 0;
15
+ exports["default"] = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
16
16
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
18
18
  var _react = _interopRequireDefault(require("react"));
@@ -46,6 +46,37 @@ var Default = function Default(args) {
46
46
  return (0, _react2.jsx)(_index.Card, args);
47
47
  };
48
48
  exports.Default = Default;
49
+ var HeaderAndFooter = function HeaderAndFooter(args) {
50
+ var textStyling = {
51
+ fontSize: 'md',
52
+ fontWeight: 600
53
+ };
54
+ return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
55
+ variant: "cards.flat",
56
+ width: "500px"
57
+ }), (0, _react2.jsx)(_index.Box, {
58
+ variant: "cards.header"
59
+ }, (0, _react2.jsx)(_index.Text, {
60
+ sx: textStyling
61
+ }, "Optional Card Header")), (0, _react2.jsx)(_index.Box, {
62
+ variant: "cards.body"
63
+ }, (0, _react2.jsx)(_index.Text, {
64
+ sx: textStyling,
65
+ mb: "md"
66
+ }, "Card Body"), (0, _react2.jsx)(_index.Box, {
67
+ gap: "md"
68
+ }, (0, _react2.jsx)(_index.Button, {
69
+ sx: {
70
+ width: 'fit-content'
71
+ },
72
+ variant: "primary"
73
+ }, "Save"), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."))), (0, _react2.jsx)(_index.Box, {
74
+ variant: "cards.footer"
75
+ }, (0, _react2.jsx)(_index.Text, {
76
+ sx: textStyling
77
+ }, "Optional Card Footer")));
78
+ };
79
+ exports.HeaderAndFooter = HeaderAndFooter;
49
80
  var CardWidth = function CardWidth(args) {
50
81
  return (0, _react2.jsx)(_index.Box, {
51
82
  gap: "40px",
package/lib/cjs/components/Card/Card.styles.d.ts CHANGED
@@ -40,5 +40,30 @@ declare const _default: {
40
40
  flex: string;
41
41
  p: string;
42
42
  };
43
+ header: {
44
+ p: number;
45
+ borderBottom: string;
46
+ borderBottomColor: string;
47
+ };
48
+ footer: {
49
+ borderTop: string;
50
+ borderTopColor: string;
51
+ p: number;
52
+ };
53
+ flat: {
54
+ p: number;
55
+ boxShadow: string;
56
+ border: string;
57
+ borderColor: string;
58
+ borderRadius: string;
59
+ display: string;
60
+ color: string;
61
+ fontSize: string;
62
+ fontWeight: number;
63
+ flex: string;
64
+ };
65
+ body: {
66
+ p: number;
67
+ };
43
68
  };
44
69
  export default _default;
package/lib/cjs/components/Card/Card.styles.js CHANGED
@@ -48,8 +48,32 @@ var interactive = _objectSpread(_objectSpread({}, container), {}, {
48
48
  borderColor: 'active'
49
49
  }
50
50
  });
51
+ var flat = _objectSpread(_objectSpread({}, container), {}, {
52
+ p: 0,
53
+ boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
54
+ border: '1px solid',
55
+ borderColor: 'neutral.90',
56
+ borderRadius: '16px'
57
+ });
58
+ var header = {
59
+ p: 24,
60
+ borderBottom: '1px solid',
61
+ borderBottomColor: 'neutral.90'
62
+ };
63
+ var footer = {
64
+ borderTop: '1px solid',
65
+ borderTopColor: 'neutral.90',
66
+ p: 24
67
+ };
68
+ var body = {
69
+ p: 24
70
+ };
51
71
  var _default = {
52
72
  container: container,
53
- interactive: interactive
73
+ interactive: interactive,
74
+ header: header,
75
+ footer: footer,
76
+ flat: flat,
77
+ body: body
54
78
  };
55
79
  exports["default"] = _default;
package/lib/components/Card/Card.stories.js CHANGED
@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
13
13
  import React from 'react';
14
14
  import { withDesign } from 'storybook-addon-designs';
15
15
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
16
- import { Box, Card } from '../../index';
16
+ import { Box, Button, Card, Text } from '../../index';
17
17
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
18
18
  import CardReadme from './Card.mdx';
19
19
  import { cardArgTypes } from './cardAttributes';
@@ -37,6 +37,36 @@ export default {
37
37
  export var Default = function Default(args) {
38
38
  return ___EmotionJSX(Card, args);
39
39
  };
40
+ export var HeaderAndFooter = function HeaderAndFooter(args) {
41
+ var textStyling = {
42
+ fontSize: 'md',
43
+ fontWeight: 600
44
+ };
45
+ return ___EmotionJSX(Card, _extends({}, args, {
46
+ variant: "cards.flat",
47
+ width: "500px"
48
+ }), ___EmotionJSX(Box, {
49
+ variant: "cards.header"
50
+ }, ___EmotionJSX(Text, {
51
+ sx: textStyling
52
+ }, "Optional Card Header")), ___EmotionJSX(Box, {
53
+ variant: "cards.body"
54
+ }, ___EmotionJSX(Text, {
55
+ sx: textStyling,
56
+ mb: "md"
57
+ }, "Card Body"), ___EmotionJSX(Box, {
58
+ gap: "md"
59
+ }, ___EmotionJSX(Button, {
60
+ sx: {
61
+ width: 'fit-content'
62
+ },
63
+ variant: "primary"
64
+ }, "Save"), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."))), ___EmotionJSX(Box, {
65
+ variant: "cards.footer"
66
+ }, ___EmotionJSX(Text, {
67
+ sx: textStyling
68
+ }, "Optional Card Footer")));
69
+ };
40
70
  export var CardWidth = function CardWidth(args) {
41
71
  return ___EmotionJSX(Box, {
42
72
  gap: "40px",
package/lib/components/Card/Card.styles.js CHANGED
@@ -41,7 +41,31 @@ var interactive = _objectSpread(_objectSpread({}, container), {}, {
41
41
  borderColor: 'active'
42
42
  }
43
43
  });
44
+ var flat = _objectSpread(_objectSpread({}, container), {}, {
45
+ p: 0,
46
+ boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
47
+ border: '1px solid',
48
+ borderColor: 'neutral.90',
49
+ borderRadius: '16px'
50
+ });
51
+ var header = {
52
+ p: 24,
53
+ borderBottom: '1px solid',
54
+ borderBottomColor: 'neutral.90'
55
+ };
56
+ var footer = {
57
+ borderTop: '1px solid',
58
+ borderTopColor: 'neutral.90',
59
+ p: 24
60
+ };
61
+ var body = {
62
+ p: 24
63
+ };
44
64
  export default {
45
65
  container: container,
46
- interactive: interactive
66
+ interactive: interactive,
67
+ header: header,
68
+ footer: footer,
69
+ flat: flat,
70
+ body: body
47
71
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.74.0-alpha.1",
3
+ "version": "2.74.0-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",